<template>
  <div
    id="review_Email"
    v-loading="pictLoading"
    class="view"
    :element-loading-background="'rgba(43, 48, 67, 0.65)'"
    :element-loading-spinner="'el-icon-loading'"
  >
    <div class="crm_search">
      <el-form ref="formRef" :model="search" label-width="">
        <el-row>
          <el-col :span="24" :md="24" :lg="24">
            <el-form-item style="margin-right: 10px">
              <el-select
                v-model="search.type"
                class="crm-border-radius-no"
                clearable
                :placeholder="t('Ucard.Transactions.s3')"
                @change="toSearch"
              >
                <el-option
                  v-for="option in typeOptions"
                  :key="option.value"
                  :label="t(option.label)"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="search.status"
                class="crm-border-radius-no"
                clearable
                :placeholder="t('Ucard.Transactions.s5')"
                @change="toSearch"
              >
                <el-option
                  v-for="option in statusOptions"
                  :key="option.value"
                  :label="t(option.label)"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                class="crm-border-radius-no crm-border-left-no"
                :icon="Search"
                @click="toSearch"
              ></el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button
            v-if="display['R-Transactions-Export']?.show"
            type="primary"
            style="margin-left: 8px"
            @click="exportAgents"
          >
            {{ t('Btn.Export') }}
          </el-button>
        </el-form-item>
      </el-form>

      <div class="card-mock-demo" style="margin: 30px 0">
        <el-table :data="mock_tableData" stripe style="margin-top: 20px; width: 100%">
          <el-table-column prop="" align="left" :label="t('Label.CidAccount')">
            <template #default="{ row }">
              <span>{{ row.cId || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" align="left" :label="t('Label.Name')">
            <template #default="{ row }">
              <span v-if="row.firstName">{{ row.firstName + ' ' }}</span>
              <span v-if="row.middle">{{ row.middle + ' ' }}</span>
              <span v-if="row.lastName">{{ row.lastName }}</span>
              <span v-if="!row.firstName && !row.lastName && !row.middle">
                {{ '--' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="" align="left" :label="t('Label.Email')">
            <template #default="{ row }">
              {{ row.email || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="mobile" align="left" :label="t('Ucard.KycAuth.item2')">
            <template #default="{ row }"> {{ row.areaCode }} {{ row.mobile }} </template>
          </el-table-column>
          <el-table-column prop="cardNumber" align="left" :label="t('Ucard.Transactions.item2')" />
          <el-table-column prop="currency" align="left" :label="t('Ucard.Transactions.item3')" />
          <el-table-column prop="amount" align="left" :label="t('Ucard.Transactions.item4')" />
          <el-table-column prop="fee" align="left" :label="t('Ucard.Transactions.item5')" />
          <el-table-column prop="tradeNo" align="left" :label="t('Ucard.Transactions.item8')" />
          <el-table-column prop="type" align="left" :label="t('Ucard.Transactions.item9')">
            <template #default="{ row }">
              <span v-if="row.type === 'auth'">
                {{ t('Ucard.Transactions.t1') }}
              </span>
              <span v-else-if="row.type === 'refund'">
                {{ t('Ucard.Transactions.t2') }}
              </span>
              <span v-else-if="row.type === 'verification'">
                {{ t('Ucard.Transactions.t3') }}
              </span>
              <span v-else-if="row.type === 'Void'">
                {{ t('Ucard.Transactions.t4') }}
              </span>
              <span v-else-if="row.type === 'withdraw'">
                {{ t('R-VirtualCard-Btn11') }}
              </span>
              <span v-else-if="row.type === 'maintain_fee'">
                {{ t('Ucard.Transactions.t5') }}
              </span>
              <span v-else>{{ row.type || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" align="left" :label="t('Ucard.Transactions.item11')">
            <template #default="{ row }">
              <span
                v-if="row.status === 'succeed' || row.status === 'success'"
                class="state crm_state_blue"
              >
                {{ t('Ucard.Transactions.t18') }}
              </span>
              <span
                v-else-if="row.status === 'failed' || row.status === 'fail'"
                class="state crm_state_gray"
              >
                {{ t('Ucard.Transactions.t25') }}
              </span>
              <span v-else-if="row.status === 'processing'" class="state crm_state_orange">
                {{ t('card.Status.t3') }}
              </span>
              <span v-else-if="row.status === 'wait_process'" class="state crm_state_yellow">
                {{ t('card.Status.t5') }}
              </span>
              <span v-else-if="row.status === 'authorized'" class="state crm_state_green">
                {{ t('Ucard.Transactions.t24') }}
              </span>
              <span v-else class="state crm_state_green">
                {{ row.status || '--' }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-if="pagerInfo.rowTotal" class="crm_pagination">
      <div class="crm_page_total">
        <span>{{ t('Page.total.item1') }}</span>
        <span>{{ pagerInfo.rowTotal }}</span>
        <span>{{ t('Page.total.item2') }}</span>
      </div>
      <el-pagination
        v-model:current-page="pagerInfo.current"
        class="page"
        background
        layout="sizes, prev, pager, next"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagerInfo.row"
        :total="pagerInfo.rowTotal"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive, computed, onMounted, inject } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import Service from '@/service/ucard'
  import Config from '@/config/index'
  import { exportExcel } from '@/utils/export'
  import { Search } from '@element-plus/icons-vue'
  import { statusOptions, typeOptions } from '@/views/card/components/CardDetailTransactions/const'

  const { t } = useI18n()
  const { Code } = Config
  const router = useRouter()
  const Session = inject('session')
  const pigeon = inject('pigeon')

  // props
  const props = defineProps({
    cardNumber: {
      type: String,
      default: '',
    },
  })

  // 响应式数据
  const pictLoading = ref(false)
  const mock_tableData = ref([])
  const formRef = ref(null)

  const search = reactive({
    tag: 1,
    mobile: '',
    cId: '',
    email: '',
    cardNumber: '',
    currency: '',
    type: '',
    dataType: '',
    status: '',
  })

  const pagerInfo = reactive({
    row: 10,
    current: 1,
    pageTotal: 0,
    rowTotal: 0,
  })

  // 计算属性
  const display = computed(() => {
    return JSON.parse(Session.Get('display', true))
  })

  // 方法
  // 导出
  const exportAgents = async () => {
    try {
      await exportExcel(
        pigeon,
        '/wasabi/card/transac/record/export',
        { ...search, cardNumber: props.cardNumber },
        'Bank_Card_Transactions'
      )
    } catch (error) {
      ElMessage.error(t('Msg.ExportFail'))
    }
  }

  const toSearch = () => {
    pagerInfo.current = 1
    searchFunc()
  }

  // 列表
  const searchFunc = async () => {
    pictLoading.value = true
    if (!display.value['R-Transactions-Search']?.show) {
      ElMessage.warning(t('Msg.NotDisplay'))
      pictLoading.value = false
      return
    }

    const res = await Service.transactionsList({
      ...search,
      cardNumber: props.cardNumber,
      page: {
        current: pagerInfo.current,
        row: pagerInfo.row,
      },
    })

    if (res.code == Code.StatusOK) {
      mock_tableData.value = res.data
      if (res.page != null) {
        pagerInfo.rowTotal = res.page.rowTotal
        pagerInfo.pageTotal = res.page.pageTotal
      } else {
        pagerInfo.rowTotal = 0
      }

      ElMessage.success(t('Msg.SearchSuccess'))
    } else {
      ElMessage.error(res.msg)
    }
    pictLoading.value = false
  }

  const handleSizeChange = (val) => {
    pagerInfo.row = val
    searchFunc()
  }

  const handleCurrentChange = (val) => {
    pagerInfo.current = val
    searchFunc()
  }

  // 生命周期
  onMounted(() => {
    searchFunc()
  })
</script>

<style scoped lang="scss">
  #review_Email {
    .crm_search {
      .search_action_btn {
        .delete {
          background-color: #a1a1a1;
        }

        .delete.active {
          background-color: #368fec;
        }
      }
    }

    .el-table .state {
      display: inline-block;
      min-width: 80px;
      max-width: 150px;
      box-sizing: border-box;
      line-height: 1.5;
      border-radius: 2px;
      padding: 2px 10px;
      color: #ffffff;
    }
  }
</style>
<style lang="scss">
  #review_Email {
    .dialog_header_w {
      .crm_search_down {
        width: 400px;
      }
    }
  }
</style>
