<template>
  <div class="InfoBox" id="TradingDetailedInfoAdd" :class="{ active: dialogInfoTradingSingle }">
    <div class="header">
      <div>
        <span class="title">{{ $t('R-Popup-Single') }}</span>
      </div>
      <span class="close crm-cursor" @click="close"><i class="el-icon-close"></i></span>
    </div>
    <template v-if="editorType == 1">
      <div class="detail-content">
        <div class="detail-item">
          <span class="label">{{ $t('Label.CidAccount') }}:</span>
          <span class="value">{{ formList.cId || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Label.Name') }}:</span>
          <span class="value">
            <span v-if="formList.firstName">{{ formList.firstName + ' ' }}</span>
            <span v-if="formList.middle">{{ formList.middle + ' ' }}</span>
            <span v-if="formList.lastName">{{ formList.lastName }}</span>
            <span v-if="!formList.firstName && !formList.lastName && !formList.middle">--</span>
          </span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Label.Email') }}:</span>
          <span class="value">{{ formList.email || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('card.New1.d13') }}:</span>
          <span class="value">{{ formList.mailingAreaCode }} {{ formList.mailingMobile }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('card.New1.d8') }}:</span>
          <span class="value">{{ formList.mailingCountry || '--' }}</span>
        </div>

        <div class="detail-item">
          <span class="label">{{ $t('card.New1.d9') }}:</span>
          <span class="value">{{ formList.mailingTown || '--' }}</span>
        </div>

        <div class="detail-item">
          <span class="label">{{ $t('card.New1.d10') }}:</span>
          <span class="value">{{ formList.mailingAddressCn || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('card.New1.d11') }}:</span>
          <span class="value">{{ formList.mailingAddress || '--' }}</span>
        </div>

        <div class="detail-item">
          <span class="label">{{ $t('card.New1.d12') }}:</span>
          <span class="value">{{ formList.mailingPostCode || '--' }}</span>
        </div>

        <div class="detail-item">
          <span class="label">{{ $t('Ucard.KycAuth.item1') }}:</span>
          <span class="value">
            {{ formList.type }}
          </span>
        </div>
        <div class="detail-item">
          <span class="label"> {{ $t('card.Form.f49') }}:</span>
          <span class="value">
            {{ formList.cardName }}
          </span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.CardOrder.item5') }}:</span>
          <span class="value">
            <span v-if="formList.status === 'success'">{{ $t('Ucard.CardOrder.t6') }}</span>
            <span v-else-if="formList.status === 'fail'">{{ $t('card.Status.t7') }}</span>
            <span v-else>{{ $t('Ucard.CardOrder.t5') }}</span>
          </span>
        </div>
      </div>
    </template>
    <template v-if="editorType == 2">
      <div class="detail-content">
        <div class="detail-item">
          <span class="label">{{ $t('Label.CidAccount') }}:</span>
          <span class="value">{{ formList.cId || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Label.Name') }}:</span>
          <span class="value">
            <span v-if="formList.firstName">{{ formList.firstName + ' ' }}</span>
            <span v-if="formList.middle">{{ formList.middle + ' ' }}</span>
            <span v-if="formList.lastName">{{ formList.lastName }}</span>
            <span v-if="!formList.firstName && !formList.lastName && !formList.middle">--</span>
          </span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Label.Email') }}:</span>
          <span class="value">{{ formList.email || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.KycAuth.item2') }}:</span>
          <span class="value">{{ formList.areaCode }} {{ formList.mobile }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.CardOrder.item5') }}:</span>
          <span class="value">
            <span v-if="formList.status === -1">{{ $t('Ucard.KycAuth.t5') }}</span>
            <span v-if="formList.status === 1">{{ $t('Ucard.KycAuth.t6') }}</span>
            <span v-if="formList.status === 2">{{ $t('Ucard.KycAuth.t7') }}</span>
            <span v-if="formList.status === 3">{{ $t('Ucard.KycAuth.t8') }}</span>
          </span>
        </div>
      </div>
    </template>
    <template v-if="editorType == 3">
      <div class="detail-content">
        <div class="detail-item">
          <span class="label">{{ $t('Label.CidAccount') }}:</span>
          <span class="value">{{ formList.cId || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Label.Name') }}:</span>
          <span class="value">
            <span v-if="formList.firstName">{{ formList.firstName + ' ' }}</span>
            <span v-if="formList.middle">{{ formList.middle + ' ' }}</span>
            <span v-if="formList.lastName">{{ formList.lastName }}</span>
            <span v-if="!formList.firstName && !formList.lastName && !formList.middle">--</span>
          </span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Label.Email') }}:</span>
          <span class="value">{{ formList.email || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.KycAuth.item2') }}:</span>
          <span class="value">{{ formList.areaCode }} {{ formList.mobile }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Recharge.item2') }}:</span>
          <span class="value">{{ formList.cardNumber || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Recharge.item3') }}:</span>
          <span class="value">{{ formList.currency || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Recharge.item4') }}:</span>
          <span class="value">{{ formList.amount || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Recharge.item5') }}:</span>
          <span class="value">{{ formList.fee || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Recharge.item6') }}:</span>
          <span class="value">{{ formList.receivedAmount || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Recharge.item7') }}:</span>
          <span class="value">{{ formList.receivedCurrency || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Recharge.item9') }}:</span>
          <span class="value">{{ formList.addTime || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Recharge.item10') }}:</span>
          <span class="value">
            <span v-if="formList.status === 'success'">{{ $t('Ucard.Recharge.t1') }}</span>
            <span v-else-if="formList.status === 'fail'">{{ $t('Ucard.Recharge.t2') }}</span>
            <span v-else>{{ $t('Ucard.Recharge.t3') }}</span>
          </span>
        </div>
      </div>
    </template>

    <template v-if="editorType == 4">
      <div class="detail-content">
        <div class="detail-item">
          <span class="label">{{ $t('Label.CidAccount') }}:</span>
          <span class="value">{{ formList.cId || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Label.Name') }}:</span>
          <span class="value">
            <span v-if="formList.firstName">{{ formList.firstName + ' ' }}</span>
            <span v-if="formList.middle">{{ formList.middle + ' ' }}</span>
            <span v-if="formList.lastName">{{ formList.lastName }}</span>
            <span v-if="!formList.firstName && !formList.lastName && !formList.middle">--</span>
          </span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Label.Email') }}:</span>
          <span class="value">{{ formList.email || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.KycAuth.item2') }}:</span>
          <span class="value">{{ formList.areaCode }} {{ formList.mobile }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Transactions.item2') }}:</span>
          <span class="value">{{ formList.cardNumber || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Transactions.item3') }}:</span>
          <span class="value">{{ formList.currency || 'USD' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Transactions.item4') }}:</span>
          <span class="value">{{ formList.amount || '0' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Transactions.item5') }}:</span>
          <span class="value">{{ formList.fee || '0' }}</span>
        </div>

        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Transactions.item8') }}:</span>
          <span class="value">{{ formList.tradeNo || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Transactions.item9') }}:</span>
          <span class="value">
            <span v-if="formList.type === 'auth'">{{ $t('Ucard.Transactions.t1') }}</span>
            <span v-else-if="formList.type === 'refund'">{{ $t('Ucard.Transactions.t2') }}</span>
            <span v-else-if="formList.type === 'verification'">{{
              $t('Ucard.Transactions.t3')
            }}</span>
            <span v-else-if="formList.type === 'auth'">{{ $t('Ucard.Transactions.t4') }}</span>
            <span v-else-if="formList.type === 'withdraw'">{{ $t('R-VirtualCard-Btn11') }}</span>
            <span v-else-if="formList.type === 'maintain_fee'">{{
              $t('Ucard.Transactions.t5')
            }}</span>
          </span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Transactions.item11') }}:</span>
          <span class="value">
            <span v-if="formList.status === 'succeed' || formList.status === 'success'">{{
              $t('Ucard.Transactions.t18')
            }}</span>
            <span v-else-if="formList.status === 'failed' || formList.status === 'fail'">{{
              $t('Ucard.Transactions.t25')
            }}</span>
            <span v-else-if="formList.status === 'processing'">{{ $t('card.Status.t3') }}</span>
            <span v-else-if="formList.status === 'wait_process'">{{ $t('card.Status.t5') }}</span>
            <span v-else>{{ $t('Ucard.Transactions.t24') }}</span>
          </span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Transactions.item13') }}:</span>
          <span class="value">
            <span> {{ formList.description || '--' }}</span>
          </span>
        </div>
      </div>
    </template>

    <template v-if="editorType == 5">
      <div class="detail-content">
        <div class="detail-item">
          <span class="label">{{ $t('Label.CidAccount') }}:</span>
          <span class="value">{{ formList.cId || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Label.Name') }}:</span>
          <span class="value">
            <span v-if="formList.firstName">{{ formList.firstName + ' ' }}</span>
            <span v-if="formList.middle">{{ formList.middle + ' ' }}</span>
            <span v-if="formList.lastName">{{ formList.lastName }}</span>
            <span v-if="!formList.firstName && !formList.lastName && !formList.middle">--</span>
          </span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Label.Email') }}:</span>
          <span class="value">{{ formList.email || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.KycAuth.item2') }}:</span>
          <span class="value">{{ formList.areaCode }} {{ formList.mobile }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.VirtualCard.item2') }}:</span>
          <span class="value">{{ formList.cardNumber || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.VirtualCard.item7') }}:</span>
          <span class="value">{{ formList.uniqueId || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.VirtualCard.item3') }}:</span>
          <span class="value">{{ formList.expireDate || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.VirtualCard.item4') }}:</span>
          <span class="value">{{ formList.cvv || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.KycAuth.item1') }}:</span>
          <span class="value">
            <span>{{ formList.type }}</span>
          </span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.VirtualCard.item5') }}:</span>
          <span class="value">
            <span v-if="formList.status === 'unactivate'">{{ $t('Ucard.VirtualCard.t9') }}</span>
            <span v-else-if="formList.status === 'success'">{{ $t('Ucard.VirtualCard.t6') }}</span>
            <span v-else-if="formList.status === 'fail'">{{ $t('Msg.Fail') }}</span>
            <span v-else>{{ $t('Ucard.VirtualCard.t5') }}</span>

            <span v-if="formList.status === 2">{{ $t('Ucard.VirtualCard.t10') }}</span>
          </span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.VirtualCard.item6') }}:</span>
          <span class="value">
            <template v-if="formList.freezeType == 1">
              <span v-if="formList.freezeStatus == 'success'">{{
                $t('Ucard.VirtualCard.t7')
              }}</span>
              <span v-else>{{ $t('Ucard.VirtualCard.t13') }}</span>
            </template>
            <template v-else>
              <span v-if="formList.freezeStatus == 'success'">{{
                $t('Ucard.VirtualCard.t8')
              }}</span>
              <span v-else>{{ $t('Ucard.VirtualCard.t12') }}</span>
            </template>
          </span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('card.New2.p1') }}:</span>
          <span class="value">
            <span v-if="formList.blocked">{{ $t('Yes') }}</span>
            <span v-else>{{ $t('No') }}</span>
          </span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('card.New2.p2') }}:</span>
          <span class="value">
            <span v-if="formList.cardStatus == 'cancel'">{{ $t('Yes') }}</span>
            <span v-else>{{ $t('No') }}</span>
          </span>
        </div>
      </div>
    </template>
    <template v-if="editorType == 6">
      <div class="detail-content">
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Business.item1') }}:</span>
          <span class="value">
            <span
              v-if="formList.cId"
              class="crm-text-underline"
              style="cursor: pointer"
              @click="accountOpen(formList.cId)"
              >{{ formList.cId }}</span
            >
            <span v-else>--</span>
          </span>
        </div>

        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Business.item5') }}:</span>
          <span class="value"> {{ formList.lastName }}{{ formList.firstName }} </span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Business.item21') }}:</span>
          <span class="value">$ {{ formList.balance || 0 }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Business.item4') }}:</span>
          <span class="value">{{ formList.email || '--' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Business.item3') }}:</span>
          <span class="value">{{ formList.areaCode }} {{ formList.mobile }}</span>
        </div>

        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Business.item7') }}:</span>
          <span class="value">{{ formList.birthday || '--' }}</span>
        </div>

        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Business.item9') }}:</span>
          <span class="value">
            <span v-if="formList.gender === 'M'">{{ $t('Ucard.Business.t1') }}</span>
            <span v-else-if="formList.gender === 'F'">{{ $t('Ucard.Business.t2') }}</span>
            <span v-else>--</span>
          </span>
        </div>

        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Business.item8') }}:</span>
          <span class="value">{{ formList.countryEnName || '--' }}</span>
        </div>

        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Business.item11') }}:</span>
          <span class="value">{{ formList.townEnName || '--' }}</span>
        </div>

        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Business.item12') }}:</span>
          <span class="value">{{ formList.address || '--' }}</span>
        </div>

        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Business.item13') }}:</span>
          <span class="value">{{ formList.postCode || '--' }}</span>
        </div>

        <div class="detail-item">
          <span class="label">{{ $t('card.Form.f12') }}:</span>
          <span class="value">{{ formList.occupationDesc || '--' }}</span>
        </div>

        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Business.item14') }}:</span>
          <span class="value">{{ idType }}</span>
        </div>

        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Business.item15') }}:</span>
          <span class="value">{{ formList.idNumber || '--' }}</span>
        </div>

        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Business.item16') }}:</span>
          <span class="value">{{ formList.idNoExpiryDate || '--' }}</span>
        </div>

        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Business.item17') }}:</span>
          <div class="value">
            <img v-if="formList.idFrontUrl" :src="imgUrl + formList.idFrontUrl" alt="" />
            <span v-else>--</span>
          </div>
        </div>

        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Business.item18') }}:</span>
          <div class="value">
            <img v-if="formList.idBackUrl" :src="imgUrl + formList.idBackUrl" alt="" />
            <span v-else>--</span>
          </div>
        </div>

        <div class="detail-item">
          <span class="label">{{ $t('Ucard.Business.item18') }}:</span>
          <div class="value">
            <img v-if="formList.idHoldUrl" :src="imgUrl + formList.idHoldUrl" alt="" />
            <span v-else>--</span>
          </div>
        </div>
      </div>
    </template>
    <div class="dialog-footer">
      <el-button @click="close">{{ $t('Btn.Cancel') }}</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  /* eslint-disable no-console */
  import Config from '@/config/index'
  import { ref, defineProps, defineEmits, computed } from 'vue'
  import { useI18n } from 'vue-i18n'
  const { t } = useI18n()

  const props = defineProps({
    dialogInfoTradingSingle: {
      type: Boolean,
      default: false,
    },
    addType: {
      default: '',
    },
    editorType: {
      default: 1,
    },
    myInfo: {
      default: '',
    },
    formList: {
      default: '',
    },
  })

  //
  const idType = computed(() => {
    const { formList } = props
    let type = ''
    switch (formList.idType) {
      case 'HK_HKID':
        type = t('card.Form.v3')
        break
      case 'PASSPORT':
        type = t('card.Form.v4')
        break
      case 'DLN':
        type = t('card.Form.v5')
        break
      case 'GOVERNMENT_ISSUED_ID_CARD':
        type = t('card.Form.v6')
        break
      default:
        return ''
    }
    return type
  })

  const emit = defineEmits(['closeSingle'])

  const form = ref({})
  const imgUrl = ref(Config.Host85)

  const close = () => {
    emit('closeSingle', false)
  }
</script>

<style lang="scss" scoped>
  @import 'index.scss';
</style>
