gypsy-crm-frontend-vu/pages/mine/improveImmediately.vue

<template>
  <cwg-page-wrapper>
    <view class="page page-shadow">
      <uni-forms ref="formRef" :model="formData" :rules="rules" labelWidth="200" label-position="top"
        class="payment-form">
        <!-- 第一步：个人信息 -->
        <view v-show="currentStep === 1" class="form-section">
          <h3 class="section-title">{{ t('ImproveImmediately.Title.BasicInformation') }}</h3>
          <uni-row class="demo-uni-row uni-row1" :gutter="20">
            <!-- 客户类型 -->
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <uni-forms-item :label="t('ImproveImmediately.Label.CustomerType')">
                <cwg-combox :clearable="false" v-model:value="formData.customType" :options="customerTypeOptions"
                  :placeholder="t('placeholder.choose')" />
              </uni-forms-item>
            </uni-col>
            <!-- 公司名称 -->
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="formData.customType == 2">
              <uni-forms-item :label="t('ImproveImmediately.Label.CompanyName')">
                <uni-easyinput :clearable="false" v-model="formData.companyName"
                  :placeholder="t('placeholder.input')" />
              </uni-forms-item>
            </uni-col>
            <!-- 姓 -->
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <uni-forms-item :label="formData.customType == 2
                ? t('ImproveImmediately.Label.CorporationLastName')
                : t('ImproveImmediately.Label.LastName')">
                <uni-easyinput :clearable="false" v-model="formData.lastName" :placeholder="t('placeholder.input')" />
              </uni-forms-item>
            </uni-col>
            <!-- 名 -->
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <uni-forms-item :label="formData.customType == 2
                ? t('ImproveImmediately.Label.CorporationName')
                : t('ImproveImmediately.Label.Name')">
                <uni-easyinput :clearable="false" v-model="formData.firstName" :placeholder="t('placeholder.input')" />
              </uni-forms-item>
            </uni-col>
            <!-- 法人中间名 -->
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="locale == 'en'">
              <uni-forms-item name="middle" :label="t('placeholder.middle')">
                <uni-easyinput :clearable="false" v-model="formData.middle" :placeholder="t('placeholder.input')" />
              </uni-forms-item>
            </uni-col>
            <!-- 国家 -->
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="countryOptions.length > 0">
              <uni-forms-item name="nationality" :label="t('ImproveImmediately.Label.Nationality')">
                <cwg-combox :clearable="false" :filterable="true" v-model:value="formData.nationality"
                  :options="countryOptions" :placeholder="t('placeholder.choose')" />
              </uni-forms-item>
            </uni-col>
            <!-- 证件类型 -->
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <uni-forms-item name="IdentityType" :label="identityLabel">
                <cwg-combox :clearable="false" v-model:value="formData.IdentityType" :options="identityTypes"
                  :placeholder="t('placeholder.choose')" />
              </uni-forms-item>
            </uni-col>
            <!-- 证件号 -->
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <uni-forms-item name="identity" :label="t('ImproveImmediately.Label.IdentityID')">
                <uni-easyinput :clearable="false" v-model="formData.identity" :placeholder="t('placeholder.input')" />
              </uni-forms-item>
            </uni-col>
            <!-- 拼音 -->
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="['cn', 'zhHant'].includes(locale)">
              <uni-forms-item name="nameEn" :label="t('ImproveImmediately.Label.NamePinYin')">
                <uni-easyinput :clearable="false" v-model="formData.nameEn" :placeholder="t('placeholder.input')" />
              </uni-forms-item>
            </uni-col>
            <!-- 性别 -->
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <uni-forms-item name="gender" :label="t('ImproveImmediately.Label.Gender')">
                <cwg-combox :clearable="false" v-model:value="formData.gender" :options="genderOptions"
                  :placeholder="t('placeholder.choose')" />
              </uni-forms-item>
            </uni-col>
            <!-- 生日 -->
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <uni-forms-item name="birth" :label="t('ImproveImmediately.Label.Birthday')">
                <uni-datetime-picker :clear-icon="false" type="date" return-type="timestamp" v-model="formData.birth"
                  :placeholder="t('placeholder.choose')" />
              </uni-forms-item>
            </uni-col>
            <uni-col :span="24">
              <view class="crm-title-box">
                <text class="tit">{{ t('ImproveImmediately.Title.AddressInformation') }}</text>
                <uni-tooltip :placement="isMobile ? 'left' : 'top'">
                  <text class="icon-tip">ⓘ</text>
                  <template v-slot:content>
                    <view class="address-tip">
                      {{ t('ImproveImmediately.Title.AddressTip') }}
                    </view>
                  </template>
                </uni-tooltip>

              </view>
            </uni-col>

            <!-- 国家/地区 -->
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="countryOptions.length > 0">
              <uni-forms-item name="country" :label="t('ImproveImmediately.Label.CountryRegionOfResidence')">
                <cwg-combox :clearable="false" :filterable="true" v-model:value="formData.country"
                  :options="countryOptions" :placeholder="t('placeholder.choose')" @change="changeCountry" />
              </uni-forms-item>
            </uni-col>
            <!-- 省份/州 -->
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
              v-if="formData.country == 'CN' || formData.country == 'CNX' || formData.country == 'CNA' || formData.country == 'CNT'">
              <uni-forms-item name="state" :label="t('ImproveImmediately.Label.ProvinceRegion')">
                <cwg-combox :clearable="false" :filterable="true" v-model:value="formData.state" :options="stateOptions"
                  :placeholder="t('placeholder.choose')" @change="changeState" />
              </uni-forms-item>
            </uni-col>
            <!-- 国外省份/州 -->
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-else>
              <uni-forms-item name="state" :label="t('ImproveImmediately.Label.ProvinceRegion')">
                <uni-easyinput :clearable="false" v-model="formData.state" :placeholder="t('placeholder.input')" />
              </uni-forms-item>
            </uni-col>
            <!-- 城市 -->
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
              v-if="formData.country == 'CN' || formData.country == 'CNX' || formData.country == 'CNA' || formData.country == 'CNT'">
              <uni-forms-item name="city" :label="t('ImproveImmediately.Label.City')">
                <cwg-combox :clearable="false" :filterable="true" v-model:value="formData.city" :options="cityOptions"
                  :placeholder="t('placeholder.choose')" />
              </uni-forms-item>
            </uni-col>
            <!-- 国外城市 -->
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-else>
              <uni-forms-item name="city" :label="t('ImproveImmediately.Label.City')">
                <uni-easyinput :clearable="false" v-model="formData.city" :placeholder="t('placeholder.input')" />
              </uni-forms-item>
            </uni-col>
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <uni-forms-item name="addressLines1" :label="t('ImproveImmediately.Label.DetailedAddress')">
                <uni-easyinput :clearable="false" v-model="formData.addressLines1"
                  :placeholder="t('placeholder.input')" />
              </uni-forms-item>
            </uni-col>
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <uni-forms-item name="zipCode" :label="t('ImproveImmediately.Label.ZipCode')">
                <uni-easyinput :clearable="false" v-model="formData.zipCode" :placeholder="t('placeholder.input')" />
              </uni-forms-item>
            </uni-col>
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <uni-forms-item name="addressLines2" :label="t('ImproveImmediately.Label.DetailedAddressStandby')">
                <uni-easyinput :clearable="false" v-model="formData.addressLines2"
                  :placeholder="t('placeholder.input')" />
              </uni-forms-item>
            </uni-col>
          </uni-row>
        </view>
        <!-- 第二步：财务背景 -->
        <view v-show="currentStep === 2" class="form-section">
          <h3 class="section-title">{{ t('ImproveImmediately.Title.FinancialBackground') }}</h3>
          <uni-row class="demo-uni-row uni-row1" :gutter="20">
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <uni-forms-item name="level" :label="t('ImproveImmediately.Label.Education')">
                <cwg-combox :clearable="false" v-model:value="formData.level" :options="educationOptions"
                  :placeholder="t('placeholder.choose')" />
              </uni-forms-item>
            </uni-col>
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <uni-forms-item name="employmentStatus" :label="t('ImproveImmediately.Label.OnJob')">
                <cwg-combox :clearable="false" v-model:value="formData.employmentStatus" :options="employmentOptions"
                  :placeholder="t('placeholder.choose')" />
              </uni-forms-item>
            </uni-col>
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <uni-forms-item name="tradingObjectives" :label="t('ImproveImmediately.Label.purposeTransaction')">
                <cwg-combox :clearable="false" v-model:value="formData.tradingObjectives"
                  :options="transactionPurposeOptions" :placeholder="t('placeholder.choose')" />
              </uni-forms-item>
            </uni-col>
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <uni-forms-item name="sourceFunding" :label="t('ImproveImmediately.Label.SourceFunds')">
                <cwg-combox :clearable="false" v-model:value="formData.sourceFunding" :options="fundSourceOptions"
                  :placeholder="t('placeholder.choose')" />
              </uni-forms-item>
            </uni-col>
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <uni-forms-item name="grossAnnualIncome" :label="t('ImproveImmediately.Label.TotalAnnualRevenue')">
                <cwg-combox :clearable="false" v-model:value="formData.grossAnnualIncome" :options="annualIncomeOptions"
                  :placeholder="t('placeholder.choose')" />
              </uni-forms-item>
            </uni-col>
            <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <uni-forms-item name="totalNewWorth" :label="t('ImproveImmediately.Label.TotalNetAssets')">
                <cwg-combox :clearable="false" v-model:value="formData.totalNewWorth" :options="netWorthOptions"
                  :placeholder="t('placeholder.choose')" />
              </uni-forms-item>
            </uni-col>
          </uni-row>
          <h3 class="section-title">{{ t('ImproveImmediately.Title.TradingExperience') }}</h3>
          <view class="experience">
            <text class="Trad-experience">{{ t('ImproveImmediately.Content.TradingExperience1') }}</text>
            <view class="Trad-choose">
              <uni-data-checkbox v-model="formData.experienceTradingDerivative"
                :localdata="radioList"></uni-data-checkbox>
            </view>
          </view>
          <view class="experience">
            <text class="Trad-experience">{{ t('ImproveImmediately.Content.TradingExperience2') }}</text>
            <view class="Trad-choose">
              <uni-data-checkbox v-model="formData.experienceTradingForex" :localdata="radioList"></uni-data-checkbox>
            </view>
          </view>
          <view class="experience">
            <text class="Trad-experience">{{ t('ImproveImmediately.Content.TradingExperience3') }}</text>
            <view class="Trad-choose">
              <uni-data-checkbox v-model="formData.derivativeProducts" :localdata="radioList"></uni-data-checkbox>
            </view>
          </view>
          <view class="experience">
            <text class="Trad-experience">{{ t('ImproveImmediately.Content.TradingExperience4') }}</text>
            <view class="Trad-choose">
              <uni-data-checkbox v-model="formData.experienceQualification" :localdata="radioList"></uni-data-checkbox>
            </view>
          </view>
        </view>
        <!-- 第三步：身份证明 -->
        <view v-show="currentStep === 3" class="form-section">

          <uni-row class="demo-uni-row uni-row1" :gutter="20">
            <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <view class="crm-title-box">
                <text class="tit">{{ t('ImproveImmediately.Title.ProofIdentityUpdate') }}</text>
                <uni-tooltip :placement="isMobile ? 'left' : 'bottom'">
                  <text class="icon-tip">ⓘ</text>
                  <template v-slot:content>
                    <view class="address-tip">
                      {{ t('ImproveImmediately.Content.popover1') }}
                    </view>
                  </template>
                </uni-tooltip>

              </view>
              <uni-forms-item name="cardType" :label="t('ImproveImmediately.Label.CardType')">
                <cwg-combox :clearable="false" v-model:value="formData.cardType" :options="cardTypeOptions"
                  :placeholder="t('placeholder.choose')" />
              </uni-forms-item>
              <uni-row class="demo-uni-row uni-row1" :gutter="20">
                <uni-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" class="mb-3">
                  <cwg-file-picker-wrapper v-model="fileListID1.path" :disabled="fileListID1.status == 2" :limit="1"
                    :delIcon="fileListID1.status != 2" :fileMediatype="'all'" uploadUrl="/custom/file/upload/1"
                    :baseUrl="updateUrl" :imageWidth="150" :imageHeight="150" :showPreviewDelete="false"
                    :canDelete="false" :uploadError="false" :showProgress="false" :showError="false"
                    :image-styles="imageStyle" @update:modelValue="(val) => handleFileUpdate(val, '1')"
                    customClass="avatar-uploader">
                  </cwg-file-picker-wrapper>
                  <!--                  <view v-else>-->
                  <!--                    <view class="file-item">-->
                  <!--                      <image-->
                  <!--                        v-if="!isPdf(fileListID1.path)"-->
                  <!--                        class="avatar"-->
                  <!--                        :src="updateUrl + fileListID1.path"-->
                  <!--                      ></image>-->
                  <!--                      <view v-else>-->
                  <!--                        <image class="icon" :src="icon_doc" />-->
                  <!--                      </view>-->

                  <!--                    </view>-->
                  <!--                  </view>-->
                </uni-col>
                <uni-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
                  <cwg-file-picker-wrapper v-model="fileListID2.path" :disabled="fileListID2.status == 2" :limit="1"
                    :delIcon="fileListID2.status != 2" :fileMediatype="'all'" uploadUrl="/custom/file/upload/2"
                    :baseUrl="updateUrl" :imageWidth="150" :imageHeight="150" :showPreviewDelete="false"
                    :canDelete="false" :uploadError="false" :showProgress="false" :canChoose="true" :showError="false"
                    :image-styles="imageStyle" @update:modelValue="(val) => handleFileUpdate(val, '2')"
                    customClass="avatar-uploader">
                  </cwg-file-picker-wrapper>
                </uni-col>
                <uni-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
                  <view class="refresh">
                    <image :src="icon_refresh" @click="getCustomFileList" />
                  </view>
                </uni-col>
              </uni-row>
            </uni-col>
            <cwg-match-media :min-width="991">
              <uni-col v-if="isPC" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <view class="crm-title-box">
                  <text class="tit">{{ t('ImproveImmediately.Title.MobileDeviceUpload') }}</text>
                  <uni-tooltip :placement="isMobile ? 'left' : 'bottom'">
                    <text class="icon-tip">ⓘ</text>
                    <template v-slot:content>
                      <view class="address-tip">
                        {{ t('ImproveImmediately.Content.popover2') }}
                      </view>
                    </template>
                  </uni-tooltip>
                </view>
                <view class="con-box">
                  <view class="box">
                    <image class="mobile" :src="icon_mobile" />
                    <image class="arrow" :src="icon_arrowR" />
                    <image class="img_mobile" style="
                      display: inline-block;
                      width: 120px;
                      height: 120px;
                      border: 8px solid var(--color-gray);
                    " :src="mobile">
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </image>
                    <image class="icon_refresh" :src="icon_refresh" @click="getMobileInfo" />
                  </view>
                </view>

              </uni-col>
            </cwg-match-media>
          </uni-row>
          <view class="descending">
            <p class="title">
              <span class="dian1">·</span>
              <span>{{ t('ImproveImmediately.Title.IdentificationStatement') }}</span>
            </p>
            <p class="des">
              <span class="dian">-</span>
              <span>{{ t('ImproveImmediately.Content.ProofIdentity4') }}</span>
            </p>
            <p class="des">
              <span class="dian">-</span>
              <span>{{ t('ImproveImmediately.Content.ProofIdentity5') }}</span>
            </p>
            <p class="des" v-if="['cn', 'zhHant'].indexOf(locale) == -1">
              <span class="dian">-</span>
              <span>{{ t('ImproveImmediately.Content.ProofIdentity6') }}</span>
            </p>
            <p class="des">
              <span class="dian">·</span>
              <span>{{ t('ImproveImmediately.Content.ProofIdentity1') }}</span>
            </p>
            <p class="des">
              <span class="dian">·</span>
              <span>{{ t('ImproveImmediately.Content.ProofIdentity2') }}</span>
            </p>
            <p class="des">
              <span class="dian">·</span>
              <span>{{ t('ImproveImmediately.Content.ProofIdentity3') }}</span>
            </p>
            <p class="des" v-if="['cn', 'zhHant'].indexOf(locale) == -1">
              <span class="dian">·</span>
              <span>{{ t('ImproveImmediately.Content.ProofIdentity7') }}</span>
            </p>
            <p class="des" v-if="['cn', 'zhHant'].indexOf(locale) == -1">
              <span class="dian">·</span>
              <span>{{ t('ImproveImmediately.Content.ProofIdentity8') }}</span>
            </p>
          </view>
        </view>
        <!-- 第四步：地址证明 -->
        <view v-show="currentStep === 4" class="form-section">
          <!--去掉地址证明-->
          <!--          <uni-row class="demo-uni-row uni-row1">
            <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <view class="crm-title-box">
                <text class="tit">{{ t('ImproveImmediately.Title.ProofAddress') }}</text>
                <uni-tooltip placement="bottom">
                  <text class="icon-tip">ⓘ</text>
                  <template v-slot:content>
                    <view class="address-tip">
                      {{ t('ImproveImmediately.Content.ProofAddress5') }}
                    </view>
                  </template>
                </uni-tooltip>

              </view>
              <uni-row class="demo-uni-row uni-row1">
                <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
                  <cwg-file-picker-wrapper
                    v-model="fileListAdd1.path"
                    :editable="fileListAdd1.status != 2"
                    :limit="1"
                    :fileMediatype="'all'"
                    uploadUrl="/custom/file/upload/3"
                    :baseUrl="updateUrl"
                    :imageWidth="150"
                    :imageHeight="150"
                    :showPreviewDelete="false"
                    :canDelete="false"
                    :uploadError="false"
                    :showProgress="false"
                    :canChoose="true"
                    :showError="false"
                    :show-progress="false"
                    disablePreview
                    :image-styles="imageStyle"
                    @update:modelValue="(val) => handleFileUpdate(val, '1')"
                    customClass="avatar-uploader"
                  >
                    <view class="file-item">
                      <image
                        v-if="!isPdf(fileListAdd1.path)"
                        class="avatar"
                        :src="updateUrl + fileListAdd1.path"
                      ></image>
                      <view v-else>
                        <image class="icon" :src="icon_doc" />
                      </view>
                    </view>
                  </cwg-file-picker-wrapper>
                </uni-col>
                <uni-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
                  <view class="refresh">
                    <image :src="icon_refresh" @click="getCustomFileList" />
                  </view>
                </uni-col>
              </uni-row>
            </uni-col>
            <uni-col v-if="isPC" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <view class="crm-title-box">
                <text class="tit">{{ t('ImproveImmediately.Title.MobileDeviceUpload') }}</text>
                <uni-tooltip placement="bottom">
                  <text class="icon-tip">ⓘ</text>
                  <template v-slot:content>
                    <view class="address-tip">
                      {{ t('ImproveImmediately.Content.popover2') }}
                    </view>
                  </template>
                </uni-tooltip>
              </view>
              <view class="con-box">
                <view class="box">
                  <cwg-icon name="icon_mobile" :size="50"/>
&lt;!&ndash;                  <image class="mobile" :src="icon_mobile" />&ndash;&gt;
                  <image class="arrow" :src="icon_arrowR" />
                  <image
                    class="img_mobile"
                    style="
                      display: inline-block;
                      width: 120px;
                      height: 120px;
                      border: 8px solid var(&#45;&#45;color-gray);
                    "
                    :src="mobile"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </image>
                  <image class="icon_refresh" :src="icon_refresh" @click="getMobileInfo" />
                </view>
              </view>

            </uni-col>
          </uni-row>-->
          <uni-row class="demo-uni-row uni-row1" :gutter="20">
            <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <view class="crm-title-box">
                <text class="tit">{{ t('PersonalManagement.Title.AttachedFile') }}</text>
              </view>
              <uni-row class="demo-uni-row uni-row1" :gutter="20">
                <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <cwg-file-picker-wrapper :limit="9" :multiple="true" :fileMediatype="'all'"
                    uploadUrl="/custom/file/upload/10" :baseUrl="updateUrl" :imageWidth="100" :imageHeight="60"
                    noFileList :showPreviewDelete="false" :canDelete="false" :uploadError="false" :showProgress="false"
                    :image-styles="imageStyle" @update:modelValue="(val) => handleFileUpdate(val, '10')"
                    custom-class="fileOther" :showError="false">
                    <template #add-button="{ handleChoose }">
                      <button hover-class="" type="primary" class="btn btn-danger waves-effect waves-light btn-upload"
                        @click="handleChoose">{{ t('Btn.Upload') }}</button>
                    </template>

                  </cwg-file-picker-wrapper>
                  <view class="fileList">
                    <view id="files" v-for="(item, index) in fileListOthers" :key="index">
                      <cwg-file-picker-wrapper customClass="list_upload" v-model="item.path"
                        :disabled="item.status == 2" :limit="1" :fileMediatype="'all'"
                        :uploadUrl="'/custom/file/upload/10/' + item.id" :baseUrl="updateUrl" :uploadError="false"
                        :showProgress="false" :imageWidth="200" :imageHeight="150" :showPreviewDelete="true"
                        :disablePreview="true" :image-styles="imageStyle" :canChoose="true"
                        @update:modelValue="(val) => handleFileUpdate(val, '1')">
                      </cwg-file-picker-wrapper>
                      <view class="options">
                        <u-button style="margin-right: 20px;" :disabled="item.status == 2" @click.stop="showFile(item)">
                          <a :href="updateUrl + (item.againPath || item.path)" target="_blank">
                            {{ t('Btn.item12') }}
                          </a>
                        </u-button>
                        <u-button :disabled="item.status == 2" @click="fileOtherDelete(item.id)">
                          {{ t('Btn.Delete') }}
                        </u-button>
                      </view>
                    </view>
                  </view>
                </uni-col>
                <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <view class="refresh">
                    <image :src="icon_refresh" @click="getCustomFileList" />
                  </view>
                </uni-col>
              </uni-row>
            </uni-col>
          </uni-row>
          <view class="descending">
            <p class="title">
              <span>{{ t('ImproveImmediately.item1') }}</span>
            </p>
            <p class="des">
              <span>{{ t('ImproveImmediately.item2') }}</span>
            </p>
            <p class="des">
              <span>{{ t('ImproveImmediately.item3') }}</span>
            </p>
            <p class="des">
              <span>{{ t('ImproveImmediately.item4') }}</span>
            </p>
          </view>
        </view>
        <!-- 步骤控制按钮 -->
        <view>
          <template v-if="currentStep === 4">
            <view class="btns">
              <view class="cwg-button two-btn">
                <button hover-class="" class="btn btn-danger" type="primary" block @click="cancle">
                  {{ t('Btn.Cancel') }}
                </button>
                <button hover-class="" block class="btn btn-danger" type="primary" @click="goStep(3)">
                  {{ t('Btn.Last') }}
                </button>
                <button hover-class="" type="primary" class="btn btn-danger" block :loading="loadingStates.submit"
                  @click="Submit">
                  {{ t('Btn.Submit') }}
                </button>
              </view>
            </view>
          </template>
          <template v-else-if="currentStep === 3">
            <view class="btns">
              <view class="cwg-button two-btn">
                <button hover-class="" class="btn btn-danger" type="primary" block @click="cancle">
                  {{ t('Btn.Cancel') }}
                </button>
                <button hover-class="" block class="btn prev-btn btn-danger" type="primary" @click="goStep(2)">
                  {{ t('Btn.Last') }}
                </button>
                <button hover-class="" class="btn btn-danger" type="primary" block :loading="loadingStates.next"
                  @click="goStep(4)">
                  {{ t('Btn.Next') }}
                </button>
              </view>
            </view>
          </template>
          <template v-else-if="currentStep === 2">
            <view class="btns">
              <view class="cwg-button two-btn">
                <button hover-class="" class="btn btn-danger" type="primary" block @click="cancle">
                  {{ t('Btn.Cancel') }}
                </button>
                <button hover-class="" block class="btn prev-btn btn-danger" type="primary" @click="goStep(1)">
                  {{ t('Btn.Last') }}
                </button>
                <button hover-class="" class="btn btn-danger" type="primary" block :loading="loadingStates.next"
                  @click="goStep(3)">
                  {{ t('Btn.Next') }}
                </button>
              </view>
            </view>
          </template>
          <template v-else-if="currentStep === 1">
            <view class="btns">
              <view class="cwg-button two-btn">
                <button hover-class="" class="btn btn-danger" type="primary" block @click="cancle">
                  {{ t('Btn.Cancel') }}
                </button>
                <button hover-class="" class="btn btn-danger" type="primary" block :loading="loadingStates.next"
                  @click="goStep(2)">
                  {{ t('Btn.Next') }}
                </button>
              </view>
            </view>
          </template>
        </view>
      </uni-forms>
    </view>
    <view class="form-tab"></view>
  </cwg-page-wrapper>
  <!--离开弹出框-->
  <uni-popup ref="dialogCheck" type="center" background-color="#fff" borderRadius="8px 8px 8px 8px">
    <view class="dia-content" v-if="dialogCheck1">
      <view class="icon">
        <i class="iconfont iconjingshi"></i>
      </view>
      <view class="des1">{{ t('ImproveImmediately.Content.Leave1') }}</view>
      <view class="des2">{{ t('ImproveImmediately.Content.Leave2') }}</view>
      <view class="dialog-footer">
        <view class="btn-content">
          <button hover-class="" class="cancel-btn" @click="closeDia">
            {{ t('Btn.TemporarilyNot') }}
          </button>
          <button hover-class="" class="confirm-btn primary" @click="save">
            {{ t('Btn.Save') }}
          </button>
        </view>
      </view>
    </view>
    <view class="dia-content" v-if="!dialogCheck1">
      <view class="icon">
        <cwg-icon :size="60" name="verified" :color="'#4a6cf7'" />
      </view>
      <view class="des1">{{ t('ApplicationDialog.Des1') }}</view>
      <QrCode v-if="text1" :text="text1"></QrCode>
      <view class="dialog-footer">
        <view class="btn-content">
          <button hover-class="" class="cancel-btn" @click="closeDia">
            {{ t('Btn.Cancel') }}
          </button>
          <button hover-class="" class="confirm-btn primary" @click="toHome">
            {{ t('Btn.Home') }}
          </button>
        </view>
      </view>
    </view>
  </uni-popup>
  <cwg-global-popup />
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { onLoad } from '@dcloudio/uni-app'
import { personalApi } from '@/service/personal'
import Config from '@/config/index'
import QrCode from '@/components/QRCode.vue'
import { userToken } from '@/composables/config'
import useRouter from '@/hooks/useRouter'
import { Patterns, Validators } from '@/utils/validators'
import { pinyin } from 'pinyin-pro'
import config from '@/config/index'
import icon_doc from '@/static/icons/crm-document.svg'
import icon_refresh from '@/static/icons/crm-refresh.svg'
import icon_mobile from '@/static/icons/icon_mobile.svg'
import icon_arrowR from '@/static/icons/icon_arrowR.svg'
import { useWindowWidth } from '@/composables/useWindowWidth'
import { usePopup } from '@/hooks/usePopup'
import useUserStore from '@/stores/use-user-store'
const { confirm, toast } = usePopup()
const router = useRouter()
const { t, locale } = useI18n()
const currentStep = ref<number>(3)
const formRef = ref()
const dialogCheck = ref(null)
const dialogCheck1 = ref(false)
const text1 = ref('')
const qrCodeStatus = ref(false)
const addressTipPopup = ref()
const windowWidth = useWindowWidth(300)
const isMobile = computed(() => windowWidth.value <= 991)
const userStore = useUserStore()

// 新增的响应式数据
const divActiveHelf = ref(false)
const divActiveAll = ref(false)
const websock = ref(null)
const isPC = ref(true)
const fileListID1 = ref({ againPath: '', id: null, path: '', status: null, type: null })
const fileListID2 = ref({ againPath: '', id: null, path: '', status: null, type: null })
const fileListAdd1 = ref({ againPath: '', id: null, path: '', status: null, type: null })
const fileListAdd2 = ref({ againPath: '', id: null, path: '', status: null, type: null })
const fileListOthers = ref([])
const actionID1 = ref('')
const actionID2 = ref('')
const actionAdd1 = ref('')
const actionAdd2 = ref('')
const actionOtherAdd = ref('')
const flag = ref(false)
const pictLoading = ref(false)
const pictLoadingImg = ref(false)
const isApprove = ref(false)
const metaInfo = ref({})
const HostWs = ref(Config.HostWs)
const cities = ref([])
const states = ref([])
const countries = ref([])
const uploadImage = ref(0)
const updateUrl = config.Host80
const mobile = ref('')
const notCountry = [
  'AF',
  'AI',
  'AG',
  'BS',
  'BY',
  'BZ',
  'BA',
  'BI',
  'CF',
  'CD',
  'CU',
  'ET',
  'FJ',
  'PS',
  'GN',
  'GW',
  'HT',
  'IR',
  'IQ',
  'LB',
  'LY',
  'ML',
  'MM',
  'NI',
  'KP',
  'PW',
  'RU',
  'SO',
  'SS',
  'SD',
  'SY',
  'UA',
  'US',
  'VE',
  'YE',
  'ZW',
]

const imageStyle = ref({
  width: 200,
  height: 150,
  border: {
    radius: '5px',
  },
})

// 验证函数
function validateName(a: any, b?: any, c?: any) {
  const reg = /^[A-Z\s]+$/i
  if (typeof c === 'function') {
    const value = b
    const callback = c
    const val = String(value ?? '').trim()
    if (!val) return callback(new Error(t('card.vaildate.v4')))
    if (!reg.test(val)) return callback(new Error(t('card.vaildate.v38')))
    if (val.length < 2 || val.length > 23) return callback(new Error(t('card.vaildate.v39')))
    const firstName = String(formData.value?.firstName ?? '').trim()
    const lastName = String(formData.value?.lastName ?? '').trim()
    if (`${firstName} ${lastName}`.length > 23) return callback(new Error(t('card.vaildate.v40')))
    return callback()
  }
  const val = String(a ?? '').trim()
  if (!val) return t('card.vaildate.v4')
  if (!reg.test(val)) return t('card.vaildate.v38')
  if (val.length < 2 || val.length > 23) return t('card.vaildate.v39')
  const firstName = String(formData.value?.firstName ?? '').trim()
  const lastName = String(formData.value?.lastName ?? '').trim()
  if (`${firstName} ${lastName}`.length > 23) return t('card.vaildate.v40')
  return true
}

function validateBirthday(a: any, b?: any, c?: any) {
  if (typeof c === 'function') {
    const value = b
    const callback = c
    const val = value
    if (!val) return callback(new Error(t('card.vaildate.v5')))
    const today = new Date()
    const birthDate = new Date(val)
    let age = today.getFullYear() - birthDate.getFullYear()
    const month = today.getMonth() - birthDate.getMonth()
    if (month < 0 || (month === 0 && today.getDate() < birthDate.getDate())) age--
    if (age < 18) return callback(new Error(t('card.New.n3')))
    return callback()
  }
  const val = a
  if (!val) return t('card.vaildate.v5')
  const today = new Date()
  const birthDate = new Date(val)
  let age = today.getFullYear() - birthDate.getFullYear()
  const month = today.getMonth() - birthDate.getMonth()
  if (month < 0 || (month === 0 && today.getDate() < birthDate.getDate())) age--
  return age < 18 ? t('card.New.n3') : true
}

function validateAddress(a: any, b?: any, c?: any) {
  if (typeof c === 'function') {
    const value = b
    const callback = c
    const val = String(value ?? '').trim()
    if (!val) return callback(new Error(t('card.vaildate.v27')))
    if (val.length < 2 || val.length > 40) return callback(new Error(t('card.New.n1')))
    if (!Patterns.address.test(val)) return callback(new Error(t('card.New.n1')))
    return callback()
  }
  const val = String(a ?? '').trim()
  if (!val) return t('card.vaildate.v27')
  if (val.length < 2 || val.length > 40) return t('card.New.n1')
  return Patterns.address.test(val) ? true : t('card.New.n1')
}

const rules = computed(() => ({
  customType: [Validators.required(t('card.vaildate.v1'))],
  firstName: [Validators.required(t('card.vaildate.v3')), Validators.custom(validateName)],
  lastName: [Validators.required(t('card.vaildate.v4')), Validators.custom(validateName)],
  nationality: [Validators.required(t('card.vaildate.v6'), 'change')],
  IdentityType: [Validators.required(t('card.vaildate.v1'))],
  identity: [Validators.required(t('card.vaildate.v4'))],
  gender: [Validators.required(t('card.vaildate.v9'), 'change')],
  birth: [
    Validators.required(t('card.vaildate.v5'), 'change'),
    Validators.custom(validateBirthday, 'change'),
  ],
  country: [Validators.required(t('card.vaildate.v1'))],
  state: [Validators.required(t('card.vaildate.v1'))],
  city: [Validators.required(t('card.vaildate.v1'))],
  addressLines1: [Validators.required(t('card.vaildate.v27')), Validators.custom(validateAddress)],
  zipCode: [
    Validators.required(t('card.vaildate.v8')),
    Validators.pattern(Patterns.postcode, t('card.New.n2')),
  ],
  level: [Validators.required(t('card.vaildate.v1'))],
  employmentStatus: [Validators.required(t('card.vaildate.v1'))],
  tradingObjectives: [Validators.required(t('card.vaildate.v1'))],
  sourceFunding: [Validators.required(t('card.vaildate.v1'))],
  grossAnnualIncome: [Validators.required(t('card.vaildate.v1'))],
  totalNewWorth: [Validators.required(t('card.vaildate.v1'))],
  cardType: [Validators.required(t('card.vaildate.v1'))],
  idFrontUrl: [Validators.required(t('card.vaildate.v1'))],
  idBackUrl: [Validators.required(t('card.vaildate.v1'))],
  addressProofUrl: [Validators.required(t('card.vaildate.v1'))],
}))

onLoad((options) => {
  currentStep.value = parseInt(options?.currentStep || '1', 10)
})

function goStep(step: number) {
  console.log(step, 'step')
  if (step == 2) {
    if (!formData.value?.identity) {
      toast(t('vaildate.IDCard.empty'))
      return
    }
  }
  if (step == 4) {
    if (currentUploadCard.value == 1) {
      if (!formData.value.cardType) {
        toast(t('vaildate.CardType.empty'))
        return
      }
      if (!fileListID1.value.path || !fileListID2.value.path) {
        toast(t('vaildate.IDPhoto.empty'))
        return
      }
    }
  }
  currentStep.value = step
}

// 选项数据
const customerTypeOptions = computed(() => [
  { value: 1, text: t('ImproveImmediately.Label.CustomerType1') },
  { value: 2, text: t('ImproveImmediately.Label.CustomerType2') },
])

const identityTypes = computed(() => [
  { text: t('ImproveImmediately.Label.IDCard'), value: 2 },
  { text: t('ImproveImmediately.Label.Passport'), value: 3 },
])

const genderOptions = computed(() => [
  { value: 1, text: t('PersonalManagement.Label.Men') },
  { value: 2, text: t('PersonalManagement.Label.Women') },
])
const radioList = computed(() => [
  { value: 1, text: t('ImproveImmediately.Label.Yes') },
  { value: 0, text: t('ImproveImmediately.Label.No') },
])

const educationOptions = computed(() => [
  { value: 1, text: t('ImproveImmediately.Label.Education1') },
  { value: 2, text: t('ImproveImmediately.Label.Education2') },
  { value: 3, text: t('ImproveImmediately.Label.Education3') },
  { value: 4, text: t('ImproveImmediately.Label.Education4') },
  { value: 5, text: t('ImproveImmediately.Label.Education5') },
])

const employmentOptions = computed(() => [
  { value: 1, text: t('ImproveImmediately.Label.OnJob1') },
  { value: 2, text: t('ImproveImmediately.Label.OnJob2') },
  { value: 3, text: t('ImproveImmediately.Label.OnJob3') },
  { value: 4, text: t('ImproveImmediately.Label.OnJob4') },
  { value: 5, text: t('ImproveImmediately.Label.OnJob5') },
])

const transactionPurposeOptions = computed(() => [
  { value: 1, text: t('ImproveImmediately.Label.purposeTransaction1') },
  { value: 2, text: t('ImproveImmediately.Label.purposeTransaction2') },
  { value: 3, text: t('ImproveImmediately.Label.purposeTransaction3') },
  { value: 4, text: t('ImproveImmediately.Label.purposeTransaction4') },
])

const fundSourceOptions = computed(() => [
  { value: 1, text: t('ImproveImmediately.Label.SourceFunds1') },
  { value: 2, text: t('ImproveImmediately.Label.SourceFunds2') },
  { value: 3, text: t('ImproveImmediately.Label.SourceFunds3') },
  { value: 4, text: t('ImproveImmediately.Label.SourceFunds4') },
  { value: 5, text: t('ImproveImmediately.Label.SourceFunds5') },
  { value: 6, text: t('ImproveImmediately.Label.SourceFunds6') },
])

const annualIncomeOptions = computed(() => [
  { value: 1, text: t('ImproveImmediately.Label.TotalAnnualRevenue1') },
  { value: 2, text: t('ImproveImmediately.Label.TotalAnnualRevenue2') },
  { value: 3, text: t('ImproveImmediately.Label.TotalAnnualRevenue3') },
  { value: 4, text: t('ImproveImmediately.Label.TotalAnnualRevenue4') },
  { value: 5, text: t('ImproveImmediately.Label.TotalAnnualRevenue5') },
])

const netWorthOptions = computed(() => [
  { value: 1, text: t('ImproveImmediately.Label.TotalNetAssets1') },
  { value: 2, text: t('ImproveImmediately.Label.TotalNetAssets2') },
  { value: 3, text: t('ImproveImmediately.Label.TotalNetAssets3') },
  { value: 4, text: t('ImproveImmediately.Label.TotalNetAssets4') },
  { value: 5, text: t('ImproveImmediately.Label.TotalNetAssets5') },
])

const cardTypeOptions = [
  { value: 'ID_CARD', text: 'ID Card' },
  { value: 'PASSPORT', text: 'Passport' },
  { value: 'DRIVERS', text: 'Driver\'s License' },
  { value: 'RESIDENCE_PERMIT', text: 'Residence Permit' },
]

// 表单数据
const formData = ref({
  customType: 1,
  companyName: undefined,
  lastName: undefined,
  firstName: undefined,
  middle: undefined,
  nationality: undefined,
  IdentityType: 2,
  identity: undefined,
  nameEn: undefined,
  gender: undefined,
  birth: undefined,
  country: undefined,
  state: undefined,
  city: undefined,
  addressLines1: undefined,
  addressLines2: undefined,
  zipCode: undefined,
  level: undefined,
  employmentStatus: undefined,
  tradingObjectives: undefined,
  sourceFunding: undefined,
  grossAnnualIncome: undefined,
  totalNewWorth: undefined,
  experienceTradingDerivative: 0,
  experienceTradingForex: 0,
  derivativeProducts: 0,
  experienceQualification: 0,
  cardType: undefined,
  idFrontUrl: undefined,
  idBackUrl: undefined,
  addressProofUrl: undefined,
  otherFiles: undefined,
  addressLines: [],
})

// 选项数据
const countryOptions = ref<Array<{ text: string; value: string }>>([])
const stateOptions = ref<Array<{ text: string; value: string }>>([])
const cityOptions = ref<Array<{ text: string; value: string }>>([])

// 加载状态
const loadingStates = ref({
  next: false,
  submit: false,
})

// 计算属性
const identityLabel = computed(() => {
  if (formData.value.IdentityType === 2) return t('ImproveImmediately.Label.IDCard')
  if (formData.value.IdentityType === 3) return t('ImproveImmediately.Label.Passport')
  return t('ImproveImmediately.Label.IdentityID')
})

// 计算属性：当前选中国籍的 uploadCard 值
const currentUploadCard = computed(() => {
  if (!formData.value.nationality || !countries.value.length) {
    return 0
  }
  const selectedCountry = countries.value.find(
    (item: any) => item.code === formData.value.nationality,
  )
  return selectedCountry ? (selectedCountry.uploadCard || 0) : 0
})

// 计算属性：当前选中国籍的 uploadAddress 值
const currentUploadAddress = computed(() => {
  if (!formData.value.nationality || !countries.value.length) {
    return 0
  }
  const selectedCountry = countries.value.find(
    (item: any) => item.code === formData.value.nationality,
  )
  return selectedCountry ? (selectedCountry.uploadAddress || 0) : 0
})

// 方法
function changeCountry(value: any) {
  // 处理国家选择变化
  // 清空省份/城市选择//
  formData.value.state = ''
  formData.value.city = ''
  stateOptions.value = []
  cityOptions.value = []
  states.value = []
  cities.value = []
  let item = {}
  countries.value.forEach(element => {
    if (element.code == value) {
      item = element
      return
    }
  })
  getStateList(item.id)
}


function handleFileUpdate(value, type) {
  console.log(value, type, 'uplaod')
  if (type == 10) {
    // uni.showToast({ title: t('card.New1.d5'), icon: 'none' })
    getCustomFileList();
  }
}
const showFile = (file) => {
  // console.log(file)
  window.open(updateUrl + (file.againPath || file.path), '_blank')
}

async function fileOtherDelete(id) {
  const result = await confirm({
    title: t('Msg.SystemPrompt'),
    content: t('Msg.Delete'),
    confirmText: t('Btn.Confirm'),
    cancelText: t('Btn.Cancel'),
  })
  if (result) {
    try {
      // 确认删除
      let data = await personalApi.customFileDelete({ ids: [id] })
      if (data.code == 200) {
        uni.showToast(t('Msg.DeleteSuccess'))
        getCustomFileList()
      }
    } catch (e) {
      uni.showToast(e.msg)
    }
  }
}


function changeState(val) {
  formData.value.city = ''
  cityOptions.value = []
  let item = {}
  states.value.forEach((element) => {
    if (element.name == val || element.enName == val) {
      item = element
      return
    }
  })
  getCityList(item.id)
}

function handleChange(value: any) {
  formData.value = { ...formData.value, [value.key]: value.value }
  console.log(value)
  if (value.key === 'country') {
    formData.value.state = ''
    formData.value.city = ''
    stateOptions.value = []
    cityOptions.value = []
    if (value.value) {
      getStateList(value.value)
    }
  } else if (value.key === 'state') {
    formData.value.city = ''
    cityOptions.value = []
    if (value.value) {
      getCityList(value.value)
    }
  }
}

function openAddressTip() {
  // 打开地址提示弹窗
  addressTipPopup.value.open()
}

function isPdf(url, image) {
  let res = !!url
  if (image) {
    return res && url.substr(-3, 3) == 'pdf' &&
      url.substr(-3, 3) == 'PDF'
  }
  return res && (url.substr(-3, 3) == 'pdf' ||
    url.substr(-3, 3) == 'PDF')
}

function cancle() {
  if (!isApprove.value) {
    dialogCheck.value.open()
    dialogCheck1.value = true
  } else {
    router.push({ path: '/pages/customer/dashboard' })
  }
}

function closeDia() {
  dialogCheck.value.close()
}

function toHome() {
  dialogCheck.value.close()
  router.push({ path: '/pages/customer/dashboard' })
}

async function save() {
  await updateInfo(1)
}

async function Submit() {
  loadingStates.value.submit = true
  try {
    formData.value.addressLines = []
    if (formData.value.addressLines1) {
      formData.value.addressLines.push(formData.value.addressLines1)
    }
    if (formData.value.addressLines2) {
      formData.value.addressLines.push(formData.value.addressLines2)
    }
    if (!formData.value.addressLines1 && !formData.value.addressLines2) {
      formData.value.addressLines = []
    }
    if (formData.value.customType != 2) {
      formData.value.companyName = ''
    }
    let res = await personalApi.CustomUpdateInfo({
      ...formData.value,
    })
    if (res.code == Config.Code.StatusOK) {
      await getCustomFileList()
      await customApply()
    } else {
      uni.showToast({ title: res.msg, icon: 'none' })
    }
  } catch (error: any) {
    uni.showToast({ title: error.msg || t('Msg.SystemError'), icon: 'none' })
  } finally {
    loadingStates.value.submit = false
  }
}

async function updateInfo(save: number) {
  try {
    formData.value.addressLines = []
    if (formData.value.addressLines1) {
      formData.value.addressLines.push(formData.value.addressLines1)
    }
    if (formData.value.addressLines2) {
      formData.value.addressLines.push(formData.value.addressLines2)
    }
    if (!formData.value.addressLines1 && !formData.value.addressLines2) {
      formData.value.addressLines = []
    }
    let res = await personalApi.CustomUpdateInfo({
      ...formData.value,
    })
    if (res.code == Config.Code.StatusOK) {
      if (save) {
        dialogCheck.value.close()
        router.push({ path: '/pages/customer/index' })
      }
    } else {
      uni.showToast({ title: res.msg, icon: 'none' })
    }
  } catch (error: any) {
    uni.showToast({ title: error.msg || t('Msg.SystemError'), icon: 'none' })
  }
}

async function customApply() {
  try {
    let res = await personalApi.customApplyReal({})
    if (res.code == Config.Code.StatusOK) {
      isApprove.value = true
      await getLoginInfo(true)
      dialogCheck.value.open()
      dialogCheck1.value = false
    } else {
      uni.showToast({ title: res.msg, icon: 'none' })
    }
  } catch (error: any) {
    uni.showToast({ title: error.msg, icon: 'none' })
  }
}

async function getCountryList() {
  try {
    let res = await personalApi.Country({})
    if (res.code == Config.Code.StatusOK) {
      countryOptions.value = res.data.map((item: any) => ({
        text: item.enName,
        value: item.code,
        disable: notCountry.indexOf(item.code) !== -1,
      }))
      countries.value = res.data
      const country = formData.value.country
      if (country) {
        countries.value.forEach((item) => {
          if (item.code == country) {
            getStateList(item.id)
          }
        })
      }
    }
  } catch (error: any) {
    uni.showToast({ title: error.msg, icon: 'none' })
  }
}

async function getStateList(pid: string) {
  try {
    let res = await personalApi.Country({ pid })
    if (res.code == Config.Code.StatusOK) {
      // console.log(locale)
      stateOptions.value = res.data.map((item: any) => ({
        text: locale.value === 'en' ? item.enName : item.name,
        value: locale.value === 'en' ? item.enName : item.name,
      }))
      states.value = res.data
      const state = formData.value.state
      console.log(state)
      if (state) {
        states.value.forEach((item) => {
          if (
            item.name == state ||
            item.enName == state
          ) {
            getCityList(item.id)
          }
        })
      }
    }
  } catch (error: any) {
    console.log(error)
  }
}

async function getCityList(pid: string) {
  try {
    let res = await personalApi.Country({ pid })
    if (res.code == Config.Code.StatusOK) {
      cityOptions.value = res.data.map((item: any) => ({
        text: locale.value === 'en' ? item.enName : item.name,
        value: locale.value === 'en' ? item.enName : item.name,
      }))
      cities.value = res.data
    }
  } catch (error: any) {
  }
}

async function getLoginInfo(type = false) {
  try {
    let res = await personalApi.CustomLoginInfo()
    if (res.code == Config.Code.StatusOK) {
      formData.value = res.data.customInfo
      if (type) userStore.saveUserInfo(res.data)
      if (formData.value.addressLines != null && formData.value.addressLines.length) {
        formData.value.addressLines1 = formData.value.addressLines[0]
        formData.value.addressLines2 = formData.value.addressLines[1]
      }
      formData.value.customType = formData.value.customType ? formData.value.customType : 1
      formData.value.IdentityType = 2
      await getCountryList()
    } else {
      uni.showToast({ title: t('Msg.SystemError'), icon: 'none' })
    }
  } catch (error: any) {

  }
}

// 获取二维码
async function getMobileInfo() {
  try {
    let res = await personalApi.CustomFileMobileFiles({}, { responseType: 'arraybuffer' })
    // console.log(res);
    mobile.value = 'data:image/png;base64,' + uni.arrayBufferToBase64(res)
  } catch (error: any) {
    // uni.showToast({ title: error.message , icon: 'none' })
  }
}

// 获取上传文件信息
async function getCustomFileList() {
  try {
    let res = await personalApi.CustomFileList()
    if (res.code == Config.Code.StatusOK) {
      let myData = res.data
      fileListOthers.value = []
      myData.forEach((item: any) => {
        if (item.type == 1) {
          fileListID1.value = item
        } else if (item.type == 2) {
          fileListID2.value = item
        } else if (item.type == 3) {
          fileListAdd1.value = item
        } else if (item.type == 4) {
          fileListAdd2.value = item
        } else if (item.type == 10) {
          fileListOthers.value.push(item)
        }
      })
      actionType()
    } else {
      uni.showToast({ title: res.msg, icon: 'none' })
      flag.value = false
    }
  } catch (error: any) {
    uni.showToast({ title: error.msg || t('Msg.SystemError'), icon: 'none' })
  }
}

// 请求头
function actionType() {
  if (fileListID1.value.id) {
    actionID1.value = Config.Host80 + '/custom/file/upload/1/' + fileListID1.value.id
  } else {
    actionID1.value = Config.Host80 + '/custom/file/upload/1'
  }
  if (fileListID2.value.id) {
    actionID2.value = Config.Host80 + '/custom/file/upload/2/' + fileListID2.value.id
  } else {
    actionID2.value = Config.Host80 + '/custom/file/upload/2'
  }
  if (fileListAdd1.value.id) {
    actionAdd1.value = Config.Host80 + '/custom/file/upload/3/' + fileListAdd1.value.id
  } else {
    actionAdd1.value = Config.Host80 + '/custom/file/upload/3'
  }
  if (fileListAdd2.value.id) {
    actionAdd2.value = Config.Host80 + '/custom/file/upload/4/' + fileListAdd2.value.id
  } else {
    actionAdd2.value = Config.Host80 + '/custom/file/upload/4'
  }
  actionOtherAdd.value = Config.Host80 + '/custom/file/upload/10'
}

function updateFile(myData) {
  if (myData.type == 1) {
    fileListID1.value = myData
  } else if (myData.type == 2) {
    fileListID2.value = myData
  } else if (myData.type == 3) {
    fileListAdd1.value = myData
  } else if (myData.type == 4) {
    fileListAdd2.value = myData
  } else if (myData.type == 10) {
    if (!fileListOthers.value.length) {
      fileListOthers.value.push(myData)
    } else {
      let flag = true
      fileListOthers.value.forEach((item: any) => {
        if (item.id == myData.id) {
          item = myData
          flag = false
        }
      })
      if (flag) {
        fileListOthers.value.push(myData)
      }
    }
  }
  actionType()
}

// 判断是否为PC端
function IsPC() {
  let userAgentInfo = navigator.userAgent
  let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
  let flag = true
  for (let v = 0; v < Agents.length; v++) {
    if (userAgentInfo.indexOf(Agents[v]) > 0) {
      flag = false
      break
    }
  }
  return flag
}

// 监听表单字段变化
watch(
  () => formData.value.firstName,
  () => {
    if (localStorage.getItem('lang') == 'cn' && formData.value.firstName && formData.value.lastName) {
      formData.value.nameEn = pinyin(`${formData.value.firstName} ${formData.value.lastName}`, { toneType: 'none' })
    }
  },
)

watch(
  () => formData.value.lastName,
  () => {
    if (localStorage.getItem('lang') == 'cn' && formData.value.firstName && formData.value.lastName) {
      formData.value.nameEn = pinyin(`${formData.value.firstName} ${formData.value.lastName}`, { toneType: 'none' })
    }
  },
)

watch(locale, () => {
  formRef.value?.clearValidate()
})

// 生命周期
onMounted(async () => {
  // dialogCheck.value.open()
  await getLoginInfo()
  await getMobileInfo()
  await getCustomFileList()
  isPC.value = IsPC()
  uni.$on('updateImproveFile', (data) => {
    updateFile(data)
  })
})

// 组件销毁时
onUnmounted(() => {
  uni.$off('updateImproveFile')
})
</script>

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

.btn {
  margin: 0;
  width: 100%;
}

.form-tab {
  height: px2rpx(100);
}

.form-section {
  margin: px2rpx(8) 0;
}

.section-title {
  color: var(--bs-emphasis-color);
  font-family: Roboto;
  font-size: px2rpx(22);
  font-weight: 500;
  margin: px2rpx(10) 0;
}

:deep(.file-picker__box) {
  width: px2rpx(200) !important;
  height: px2rpx(150) !important;
}

:deep(.uni-file-picker) {
  width: 100%;
  height: 100%;
}

.avatar-uploader {
  border: 1px dashed;
  width: px2rpx(200);
  height: px2rpx(150);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*float: left;*/
  //overflow: hidden;
}

.file-item {
  border: 1px dashed;
  border-radius: px2rpx(5);
  width: px2rpx(200);
  height: px2rpx(150);
  display: flex;
  justify-content: center;
  align-items: center;

  .icon {
    width: px2rpx(24);
    height: px2rpx(24);
  }
}

.avatar {
  width: 100%;
  height: 100%;
}

.custom-upload-btn {
  width: px2rpx(200);
  height: px2rpx(150);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .plus {
    font-size: px2rpx(24);
    color: #9ca3af;
  }
}

.refresh {
  width: 100%;
  height: px2rpx(150);
  display: flex;
  justify-content: center;
  align-items: center;

  image {
    width: px2rpx(28);
    height: px2rpx(28);
  }
}

.fileOther {

  :deep(.upload-wrapper .uni-file-picker) {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :deep(.uni-file-picker__lists) {
    display: none !important;
  }
}

.fileList {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#files {
  :deep(.uni-file-picker__lists) {
    display: none !important;
  }

  :deep(.upload-wrapper .uni-file-picker) {
    display: flex;
    align-items: center;
    justify-content: center;
  }


  .list_upload {
    width: px2rpx(150);
    height: px2rpx(60);
  }

  .file-item {
    //border: none;
    box-sizing: border-box;
    width: px2rpx(150);
    height: px2rpx(60);
    border-radius: 0;
  }

  margin-top: px2rpx(20);
  max-width: px2rpx(600);
  border: 1px dashed;
  display: flex;

  .options {
    display: flex;
    flex: 1;
    padding: 8px;
    box-sizing: border-box;
    justify-content: center;
    align-content: center;
    align-items: center;

    @media screen and (max-width: 990px) {
      flex-direction: column;
      align-items: flex-start;
    }

    uni-button {
      min-width: px2rpx(80);
      max-height: px2rpx(35);
      padding: 0;
      line-height: px2rpx(35);
      margin-bottom: px2rpx(5);

      span,
      a {
        display: inline-block;
        height: 100%;
        width: 100%;
        color: var(--color-black);
      }
    }
  }
}

.con-box {
  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
  border-radius: 2px;
  padding: 20px;

  .box {
    width: 100%;
    // height: 190px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;

    .mobile {
      width: px2rpx(50);
      height: px2rpx(50);
      margin-right: px2rpx(10);
    }

    .arrow {
      width: px2rpx(30);
      height: px2rpx(30);
      margin-right: px2rpx(10);
    }

    .img_mobile {
      width: 120px;
      height: 120px;
      margin: 10px;
      border: 5px solid;
      background-color: var(--color-gray);
    }

    .icon_refresh {
      width: px2rpx(30);
      height: px2rpx(30);
      margin-right: px2rpx(10);
    }
  }
}

.experience {
  display: flex;
  margin: px2rpx(10) 0;
  align-items: center;
}

.Trad-experience {
  flex: 1;
  color: var(--bs-emphasis-color);
  font-size: px2rpx(16);
}

.Trad-choose {
  display: flex;
}

.descending {
  margin: px2rpx(20) 0;
  padding: px2rpx(20);
  background-color: #f5f5f5;
  border-radius: px2rpx(8);
}

.title {
  font-weight: 500;
  margin-bottom: px2rpx(10);
}

.des {
  margin: px2rpx(5) 0;
  font-size: px2rpx(14);
  color: var(--bs-heading-color);
}

.dian1 {
  font-size: px2rpx(20);
  margin-right: px2rpx(5);
}

.dian {
  margin-right: px2rpx(10);
}

.btns {
  margin-top: px2rpx(30);
}

.cwg-button {
  display: flex;
  flex-direction: column;
  gap: px2rpx(15);

  &.two-btn {
    flex-direction: row;
    justify-content: space-between;

    u-button {
      flex: 1;
      margin: 0 px2rpx(10);

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.btn-primary {
  height: px2rpx(80);
  font-size: px2rpx(18);
}

.prev-btn {
  //border-color: #4a6cf7;
  //color: #4a6cf7;
}

.address-tip {
  width: px2rpx(140);
  //height: px2rpx(60);
  font-size: px2rpx(14);
  word-break: break-all;
  white-space: wrap;
  word-wrap: break-word;
}

.crm-title-box {
  display: flex;
  align-items: center;
  margin: px2rpx(20) 0;
  background-color: var(--table-th-color);
  color: #333;

  .tit {
    font-size: px2rpx(18);
    font-weight: 500;
    color: var(--bs-emphasis-color);
  }

  .icon-tip {
    margin-left: px2rpx(10);
    font-size: px2rpx(16);
    color: var(--bs-emphasis-color);
    cursor: pointer;
  }
}

.popup-content {
  padding: px2rpx(20);
  text-align: center;
}

.dia-content {
  padding: px2rpx(30);
  text-align: center;

  .icon {
    margin-bottom: px2rpx(20);

    i {
      font-size: px2rpx(60);
      color: #4a6cf7;
    }
  }

  .des1 {
    font-size: px2rpx(18);
    font-weight: 500;
    margin-bottom: px2rpx(10);
  }

  .des2 {
    font-size: px2rpx(14);
    color: var(--bs-heading-color);
    margin-bottom: px2rpx(30);
  }

  .dialog-footer {
    display: flex;
    justify-content: space-between;
    margin-top: px2rpx(30);

    uni-button {
      flex: 1;
      margin: 0 px2rpx(10);

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.cwg-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: px2rpx(40);
  border: 1px dashed #ddd;
  border-radius: px2rpx(8);
  cursor: pointer;

  cwg-icon {
    font-size: px2rpx(40);
    margin-bottom: px2rpx(10);
    color: var(--bs-heading-color);
  }

  .name {
    font-size: px2rpx(16);
    margin-bottom: px2rpx(5);
  }

  .back {
    font-size: px2rpx(12);
    color: var(--bs-heading-color);
  }
}

.btn-upload {
  width: px2rpx(120);
}
</style>