ucard-back-front/src/views/card/VirtualCard/index.vue

<template>
  <div
    id="review_Email"
    v-loading="pictLoading"
    class="view"
    :element-loading-background="loadingBackground"
  >
    <div class="crm_search">
      <el-form ref="formRef" label-position="" :model="search" label-width="">
        <el-row>
          <el-col :span="24" :md="24" :lg="24">
            <el-form-item>
              <el-select
                v-model="search.tag"
                class="crm_search_down crm-border-radius-no"
                :placeholder="$t('Placeholder.Choose')"
              >
                <el-option :label="$t('Label.CidAccount')" :value="1"></el-option>
                <el-option :label="$t('Ucard.KycAuth.item2')" :value="2"></el-option>
                <el-option :label="$t('Ucard.KycAuth.item3')" :value="3"></el-option>
                <el-option :label="$t('Ucard.VirtualCard.s1')" :value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="margin-right: 10px">
              <el-input
                v-if="search.tag == 1"
                v-model.trim="search.cId"
                class="crm-border-left-no crm-border-radius-no"
                clearable
                :placeholder="$t('Placeholder.Input')"
                @keyup.enter="toSearch"
              ></el-input>
              <el-input
                v-if="search.tag == 2"
                v-model.trim="search.mobile"
                class="crm-border-left-no crm-border-radius-no"
                clearable
                :placeholder="$t('Placeholder.Input')"
                @keyup.enter="toSearch"
              ></el-input>
              <el-input
                v-if="search.tag == 3"
                v-model.trim="search.email"
                class="crm-border-left-no crm-border-radius-no"
                clearable
                :placeholder="$t('Placeholder.Input')"
                @keyup.enter="toSearch"
              ></el-input>
              <el-input
                v-if="search.tag == 4"
                v-model.trim="search.cardNumber"
                class="crm-border-left-no crm-border-radius-no"
                clearable
                :placeholder="$t('Placeholder.Input')"
                @keyup.enter="toSearch"
              ></el-input>
            </el-form-item>
            <el-form-item style="margin-right: 10px">
              <el-select
                v-model="search.status"
                class="crm-border-radius-no"
                clearable
                :placeholder="$t('Ucard.VirtualCard.s2')"
                @change="toSearch"
              >
                <el-option :label="$t('Ucard.VirtualCard.t9')" value="unactivate"></el-option>
                <el-option :label="$t('Ucard.VirtualCard.t11')" value="wait_process"></el-option>
                <el-option :label="$t('Ucard.VirtualCard.t5')" value="processing"></el-option>
                <el-option :label="$t('Ucard.VirtualCard.t6')" value="success"></el-option>
                <el-option :label="$t('Ucard.VirtualCard.t10')" value="fail"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="margin-right: 10px">
              <el-select
                v-model="search.freezeStatus"
                class="crm-border-radius-no"
                clearable
                :placeholder="$t('Ucard.VirtualCard.item6')"
                @change="toSearch"
              >
                <el-option :label="$t('Ucard.VirtualCard.t7')" :value="1"></el-option>
                <el-option :label="$t('card.Btn.b22')" :value="2"></el-option>
                <el-option :label="$t('Ucard.VirtualCard.t8')" :value="3"></el-option>
                <el-option :label="$t('card.Btn.b20')" :value="4"></el-option>
                <el-option :label="$t('card.Btn.b21')" :value="5"></el-option>
                <el-option :label="$t('card.Btn.b19')" :value="6"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="margin-right: 10px">
              <el-select
                v-model="search.blockedStatus"
                class="crm-border-radius-no"
                clearable
                :placeholder="$t('card.Btn.b24')"
                @change="toSearch"
              >
                <el-option :label="$t('Ucard.VirtualCard.t7')" :value="1"></el-option>
                <el-option :label="$t('card.Btn.b18')" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="search.cancelStatus"
                class="crm-border-radius-no"
                clearable
                :placeholder="$t('card.Btn.b23')"
                @change="toSearch"
              >
                <el-option
                  v-for="(value, key) in cancelStatus"
                  :key="key"
                  :label="$t(value)"
                  :value="key"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button class="crm-border-radius-no crm-border-left-no" @click="toSearch">
                <el-icon><Search /></el-icon>
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button
            v-if="display['R-VirtualCard-Export'] && display['R-VirtualCard-Export'].show"
            type="primary"
            style="margin-left: 8px"
            @click="setExport"
            >{{ $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="scope">
              <span
                v-if="scope.row.cId && display['R-VirtualCard-Btn1'].show"
                class="crm-text-underline"
                @click="accountOpen(scope.row.cId)"
                >{{ scope.row.cId || '--' }}</span
              >
              <span v-else>{{ scope.row.cId || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" align="left" :label="$t('Label.Name')">
            <template #default="scope">
              <span v-if="scope.row.firstName">{{ scope.row.firstName + ' ' }}</span>
              <span v-if="scope.row.middle">{{ scope.row.middle + ' ' }}</span>
              <span v-if="scope.row.lastName">{{ scope.row.lastName }}</span>
              <span v-if="!scope.row.firstName && !scope.row.lastName && !scope.row.middle"
                >--</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="" align="left" :label="$t('Label.Email')">
            <template #default="scope">
              {{ scope.row.email || '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="mobile" align="left" :label="$t('Ucard.KycAuth.item2')">
            <template #default="scope"> {{ scope.row.areaCode }} {{ scope.row.mobile }} </template>
          </el-table-column>
          <el-table-column prop="cardNumber" align="left" :label="$t('Ucard.VirtualCard.item2')">
            <template #default="scope">
              <span
                v-if="scope.row.cardNumber"
                class="crm-text-underline"
                @click="cardOpen(scope.row.cardNumber)"
                >{{ scope.row.cardNumber || '--' }}</span
              >
              <span v-else>{{ scope.row.cardNumber || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="expireDate" align="left" :label="$t('Ucard.VirtualCard.item3')" />
          <el-table-column prop="cvv" align="left" :label="$t('Ucard.VirtualCard.item4')">
            <template #default="scope">
              <span v-if="scope.row.expireDate" class="cvv" @click="getQueryCvv(scope.row.id)"
                >*** <el-icon><View /></el-icon
              ></span>
            </template>
          </el-table-column>

          <el-table-column prop="type" align="left" :label="$t('Ucard.KycAuth.item1')" />
          <el-table-column prop="status" align="left" :label="$t('Ucard.VirtualCard.item5')">
            <template #default="scope">
              <span v-if="scope.row.status === 'unactivate'" class="state crm_state_yellow">{{
                $t('Ucard.VirtualCard.t9')
              }}</span>
              <span v-else-if="scope.row.status === 'success'" class="state crm_state_blue">{{
                $t('Ucard.VirtualCard.t6')
              }}</span>
              <span v-else-if="scope.row.status === 'fail'" class="state crm_state_gray">{{
                $t('Ucard.VirtualCard.t10')
              }}</span>
              <span
                v-else-if="scope.row.status === 'wait_process'"
                class="state crm_state_yellow"
                >{{ $t('Ucard.VirtualCard.t11') }}</span
              >
              <span v-else class="state crm_state_orange">{{ $t('Ucard.VirtualCard.t5') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="freezeStatus" align="left" :label="$t('Ucard.VirtualCard.item6')">
            <template #default="scope">
              <template v-if="scope.row.freezeType == 1">
                <span v-if="scope.row.freezeStatus == 'success'" class="state crm_state_blue">{{
                  $t('Ucard.VirtualCard.t7')
                }}</span>
                <span v-else-if="scope.row.freezeStatus == 'fail'" class="state crm_state_gray">{{
                  $t('card.Btn.b19')
                }}</span>
                <span v-else class="state crm_state_orange">{{ $t('card.Btn.b21') }}</span>
              </template>
              <template v-else>
                <span v-if="scope.row.freezeStatus == 'success'" class="state crm_state_red">{{
                  $t('Ucard.VirtualCard.t8')
                }}</span>
                <span v-else-if="scope.row.freezeStatus == 'fail'" class="state crm_state_gray">{{
                  $t('card.Btn.b20')
                }}</span>
                <span v-else class="state crm_state_orange">{{ $t('card.Btn.b22') }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="blocked" align="left" :label="$t('card.Btn.b24')">
            <template #default="scope">
              <span v-if="!scope.row.blocked" class="state crm_state_blue">{{
                $t('Ucard.VirtualCard.t7')
              }}</span>
              <span v-else class="state crm_state_red">{{ $t('card.Btn.b18') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="cancelStatus" align="left" :label="$t('card.Btn.b23')">
            <template #default="scope">
              <span v-if="scope.row.cancelStatus == null" class="state crm_state_blue">
                {{ $t('Ucard.VirtualCard.t7') }}
              </span>
              <span v-else :class="`state ${getStatusColor(scope.row.cancelStatus)}`">
                {{ $t(cancelStatus[scope.row.cancelStatus]) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="" align="center" :label="$t('Label.Action')">
            <template #default="scope">
              <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link crm-cursor">
                  <i style="font-weight: bold; font-size: 20px" class="iconfont iconcaidan"></i>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      v-if="display['R-VirtualCard-Btn1'].show"
                      :command="{ type: 0, row: scope.row }"
                    >
                      <el-icon><Operation /></el-icon>
                      <span>{{ $t('R-VirtualCard-Btn1') }}</span>
                    </el-dropdown-item>
                    <template v-if="scope.row.cancelStatus != 'success'">
                      <el-dropdown-item
                        v-if="
                          display['R-VirtualCard-Btn3'].show &&
                          scope.row.type == 'Physical' &&
                          (scope.row.status === 'unactivate' || scope.row.status === 'fail')
                        "
                        :command="{ type: 9, row: scope.row }"
                      >
                        <el-icon><Operation /></el-icon>
                        <span>{{ $t('R-VirtualCard-Btn3') }}</span>
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="
                          display['R-VirtualCard-Btn10'].show && scope.row.status == 'processing'
                        "
                        :command="{ type: 11, row: scope.row }"
                      >
                        <el-icon><Operation /></el-icon>
                        <span>{{ $t('R-VirtualCard-Btn10') }}</span>
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="
                          display['R-VirtualCard-Btn8'].show &&
                          (scope.row.status == 'unactivate' || scope.row.status == 'fail')
                        "
                        :command="{ type: 1, row: scope.row }"
                      >
                        <el-icon><Operation /></el-icon>
                        <span>{{ $t('R-VirtualCard-Btn8') }}</span>
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="display['R-VirtualCard-Btn9'].show"
                        :command="{ type: 10, row: scope.row }"
                      >
                        <el-icon><Refresh /></el-icon>
                        <span>{{ $t('R-VirtualCard-Btn9') }}</span>
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="display['R-VirtualCard-Btn2'].show"
                        :command="{ type: 2, row: scope.row }"
                      >
                        <el-icon><Operation /></el-icon>
                        <span>{{ $t('R-VirtualCard-Btn2') }}</span>
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="display['R-VirtualCard-Btn11'].show"
                        :command="{ type: 13, row: scope.row }"
                      >
                        <el-icon><Operation /></el-icon>
                        <span>{{ $t('R-VirtualCard-Btn11') }}</span>
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="display['R-VirtualCard-Btn4'].show"
                        :command="{ type: 5, row: scope.row }"
                      >
                        <el-icon><Refresh /></el-icon>
                        <span>{{ $t('R-VirtualCard-Btn4') }}</span>
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="display['R-VirtualCard-Btn5'].show"
                        :command="{ type: 6, row: scope.row }"
                      >
                        <el-icon><Operation /></el-icon>
                        <span>{{ $t('R-VirtualCard-Btn5') }}</span>
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="display['R-VirtualCard-Btn6'].show"
                        :command="{ type: 7, row: scope.row }"
                      >
                        <el-icon><Operation /></el-icon>
                        <span>{{ $t('R-VirtualCard-Btn6') }}</span>
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="display['R-VirtualCard-Btn7'].show"
                        :command="{ type: 8, row: scope.row }"
                      >
                        <el-icon><CircleCheck /></el-icon>
                        <span>{{ $t('R-VirtualCard-Btn7') }}</span>
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="
                          display['R-VirtualCard-Btn12'].show &&
                          ['success', 'processing'].includes(scope.row.cancelStatus)
                        "
                        :command="{ type: 14, row: scope.row }"
                      >
                        <el-icon><Delete /></el-icon>
                        <span>
                          {{ $t('R-VirtualCard-Btn12') }}
                        </span>
                      </el-dropdown-item>
                    </template>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </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
        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>
    <trading-info-add
      :dialog-info-trading-add="dialogInfoTradingAdd"
      :editor="editor"
      :add-type="addType"
      :my-info="myInfo"
      :form-list="formList"
      @confirm-to-reload="confirmToReload"
      @close-add="closeAdd"
    ></trading-info-add>
    <div v-if="dialogInfoTradingAdd" class="crm_verified_info_mask" @click="closeDiaAdd"></div>
    <detailed-info-cid
      :dialog-info-cid="dialogInfoCid"
      :form-info="formInfo"
      :is-trading="true"
      @close="close"
    >
    </detailed-info-cid>
    <div v-if="dialogInfoCid" class="crm_verified_info_mask" @click="closeDia"></div>
    <el-dialog
      v-model="dialogCheck"
      :title="$t('Ucard.VirtualCard.d5')"
      center
      class="dialog_header_w"
    >
      <div class="dia-content">
        <el-table :data="formList.data" style="width: 100%">
          <el-table-column prop="currency" :label="$t('Ucard.VirtualCard.item9')">
          </el-table-column>
          <el-table-column prop="amount" :label="$t('Ucard.VirtualCard.item10')"> </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">{{ $t('Btn.Cancel') }}</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogCheckCvv" title="CVV" center class="dialog_header_w">
      <div class="dia-content">
        <el-form
          :rules="rules"
          :model="cvvForm"
          label-width="130px"
          label-position="right"
          class="business-edit-form"
        >
          <el-form-item prop="gaCode" :label="$t('getCode.R-GoogleSecretKey')">
            <el-input v-model="cvvForm.gaCode" :placeholder="$t('Placeholder.Input')"></el-input>
          </el-form-item>
          <el-form-item v-if="cvvForm.cvv" prop="cvv" label="CVV">
            <el-input v-model="cvvForm.cvv" :placeholder="$t('Placeholder.Input')"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel1">{{ $t('Btn.Cancel') }}</el-button>
          <el-button v-if="!cvvForm.cvv" type="primary" @click="queryCvv()">{{
            $t('Btn.Confirm')
          }}</el-button>
          <el-button v-if="cvvForm.cvv" type="primary" @click="copy()">{{
            $t('Label.Copy')
          }}</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="dialogCheckExport"
      :title="$t('getCode.R-GoogleSecretKey')"
      center
      class="dialog_header_w"
    >
      <div class="dia-content">
        <el-form
          :rules="rules"
          :model="cvvForm"
          label-width="130px"
          label-position="right"
          class="business-edit-form"
        >
          <el-form-item prop="gaCode" :label="$t('getCode.R-GoogleSecretKey')">
            <el-input v-model="cvvForm.gaCode" :placeholder="$t('Placeholder.Input')"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel1">{{ $t('Btn.Cancel') }}</el-button>
          <el-button type="primary" @click="exportAgents()">{{ $t('Btn.Confirm') }}</el-button>
        </div>
      </template>
    </el-dialog>
    <ViewCardSingle
      :dialog-info-trading-single="dialogInfoTradingSingle"
      :form-list="formSingle"
      :editor-type="editorType"
      @close-single="closeSingle"
    >
    </ViewCardSingle>
    <div v-if="dialogInfoTradingSingle" class="crm_verified_info_mask" @click="closeSingle"></div>
  </div>
</template>

<script setup>
  import { ref, reactive, computed, onMounted, watch, inject } from 'vue'
  import { useRouter } from 'vue-router'
  import Service from '@/service/ucard'
  import TradingInfoAdd from '@/views/components/VirtualCard'
  import Config from '@/config/index'
  import Service1 from '@/service/customer'
  import DetailedInfoCid from '@/views/components/DetailedInfoCid'
  import ViewCardSingle from '@/views/components/ViewCardSingle'
  import { exportExcel } from '@/utils/export'
  import { CircleCheck, Delete, Operation, Refresh, Search } from '@element-plus/icons-vue'
  import { useI18n } from 'vue-i18n'
  import { copyText } from '@/utils/untils'
  import { cancelStatus } from '@/views/card/VirtualCard/const'
  import { getStatusColor } from '@/utils/getStatusColor'

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

  // 响应式数据
  const pictLoading = ref(false)
  const dialogInfoTradingAdd = ref(false)
  const dialogInfoTradingSingle = ref(false)
  const formSingle = ref({})
  const editorType = ref(5)
  const dialogCheck = ref(false)
  const dialogCheckCvv = ref(false)
  const dialogCheckExport = ref(false)
  const formRef = ref(null)

  const search = reactive({
    tag: 1,
    cardNumber: '',
    email: '',
    mobile: '',
    cId: '',
    status: '',
    freezeStatus: '',
    blockedStatus: '',
    cancelStatus: '',
  })

  const editor = ref('')
  const addType = ref('')
  const myInfo = ref({})
  const formList = ref({})
  const mock_tableData = ref([])
  const pagerInfo = reactive({ row: 10, current: 1, pageTotal: 0, rowTotal: 0 })
  const dialogInfoCid = ref(false)
  const formInfo = ref({})

  const cvvForm = reactive({
    gaCode: undefined,
    cvv: undefined,
    id: undefined,
  })

  const rules = reactive({
    gaCode: [
      {
        required: true,
        message: t('vaildate.input.empty'),
        trigger: 'blur',
      },
    ],
  })

  const loadingBackground = 'rgba(43, 48, 67, 0.65)'

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

  const user = computed(() => {
    return JSON.parse(Session.Get('user', true))
  })

  // 方法
  const setExport = () => {
    cvvForm.gaCode = undefined
    dialogCheckExport.value = true
  }

  const exportAgents = async () => {
    exportExcel(pigeon, '/wasabi/card/list/export', { ...search }, 'Bank_Cards_List')
  }

  const accountOpen = (cId) => {
    router.push({ name: 'R-CustomerDetail', params: { cId: cId } })
  }

  const cardOpen = (cardNumber) => {
    router.push({
      name: 'R-CardDetail',
      params: { cardNumber: cardNumber },
    })
  }

  const searchSingleCid = async (cId) => {
    let res = await Service1.cidRealSingle({
      id: cId,
    })
    if (res.code == Code.StatusOK) {
      if (editor.value) {
        formList.value = res.data
        // dialogInfoAdd.value = true
      } else {
        formInfo.value = res.data
        searchRealAll(cId)
      }
    } else {
      pigeon.MessageError(res.msg)
    }
  }

  const tableRowClassName = ({ row }) => {
    if (row.cardStatus === 'cancel' || row.blocked) {
      return 'row-cancel'
    }
    return ''
  }

  const searchRealAll = async (cId) => {
    let res = await Service1.realCustomerListAll({
      cId: cId,
      page: {
        current: 1,
        row: 1,
      },
    })
    if (res.code == Code.StatusOK) {
      formInfo.value.realList = res.data
      dialogInfoCid.value = true
    } else {
      pigeon.MessageError(res.msg)
    }
  }

  const closeDia = () => {
    dialogInfoCid.value = false
  }

  const close = (val) => {
    dialogInfoCid.value = val
  }

  const cancel = () => {
    dialogCheck.value = false
  }

  const cancel1 = () => {
    dialogCheckCvv.value = false
    dialogCheckExport.value = false
  }

  const closeSingle = () => {
    dialogInfoTradingSingle.value = false
  }
  const cancelCard = async (row) => {
    console.log(row)
    const res = await Service.cancelCard({ cardNo: row.cardNo, cId: user.value.cId })
    if (res.code == Code.StatusOK) {
      pigeon.MessageOK(t('Msg.Success19'))
      searchFunc()
    } else {
      pigeon.MessageError(res.msg)
    }
  }

  const handleCommand = (command) => {
    if (
      command.row.status == 'unactivate' &&
      command.type != 1 &&
      command.type != 9 &&
      command.type != 0
    ) {
      pigeon.MessageOK(t('card.Info.t25'))
      return
    }
    if (command.type != 0 && command.row.cancelStatus == 'success') {
      pigeon.MessageOK(t('card.New2.p5'))
      return
    }
    if (command.type != 0 && command.row.blocked) {
      pigeon.MessageOK(t('card.New2.p6'))
      return
    }
    switch (command.type) {
      case 0:
        dialogInfoTradingSingle.value = true
        formSingle.value = command.row
        break
      case 1:
        if (command.row.status != 1) {
          addType.value = 1
          dialogInfoTradingAdd.value = true
          formList.value = command.row
        }
        break
      case 2:
        addType.value = 2
        dialogInfoTradingAdd.value = true
        formList.value = command.row
        break
      case 3:
        addType.value = 3
        dialogInfoTradingAdd.value = true
        formList.value = command.row
        break
      case 5:
        ucardBalance(command.row)
        break
      case 6:
        addType.value = 6
        dialogInfoTradingAdd.value = true
        formList.value = command.row
        break
      case 7:
        addType.value = 7
        dialogInfoTradingAdd.value = true
        formList.value = { ...command.row, clientRemark: '' }
        break
      case 8:
        addType.value = 8
        dialogInfoTradingAdd.value = true
        formList.value = { ...command.row, clientRemark: '' }
        break
      case 9:
        addType.value = 9
        dialogInfoTradingAdd.value = true
        formList.value = command.row
        break
      case 10:
        getCardInfo(command.row)
        break
      case 11:
        rechargeUpdate(command.row)
        break
      case 13:
        addType.value = 13
        dialogInfoTradingAdd.value = true
        formList.value = command.row
        break
      case 14:
        cancelCard(command.row)
        break
    }
  }

  const closeAdd = () => {
    formList.value = {}
    dialogInfoTradingAdd.value = false
  }

  const closeDiaAdd = () => {
    formList.value = {}
    dialogInfoTradingAdd.value = false
  }

  const confirmToReload = () => {
    closeDiaAdd()
    searchFunc()
  }

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

  const ucardBalance = async ({ uniqueId, cardNo }) => {
    let res = await Service.ucardBalance({ uniqueId, cardNo })
    if (res.code == Code.StatusOK) {
      pigeon.MessageOK(t('Msg.SearchSuccess'))
      formList.value.data = [res.data]
      addType.value = 5
      dialogCheck.value = true
    } else {
      pigeon.MessageError(res.msg)
    }
  }

  const getCardInfo = async ({ id }) => {
    let res = await Service.getCardInfo({ id })
    if (res.code == Code.StatusOK) {
      toSearch()
    } else {
      pigeon.MessageError(res.msg)
    }
  }

  const getQueryCvv = (id) => {
    dialogCheckCvv.value = true
    Object.assign(cvvForm, {
      gaCode: undefined,
      cvv: undefined,
      id,
    })
  }

  const queryCvv = async () => {
    let res = await Service.queryCvv({ ...cvvForm })
    if (res.code == Code.StatusOK) {
      cvvForm.cvv = res.data
    } else {
      pigeon.MessageError(res.msg)
    }
  }

  const copy = () => {
    try {
      copyText(cvvForm.cvv)
      pigeon.MessageOK(t('Msg.Success15'))
    } catch (err) {
      pigeon.MessageError(t('Msg.Success16'))
    }
  }

  const rechargeUpdate = async ({ id }) => {
    let res = await Service.rechargeUpdate({ id })
    if (res.code == Code.StatusOK) {
      toSearch()
    } else {
      pigeon.MessageError(res.msg)
    }
  }

  const searchFunc = async () => {
    pictLoading.value = true
    if (!display.value['R-VirtualCard-Search'].show) {
      pigeon.MessageWarning(t('Msg.NotDisplay'))
      pictLoading.value = false
      return
    }
    let res = await Service.cardList({
      ...search,
      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
      }
      pigeon.MessageOK(t('Msg.SearchSuccess'))
    } else {
      pigeon.MessageError(res.msg)
    }
    pictLoading.value = false
  }

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

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

  // 监听器
  watch(
    () => search.tag,
    () => {
      search.cardNumber = ''
      search.status = ''
      search.mobile = ''
      search.email = ''
      search.cId = ''
    }
  )

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

<style scoped lang="scss">
  @import 'index.scss';
</style>
<style lang="scss">
  #review_Email {
    .dialog_header_w {
      .crm_search_down {
        width: 400px;
      }
    }
    .row-cancel {
      /* background-color: #e20101 !important; */
      color: #e20101 !important;
      .el-dropdown {
        color: #e20101;
      }
    }
    .cvv {
      cursor: pointer;
    }
    /* .row-cancel:hover > td {
      background-color: #e20101 !important;
    } */
  }
</style>