<template>
  <div class="InfoBox" id="GlobalDetailedInfoCid" :class="{ active: dialogInfoCid, active1: type }">
    <div class="header">
      <div>
        <span class="title">{{ $t('Label.CidAccount') }}</span> ：<span>{{ form.cId }}</span>
        -
        <span v-if="form.firstName">{{ form.firstName + ' ' }}</span>
        <span v-if="form.middle">{{ form.middle + ' ' }}</span>
        <span v-if="form.lastName">{{ form.lastName }}</span>
      </div>
      <span class="close crm-cursor" @click="close"><i class="el-icon-close"></i></span>
    </div>
    <el-form ref="formRef" :model="form" label-width="150PX">
      <el-collapse class="crm_collapse_info" v-model="activeNames">
        <el-collapse-item :title="$t('Apply_info.UserInfo.Title')" name="1">
          <el-form-item :label="$t('Apply_info.UserInfo.CID')">
            {{ form.cId || '--' }}
          </el-form-item>
          <el-form-item :label="$t('Apply_info.UserInfo.Email')">
            {{ form.email || '--' }}
          </el-form-item>
          <el-form-item :label="$t('Apply_info.UserInfo.Registration')">
            {{ form.addTime || '--' }}
          </el-form-item>
          <el-form-item :label="$t('Apply_info.UserInfo.IP')">
            {{ form.addIp || '--' }}
          </el-form-item>
          <el-form-item :label="$t('Raffle.FundModification.WalletBalance')">
            {{ form.balance || '0' }}
          </el-form-item>
          <el-form-item :label="$t('Apply_info.UserInfo.LoginState')">
            <el-switch
              class="crm_switch"
              v-model="form.valid"
              disabled
              :active-value="1"
              :inactive-value="0"
              :active-text="$t('Btn.Yes')"
              :inactive-text="$t('Btn.No')"
              active-color="#368FEC"
              inactive-color="#EB3F57"
            >
            </el-switch>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item :title="$t('Label.Ib')" name="7" v-if="form.isAgent">
          <el-form-item :label="$t('Label.AgentNumber')">
            {{ form.ibNo || '--' }}
          </el-form-item>
          <el-form-item :label="$t('Label.AgentLevel')">
            {{
              Session.Get('lang') == 'cn'
                ? form.agentLevelName || '--'
                : form.agentLevelEnName || '--'
            }}
          </el-form-item>
          <el-form-item :label="$t('Label.CommissionBalance')">
            {{ form.agentBalance || '0' }}
          </el-form-item>
          <el-form-item :label="$t('Label.Unresolved')">
            {{ form.unresolved || '0' }}
          </el-form-item>
          <el-form-item :label="$t('Label.Frozen')">
            {{ form.frozen || '0' }}
          </el-form-item>
          <el-form-item :label="$t('Label.AllCommission')">
            {{ form.allCommission || '0' }}
          </el-form-item>
          <el-form-item :label="$t('Dashboard.Profile.AgentShareLink')">
            <span class="btn-copy" @click="CopyShareLink">{{
              $t('Dashboard.Profile.ConsumerShareLinks')
            }}</span>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item :title="$t('Apply_info.TradingAccount.Title')" name="10" v-if="isTrading">
          <el-card class="box-card" v-for="(item, index) in form.realList" :key="index">
            <template #header>
              <div class="clearfix crm-cursor" @click="cardTab(index)">
                <span>
                  <span>{{ index + 1 }}. </span
                  ><span>{{ $t('Apply_info.TradingAccount.Account') }}</span> {{ item.login }} -
                  <span v-if="item.type == 1">{{ $t('Web_info.Classic') }}</span>
                  <span v-if="item.type == 2">{{ $t('Web_info.Senior') }}</span>
                  <span v-if="item.type == 3">{{ $t('Web_info.Institutions') }}</span>
                  <span v-if="item.type == 5">{{ $t('Web_info.Speed') }}</span>
                  <span v-if="item.type == 6">{{ $t('Web_info.NewSpeed') }}</span>
                  <span v-if="item.type == 7">{{ $t('Web_info.StandardAccount') }}</span>
                  <span v-if="item.type == 8">{{ $t('Web_info.CentAccount') }}</span>
                </span>
                <span>
                  <i v-if="cardIndex == index" class="el-icon-caret-bottom"></i>
                  <i v-if="cardIndex != index" class="el-icon-caret-right"></i>
                </span>
              </div>
            </template>
            <el-collapse-transition>
              <div class="text item" v-if="cardIndex == index">
                <el-form-item :label="$t('Apply_info.TradingAccount.Trading')">
                  {{ item.login || '--' }}
                </el-form-item>
                <el-form-item :label="$t('Apply_info.TradingAccount.Type')">
                  <span v-if="item.type == 1">{{ $t('Web_info.Classic') }}</span>
                  <span v-if="item.type == 2">{{ $t('Web_info.Senior') }}</span>
                  <span v-if="item.type == 3">{{ $t('Web_info.Institutions') }}</span>
                  <span v-if="item.type == 5">{{ $t('Web_info.Speed') }}</span>
                  <span v-if="item.type == 6">{{ $t('Web_info.NewSpeed') }}</span>
                  <span v-if="item.type == 7">{{ $t('Web_info.StandardAccount') }}</span>
                  <span v-if="item.type == 8">{{ $t('Web_info.CentAccount') }}</span>
                </el-form-item>
                <el-form-item :label="$t('Apply_info.TradingAccount.Leverage')">
                  <span v-if="item.leverage">1:</span>{{ item.leverage || '0' }}
                </el-form-item>
                <el-form-item :label="$t('Apply_info.TradingAccount.OutsideCommission')">
                  {{ item.commission || '0' }}
                </el-form-item>
                <el-form-item
                  :label="$t('Apply_info.TradingAccount.Group')"
                  v-if="user.departmentId != 1"
                >
                  {{ item.groupCode || '--' }}
                </el-form-item>
                <el-form-item :label="$t('Apply_info.TradingAccount.Currency')">
                  {{ item.currency || '--' }}
                </el-form-item>
                <el-form-item :label="$t('Apply_info.TradingAccount.Time')">
                  {{ item.addTime || '--' }}
                </el-form-item>
                <el-form-item :label="$t('Apply_info.TradingAccount.State')">
                  <el-switch
                    class="crm_switch"
                    disabled
                    v-model="item.valid"
                    :active-value="1"
                    :inactive-value="0"
                    :active-text="$t('Btn.Yes')"
                    :inactive-text="$t('Btn.No')"
                    active-color="#368FEC"
                    inactive-color="#EB3F57"
                  >
                  </el-switch>
                </el-form-item>
              </div>
            </el-collapse-transition>
          </el-card>
        </el-collapse-item>
        <el-collapse-item :title="$t('Apply_info.BasicInfo.Title')" name="2">
          <el-form-item :label="$t('Label.CustomerType')">
            <span v-if="form.customType == 2">{{ $t('Label.CustomerType2') }}</span>
            <span v-if="form.customType == 1">{{ $t('Label.CustomerType1') }}</span>
            <span v-if="!form.customType">{{ '--' }}</span>
          </el-form-item>
          <el-form-item :label="$t('Label.CompanyName')" v-if="form.customType == 2">
            {{ form.companyName || '--' }}
          </el-form-item>
          <el-form-item :label="$t('Label.CorporationName')" v-if="form.customType == 2">
            <span v-if="form.firstName">{{ form.firstName + ' ' }}</span>
            <span v-if="form.middle">{{ form.middle + ' ' }}</span>
            <span v-if="form.lastName">{{ form.lastName }}</span>
            <span v-if="!form.firstName && !form.lastName && !form.middle">{{ '--' }}</span>
          </el-form-item>
          <el-form-item :label="$t('Apply_info.BasicInfo.Name')" v-else>
            <span v-if="form.firstName">{{ form.firstName + ' ' }}</span>
            <span v-if="form.middle">{{ form.middle + ' ' }}</span>
            <span v-if="form.lastName">{{ form.lastName }}</span>
            <span v-if="!form.firstName && !form.lastName && !form.middle">{{ '--' }}</span>
          </el-form-item>
          <el-form-item :label="$t('system_info.Label.EnglishNames')">
            {{ form.nameEn || '--' }}
          </el-form-item>
          <el-form-item :label="$t('Apply_info.BasicInfo.Phone')" v-if="user.departmentId != 1">
            {{ form.phone || '--' }}
          </el-form-item>
          <el-form-item :label="$t('Apply_info.BasicInfo.ID')" v-if="user.departmentId != 1">
            {{ form.identity || '--' }}
          </el-form-item>
          <el-form-item
            :label="$t('Apply_info.BasicInfo.IdentityNumber')"
            v-if="user.departmentId != 1"
          >
            {{ form.identityNumber || '--' }}
          </el-form-item>
          <el-form-item
            :label="$t('Apply_info.BasicInfo.KycIdNumber')"
            v-if="user.departmentId != 1"
          >
            {{ form.kycIdNumber || '--' }}
          </el-form-item>
          <el-form-item :label="$t('Apply_info.BasicInfo.KycNumber')" v-if="user.departmentId != 1">
            {{ form.kycNumber || '--' }}
          </el-form-item>
          <el-form-item :label="$t('Apply_info.BasicInfo.KycName')" v-if="user.departmentId != 1">
            {{ form.kycName || '--' }}
          </el-form-item>
          <el-form-item :label="$t('Apply_info.BasicInfo.Birthday')">
            <span v-if="form.birth">{{ form.birth.split(' ')[0] }}</span>
            <span v-if="!form.birth">{{ '--' }}</span>
          </el-form-item>
          <el-form-item :label="$t('Apply_info.BasicInfo.Gender')">
            <span v-if="form.gender == '1'">{{ $t('Apply_info.BasicInfo.Male') }}</span>
            <span v-if="form.gender == '2'">{{ $t('Apply_info.BasicInfo.Female') }}</span>
            <span v-if="!form.gender">{{ '--' }}</span>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item :title="$t('Apply_info.AddressInfo.Title')" name="3">
          <el-form-item :label="$t('Apply_info.AddressInfo.Lang')">
            {{ form.lang == 'cn' ? '中文' : 'English' }}
          </el-form-item>
          <el-form-item :label="$t('Apply_info.AddressInfo.Country')">
            {{ Session.Get('lang') == 'cn' ? form.countryName : form.countryEnName }}
          </el-form-item>
          <el-form-item :label="$t('Apply_info.AddressInfo.Region')">
            {{ form.state || '--' }}
          </el-form-item>
          <el-form-item :label="$t('Apply_info.AddressInfo.City')">
            {{ form.city || '--' }}
          </el-form-item>
          <el-form-item :label="$t('Apply_info.AddressInfo.Address')">
            <span v-if="form.addressLines">{{
              form.addressLines.length ? form.addressLines[0] : '--'
            }}</span>
          </el-form-item>
          <el-form-item :label="$t('Apply_info.AddressInfo.standbyAddress')">
            <span v-if="form.addressLines">{{
              form.addressLines.length == 2 ? form.addressLines[1] : '--'
            }}</span>
          </el-form-item>
          <el-form-item :label="$t('Apply_info.AddressInfo.zipCode')">
            <span>{{ form.zipCode || '--' }}</span>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item :title="$t('Apply_info.FinancialBack.Title')" name="4">
          <el-form-item :label="$t('Apply_info.FinancialBack.EducationBackground')">
            <span v-if="form.level == 1">{{ $t('Apply_info.FinancialBack.item11') }}</span>
            <span v-if="form.level == 2">{{ $t('Apply_info.FinancialBack.item12') }}</span>
            <span v-if="form.level == 3">{{ $t('Apply_info.FinancialBack.item13') }}</span>
            <span v-if="form.level == 4">{{ $t('Apply_info.FinancialBack.item14') }}</span>
            <span v-if="form.level == 5">{{ $t('Apply_info.FinancialBack.item15') }}</span>
            <span v-if="!form.level">{{ '--' }}</span>
          </el-form-item>
          <el-form-item :label="$t('Apply_info.FinancialBack.InaugurationSituation')">
            <span v-if="form.employmentStatus == 1">{{
              $t('Apply_info.FinancialBack.item21')
            }}</span>
            <span v-if="form.employmentStatus == 2">{{
              $t('Apply_info.FinancialBack.item22')
            }}</span>
            <span v-if="form.employmentStatus == 3">{{
              $t('Apply_info.FinancialBack.item23')
            }}</span>
            <span v-if="form.employmentStatus == 4">{{
              $t('Apply_info.FinancialBack.item24')
            }}</span>
            <span v-if="form.employmentStatus == 5">{{
              $t('Apply_info.FinancialBack.item25')
            }}</span>
            <span v-if="!form.employmentStatus">{{ '--' }}</span>
          </el-form-item>
          <!--          <el-form-item :label="$t('Apply_info.FinancialBack.Industry')">-->
          <!--            {{form.occupation || '&#45;&#45;'}}-->
          <!--          </el-form-item>-->
          <el-form-item :label="$t('Apply_info.FinancialBack.TradingPurposes')">
            <span v-if="form.tradingObjectives == 1">{{
              $t('Apply_info.FinancialBack.item31')
            }}</span>
            <span v-if="form.tradingObjectives == 2">{{
              $t('Apply_info.FinancialBack.item32')
            }}</span>
            <span v-if="form.tradingObjectives == 3">{{
              $t('Apply_info.FinancialBack.item33')
            }}</span>
            <span v-if="form.tradingObjectives == 4">{{
              $t('Apply_info.FinancialBack.item34')
            }}</span>
            <span v-if="!form.tradingObjectives">{{ '--' }}</span>
          </el-form-item>
          <el-form-item :label="$t('Apply_info.FinancialBack.SourcesFunding')">
            <span v-if="form.sourceFunding == 1">{{ $t('Apply_info.FinancialBack.item41') }}</span>
            <span v-if="form.sourceFunding == 2">{{ $t('Apply_info.FinancialBack.item42') }}</span>
            <span v-if="form.sourceFunding == 3">{{ $t('Apply_info.FinancialBack.item43') }}</span>
            <span v-if="form.sourceFunding == 4">{{ $t('Apply_info.FinancialBack.item44') }}</span>
            <span v-if="form.sourceFunding == 5">{{ $t('Apply_info.FinancialBack.item45') }}</span>
            <span v-if="form.sourceFunding == 6">{{ $t('Apply_info.FinancialBack.item46') }}</span>
            <span v-if="!form.sourceFunding">{{ '--' }}</span>
          </el-form-item>
          <el-form-item :label="$t('Apply_info.FinancialBack.InTotalRevenue')">
            <span v-if="form.grossAnnualIncome == 1">{{
              $t('Apply_info.FinancialBack.item61')
            }}</span>
            <span v-if="form.grossAnnualIncome == 2">{{
              $t('Apply_info.FinancialBack.item62')
            }}</span>
            <span v-if="form.grossAnnualIncome == 3">{{
              $t('Apply_info.FinancialBack.item63')
            }}</span>
            <span v-if="form.grossAnnualIncome == 4">{{
              $t('Apply_info.FinancialBack.item64')
            }}</span>
            <span v-if="form.grossAnnualIncome == 5">{{
              $t('Apply_info.FinancialBack.item65')
            }}</span>
            <span v-if="!form.grossAnnualIncome">{{ '--' }}</span>
          </el-form-item>
          <el-form-item :label="$t('Apply_info.FinancialBack.TotalAssets')">
            <span v-if="form.totalNewWorth == 1">{{ $t('Apply_info.FinancialBack.item51') }}</span>
            <span v-if="form.totalNewWorth == 2">{{ $t('Apply_info.FinancialBack.item52') }}</span>
            <span v-if="form.totalNewWorth == 3">{{ $t('Apply_info.FinancialBack.item53') }}</span>
            <span v-if="form.totalNewWorth == 4">{{ $t('Apply_info.FinancialBack.item54') }}</span>
            <span v-if="form.totalNewWorth == 5">{{ $t('Apply_info.FinancialBack.item55') }}</span>
            <span v-if="!form.totalNewWorth">{{ '--' }}</span>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item :title="$t('Apply_info.ExperienceTrading.Title')" name="5">
          <div style="text-align: left; margin: 10px 0">
            <span>{{ $t('Apply_info.ExperienceTrading.Item1') }}</span>
            <div>
              <el-radio disabled v-model="form.experienceQualification" :label="1">
                <span v-if="form.experienceQualification">{{ $t('Btn.Yes') }}</span>
                <span v-if="!form.experienceQualification">{{ $t('Btn.No') }}</span>
              </el-radio>
            </div>
          </div>
          <div style="text-align: left; margin: 10px 0">
            <span>{{ $t('Apply_info.ExperienceTrading.Item2') }}</span>
            <div>
              <el-radio disabled v-model="form.experienceTradingDerivative" :label="1">
                <span v-if="form.experienceTradingDerivative">{{ $t('Btn.Yes') }}</span>
                <span v-if="!form.experienceTradingDerivative">{{ $t('Btn.No') }}</span>
              </el-radio>
            </div>
          </div>
          <div style="text-align: left; margin: 10px 0">
            <span>{{ $t('Apply_info.ExperienceTrading.Item3') }}</span>
            <div>
              <el-radio disabled v-model="form.experienceTradingForex" :label="1">
                <span v-if="form.experienceTradingForex">{{ $t('Btn.Yes') }}</span>
                <span v-if="!form.experienceTradingForex">{{ $t('Btn.No') }}</span>
              </el-radio>
            </div>
          </div>
          <div style="text-align: left; margin: 10px 0">
            <span>{{ $t('Apply_info.ExperienceTrading.Item4') }}</span>
            <div>
              <el-radio disabled v-model="form.derivativeProducts" :label="1">
                <span v-if="form.derivativeProducts">{{ $t('Btn.Yes') }}</span>
                <span v-if="!form.derivativeProducts">{{ $t('Btn.No') }}</span>
              </el-radio>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item
          :title="$t('Apply_info.FileManagement.Title')"
          name="6"
          v-if="user.departmentId != 1"
        >
          <div class="Identity">
            <span class="title">{{ $t('Apply_info.FileManagement.ProofIdentity') }}</span>
            <span>1</span>
            <span class="line"></span>
            <el-button style="border: none" type="text">
              <span v-if="files1.status == 1" @click="imgApprove(1)">{{
                $t('State.ToBeProcessed')
              }}</span>
              <span v-if="files1.status == 2" @click="imgApproveDe(1)">{{ $t('State.Pass') }}</span>
              <span v-if="files1.status == 3" @click="imgApproveDe(1)">{{
                $t('State.Refused')
              }}</span>
              <span v-if="files1.status == 4" @click="imgApprove(1)">{{
                $t('State.ToBeProcessed')
              }}</span>
              <span v-if="!files1.status">{{ $t('Placeholder.Not') }}</span>
            </el-button>
          </div>
          <div class="Identity-img">
            <div class="id-img">
              <div
                v-if="url1.substr(-3, 3) == 'pdf' || url1.substr(-3, 3) == 'PDF'"
                class="pdfLink"
              >
                <a
                  style="display: inline-block; width: 100%; height: 100%"
                  :href="url1"
                  target="_blank"
                  ><i class="el-icon-document"></i
                ></a>
              </div>
              <el-image
                v-else
                style="width: 100%; height: 100%"
                :src="url1"
                :preview-src-list="[url1]"
              >
                <template #error>
                  <div class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </template>
              </el-image>
            </div>
          </div>

          <div class="Identity">
            <span class="title">{{ $t('Apply_info.FileManagement.ProofIdentity') }}</span>
            <span>2</span>
            <span class="line"></span>
            <el-button style="border: none" type="text">
              <span v-if="files2.status == 1" @click="imgApprove(2)">{{
                $t('State.ToBeProcessed')
              }}</span>
              <span v-if="files2.status == 2" @click="imgApproveDe(2)">{{ $t('State.Pass') }}</span>
              <span v-if="files2.status == 3" @click="imgApproveDe(2)">{{
                $t('State.Refused')
              }}</span>
              <span v-if="files2.status == 4" @click="imgApprove(2)">{{
                $t('State.ToBeProcessed')
              }}</span>
              <span v-if="!files2.status">{{ $t('Placeholder.Not') }}</span>
            </el-button>
          </div>
          <div class="Identity-img">
            <div class="id-img">
              <div
                class="pdfLink"
                v-if="url2.substr(-3, 3) == 'pdf' || url2.substr(-3, 3) == 'PDF'"
              >
                <a
                  style="display: inline-block; width: 100%; height: 100%"
                  :href="url2"
                  target="_blank"
                  ><i class="el-icon-document"></i
                ></a>
              </div>
              <el-image
                v-else
                style="width: 100%; height: 100%"
                :src="url2"
                :preview-src-list="[url2]"
              >
                <template #error>
                  <div class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </template>
              </el-image>
            </div>
          </div>

          <div class="Identity">
            <span class="title">{{ $t('Apply_info.FileManagement.ProofAddress') }}</span>
            <span class="line"></span>
            <el-button style="border: none" type="text">
              <span v-if="files3.status == 1" @click="imgApprove(3)">{{
                $t('State.ToBeProcessed')
              }}</span>
              <span v-if="files3.status == 2" @click="imgApproveDe(3)">{{ $t('State.Pass') }}</span>
              <span v-if="files3.status == 3" @click="imgApproveDe(3)">{{
                $t('State.Refused')
              }}</span>
              <span v-if="files3.status == 4" @click="imgApprove(3)">{{
                $t('State.ToBeProcessed')
              }}</span>
              <span v-if="!files3.status">{{ $t('Placeholder.Not') }}</span>
            </el-button>
          </div>
          <div class="Identity-img">
            <div class="id-img">
              <div
                class="pdfLink"
                v-if="url3.substr(-3, 3) == 'pdf' || url3.substr(-3, 3) == 'PDF'"
              >
                <a
                  style="display: inline-block; width: 100%; height: 100%"
                  :href="url3"
                  target="_blank"
                  ><i class="el-icon-document"></i
                ></a>
              </div>
              <el-image
                v-else
                style="width: 100%; height: 100%"
                :src="url3"
                :preview-src-list="[url3]"
              >
                <template #error>
                  <div class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </template>
              </el-image>
            </div>
          </div>
          <div class="Identity">
            <span class="title">{{ $t('Apply_info.FileManagement.AdditionalProof') }}</span>
            <span class="line"></span>
          </div>
          <div class="Identity-img" v-for="(item, index) in filesOther" :key="index">
            <div class="id-img">
              <div
                class="pdfLink"
                v-if="item.urlOther.substr(-3, 3) == 'pdf' || item.urlOther.substr(-3, 3) == 'PDF'"
              >
                <a
                  style="display: inline-block; width: 100%; height: 100%"
                  :href="item.urlOther"
                  target="_blank"
                  ><i class="el-icon-document"></i
                ></a>
              </div>
              <el-image
                v-else
                style="width: 100%; height: 100%"
                :src="item.urlOther"
                :preview-src-list="[item.urlOther]"
              >
                <template #error>
                  <div class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </template>
              </el-image>
            </div>
            <span class="line"></span>
            <el-button style="border: none" type="text">
              <span v-if="item.status == 1" @click="imgApprove(5, item.id)">{{
                $t('State.ToBeProcessed')
              }}</span>
              <span v-if="item.status == 2" @click="imgApproveDe(5, item.id)">{{
                $t('State.Pass')
              }}</span>
              <span v-if="item.status == 3" @click="imgApproveDe(5, item.id)">{{
                $t('State.Refused')
              }}</span>
              <span v-if="item.status == 4" @click="imgApprove(5, item.id)">{{
                $t('State.ToBeProcessed')
              }}</span>
              <span v-if="!item.status">{{ $t('Placeholder.Not') }}</span>
            </el-button>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-form>

    <!-- 审批弹出 -->
    <el-dialog
      :title="$t('Customer_info.Files.Title')"
      v-model:visible="dialogCheck"
      center
      append-to-body
      @close="cancel"
      class="dialog_header_w"
    >
      <div class="dia-content">
        <el-form
          :model="dialogCheck_form"
          :rules="rules"
          ref="dialogCheckFormRef"
          label-width="135px"
          class="dialogCheck_form"
        >
          <el-form-item prop="" :label="$t('Label.Type') + '：'">
            <span v-if="dialogCheck_form.type == 1 || dialogCheck_form.type == 2">{{
              $t('Apply_info.FileManagement.ProofIdentity')
            }}</span>
            <span v-if="dialogCheck_form.type == 1">1</span>
            <span v-if="dialogCheck_form.type == 2">2</span>
            <span v-if="dialogCheck_form.type == 3">{{
              $t('Apply_info.FileManagement.ProofAddress')
            }}</span>
            <span v-if="dialogCheck_form.type == 5">{{
              $t('Apply_info.FileManagement.AdditionalProof')
            }}</span>
          </el-form-item>
          <el-form-item prop="status" :label="$t('Label.CheckResults') + '：'">
            <el-select
              style="width: 400px"
              class="crm_search_down"
              size="small"
              v-model="dialogCheck_form.status"
              :placeholder="$t('Placeholder.Choose')"
              @change="selectChange"
            >
              <el-option :label="$t('Apply_info.VerifiedUser.Refused')" :value="3"></el-option>
              <el-option :label="$t('Apply_info.VerifiedUser.Agree')" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            prop="approveDesc"
            :label="$t('Label.Descr') + '：'"
            v-if="dialogCheck_form.status == 3"
          >
            <el-select
              style="width: 400px"
              class="crm_search_down"
              size="small"
              v-model="dialogCheck_form.approveDesc"
              :placeholder="$t('Placeholder.Choose')"
              @change="selectChange"
              filterable
              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>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="toVerified()">{{ $t('Btn.Confirm') }}</el-button>
          <el-button @click="cancel">{{ $t('Btn.Cancel') }}</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 反审批弹出 -->
    <el-dialog
      :title="$t('Customer_info.Files.Title1')"
      v-model:visible="dialogCheck1"
      center
      append-to-body
      @close="cancel"
      class="dialog_header_w"
    >
      <div class="dia-content">
        <el-form
          :model="dialogCheck_form"
          :rules="rules"
          ref="dialogCheckFormRef"
          label-width="135px"
          class="dialogCheck_form"
        >
          <el-form-item prop="" :label="$t('Label.Type') + '：'">
            <span v-if="dialogCheck_form.type == 1 || dialogCheck_form.type == 2">{{
              $t('Apply_info.FileManagement.ProofIdentity')
            }}</span>
            <span v-if="dialogCheck_form.type == 1">1</span>
            <span v-if="dialogCheck_form.type == 2">2</span>
            <span v-if="dialogCheck_form.type == 3">{{
              $t('Apply_info.FileManagement.ProofAddress')
            }}</span>
            <span v-if="dialogCheck_form.type == 5">{{
              $t('Apply_info.FileManagement.AdditionalProof')
            }}</span>
          </el-form-item>
          <el-form-item prop="status" :label="$t('Label.Action') + '：'">
            <el-select
              style="width: 400px"
              class="crm_search_down"
              size="small"
              v-model="dialogCheck_form.status"
              :placeholder="$t('Placeholder.Choose')"
              @change="selectChange"
            >
              <el-option :label="$t('Customer_info.Real.Umpire')" :value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="approveDesc" :label="$t('Label.Descr') + '：'">
            <el-select
              style="width: 400px"
              class="crm_search_down"
              size="small"
              v-model="dialogCheck_form.approveDesc"
              :placeholder="$t('Placeholder.Choose')"
              @change="selectChange"
              filterable
              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>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="toVerifiedDe()">{{ $t('Btn.Confirm') }}</el-button>
          <el-button @click="cancel">{{ $t('Btn.Cancel') }}</el-button>
        </div>
      </template>
    </el-dialog>
    <ConsumerShareLink ref="consumerShareLinkRef" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, computed, watch, nextTick, inject } from 'vue'
  import Service from '@/service/customer'
  import Config from '@/config'
  import ConsumerShareLink from '@/views/components/ConsumerShareLink/index.vue'
  import { useI18n } from 'vue-i18n'

  const Session = inject('session')
  const Pigeon = inject('pigeon')

  const { t } = useI18n()

  const { Code, Host85, Host00 } = Config

  // Props
  const props = defineProps({
    dialogInfoCid: {
      type: Boolean,
      default: false,
    },
    type: {
      default: 0,
    },
    btn: {
      default: 0,
    },
    isTrading: {
      default: false,
    },
    formInfo: {
      default: '',
    },
  })

  // Emits
  const emit = defineEmits(['close'])

  // 响应式数据
  const reasons = ref({})
  const imgUrl = ref(Host85)
  const Host00Ref = ref(Host00)
  const Host85Ref = ref(Host85)
  const activeNames = ref(['1', '2', '3', '4', '5', '6', '7', '10'])
  const form = ref({})
  const info = ref({
    CID: '123456',
    name: 'QYY',
  })
  const dialogImageUrl = ref('')
  const imageUrl = ref('')
  const dialogVisible = ref(false)
  const tradingAccount = ref([
    { id: 1, account: '123456', type: '极速账户' },
    { id: 2, account: '123456', type: '高级账户' },
  ])
  const cardIndex = ref(-1)

  // 图片相关
  const files1 = ref({})
  const files2 = ref({})
  const files3 = ref({})
  const files5 = ref({})
  const filesOther = ref([])
  const url1 = ref('')
  const url2 = ref('')
  const url3 = ref('')
  const url5 = ref('')
  const srcList5 = ref([])
  const srcList1 = ref([])
  const srcList2 = ref([])
  const srcList3 = ref([])

  // 审批相关
  const dialogCheck = ref(false)
  const dialogCheck1 = ref(false)
  const dialogCheck_form = ref({})

  // 表单引用
  const formRef = ref()
  const dialogCheckFormRef = ref()
  const consumerShareLinkRef = ref()

  // 验证规则
  const rules = reactive({
    status: [
      {
        required: true,
        message: '请选择',
        trigger: 'blur',
      },
    ],
    approveDesc: [
      {
        required: true,
        message: '请选择',
        trigger: 'blur',
      },
    ],
  })

  // 计算属性
  const user = computed(() => {
    try {
      return JSON.parse(Session.Get('user', true) || '{}')
    } catch (error) {
      console.error('Error parsing user data:', error)
      return {}
    }
  })

  // 方法
  const selectChange = () => {
    // Vue 3 中通常不需要 $forceUpdate
  }

  const handleAvatarSuccess = (res, file) => {
    imageUrl.value = URL.createObjectURL(file.raw)
  }

  // card
  const cardTab = (index) => {
    if (cardIndex.value == index) {
      cardIndex.value = -1
    } else {
      cardIndex.value = index
    }
  }

  // 关闭
  const close = () => {
    emit('close', false)
  }

  // 审批图片
  const imgApprove = (val, id) => {
    if (val == 1) {
      dialogCheck_form.value.id = files1.value.id
      dialogCheck_form.value.customId = form.value.id
    } else if (val == 2) {
      dialogCheck_form.value.id = files2.value.id
      dialogCheck_form.value.customId = form.value.id
    } else if (val == 3) {
      dialogCheck_form.value.id = files3.value.id
      dialogCheck_form.value.customId = form.value.id
    } else if (val == 5) {
      dialogCheck_form.value.id = id
      dialogCheck_form.value.customId = form.value.id
    }
    dialogCheck_form.value.type = val
    dialogCheck.value = true
  }

  // 审核
  const toVerified = async () => {
    if (!dialogCheckFormRef.value) return

    try {
      const valid = await dialogCheckFormRef.value.validate()
      if (valid) {
        const res = await Service.customFileApprove({
          ...dialogCheck_form.value,
        })
        if (res.code == Code.StatusOK) {
          Pigeon.MessageOK(t('Msg.ModifySuccess'))
          form.value.files?.forEach((item) => {
            if (item.id == dialogCheck_form.value.id) {
              if (item.type == 1) {
                files1.value.status = dialogCheck_form.value.status
              }
              if (item.type == 2) {
                files2.value.status = dialogCheck_form.value.status
              }
              if (item.type == 3) {
                files3.value.status = dialogCheck_form.value.status
              }
              if (item.type == 10) {
                filesOther.value.forEach((fileItem) => {
                  if (fileItem.id == dialogCheck_form.value.id) {
                    fileItem.status = dialogCheck_form.value.status
                  }
                })
              }
            }
          })
          cancel()
        } else {
          Pigeon.MessageError(res.msg)
        }
      }
    } catch (error) {
      // 验证失败
    }
  }

  // 取消审核
  const cancel = () => {
    dialogCheck.value = false
    dialogCheck1.value = false
    if (dialogCheckFormRef.value) {
      dialogCheckFormRef.value.resetFields()
    }
  }

  // 反审批图片
  const imgApproveDe = (val, id) => {
    if (val == 1) {
      dialogCheck_form.value.id = files1.value.id
      dialogCheck_form.value.customId = form.value.id
    } else if (val == 2) {
      dialogCheck_form.value.id = files2.value.id
      dialogCheck_form.value.customId = form.value.id
    } else if (val == 3) {
      dialogCheck_form.value.id = files3.value.id
      dialogCheck_form.value.customId = form.value.id
    } else if (val == 5) {
      dialogCheck_form.value.id = id
      dialogCheck_form.value.customId = form.value.id
    }
    dialogCheck_form.value.type = val
    dialogCheck1.value = true
  }

  // 反审核
  const toVerifiedDe = async () => {
    if (!dialogCheckFormRef.value) return

    try {
      const valid = await dialogCheckFormRef.value.validate()
      if (valid) {
        const res = await Service.customFileApproveDe({
          ...dialogCheck_form.value,
        })
        if (res.code == Code.StatusOK) {
          Pigeon.MessageOK(t('Msg.ModifySuccess'))
          form.value.files?.forEach((item) => {
            if (item.id == dialogCheck_form.value.id) {
              if (item.type == 1) {
                files1.value.status = dialogCheck_form.value.status
              }
              if (item.type == 2) {
                files2.value.status = dialogCheck_form.value.status
              }
              if (item.type == 3) {
                files3.value.status = dialogCheck_form.value.status
              }
              if (item.type == 10) {
                filesOther.value.forEach((fileItem) => {
                  if (fileItem.id == dialogCheck_form.value.id) {
                    fileItem.status = dialogCheck_form.value.status
                  }
                })
              }
            }
          })
          cancel()
        } else {
          Pigeon.MessageError(res.msg)
        }
      }
    } catch (error) {
      // 验证失败
    }
  }

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

  const CopyShareLink = () => {
    nextTick(() => {
      if (props.formInfo.isAgent) {
        consumerShareLinkRef.value?.LinkActivity1({
          form: form.value,
          type: 2,
        })
      }
    })
  }

  // 监听器
  watch(
    () => props.dialogInfoCid,
    (type) => {
      if (type == false) {
        if (formRef.value) {
          formRef.value.resetFields()
        }
        form.value = {}
      }
    }
  )

  watch(
    () => props.formInfo,
    () => {
      searchReasons()
      form.value = props.formInfo
      url1.value = ''
      files1.value = {}
      url2.value = ''
      files2.value = {}
      url3.value = ''
      files3.value = {}
      url5.value = ''
      files5.value = {}
      filesOther.value = []

      if (form.value.files?.length) {
        filesOther.value = []
        form.value.files.forEach((item) => {
          if (item.type == 1) {
            files1.value = item
            url1.value = Host85Ref.value + (item.againPath || item.path)
            srcList1.value = [url1.value]
          }
          if (item.type == 2) {
            files2.value = item
            url2.value = Host85Ref.value + (item.againPath || item.path)
            srcList2.value = [url2.value]
          }
          if (item.type == 3) {
            files3.value = item
            url3.value = Host85Ref.value + (item.againPath || item.path)
            srcList3.value = [url3.value]
          }
          if (item.type == 10) {
            item.urlOther = Host85Ref.value + (item.againPath || item.path)
            filesOther.value.push(item)
          }
        })
      } else {
        url1.value = ''
        files1.value = {}
        url2.value = ''
        files2.value = {}
        url3.value = ''
        files3.value = {}
        url5.value = ''
        files5.value = {}
        filesOther.value = []
      }
    }
  )
</script>

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