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

<template>
  <div
    id="review_Email"
    v-loading="pictLoading"
    class="view"
    element-loading-background="rgba(43, 48, 67, 0.65)"
  >
    <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-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-select
                v-if="search.tag == 4"
                v-model="search.type"
                class="crm-border-left-no crm-border-radius-no"
                clearable
                :placeholder="$t('Placeholder.Choose')"
                @change="toSearch"
              >
                <el-option :label="$t('Ucard.KycAuth.t1')" :value="0"></el-option>
                <el-option :label="$t('Ucard.KycAuth.t2')" :value="1"></el-option>
                <el-option :label="$t('Ucard.KycAuth.t3')" :value="2"></el-option>
                <el-option :label="$t('Ucard.KycAuth.t4')" :value="3"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item style="margin-right: 10px">
              <el-select
                v-model="search.kycStatus"
                class="crm-border-radius-no"
                clearable
                :placeholder="$t('card.Info.s42')"
                @change="toSearch"
              >
                <el-option :label="$t('card.Info.t10')" :value="1"></el-option>
                <el-option :label="$t('Ucard.KycAuth.t7')" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="margin-right: 10px">
              <el-select
                v-model="search.photoStatus"
                class="crm-border-radius-no"
                clearable
                :placeholder="$t('card.New1.f4')"
                @change="toSearch"
              >
                <el-option :label="$t('Yes')" :value="1"></el-option>
                <el-option :label="$t('No')" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="search.status"
                class="crm-border-radius-no"
                clearable
                :placeholder="$t('Ucard.KycAuth.s2')"
                @change="toSearch"
              >
                <el-option :label="$t('Ucard.KycAuth.t6')" :value="1"></el-option>
                <el-option :label="$t('Ucard.KycAuth.t7')" :value="2"></el-option>
                <el-option :label="$t('Ucard.KycAuth.t8')" :value="3"></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-KycAuth-Export'] && display['R-KycAuth-Export']?.show"
            type="primary"
            style="margin-left: 8px"
            @click="exportAgents"
          >
            <span>{{ $t('Btn.Export') }}</span>
          </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-KycAuth-Single']?.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.lastName">{{ scope.row.lastName }}</span>
              <span v-if="!scope.row.firstName && !scope.row.lastName">{{ '--' }}</span>
            </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="email" align="left" :label="$t('Ucard.KycAuth.item3')" />
          <el-table-column prop="kycStatus" align="left" :label="$t('card.Info.s42')">
            <template #default="scope">
              <span v-if="scope.row.kycStatus === 2" class="state crm_state_blue">{{
                $t('Ucard.KycAuth.t7')
              }}</span>
              <span v-else-if="scope.row.kycStatus === 3" class="state crm_state_gray">{{
                $t('Ucard.KycAuth.t8')
              }}</span>
              <span v-else class="state crm_state_yellow">{{ $t('card.Info.t10') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="balance" :label="$t('card.New1.f4')">
            <template #default="scope">
              <span v-if="scope.row.photoStatus == '1'" class="state crm_state_blue">{{
                $t('State.Yes')
              }}</span>
              <span v-if="scope.row.photoStatus != '1'" class="state crm_state_red">{{
                $t('State.No')
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" align="left" :label="$t('Ucard.KycAuth.item6')">
            <template #default="scope">
              <span v-if="scope.row.status === -1" class="state crm_state_yellow">{{
                $t('Ucard.KycAuth.t5')
              }}</span>
              <span v-if="scope.row.status === 1" class="state crm_state_orange">{{
                $t('Ucard.KycAuth.t6')
              }}</span>
              <span v-if="scope.row.status === 2" class="state crm_state_blue">{{
                $t('Ucard.KycAuth.t7')
              }}</span>
              <span v-if="scope.row.status === 3" class="state crm_state_gray">{{
                $t('Ucard.KycAuth.t8')
              }}</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-KycAuth-Single']?.show"
                      :command="{ type: 4, row: scope.row }"
                    >
                      <el-icon><Operation /></el-icon>
                      <span>{{ $t('R-Hire-Check') }}</span>
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="display['R-KycAuth-Btn1']?.show && scope.row.status == '1'"
                      :command="{ type: 5, row: scope.row }"
                    >
                      <el-icon><Operation /></el-icon>
                      <span>{{ $t('R-KycAuth-Btn1') }}</span>
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="display['R-KycAuth-Btn2']?.show && scope.row.status == '2'"
                      :command="{ type: 12, row: scope.row }"
                    >
                      <el-icon><Operation /></el-icon>
                      <span>{{ $t('R-KycAuth-Btn2') }}</span>
                    </el-dropdown-item>
                  </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>

    <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>
    <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>
    <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>

    <el-dialog
      v-model="approveDialogVisible"
      :title="addType == 5 ? $t('R-Review-Dialog-Title') : $t('R-VerifiedUser-Single')"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="approveFormRef"
        :disable="addType == 4"
        :model="approveForm"
        :rules="approveRules"
        label-width="120px"
      >
        <!-- 展示字段 -->
        <h3 class="info-title">{{ $t('card.New2.p7') }}</h3>
        <el-form-item label="cId" prop="cId">
          <el-input v-model="approveForm.cId" disabled :placeholder="$t('R-Review-CId')">
          </el-input>
        </el-form-item>

        <el-form-item :label="$t('R-Review-Name')" prop="name">
          <el-input v-model="approveForm.infoName" disabled :placeholder="$t('R-Review-Name')">
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('R-Review-Email')" prop="email">
          <el-input v-model="approveForm.email" disabled :placeholder="$t('R-Review-Email')">
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('R-Review-Phone')" prop="mobile">
          <el-input v-model="approveForm.phone" disabled :placeholder="$t('R-Review-Phone')">
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('Apply_info.BasicInfo.IdentityNumber')" prop="identityNumber">
          <el-input
            v-model="approveForm.identity"
            disabled
            :placeholder="$t('Apply_info.BasicInfo.IdentityNumber')"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('Label.IdPhoto')" prop="image">
          <div class="image-preview">
            <div v-if="approveForm.images1 && approveForm.images1.length > 0" class="image-gallery">
              <div class="image-grid">
                <div v-for="(image, index) in approveForm.images1" :key="index" class="image-item">
                  <el-image
                    :src="imgUrl + image.path"
                    :preview-src-list="approveForm.images1.map((img) => imgUrl + img.path)"
                    :initial-index="index"
                    style="width: 100%; height: 100%; object-fit: contain"
                    fit="contain"
                    preview-teleported
                  >
                    <template #error>
                      <div class="image-slot">
                        <el-icon><Picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                </div>
              </div>
            </div>
            <span v-else>{{ $t('Label.IdPhoto') }}</span>
          </div>
        </el-form-item>

        <h3 class="info-title">{{ $t('card.New2.p8') }}</h3>
        <el-form-item :label="$t('R-Review-Name')" prop="name">
          <el-input v-model="approveForm.cardName" disabled :placeholder="$t('R-Review-Name')">
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('R-Review-Phone')" prop="mobile">
          <el-input v-model="approveForm.mobile" disabled :placeholder="$t('R-Review-Phone')">
          </el-input>
        </el-form-item>
        <el-form-item prop="idType" :label="$t('card.Form.f16')">
          <el-select v-model="approveForm.idType" disabled :placeholder="$t('card.vaildate.v14')">
            <el-option
              v-for="(item, index) in idTypeList"
              :key="index"
              :label="$t(item.name)"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('Apply_info.BasicInfo.IdentityNumber')" prop="identityNumber">
          <el-input
            v-model="approveForm.idNumber"
            disabled
            :placeholder="$t('Apply_info.BasicInfo.IdentityNumber')"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('card.Form.f19')" prop="identityNumber">
          <el-input
            v-model="approveForm.issueDate"
            disabled
            :placeholder="$t('Apply_info.BasicInfo.IdentityNumber')"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('card.Form.f20')" prop="identityNumber">
          <el-input
            v-model="approveForm.idNoExpiryDate"
            disabled
            :placeholder="$t('Apply_info.BasicInfo.IdentityNumber')"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('Label.IdPhoto')" prop="image">
          <div class="image-preview">
            <div
              v-if="approveForm.cardFiles && approveForm.cardFiles.length > 0"
              class="image-gallery"
            >
              <div class="image-grid">
                <div
                  v-for="(image, index) in approveForm.cardFiles"
                  :key="index"
                  class="image-item"
                >
                  <el-image
                    :src="imgUrl + image.path"
                    :preview-src-list="approveForm.cardFiles.map((img) => imgUrl + img.path)"
                    :initial-index="index"
                    style="width: 100%; height: 100%; object-fit: contain"
                    fit="contain"
                    preview-teleported
                  >
                    <template #error>
                      <div class="image-slot">
                        <el-icon><Picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                </div>
              </div>
            </div>
            <span v-else>{{ $t('Label.IdPhoto') }}</span>
          </div>
        </el-form-item>
        <h3 class="info-title">{{ $t('card.New2.p9') }}</h3>
        <el-form-item :label="$t('Apply_info.BasicInfo.KycIdNumber')" prop="kycIdNumber">
          <el-input
            v-model="approveForm.kycIdNumber"
            disabled
            :placeholder="$t('Apply_info.BasicInfo.KycIdNumber')"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('Apply_info.BasicInfo.KycNumber')" prop="kycNumber">
          <el-input
            v-model="approveForm.kycNumber"
            disabled
            :placeholder="$t('Apply_info.BasicInfo.KycNumber')"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('Apply_info.BasicInfo.KycName')" prop="kycName">
          <el-input
            v-model="approveForm.kycName"
            disabled
            :placeholder="$t('Apply_info.BasicInfo.KycName')"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('Label.IdPhoto')" prop="image">
          <div class="image-preview">
            <div v-if="approveForm.images && approveForm.images.length > 0" class="image-gallery">
              <div class="image-grid">
                <div v-for="(image, index) in approveForm.images" :key="index" class="image-item">
                  <el-image
                    :src="imgUrl + image.path"
                    :preview-src-list="approveForm.images.map((img) => imgUrl + img.path)"
                    :initial-index="index"
                    style="width: 100%; height: 100%; object-fit: contain"
                    fit="contain"
                    preview-teleported
                  >
                    <template #error>
                      <div class="image-slot">
                        <el-icon><Picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                </div>
              </div>
            </div>
            <span v-else>{{ $t('Label.IdPhoto') }}</span>
          </div>
        </el-form-item>
        <template v-if="addType == 5">
          <el-form-item :label="$t('R-Review-Status')" prop="status">
            <el-select v-model="approveForm.status" :placeholder="$t('R-Review-Status-Select')">
              <el-option :value="2" :label="$t('R-Review-Status-Approve')"></el-option>
              <el-option :value="3" :label="$t('R-Review-Status-Reject')"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="approveForm.status == 3"
            prop="approveDesc"
            :label="$t('Label.Descr') + '：'"
          >
            <el-select
              v-model="approveForm.approveDesc"
              filterable
              class="crm_search_down"
              :placeholder="$t('Placeholder.Choose')"
              allow-create
            >
              <el-option
                v-for="item in reasons"
                :key="item.id"
                :label="Session.get('lang') == 'cn' ? item.content : item.enContent"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <div v-if="addType == 5" class="dialog-footer">
          <el-button @click="approveDialogVisible = false">{{ $t('Btn.Cancel') }}</el-button>
          <el-button type="primary" :loading="approveLoading" @click="kycSubmit">{{
            $t('Btn.Confirm')
          }}</el-button>
        </div>
        <div v-if="addType == 4" class="dialog-footer">
          <el-button @click="approveDialogVisible = false">{{ $t('Btn.Close') }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref, reactive, computed, onMounted, watch, inject } from 'vue'
  import { useRouter } from 'vue-router'
  import Service from '@/service/ucard'
  import Service1 from '@/service/customer'
  import Config from '@/config/index'
  import ViewCardSingle from '@/views/components/ViewCardSingle'
  import DetailedInfoCid from '@/views/components/DetailedInfoCid'
  import TradingInfoAdd from '@/views/components/VirtualCard'
  import Service2 from '@/service/apply'
  import { exportExcel } from '@/utils/export'
  import { useI18n } from 'vue-i18n'
  import { Operation, Picture, Search } from '@element-plus/icons-vue'

  const { t } = useI18n()
  const router = useRouter()
  const { Code } = Config
  const pigeon = inject('pigeon')
  const Session = inject('session')
  // Refs
  const formRef = ref(null)
  const approveFormRef = ref(null)
  const imgUrl = Config.Host85
  const pictLoading = ref(false)
  const dialogInfoTradingAdd = ref(false)
  const approveLoading = ref(false)
  const dialogInfoTradingSingle = ref(false)
  const dialogInfoCid = ref(false)
  const approveDialogVisible = ref(false)

  // Reactive data
  const search = reactive({
    tag: 1,
    mobile: '',
    type: '',
    cId: '',
    email: '',
    status: '',
  })

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

  const idTypeList = ref([
    { name: 'card.Form.v4', value: 'PASSPORT' },
    { name: 'card.Form.v3', value: 'HK_HKID' },
    { name: 'card.Form.v5', value: 'DLN' },
    { name: 'card.Form.v6', value: 'GOVERNMENT_ISSUED_ID_CARD' },
  ])

  const approveForm = reactive({
    id: null,
    cId: '',
    name: '',
    email: '',
    mobile: '',
    idNumber: '',
    kycIdNumber: '',
    kycNumber: '',
    kycName: '',
    images: [],
    images1: [],
    status: 2,
    approveDesc: '',
  })

  const approveRules = reactive({
    status: [
      {
        required: true,
        message: t('R-Review-Status-Select'),
        trigger: 'change',
      },
    ],
    approveDesc: [
      {
        required: true,
        message: t('R-Review-Desc-Input'),
        trigger: 'blur',
      },
    ],
  })

  const reasons = ref({})
  const dInfo = ref({})

  // Computed
  const display = computed(() => {
    return JSON.parse(Session.Get('display', true) || '{}')
  })

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

  // Methods
  //导出
  const exportAgents = async () => {
    exportExcel(pigeon, '/wasabi/merchant/kyc/list/export', { ...search }, 'KYC_Verification')
  }

  const getDetail = async (row) => {
    try {
      let res = await Service.merchantList({
        cId: row.cId,
        page: {
          current: pagerInfo.current,
          row: pagerInfo.row,
        },
      })
      dInfo.value = res.data
    } catch (error) {
      pigeon.MessageError(t('Msg.SearchFail'))
    }
  }

  const handleCommand = async (command) => {
    switch (command.type) {
      case 4:
        addType.value = 4
        openApproveDialog(command.row)
        break
      case 5:
        addType.value = 5
        openApproveDialog(command.row)
        break
      case 12:
        await getDetail(command.row)
        addType.value = 12
        formList.value = { ...command.row, ...dInfo.value }
        dialogInfoTradingAdd.value = true
        break
    }
  }

  const openApproveDialog = async (row) => {
    pictLoading.value = true
    try {
      let res = await Service.kycSearchSingle({ id: row.id })
      if (res.code == Code.StatusOK) {
        const detailData = res.data
        approveForm.id = row.id
        approveForm.cId = detailData.cId || row.cId || ''
        approveForm.areaCodeMobile =
          detailData.areaCode + ' ' + detailData.mobile || row.areaCode + ' ' + row.mobile || ''
        approveForm.infoName = detailData.infoName || ''
        approveForm.phone = detailData.phone
        approveForm.email = detailData.email || ''
        approveForm.identity = detailData.identity
        approveForm.images1 = detailData.infoFiles || []
        approveForm.cardName = detailData.cardName || ''
        approveForm.idType = detailData.idType || ''
        approveForm.idNumber = detailData.idNumber
        approveForm.mobile = detailData.mobile || ''
        approveForm.issueDate = detailData.issueDate
        approveForm.idNoExpiryDate = detailData.idNoExpiryDate
        approveForm.cardFiles = detailData.cardFiles || []
        approveForm.kycIdNumber = detailData.kycIdNumber || ''
        approveForm.kycNumber = detailData.kycNumber || ''
        approveForm.kycName = detailData.kycName || ''
        approveForm.images = detailData.kycFiles || []
        approveForm.status = 2
        approveForm.approveDesc = ''
        approveDialogVisible.value = true
      } else {
        pigeon.MessageError(res.msg)
      }
    } catch (error) {
      console.log(error)
      pigeon.MessageError(t('Msg.SearchFail'))
    } finally {
      pictLoading.value = false
    }
  }

  // 确认审核
  const kycSubmit = async () => {
    approveFormRef.value.validate(async (valid) => {
      if (valid) {
        approveLoading.value = true
        try {
          let res = await Service.kycSubmit({
            ...approveForm,
            cId: user.value.cId,
          })
          if (res.code == Code.StatusOK) {
            approveDialogVisible.value = false
            pigeon.MessageOK('审核成功')
            searchFunc()
          } else {
            pigeon.MessageError(res.msg)
          }
        } catch (error) {
          pigeon.MessageError(t('Msg.SaveFail'))
        } finally {
          approveLoading.value = false
        }
      }
    })
  }

  //详细信息cid
  const accountOpen = (cId) => {
    router.push({ name: 'R-CustomerDetail', params: { cId: cId } })
  }

  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)
    }
  }

  //获取cid下的真实账户信息
  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)
    }
  }

  //获取详细数据pibno
  const searchSinglePIbNo = async (pIbNo) => {
    let res = await Service1.pIbNoRealSingle({
      ibNo: pIbNo,
    })
    if (res.code == Code.StatusOK) {
      // formInfoPib.value = res.data
      // dialogInfoPIbNo.value = true
    } else {
      pigeon.MessageError(res.msg)
    }
  }

  //详细信息pibno
  const agentOpen = (pIbNo) => {
    searchSinglePIbNo(pIbNo)
  }

  //详细信息关闭cid/pibno
  const closeDia = () => {
    dialogInfoCid.value = false
  }

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

  // 查询KYC认证状态
  const kycStatus = async ({ uniqueId, cardTypeId }) => {
    let res = await Service.kycStatus({
      uniqueId,
      cardTypeId,
      cId: user.value.cId,
    })
    if (res.code == Code.StatusOK) {
      pigeon.MessageOK(t('Msg.Success8'))
      searchFunc()
    } else {
      pigeon.MessageError(res.msg)
    }
  }

  const closeSingle = () => {
    dialogInfoTradingSingle.value = false
  }

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

  //获取原因列表
  const searchReasons = async () => {
    let res = await Service2.reasonsRefusalList({ type: 15 })
    if (res.code == Code.StatusOK) {
      if (res.data == null) {
        reasons.value = {}
      } else {
        reasons.value = res.data
      }
    } else {
      pigeon.MessageError(res.msg)
    }
  }

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

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

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

  // 列表
  const searchFunc = async () => {
    pictLoading.value = true
    console.log(display.value, 'display')
    if (!display.value['R-KycAuth-Search']?.show) {
      pigeon.MessageWarning(t('Msg.NotDisplay'))
      pictLoading.value = false
      return
    }
    let res = await Service.kycList({
      ...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()
  }

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

  // Watchers
  watch(
    () => search.tag,
    () => {
      search.mobile = ''
      search.email = ''
      search.cId = ''
      search.type = ''
      search.status = ''
    }
  )
</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">
  @import 'index.scss';
</style>