<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-19 09:31:19
 * @LastEditTime: 2019-12-06 10:48:38
 * @LastEditors: Please set LastEditors
 -->
<template>
  <h-view id="base-info" class="public-style" title="基本信息">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn" @click="$routeGo()">
        <img src="@/assets/userBind/arrow.png">
        <span>用户绑定</span>
      </div>
    </h-header>
    <Tab :tabNum="tabNum" @getTabNum="getTabNum"/>
    <h-content class="content">
      <div v-show="tabNum==0">
        <list-item :item-height="44">
          <item v-if="(isApproved&&!isMultiRole)||!isApproved" :showArrow="true">
            <div slot="name" class="font-color required">客户类型</div>
            <input
              slot="content"
              v-model="baseInfo.bp_type_n"
              placeholder="请选择"
              type="text"
              readonly
              @click="selectIdType()"
            >
          </item>
          <item v-if="isApproved&&isMultiRole" :showArrow="true" @click.native="selectIdMultiType()">
            <div slot="name" class="required">客户类型</div>
            <div slot="content" class="typeBP">
              <span>{{ baseInfo.bp_type_n }}</span>
              <span>
                {{ multiBpType.bp_type_n }}
                <img v-if="multiBpType.bp_type_n" src="@/assets/userBind/deleteTag.png" @click.stop @click="deleteBP">
              </span>
            </div>
          </item>
          <item v-if="bp_type_flag">
            <div slot="name" class="required">{{ typeName }}</div>
            <input
              v-if="bpClass_flag"
              slot="content"
              :placeholder="type"
              v-model="baseInfo.agent_username"
            >
            <!-- <input v-if="!bpClass_flag" slot="content" :placeholder="type" v-model="baseInfo.business_license_num" > -->
          </item>
          <button v-if="isAddNewType" class="type-save">新增角色</button>
        </list-item>
        <div class="userInfo martop">企业信息</div>
        <div class="upload-id-card">
          <span class="font-color">营业执照照片上传</span>
          <div class="upload-box1">
            <div v-if="!licenseImg" @click="ocrShow('license', '')">
              <img src="@/assets/userBind/camera.png">
            </div>
            <div
              v-if="licenseImg && !isApproved" style="width: 100%;height: 100%" class="licenseBox"
              @click="ocrShow('license', '')">
              <img :src="licenseImg" style="width: 100%;height: 100%;margin: 0">
            </div>
            <div v-if="isApproved" class="licenseBox"><!--v-if="licenseImg && isApproved"-->
              <img
                v-if="licenseImg" :src="licenseImg" style="width: 100%;height: 100%;margin: 0"
                @click="showBigPicture(licenseImg)">
            </div>
          </div>
        </div>

        <!-- 营业执照识别信息 -->

        <list-item :item-height="44" class="second-part">
          <item>
            <div slot="name" class="font-color required">公司名称</div>
            <input
              slot="content"
              v-model="baseInfo.bp_name"
              readonly
              placeholder="上传营业执照自动填充"
              class="auto"
            >
          </item>
          <item>
            <div slot="name" class="font-color required">企业类型</div>
            <input
              slot="content"
              v-model="baseInfo.enterprise_type"
              readonly
              placeholder="上传营业执照自动填充"
              class="auto"
            >
          </item>
          <item>
            <div slot="name" class="font-color required">统一社会信用代码</div>
            <input
              slot="content"
              v-model="baseInfo.organization_code"
              readonly
              placeholder="上传营业执照自动填充"
              class="auto"
            >
          </item>
          <item>
            <div slot="name" class="font-color required">注册资本</div>
            <input
              slot="content"
              v-model="baseInfo.registered_capital"
              readonly
              placeholder="上传营业执照自动填充"
              class="auto"
            >
          </item>
          <item>
            <div slot="name" class="font-color required">法定代表人</div>
            <input
              slot="content"
              v-model="baseInfo.legal_person"
              readonly
              placeholder="上传营业执照自动填充"
              class="auto"
            >
          </item>
          <item>
            <div slot="name" class="font-color required">注册地址</div>
            <textarea
              slot="content"
              ref="myTestarea"
              v-model="baseInfo.registered_place"
              cols="22"
              rows="1"
              readonly
              class="auto"
              placeholder="上传营业执照自动填充"
              @input="addRows(baseInfo.registered_place)"
            />
          </item>
          <item :showArrow="true">
            <div slot="name" class="required">业务办理省</div>
            <input
              slot="content"
              v-model="baseInfo.province_name"
              placeholder="请选择"
              type="text"
              readonly
              onfocus="this.blur()"
              @click="selectProvince()"
            >
          </item>
          <item :showArrow="true">
            <div slot="name" class="required">业务办理市</div>
            <input
              slot="content"
              v-model="baseInfo.city_name"
              placeholder="请选择"
              type="text"
              readonly
              onfocus="this.blur()"
              @click="selectCity()"
            >
          </item>
          <item :showArrow="true">
            <div slot="name" class="required">业务办理区/县</div>
            <input
              slot="content"
              v-model="baseInfo.district_name"
              placeholder="请选择"
              type="text"
              readonly
              onfocus="this.blur()"
              @click="selectDistrict()"
            >
          </item>
          <item :proportion="[2,2]">
            <div slot="name" class="font-color required">经营地址</div>
            <textarea
              slot="content"
              ref="myTestareaLive"
              v-model="baseInfo.business_address"
              cols="22"
              rows="1"
              placeholder="请输入经营地址"
              @input="addRowsLive(baseInfo.business_address)"
            />
          </item>
          <item>
            <div slot="name" class="font-color required">固定电话</div>
            <input
              slot="content" v-model="baseInfo.phone" placeholder="请输入固定电话"
              @blur="fixedPhoneCheck(baseInfo.phone)">
          </item>
        </list-item>
        <!-- 法定代表人信息-->
        <div class="userInfo types">法定代表人</div>
        <div class="upload-id-cards">
          <span>身份证照片上传</span>
          <div class="upload-box">
            <div v-if="!idCardFront" @click="ocrShow('idCard', 'front')">
              <img src="@/assets/userBind/org/front.png">
              <p>正面</p>
            </div>
            <div v-if="idCardFront && !isApproved" @click="ocrShow('idCard', 'front')">
              <img :src="idCardFront" style="width: 100%;height: 100%;margin: 0">
            </div>
            <div v-if="isApproved && idCardFront">
              <img
                v-if="idCardFront" :src="idCardFront" style="width: 100%;height: 100%;margin: 0"
                @click="showBigPicture(idCardFront)">
            </div>
            <div v-if="!idCardBack" @click="ocrShow('idCard', 'back')">
              <img src="@/assets/userBind/org/back.png">
              <p>反面</p>
            </div>
            <div v-if="idCardBack && !isApproved" @click="ocrShow('idCard', 'back')">
              <img :src="idCardBack" style="width: 100%;height: 100%;margin: 0">
            </div>
            <div v-if="isApproved && idCardBack">
              <img
                v-if="idCardBack" :src="idCardBack" style="width: 100%;height: 100%;margin: 0"
                @click="showBigPicture(idCardBack)">
            </div>
          </div>
        </div>
        <list-item :item-height="44" class="second-part">
          <item>
            <div slot="name" class="font-color required">姓名</div>
            <input
              slot="content"
              v-model="baseInfo.legal_person"
              readonly
              placeholder="上传身份证自动填充"
              class="auto"
            >
          </item>
          <item>
            <div slot="name" class="font-color required">身份证号</div>
            <input
              slot="content"
              v-model="legal_personMsg.id_card_no"
              readonly
              placeholder="上传身份证自动填充"
              class="auto"
            >
          </item>
          <item>
            <div slot="name" class="required">身份证有效期从</div>
            <input
              slot="content"
              v-model="legal_personMsg.id_card_date_from"
              readonly
              placeholder="上传身份证自动填充"
              class="auto"
            >
          </item>
          <item>
            <div slot="name" class="required">身份证有效期到</div>
            <input
              slot="content"
              v-model="legal_personMsg.id_card_date_to"
              readonly
              placeholder="上传身份证自动填充"
              class="auto"
            >
          </item>
          <item>
            <div slot="name" class="font-color required">手机号</div>
            <input
              slot="content" v-model="legal_personMsg.cell_phone" placeholder="请输入手机号"
              @blur="phoneCheck(legal_personMsg.cell_phone)">
          </item>
          <item>
            <div slot="name" class="font-color required">联系地址</div>
            <textarea
              ref="address"
              slot="content"
              v-model="legal_personMsg.living_address"
              cols="30"
              rows="1"
              placeholder="请输入联系地址"
              @input="addAddressRows(legal_personMsg.living_address)"
            />
          </item>
        </list-item>
        <!-- 授权切换 -->

        <div class="authorize">
          <p class="authorize-select font-color">是否授权</p>
          <div class="authorize-checklist" @click="authorizeChange">
            <div v-if="flag"/>
            <img v-if="!flag" src="@/assets/userBind/org/checklist.png" alt>
          </div>
        </div>
        <div v-if="!flag" class="userInfo types">授权人信息</div>
        <div v-if="!flag" class="upload-id-cards">
          <span>身份证照片上传</span>
          <div class="upload-box">
            <div v-if="!authidCardFront" @click="ocrShow('authidCard', 'front')">
              <img src="@/assets/userBind/org/front.png">
              <p>正面</p>
            </div>
            <div v-if="authidCardFront" @click="ocrShow('authidCard', 'front')">
              <img :src="authidCardFront" style="width: 100%;height: 100%;margin: 0">
            </div>
            <!-- <div v-if="authidCardFront && !isApproved" @click="ocrShow('authidCard', 'front')">
              <img :src="authidCardFront" style="width: 100%;height: 100%;margin: 0" >
            </div>
            <div v-if="isApproved && authidCardFront">
              <img v-if="authidCardFront" :src="authidCardFront" style="width: 100%;height: 100%;margin: 0" @click="showBigPicture(authidCardFront)">
            </div>-->
            <div v-if="!authidCardBack" @click="ocrShow('authidCard', 'back')">
              <img src="@/assets/userBind/org/back.png">
              <p>反面</p>
            </div>
            <div v-if="authidCardBack" @click="ocrShow('authidCard', 'back')">
              <img :src="authidCardBack" style="width: 100%;height: 100%;margin: 0">
            </div>
            <!--  <div v-if="authidCardBack && !isApproved" @click="ocrShow('authidCard', 'back')">
                <img :src="authidCardBack" style="width: 100%;height: 100%;margin: 0" >
              </div>
              <div v-if="isApproved && authidCardBack">
                <img v-if="authidCardBack" :src="authidCardBack" style="width: 100%;height: 100%;margin: 0" @click="showBigPicture(authidCardBack)">
              </div>-->
          </div>
        </div>
        <!-- 已授权 -->
        <list-item v-if="!flag" :item-height="44" class="second-part">
          <item>
            <div slot="name" class="font-color required">姓名</div>
            <input
              slot="content"
              v-model="authMsg.auth_person_name"
              readonly
              placeholder="上传身份证自动填充"
              class="auto"
            >
          </item>
          <item>
            <div slot="name" class="font-color required">身份证号</div>
            <input
              slot="content"
              v-model="authMsg.auth_person_id_card"
              readonly
              placeholder="上传身份证自动填充"
              class="auto"
            >
          </item>
          <item>
            <div slot="name" class="required">身份证有效期从</div>
            <input
              slot="content"
              v-model="authMsg.auth_id_card_date_from"
              readonly
              placeholder="上传身份证自动填充"
              class="auto"
            >
          </item>
          <item>
            <div slot="name" class="required">身份证有效期到</div>
            <input
              slot="content"
              v-model="authMsg.auth_id_card_date_to"
              readonly
              placeholder="上传身份证自动填充"
              class="auto"
            >
          </item>
          <item>
            <div slot="name" class="font-color required">手机号</div>
            <input
              slot="content" v-model="authMsg.auth_cell_phone" placeholder="请输入手机号"
              @blur="phoneCheck(authMsg.auth_cell_phone)">
          </item>
          <item>
            <div slot="name" class="font-color required">公司职务</div>
            <input slot="content" v-model="authMsg.auth_person_position" placeholder="请输入公司职务">
          </item>
          <item>
            <div slot="name" class="font-color required">授权事项</div>
            <input slot="content" v-model="authMsg.auth_person_matter" placeholder="请输入授权事项">
          </item>
        </list-item>

        <div v-if="!flag" class="upload-id-card">
          <span>授权书证件上传</span>
          <div class="upload-box1">
            <div v-if="!laImg" @click="LaUpload()">
              <img src="@/assets/userBind/camera.png">
            </div>
            <div v-if="laImg && !isApproved" style="width: 100%;height: 100%" @click="LaUpload('')">
              <img :src="laImg" style="width: 100%;height: 100%;margin: 0">
            </div>
            <div v-if="isApproved"><!--v-if="licenseImg && isApproved"-->
              <img v-if="laImg" :src="laImg" style="width: 100%;height: 100%;margin: 0" @click="showBigPicture(laImg)">
            </div>
          </div>
        </div>

        <!-- 资产信息 -->

        <div v-if="cddItemList.length" :class="{martop: flag,types:!flag}" class="userInfo">附件信息</div>
        <div v-for="(list, index) in cddItemList" :key="index" class="card2">
          <span>{{ list.description }}</span>
          <div class="img-content">
            <!--待上传图片列表-->
            <div
              v-for="(item, index) in upload_list" v-if="item.check_id==list.check_id" :key="index"
              class="card-upload">
              <img :src="item.picture" @click="showBigPicture(item.picture)">
              <div class="close" @click="remove_pic(item.attachment_id, index)">
                <img src="@/assets/userBind/deleteIcon.png">
              </div>
            </div>
            <!--从服务器上下载的图片-->
            <div v-for="item in dowload_list">
              <div v-for="(pic, index) in item" v-if="pic.check_id==list.check_id" :key="index" class="card-upload">
                <img :src="pic.url" @click="showBigPicture(pic.url)">
                <div class="close" @click="delete_pic(pic.attachment_id)">
                  <img src="@/assets/userBind/deleteIcon.png">
                </div>
              </div>
            </div>
            <div class="card-upload plus" @click="imgUploadShow(list.description,list.check_id)">
              <img src="@/assets/userBind/camera.png" class="upload-btn">
            </div>
          </div>
        </div>
        <div v-if="from&&isApproved&&isAGENT" class="tax" @click="changeUndertake">
          <img src="@/assets/userBind/tax.png" class="left-img">
          <div>
            <span>缴纳保证金</span>
            <p>已缴纳:500000</p>
          </div>
          <img src="@/assets/userBind/arrow-right.png" class="right-img">
        </div>
      </div>
      <!-- <BankInfo v-show="tabNum==1" :bp_id="bp_id" @getInfo="getInfo" /> -->
      <BankInfo
        v-show="tabNum==1" :from="from" :getBankList="getBankList" @getInfo="getInfo"
        @getList="getList"/>
      <InvoiceInfo
        v-show="tabNum==2"
        :tabNum="tabNum"
        :baseInfo="baseInfo"
        :orgCode="baseInfo.organization_code"
        @getinvoiceList="getinvoiceList"
      />
    </h-content>
    <bottom-tab class="footer-button">
      <tab-button class="put" @click.native="handSubmit">提交</tab-button>
      <tab-button class="save" @click.native="verified">保存</tab-button>
    </bottom-tab>
    <h-modal ref="modal" v-model="showModalValue" position="bottom">
      <h-view>
        <div class="modal-content">
          <div class="modal-content-add-top">
            <span>添加银行卡</span>
            <img src="@/assets/userBind/close.png" @click="hideModal">
          </div>
          <img
            v-if="!bankImg && !isApproved"
            src="@/assets/userBind/addBack.png"
            class="addBack"
            @click="ocrShow('bankCard', '')"
          >
          <img
            v-if="bankImg"
            :src="bankImg"
            class="addBack"
            style="height: 38%;"
            @click="ocrShow('bankCard', '')"
          >
          <img
            v-if="isClear && isApproved && !bankImg"
            src="@/assets/userBind/addBack.png"
            class="addBack"
            @click="ocrShow('bankCard', '')"
          >
          <img
            v-if="!bankImg && isApproved && !isClear"
            src="@/assets/userBind/addBack.png"
            class="addBack"
          >
          <list-item :item-height="44" class="card-Info">
            <item>
              <div slot="name">银行卡卡号</div>
              <input
                slot="content"
                v-model="bank_lists.bank_account_num"
                readonly
                placeholder="识别银行卡自动填充"
              >
            </item>
            <item>
              <div slot="name">账户姓名</div>
              <input slot="content" v-model="bank_lists.bank_account_name" placeholder="请输入账户名称">
            </item>
            <item>
              <div slot="name">银行名称</div>
              <input
                slot="content"
                v-model="bank_lists.bank_full_name"
                readonly
                placeholder="识别银行卡自动填充"
              >
            </item>
            <item>
              <div slot="name">支行名称</div>
              <input slot="content" v-model="bank_lists.bank_branch_name" placeholder="请输入支行名称">
            </item>
          </list-item>
        </div>
      </h-view>
      <bottom-tab class="add-box"> <!-- v-if="!isApproved || (isClear && isApproved)"-->
        <tab-button class="add-card" @click.native="addBankInfo">添加</tab-button>
      </bottom-tab>
    </h-modal>
  </h-view>
</template>

<script>
import Tab from '@/components/tab'
import InvoiceInfo from './invoiceInfo'
import BankInfo from './bankInfo'

export default {
  name: 'Enterprise',
  components: {
    Tab,
    BankInfo,
    InvoiceInfo,
  },
  data () {
    return {
      tabNum: 0,
      bp_id: '',
      flag: true, // 显示未授权框
      bpClass: '',
      from: false,
      isApproved: false,
      isAddNewType: false,
      isAGENT: this.$route.params.isAGENT,
      isMultiRole: this.$route.params.isMultiRole,
      img_url: {},
      typeList: [],
      backList: [],
      saveInfo: {},
      lastInfo: {},
      msg_flag: false,
      invoiceInfo: {},
      maritalList: [],
      getBankList: [],
      cityList: [],
      provinceList: [],
      districtList: [],
      academic_bg_n: '',
      bpClass_flag: false,
      // text: '法人代表信息',
      bp_type_flag: false,
      typeName: '',
      marital_status_n: '',
      bank_card_flag: false,
      showModalValue: false,
      type: '请输入业务经办姓名',
      multiBpType: {
        bp_type_n: '',
        bp_type: '',
      },
      legal_personMsg: {
        id_card_no: null,
        // legal_person: '',
        cell_phone: window.localStorage.getItem('user_phone'),
        living_address: '',
        id_card_date_from: '', // 法定代表人身份证有效期从
        id_card_date_to: '', // 法定代表人身份证有效期到
      },
      baseInfo: {
        agent_username: '',
        district_id: '',
        district_name: '',
        province_name: '',
        province_id: '',
        city_name: '',
        city_id: '',
        bp_type: '',
        bp_type_n: '',
        bp_name: '',
        phone: '',
        auth_flag: 'N',
        user_phone: window.localStorage.user_phone,
        legal_person: '',
        enterprise_type: '',
        business_address: '',
        registered_place: '',
        organization_code: '',
        registered_capital: '',
        // business_license_num: '',
        bp_class: this.$route.params.bp_class,
      },
      bank_lists: {
        bank_account_num: '',
        bank_account_name: '',
        bank_card_type: '',
        bank_full_name: '',
        bank_branch_name: '',
      },
      authMsg: {
        auth_person_name: '',
        auth_person_matter: '',
        auth_person_id_card: '',
        auth_cell_phone: '',
        auth_person_position: '',
        auth_id_card_date_from: '', // 授权人身份证有效期从
        auth_id_card_date_to: '', // 授权人身份证有效期到
      },
      idCardFront: '', // 身份证正面图片
      idCardBack: '', // 身份证反面图片
      authidCardFront: '', // 授权人身份证正面图片
      authidCardBack: '', // 授权人身份证反面图片
      licenseImg: '', // 营业执照照片
      bankImg: '', // 银行卡图片
      laImg: '', // 授权书图片

      idCardFrontUrlFlag: false, // 身份证正面图片,为false则用查询出来的,为true则用拍照出来的
      idCardBackUrlFlag: false, // 身份证反面图片,为false则用查询出来的,为true则用拍照出来的
      authidCardFrontUrlFlag: false, // 授权人身份证正面图片,为false则用查询出来的,为true则用拍照出来的
      authidCardBackUrlFlag: false, // 授权人身份证反面图片,为false则用查询出来的,为true则用拍照出来的
      licenseImgUrlFlag: false, // 营业执照照片,为false则用查询出来的,为true则用拍照出来的
      laImgUrlFlag: false, // 授权书图片,为false则用查询出来的,为true则用拍照出来的
      upload_list: [], // 上传图片列表
      dowload_list: [], // 下载图片列表
      cddItemList: [], // 资料清单列表
      idCardFrontCheck_id: '', // 身份证正面check_id
      idCardBackCheck_id: '', // 身份证背面check_id
      authidCardFrontCheck_id: '', // 授权人身份证正面check_id
      authidCardBackCheck_id: '', // 授权人身份证背面check_id
      bankCardCheck_id: '', // 银行卡check_id
      licenseCheck_id: '', // 营业执照check_id
      laCheck_id: '', // 授权书check_id

      idCardFrontAttachmentId: '', // 身份证正面AttachmentId
      idCardBackAttachmentId: '', // 身份证背面AttachmentId
      authidCardFrontAttachmentId: '', // 授权人身份证正面AttachmentId
      authidCardBackAttachmentId: '', // 授权人身份证背面AttachmentId
      licenseAttachmentId: '', // 营业执照AttachmentId
      laAttachmentId: '', // 授权书AttachmentId
      bankCardImgList: [], // 存上传银行卡图片列表
      idCardFrontEditFlag: false, // 身份证正面修改标识,为true则标识已修改,后续需要重新上传此照片
      idCardBackEditFlag: false, // 身份证正面修改标识,为true则标识已修改,后续需要重新上传此照片
      authidCardFrontEditFlag: false, // 授权人身份证正面修改标识,为true则标识已修改,后续需要重新上传此照片
      authidCardBackEditFlag: false, // 授权人身份证正面修改标识,为true则标识已修改,后续需要重新上传此照片
      licenseEditFlag: false, // 营业执照照片修改标识,为true则标识已修改,后续需要重新上传此照片
      LaEditFlag: false, // 授权书图片修改标识,为true则标识已修改,后续需要重新上传此照片
      isClear: false,
    }
  },
  computed: {},
  watch: {
    'baseInfo.auth_flag' (newVal, oldVal) {
      if (newVal === '是') {
        this.flag = false
      } else if (newVal === '否') {
        this.flag = true
      }
    },
    // 监听客户类型
    'baseInfo.bp_type_n' () {
      let vm = this
      if (vm.baseInfo.bp_type === 'TENANT' || vm.baseInfo.bp_type === 'GUTA') {
        vm.type = '请输入业务经办员工代码'
        vm.typeName = '业务经办人'
        vm.bp_type_flag = true
      } else if (
        vm.baseInfo.bp_type === 'AGENT' ||
          vm.baseInfo.bp_type === 'OFFICE' ||
          vm.baseInfo.bp_type === 'FACTORY'
      ) {
        vm.bp_type_flag = false
        vm.typeName = ''
      }
    },
    /* flag () {
        if (this.flag) {
          this.text = '法人代表信息'
        } else {
          this.text = '授权信息'
        }
      }, */
    typeName () {
      if (this.typeName === '业务经办人') {
        this.bpClass = this.baseInfo.agent_username
        this.bpClass_flag = true
      } else {
        this.bpClass = this.baseInfo.business_license_num
        this.bpClass_flag = false
      }
    },
    tabNum: function (newVal, oldVal) {
      if (newVal === 1 && !this.bp_id && !this.from) {
        this.hlsPopup.showError('请先保存基本信息')
        this.tabNum = oldVal
      }
    },
  },
  created () {
    /* this.getBpType()
      this.getProvince()
      if (this.$route.params.status === 'APPROVED') {
        this.isApproved = true
      } */
    // this.getBankInfo()
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getBpType()
      vm.getProvince()
      if (vm.$route.params.status === 'APPROVED') {
        vm.isApproved = true
      }
      if (from.fullPath === '/tab/my-info') { /* || from.fullPath === '/margin-first-pay' */
        vm.tabNum = 0
        vm.legal_personMsg = {}
        vm.baseInfo = {}
        vm.bank_lists = {}
        vm.authMsg = {}
        vm.invoiceInfo = {}
        vm.idCardFront = '' // 身份证正面图片
        vm.idCardBack = '' // 身份证反面图片
        vm.authidCardFront = '' // 授权人身份证正面图片
        vm.authidCardBack = '' // 授权人身份证反面图片
        vm.licenseImg = '' // 营业执照照片
        vm.bankImg = '' // 银行卡图片
        vm.laImg = '' // 授权书图片
        vm.upload_list = [] // 上传图片列表
        vm.dowload_list = [] // 下载图片列表
        vm.from = true

        vm.idCardFrontEditFlag = false // 身份证正面修改标识,为true则标识已修改,后续需要重新上传此照片
        vm.idCardBackEditFlag = false // 身份证正面修改标识,为true则标识已修改,后续需要重新上传此照片
        vm.authidCardFrontEditFlag = false // 授权人身份证正面修改标识,为true则标识已修改,后续需要重新上传此照片
        vm.authidCardBackEditFlag = false // 授权人身份证正面修改标识,为true则标识已修改,后续需要重新上传此照片
        vm.licenseEditFlag = false // 营业执照照片修改标识,为true则标识已修改,后续需要重新上传此照片
        vm.LaEditFlag = false // 授权书图片修改标识,为true则标识已修改,后续需要重新上传此照片
        vm.isClear = false

        vm.idCardFrontUrlFlag = false // 身份证正面图片,为false则用查询出来的,为true则用拍照出来的
        vm.idCardBackUrlFlag = false // 身份证反面图片,为false则用查询出来的,为true则用拍照出来的
        vm.authidCardFrontUrlFlag = false // 授权人身份证正面图片,为false则用查询出来的,为true则用拍照出来的
        vm.authidCardBackUrlFlag = false // 授权人身份证反面图片,为false则用查询出来的,为true则用拍照出来的
        vm.licenseImgUrlFlag = false // 营业执照照片,为false则用查询出来的,为true则用拍照出来的
        vm.laImgUrlFlag = false // 授权书图片,为false则用查询出来的,为true则用拍照出来的
        vm.getbaseInfo()
        vm.getBankInfo()
      }
    })
    next()
  },
  methods: {
    deleteBP () {
      this.multiBpType.bp_type_n = ''
      this.multiBpType.bp_type = ''
      this.isAddNewType = false
    },
    selectIdMultiType (e) {
      let vm = this
      let List
      if (vm.baseInfo.bp_type === 'TENANT') {
        List = vm.typeList.filter(i => {
          return i.code === 'GUTA'
        })
      } else if (vm.baseInfo.bp_type === 'GUTA') {
        List = vm.typeList.filter(i => {
          return i.code === 'TENANT'
        })
      }
      vm.hlsPopup.selectList({
        list: List,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.multiBpType.bp_type = obj.bp_type
          vm.multiBpType.bp_type_n = obj.bp_type_n
          vm.isAddNewType = true
          vm.isSelected = true
        },
      })
    },
    getBankInfo () {
      let vm = this
      // let bpId = window.localStorage.getItem('user_id')
      let id = vm.from ? vm.$route.params.bp_id : vm.bp_id
      // let bpId = vm.bp_id
      let url = process.env.basePath + 'bp_bank_query'
      let param = {
        bp_id: id,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.getBankList = res.lists
        }
      })
    },
    changeUndertake () {
      this.$router.push({
        name: 'MarginFirstPay',
        params: {
          bp_id: this.$route.params.bp_id,
          status: this.$route.params.status,
          isAGENT: this.isAGENT,
        },
      })
    },
    addRows (e) {
      let addNum = parseInt(e.length / 16)
      if (addNum === 0) {
        this.$refs.myTestarea.rows = 1
      } else if (addNum >= addNum - 1 && addNum < addNum + 1) {
        this.$refs.myTestarea.rows = addNum + 1
      }
    },
    addRowsLive (e) {
      let addNum = parseInt(e.length / 16)
      if (addNum === 0) {
        this.$refs.myTestareaLive.rows = 1
      } else if (addNum >= addNum - 1 && addNum < addNum + 1) {
        this.$refs.myTestareaLive.rows = addNum + 1
      }
    },
    addAddressRows (e) {
      let addNum = parseInt(e.length / 16)
      if (addNum === 0) {
        this.$refs.address.rows = 1
      } else if (addNum >= addNum - 1 && addNum < addNum + 1) {
        this.$refs.address.rows = addNum + 1
      }
    },
    handSubmit () {
      let bp_id = this.from ? this.$route.params.bp_id : this.bp_id
      if (bp_id) {
        this.hlsPopup.showConfirm({
          title: '提示',
          content: '您确认提交吗?',
          onConfirm: data => {
            console.log(data)
            if (data) {
              let url = $config.basePath + 'bp_bind_submit'
              let param = {
                master: {
                  // bp_id: window.localStorage.getItem('user_id'),
                  bp_id: this.from ? this.$route.params.bp_id : this.bp_id,
                  company_id: '2145',
                },
              }
              let vm = this
              this.hlsHttp.post(url, param).then(function (res) {
                if (res.result === 'S') {
                  vm.hlsPopup.showSuccess('提交成功')
                  vm.$router.push({
                    name: 'HomePage',
                  })
                }
              })
            }
          },
        })
      } else {
        this.hlsPopup.showLongCenter('请先保存!')
      }
    },
    addBankInfo () {
      this.hlsPopup.showConfirm({
        title: '提示',
        content: '您确认添加吗?',
        onConfirm: data => {
          if (data === 1) {
            if (!this.bank_lists.bank_account_num || !this.bank_lists.bank_account_name || !this.bank_lists.bank_full_name) {
              this.bank_card_flag = false
              this.hlsPopup.showLongCenter('银行信息不完整!')
            } else {
              this.bank_card_flag = true
            }
            // 银行卡验证this.hlsUtil.isBankAccount(this.bank.bank_account_num)
            if (this.hlsUtil.isBankAccount(this.bank_lists.bank_account_num)) {
              this.bank_card_flag = false
              this.hlsPopup.showLongCenter('请输入正确银行卡号!')
            }
            // 验证账户名称与承租人名称一致
            /*  if (this.bank_lists.bank_account_name !== this.saveInfo.bp_name) {
                this.bank_card_flag = false
                this.hlsPopup.showLongCenter('企业名称与账户名称不一致')
              } */
            if (this.bank_card_flag) {
              this.hlsPopup.showLoading('请稍后')
              let id
              if (this.from) {
                id = this.$route.params.bp_id
              } else {
                id = this.bp_id
              }
              let url = $config.basePath + 'bp_bank_save'
              let param = {
                master: {
                  bp_id: id,
                  bank_lists: [this.bank_lists],
                },
              }
              let vm = this
              vm.hlsHttp.post(url, param).then(function (res) {
                if (res.result === 'S') {
                  vm.hlsPopup.hideLoading()
                  vm.showModalValue = false
                  vm.hlsPopup.showSuccess('添加成功')
                  let url = $config.basePath + 'bp_bank_query'
                  let param = {
                    bp_id: id,
                  }

                  vm.hlsHttp.post(url, param).then(function (res) {
                    vm.getBankList = res.lists
                  })
                }
              })
            }
          }
        },
      })
    },
    // 校验手机号
    phoneCheck (phone) {
      if (!hlsUtil.phoneNumber(phone) && !hlsUtil.phoneNumber86(phone)) {
        hlsPopup.showLongCenter('请输入正确的手机号')
      }
    },
    // 校验固定电话
    fixedPhoneCheck (phone) {
      let reg = /^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/
      if (!reg.test(phone)) {
        hlsPopup.showLongCenter('请输入正确的固定电话')
      }
    },

    verified () {
      console.log(this.bpClass_flag)
      // debugger
      /* if (this.flag) {   // 未授权
          // this.flag = false
          for (let i in this.authMsg) {
            this.authMsg[i] = ''
          }

          //this.baseInfo.auth_flag = 'N'
          this.lastInfo = { ...this.baseInfo, ...this.legal_personMsg }
          this.saveInfo = {
            ...this.lastInfo,
            ...this.authMsg,
            ...this.invoiceInfo,
          }
          //this.saveInfo.auth_flag = 'N'
        } */
      if (!this.flag) { // 已授权
        // this.flag = false
        /*  for (let i in this.legal_personMsg) {
              this.legal_personMsg[i] = ''
            } */

        this.baseInfo.auth_flag = 'Y'
        this.lastInfo = {...this.baseInfo, ...this.legal_personMsg, ...this.authMsg}
        this.saveInfo = {
          ...this.lastInfo,
          ...this.invoiceInfo,
        }
      } else { // 未授权
        this.baseInfo.auth_flag = 'N'
        this.lastInfo = {...this.baseInfo, ...this.legal_personMsg}
        this.saveInfo = {
          ...this.lastInfo,
          ...this.authMsg,
          ...this.invoiceInfo,
        }
      }
      let vm = this

      // 校验基本信息
      if (this.bpClass_flag) { // 业务经办人
        console.log(this.lastInfo)
        delete this.lastInfo.business_license_num
        delete this.lastInfo.id_card_name
        for (var key in vm.lastInfo) {
          if (!vm.lastInfo[key]) {
            switch (key) {
              case 'province_id':
                vm.hlsPopup.showLongCenter('请选择省份')
                break
              case 'city_id':
                vm.hlsPopup.showLongCenter('请选择城市')
                break
              case 'district_id':
                vm.hlsPopup.showLongCenter('请选择区县')
                break
              case 'bp_type':
                vm.hlsPopup.showLongCenter('客户类型未填写')
                break
              case 'agent_username':
                vm.hlsPopup.showLongCenter('业务经办员工代码未填写')
                break
              case 'bp_name':
                vm.hlsPopup.showLongCenter('公司名称未填写')
                break
              case 'enterprise_type':
                vm.hlsPopup.showLongCenter('企业类型未填写')
                break
              case 'organization_code':
                vm.hlsPopup.showLongCenter('统一社会信用代码未填写')
                break
              case 'registered_capital':
                vm.hlsPopup.showLongCenter('注册资本未填写')
                break
              case 'legal_person':
                vm.hlsPopup.showLongCenter('法定代表人未填写')
                break
              case 'registered_place':
                vm.hlsPopup.showLongCenter('注册地址未填写')
                break
              case 'business_address':
                vm.hlsPopup.showLongCenter('经营地址未填写')
                break
              case 'phone':
                vm.hlsPopup.showLongCenter('固定电话未填写')
                break
              case 'id_card_no':
                vm.hlsPopup.showLongCenter('身份证未填写')
                break
              case 'cell_phone':
                vm.hlsPopup.showLongCenter('手机号未填写')
                break
              case 'living_address':
                vm.hlsPopup.showLongCenter('联系地址未填写')
                break
              case 'id_card_date_from':
                vm.hlsPopup.showLongCenter('身份证有效期从未填写')
                break
              case 'id_card_date_to':
                vm.hlsPopup.showLongCenter('身份证有效期到未填写')
                break
              case 'auth_person_name':
                vm.hlsPopup.showLongCenter('授权人姓名未填写')
                break
              case 'auth_person_id_card':
                vm.hlsPopup.showLongCenter('授权人身份证号未填写')
                break
              case 'auth_cell_phone':
                vm.hlsPopup.showLongCenter('授权人手机号未填写')
                break
              case 'auth_id_card_date_from':
                vm.hlsPopup.showLongCenter('授权人身份证有效期从未填写')
                break
              case 'auth_id_card_date_to':
                vm.hlsPopup.showLongCenter('授权人身份证有效期到未填写')
                break
              case 'user_phone':
                vm.hlsPopup.showLongCenter('您还未登录')
                break
              case 'auth_person_position':
                vm.hlsPopup.showLongCenter('公司职务未填写')
                break
              case 'auth_person_matter':
                vm.hlsPopup.showLongCenter('授权事项未填写')
                break
            }
            // vm.hlsPopup.showLongCenter('基本信息不完整!')
            vm.msg_flag = false
            return
          } else {
            vm.msg_flag = true
          }
        }
        this.lastInfo.business_license_num = ''
        this.lastInfo.id_card_name = ''
      } else { // 非业务经办人
        delete this.lastInfo.agent_username
        delete this.lastInfo.id_card_name
        for (var key1 in vm.lastInfo) {
          if (!vm.lastInfo[key1]) {
            console.log('key', key1)
            // debugger
            switch (key1) {
              case 'bp_type':
                vm.hlsPopup.showLongCenter('客户类型未填写')
                break
              case 'province_id':
                vm.hlsPopup.showLongCenter('请选择省份')
                break
              case 'city_id':
                vm.hlsPopup.showLongCenter('请选择城市')
                break
              case 'district_id':
                vm.hlsPopup.showLongCenter('请选择区县')
                break
              case 'bp_name':
                vm.hlsPopup.showLongCenter('公司名称未填写')
                break
              case 'enterprise_type':
                vm.hlsPopup.showLongCenter('企业类型未填写')
                break
              case 'organization_code':
                vm.hlsPopup.showLongCenter('统一社会信用代码未填写')
                break
              case 'registered_capital':
                vm.hlsPopup.showLongCenter('注册资本未填写')
                break
              case 'legal_person':
                vm.hlsPopup.showLongCenter('法定代表人未填写')
                break
              case 'registered_place':
                vm.hlsPopup.showLongCenter('注册地址未填写')
                break
              case 'business_address':
                vm.hlsPopup.showLongCenter('经营地址未填写')
                break
              case 'phone':
                vm.hlsPopup.showLongCenter('固定电话未填写')
                break
              case 'id_card_no':
                vm.hlsPopup.showLongCenter('身份证未填写')
                break
              case 'cell_phone':
                vm.hlsPopup.showLongCenter('手机号未填写')
                break
              case 'living_address':
                vm.hlsPopup.showLongCenter('联系地址未填写')
                break
              case 'auth_person_name':
                vm.hlsPopup.showLongCenter('授权人姓名未填写')
                break
              case 'auth_person_id_card':
                vm.hlsPopup.showLongCenter('授权人身份证号未填写')
                break
              case 'auth_cell_phone':
                vm.hlsPopup.showLongCenter('授权人手机号未填写')
                break
              case 'auth_id_card_date_from':
                vm.hlsPopup.showLongCenter('授权人身份证有效期从未填写')
                break
              case 'auth_id_card_date_to':
                vm.hlsPopup.showLongCenter('授权人身份证有效期到未填写')
                break
              case 'user_phone':
                vm.hlsPopup.showLongCenter('您还未登录')
                break
              case 'auth_person_position':
                vm.hlsPopup.showLongCenter('公司职务未填写')
                break
              case 'auth_person_matter':
                vm.hlsPopup.showLongCenter('授权事项未填写')
                break
            }
            // vm.hlsPopup.showLongCenter('基本信息不完整!')
            vm.msg_flag = false
            return
          } else {
            vm.msg_flag = true
          }
        }
        this.lastInfo.agent_username = ''
        this.lastInfo.id_card_name = ''
      }
      /*  // 校验电话号
        let re = this.hlsUtil.phoneNumber(this.saveInfo.cell_phone)
        if (!re && this.baseInfo.auth_flag === 'N') {
          vm.msg_flag = false
          vm.hlsPopup.showLongCenter('请输入正确手机号')
        } */
      // 校验身份证号vm.hlsUtil.isCardID(vm.baseInfo.id_card_no)

      if (vm.hlsUtil.isCardID(vm.saveInfo.id_card_no)) {
        vm.msg_flag = false
        vm.hlsPopup.showLongCenter('身份证不正确')
      }
      if (!vm.flag) {
        if (vm.hlsUtil.isCardID(vm.saveInfo.auth_person_id_card)) {
          vm.msg_flag = false
          vm.hlsPopup.showLongCenter('授权人身份证不正确')
        }
      }

      if (vm.msg_flag) {
        vm.dowload_list = [] // 保存之前将图片下载列表清空,防止出现重复的图片
        vm.upload_list = [] // 保存之前将待上传列表清空,防止出现重复的图片
        vm.hlsPopup.showLoading('请稍后')
        let url = $config.basePath + 'bp_org_bind_save'
        let param = {
          master: vm.saveInfo,
        }
        vm.hlsHttp.post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading()
          if (res.result === 'S') {
            vm.hlsPopup.showSuccess('保存成功,请去维护附件信息')
            vm.bp_id = res.bp_id
            vm.getBankInfo()
            // 查询资料清单
            vm.loadItemList()
          } else {
            vm.hlsPopup.showLongCenter(res.message)
          }
        })
      }
      // this.loadItemList()
    },
    hideModal () {
      this.showModalValue = false
    },
    getInfo (i, isClear) {
      this.isClear = isClear
      if (isClear) {
        // this.bank_lists = {}
        this.bank_lists.bank_account_num = ''
        this.bank_lists.bank_account_name = ''
        this.bank_lists.bank_card_type = ''
        this.bank_lists.bank_full_name = ''
        this.bank_lists.bank_branch_name = ''
      }
      this.showModalValue = i
    },
    getList (i) {
      Object.assign(this.bank_lists, i)
    },
    getinvoiceList (val) {
      console.log(val)
      this.invoiceInfo = val
      this.baseInfo.organization_code = val.organization_code
    },
    authorizeChange () {
      this.flag = !this.flag
      if (this.flag) {
        this.auth_flag = '未授权'
      } else {
        this.auth_flag = '已授权'
      }
    },
    selectProvince (e) {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.provinceList,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.baseInfo.province_id = obj.bp_type
          vm.baseInfo.province_name = obj.bp_type_n
          vm.getCity()
        },
      })
    },
    selectCity (e) {
      let vm = this
      if (vm.baseInfo.province_id === '') {
        hlsPopup.showLongCenter('请先选择省份')
      }
      vm.hlsPopup.selectList({
        list: vm.cityList,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.baseInfo.city_id = obj.bp_type
          vm.baseInfo.city_name = obj.bp_type_n
          vm.getDistrict()
        },
      })
    },
    selectDistrict (e) {
      let vm = this
      if (vm.baseInfo.city_id === '' || vm.baseInfo.province_id === '') {
        hlsPopup.showLongCenter('请先选择城市')
      }
      vm.hlsPopup.selectList({
        list: vm.districtList,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.baseInfo.district_id = obj.bp_type
          vm.baseInfo.district_name = obj.bp_type_n
        },
      })
    },
    getProvince () {
      let vm = this
      let url = process.env.basePath + 'fnd_province_query'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.provinceList = res.lists.map(item => {
            return {
              code: item.province_id,
              code_name: item.province_name,
            }
          })
        }
      })
    },
    getCity () {
      let vm = this
      let url = process.env.basePath + 'fnd_city_query'
      let param = {
        province_id: vm.baseInfo.province_id,
      }
      // vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        // vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.cityList = res.lists.map(item => {
            return {
              code: item.city_id,
              code_name: item.city_name,
            }
          })
        }
      })
    },
    getDistrict () {
      let vm = this
      let url = process.env.basePath + 'fnd_district_query'
      let param = {
        city_id: vm.baseInfo.city_id,
      }
      // vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        // vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.districtList = res.lists.map(item => {
            return {
              code: item.district_id,
              code_name: item.district_name,
            }
          })
        }
      })
    },
    // 客户类型下拉框
    selectIdType (e) {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.typeList,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.baseInfo.bp_type = obj.bp_type
          vm.baseInfo.bp_type_n = obj.bp_type_n
          if (
            vm.baseInfo.bp_type === 'TENANT' ||
              vm.baseInfo.bp_type === 'GUTA'
          ) {
            vm.bp_type_flag = true
          }
        },
      })
    },
    getTabNum (i) {
      this.tabNum = i
    },
    fileSuccess (fileList, result) {
      this.fileList = fileList
      this.fileList.forEach((itemFile, index) => {
        if (
          result.response &&
            itemFile.file &&
            !itemFile.attachment_id &&
            result.response.fileName === itemFile.file.name
        ) {
          itemFile.attachment_id = result.response.attachment_id
        }
      })
    },

    //  客户类型请求
    getBpType () {
      let vm = this
      let url = process.env.basePath + 'bp_type_select'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          console.log('客户类型。。。。。。', res.lists)
          vm.typeList = res.lists
            .filter(item => item.bp_type !== 'OFFICE')
            .map(item => {
              return {
                code: item.bp_type,
                code_name: item.bp_type_n,
              }
            })
            // vm.typeList = res.lists.map(item => {
            //   return {
            //     code: item.bp_type,
            //     code_name: item.bp_type_n,
            //   }
            // })
        }
      })
    },
    getbaseInfo () {
      let vm = this
      let url = process.env.basePath + 'bp_org_info_query'
      let param = {
        bp_id: vm.$route.params.bp_id,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          delete res.info.bp_id
          vm.baseInfo = {...res.info}
          vm.authMsg.auth_person_name = res.info.auth_person_name
          vm.authMsg.auth_person_matter = res.info.auth_person_matter
          vm.authMsg.auth_person_id_card = res.info.auth_person_id_card
          vm.authMsg.auth_person_position = res.info.auth_person_position
          vm.authMsg.auth_id_card_date_from = res.info.auth_id_card_date_from
          vm.authMsg.auth_id_card_date_to = res.info.auth_id_card_date_to
          vm.authMsg.auth_cell_phone = res.info.auth_cell_phone
          // delete res.info.agent_username
          vm.legal_personMsg.id_card_no = res.info.id_card_no
          // vm.legal_personMsg.legal_person = res.info.legal_person
          vm.legal_personMsg.cell_phone = res.info.cell_phone
          vm.legal_personMsg.living_address = res.info.living_address
          vm.legal_personMsg.id_card_date_from = res.info.id_card_date_from
          vm.legal_personMsg.id_card_date_to = res.info.id_card_date_to
          Object.assign(vm.saveInfo, res.info)
          vm.addRows(vm.baseInfo.registered_place)
          vm.addRowsLive(vm.baseInfo.business_address)
          if (vm.baseInfo.auth_flag === '是') {
            vm.flag = false
          } else if (vm.baseInfo.auth_flag === '否') {
            vm.flag = true
          }
          vm.loadItemList()// 附件查询
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },

    // ocr识别入口
    ocrShow (ocrType, type) {
      let vm = this
      hlsPopup.showActionSheet({
        titleText: '请选择照片',
        buttonArray: ['拍照', '从相册取'],
        callback: index => {
          if (index === 0) {
            vm.openCamera(ocrType, type)
          } else {
            vm.takePicture(ocrType, type)
          }
        },
      })
    },
    openCamera (ocrType, type) {
      let vm = this
      let cameraoptions = {
        quality: 60,
        width: 1843,
        height: 1382,
      }
      let success = function (imgdata) {
        if (!imgdata) {
          hlsPopup.showLongCenter('请拍照')
        } else {
          if (ocrType === 'idCard') {
            type === 'front' ? (vm.idCardFront = hlsUtil.convertImageUrl(imgdata), vm.idCardIdentify(imgdata, 'idCard'), vm.idCardFrontEditFlag = true) : (vm.idCardBack = hlsUtil.convertImageUrl(imgdata), vm.idCardBackIdentify(imgdata, 'idCard'), vm.idCardBackEditFlag = true)
          } else if (ocrType === 'authidCard') {
            type === 'front' ? (vm.authidCardFront = hlsUtil.convertImageUrl(imgdata), vm.idCardIdentify(imgdata, 'authidCard'), vm.authidCardFrontEditFlag = true) : (vm.authidCardBack = hlsUtil.convertImageUrl(imgdata), vm.idCardBackIdentify(imgdata, 'authidCard'), vm.authidCardBackEditFlag = true)
          } else if (ocrType === 'bankCard') {
            vm.bankImg = hlsUtil.convertImageUrl(imgdata)
            vm.bankCardIdentify(imgdata)
          } else if (ocrType === 'license') {
            vm.licenseEditFlag = true // 营业执照图片状态已修改
            vm.licenseImg = hlsUtil.convertImageUrl(imgdata)
            vm.licenseIdentify(imgdata)
          }
        }
      }
      let error = function () {
        hlsPopup.showLongCenter('请拍照')
      }
      hlsUtil.openCamera(cameraoptions, success, error)
    },
    takePicture (ocrType, type) {
      let vm = this
      var cameraoptions = {
        quality: 70,
        width: 1843,
        height: 1382,
        maxCount: 1,
      }
      let success = function (imgUrl) {
        if (imgUrl.length === 0) {
          hlsPopup.showLongCenter('请选择一张图片')
        } else {
          if (ocrType === 'idCard') {
            type === 'front' ? (vm.idCardFront = hlsUtil.convertImageUrl(imgUrl[0])
            , vm.idCardIdentify(imgUrl[0], 'idCard'), vm.idCardFrontEditFlag = true) : (vm.idCardBack = hlsUtil.convertImageUrl(imgUrl[0]), vm.idCardBackIdentify(imgUrl[0], 'idCard'), vm.idCardBackEditFlag = true)
          } else if (ocrType === 'authidCard') {
            type === 'front' ? (vm.authidCardFront = hlsUtil.convertImageUrl(imgUrl[0]), vm.idCardIdentify(imgUrl[0], 'authidCard'), vm.authidCardFrontEditFlag = true) : (vm.authidCardBack = hlsUtil.convertImageUrl(imgUrl[0]), vm.idCardBackIdentify(imgUrl[0], 'authidCard'), vm.authidCardBackEditFlag = true)
          } else if (ocrType === 'bankCard') {
            vm.bankImg = hlsUtil.convertImageUrl(imgUrl[0])
            vm.bankCardIdentify(imgUrl[0])
          } else if (ocrType === 'license') {
            vm.licenseEditFlag = true // 营业执照图片状态已修改
            vm.licenseImg = hlsUtil.convertImageUrl(imgUrl[0])
            vm.licenseIdentify(imgUrl[0])
          }
        }
      }
      let error = function () {
        hlsPopup.showLongCenter(error)
      }
      vm.hlsUtil.takePicture(cameraoptions, success, error)
    },
    // 身份证识别
    idCardIdentify (fileUrl, cardType) {
      let vm = this
      hlsPopup.showLoading('正在识别')
      let url = process.env.ocrPath + '/baidu/ocr/idCard'
      hlsUtil.baiduOcr(fileUrl, url, function (res) {
        hlsPopup.hideLoading()
        let result = res.result.words_result
        if (cardType === 'idCard') { // 法定代表人
          // 未授权 姓名,身份证号
          vm.baseInfo.legal_person = result.姓名.words
          vm.legal_personMsg.id_card_no = result.公民身份号码.words
          vm.legal_personMsg.living_address = result.住址.words // 联系地址默认为户籍地址,支持修改
        } else { // 授权人
          // 已授权  姓名,身份证号
          vm.authMsg.auth_person_name = result.姓名.words
          vm.authMsg.auth_person_id_card = result.公民身份号码.words
        }
      })
    },
    // 身份证背面识别
    idCardBackIdentify (fileUrl, cardType) {
      let vm = this
      hlsPopup.showLoading('正在识别')
      let url = process.env.ocrPath + '/baidu/ocr/idCardBack'
      hlsUtil.baiduOcr(fileUrl, url, function (res) {
        hlsPopup.hideLoading()
        let result = res.result.words_result
        if (cardType === 'idCard') { // 法定代表人
          // 未授权 身份证有效期从,身份证有效期到
          vm.legal_personMsg.id_card_date_from = result.签发日期.words
          vm.legal_personMsg.id_card_date_to = result.失效日期.words
        } else {
          // 已授权  身份证有效期从,身份证有效期到
          vm.authMsg.auth_id_card_date_from = result.签发日期.words
          vm.authMsg.auth_id_card_date_to = result.失效日期.words
        }
      })
    },
    // 银行卡识别
    bankCardIdentify (fileUrl) {
      let vm = this
      hlsPopup.showLoading('正在识别')
      let url = process.env.ocrPath + '/baidu/ocr/bankCard'
      hlsUtil.baiduOcr(fileUrl, url, function (res) {
        hlsPopup.hideLoading()
        let result = res.result.result
        vm.bank_lists.bank_account_num = result.bank_card_number.replace(/\s*/g, '')
        vm.bank_lists.bank_full_name = result.bank_name
        vm.bank_lists.bank_card_type = result.bank_card_type
      })
    },
    // 营业执照识别
    licenseIdentify (fileUrl) {
      let vm = this
      hlsPopup.showLoading('正在识别')
      let url = process.env.ocrPath + '/baidu/ocr/businessLicense'
      hlsUtil.baiduOcr(fileUrl, url, function (res) {
        hlsPopup.hideLoading()
        let result = res.result.words_result
        vm.baseInfo.bp_name = result.单位名称.words
        vm.baseInfo.enterprise_type = result.类型.words
        vm.baseInfo.registered_capital = result.注册资本.words
        vm.baseInfo.legal_person = result.法人.words
        vm.baseInfo.registered_place = result.地址.words
        vm.baseInfo.organization_code = result.社会信用代码.words
        vm.baseInfo.business_address = vm.baseInfo.registered_place // 经营地址默认为注册地址,支持修改
      })
    },
    load_picture (check_id, index, cdd_item) {
      let vm = this
      let url = process.env.basePath + 'attachment_list_query' + '&index' + index // 附件查询
      let param = {
        check_id: check_id,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          res.lists.forEach(item => {
            item['url'] = process.env.filePath + 'attachment_id=' + item.attachment_id + '&access_token=' + window.localStorage.access_token
          })
          switch (cdd_item) {
            case 'LEGAL_ID_CARD_F': // 法定代表人身份证正面
              if (!vm.idCardFrontUrlFlag) {
                vm.idCardFront = res.lists[0].url
              }
              vm.idCardFrontAttachmentId = res.lists[0].attachment_id
              break
            case 'LEGAL_ID_CARD_B': // 法定代表人身份证背面
              if (!vm.idCardBackUrlFlag) {
                vm.idCardBack = res.lists[0].url
              }
              vm.idCardBackAttachmentId = res.lists[0].attachment_id
              break
            case 'AUTHOR_ID_CARD_F': // 授权人身份证正面
              if (!vm.authidCardFrontUrlFlag) {
                vm.authidCardFront = res.lists[0].url
              }
              vm.authidCardFrontAttachmentId = res.lists[0].attachment_id
              break
            case 'AUTHOR_ID_CARD_B': // 授权人身份证背面
              if (!vm.authidCardBackUrlFlag) {
                vm.authidCardBack = res.lists[0].url
              }
              vm.authidCardBackAttachmentId = res.lists[0].attachment_id
              break
            case 'ORG_CODE':
              if (!vm.licenseImgUrlFlag) {
                vm.licenseImg = res.lists[0].url
              }
              vm.licenseAttachmentId = res.lists[0].attachment_id
              break
            case 'L/A':
              if (!vm.laImgUrlFlag) {
                vm.laImg = res.lists[0].url
              }
              vm.laAttachmentId = res.lists[0].attachment_id
              break
            default:
              vm.dowload_list.push(res.lists)
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    loadItemList () {
      let vm = this
      let bpId = vm.from ? vm.$route.params.bp_id : vm.bp_id
      if (bpId === 'undefined') {
        bpId = null
      }
      let url = process.env.basePath + 'prj_cdd_check_list'
      let param = {
        master: {
          'document_id': bpId,
          'document_table': 'HLS_BP_MASTER',
          'tab_group': vm.flag ? 'HLS_ORG_NAUTH' : 'HLS_ORG_AUTH',
        },
      }
      // vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        // vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.cddItemList = []
          var listTemp = [...res.lists]
          listTemp.forEach(item => {
            switch (item.cdd_item) {
              case 'LEGAL_ID_CARD_F': // 法定代表人身份证正面
                vm.idCardFrontCheck_id = item.check_id
                break
              case 'LEGAL_ID_CARD_B': // 法定代表人身份证背面
                vm.idCardBackCheck_id = item.check_id
                break
              case 'AUTHOR_ID_CARD_F': // 授权人身份证正面
                vm.authidCardFrontCheck_id = item.check_id
                break
              case 'AUTHOR_ID_CARD_B': //  授权人身份证背面
                vm.authidCardBackCheck_id = item.check_id
                break
              case 'ORG_CODE':
                vm.licenseCheck_id = item.check_id
                break
              case 'BANK_CARD':

                break
              case 'L/A':
                vm.laCheck_id = item.check_id
                break
              default:
                vm.cddItemList.push(item)
            }
          })
          // 查询图片
          listTemp.forEach((item, index) => {
            vm.load_picture(item.check_id, index, item.cdd_item)
          })
          if (vm.idCardFrontEditFlag) { // 法定代表人身份证正面图片已修改,重新上传
            vm.idCardFrontUrlFlag = true
            vm.delete_pic_to_ocr(vm.idCardFrontAttachmentId)// 先删除之前识vm.delete_pic_to_ocr(vm.idCardFrontAttachmentId)// 先删除之前识别的图片
            var list = []
            let obj = {
              'pkvalue': vm.idCardFrontCheck_id,
              'source_type': 'PRJ_CDD_ITEM_CHECK',
              'picture': '',
              'check_id': vm.idCardFrontCheck_id,
              'filePath': vm.idCardFront,
              'attachment_id': '',
              'user_id': 1,
              'fileName': '法人身份证正面',
            }
            list.push(obj)
            vm.save_picture(list)
            vm.idCardFrontEditFlag = false // 置为false,防止再次保存重复上传,只有重新识别才会重新上传
          }
          if (vm.idCardBackEditFlag) { // 法定代表人身份证背面图片已修改,重新上传
            vm.idCardBackUrlFlag = true
            vm.delete_pic_to_ocr(vm.idCardBackAttachmentId)// 先删除之前识别的图片
            var list = []
            let obj = {
              'pkvalue': vm.idCardBackCheck_id,
              'source_type': 'PRJ_CDD_ITEM_CHECK',
              'picture': '',
              'check_id': vm.idCardBackCheck_id,
              'filePath': vm.idCardBack,
              'attachment_id': '',
              'user_id': 1,
              'fileName': '法人身份证背面',
            }
            list.push(obj)
            vm.save_picture(list)
            vm.idCardBackEditFlag = false // 置为false,防止再次保存重复上传,只有重新识别才会重新上传
          }
          if (vm.authidCardFrontEditFlag) { // 授权人身份证正面图片已修改,重新上传
            vm.authidCardFrontUrlFlag = true
            vm.delete_pic_to_ocr(vm.authidCardFrontAttachmentId)// 先删除之前识别的图片
            var list = []
            let obj = {
              'pkvalue': vm.authidCardFrontCheck_id,
              'source_type': 'PRJ_CDD_ITEM_CHECK',
              'picture': '',
              'check_id': vm.authidCardFrontCheck_id,
              'filePath': vm.authidCardFront,
              'attachment_id': '',
              'user_id': 1,
              'fileName': '授权人身份证正面',
            }
            list.push(obj)
            vm.save_picture(list)
            vm.authidCardFrontEditFlag = false // 置为false,防止再次保存重复上传,只有重新识别才会重新上传
          }
          if (vm.authidCardBackEditFlag) { // 授权人身份证背面图片已修改,重新上传
            vm.authidCardBackUrlFlag = true
            vm.delete_pic_to_ocr(vm.authidCardBackAttachmentId)// 先删除之前识别的图片
            var list = []
            let obj = {
              'pkvalue': vm.authidCardBackCheck_id,
              'source_type': 'PRJ_CDD_ITEM_CHECK',
              'picture': '',
              'check_id': vm.authidCardBackCheck_id,
              'filePath': vm.authidCardBack,
              'attachment_id': '',
              'user_id': 1,
              'fileName': '授权人身份证背面',
            }
            list.push(obj)
            vm.save_picture(list)
            vm.authidCardBackEditFlag = false // 置为false,防止再次保存重复上传,只有重新识别才会重新上传
          }
          if (vm.licenseEditFlag) { // 营业执照图片已修改,重新上传
            vm.licenseImgUrlFlag = true
            vm.delete_pic_to_ocr(vm.licenseAttachmentId)// 先删除之前识别的图片
            var list = []
            let obj = {
              'pkvalue': vm.licenseCheck_id,
              'source_type': 'PRJ_CDD_ITEM_CHECK',
              'picture': '',
              'check_id': vm.licenseCheck_id,
              'filePath': vm.licenseImg,
              'attachment_id': '',
              'user_id': 1,
              'fileName': '企业营业执照',
            }
            list.push(obj)
            vm.save_picture(list)
            vm.licenseEditFlag = false // 置为false,防止再次保存重复上传,只有重新识别才会重新上传
          }
          if (vm.LaEditFlag) { // 授权书图片已修改,重新上传
            vm.laImgUrlFlag = true
            vm.delete_pic_to_ocr(vm.laAttachmentId)// 先删除之前识别的图片
            var list = []
            let obj = {
              'pkvalue': vm.laCheck_id,
              'source_type': 'PRJ_CDD_ITEM_CHECK',
              'picture': '',
              'check_id': vm.laCheck_id,
              'filePath': vm.laImg,
              'attachment_id': '',
              'user_id': 1,
              'fileName': '授权证书',
            }
            list.push(obj)
            vm.save_picture(list)
            vm.LaEditFlag = false // 置为false,防止再次保存重复上传,只有重新识别才会重新上传
          }
        }
      })
    },
    // 移除图片
    remove_pic (attachment_id, index) {
      let vm = this
      var delete_list = []
      let obj = {'attachment_id': attachment_id}
      delete_list.push(obj)
      let url = process.env.basePath + 'app_delete_attment' // 附件删除
      let param = {
        'picturelist': delete_list,
      }
      hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        hlsPopup.hideLoading()
        if (res.result === 'S') {
          hlsPopup.showLongCenter('删除成功!')
          vm.remove_upload_list(attachment_id, index)
        } else if (res.result === 'E') {
          hlsPopup.showShortCenter(res.message)
        }
      })
    },
    remove_upload_list (attachment_id, index) {
      let vm = this
      vm.upload_list.remove(index)
      vm.upload_list.sort()
    },
    // 删除图片
    delete_pic (attachment_id) {
      let vm = this
      var delete_list = []
      let obj = {'attachment_id': attachment_id}
      delete_list.push(obj)
      let url = process.env.basePath + 'app_delete_attment' // 附件删除
      let param = {
        'picturelist': delete_list,
      }
      hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        hlsPopup.hideLoading()
        if (res.result === 'S') {
          hlsPopup.showLongCenter('删除成功!')
          vm.remove_dowload_list(attachment_id)
        } else if (res.result === 'E') {
          hlsPopup.showShortCenter(res.message)
        }
      })
    },
    // 身份证重新识别后,先删除之前的照片
    delete_pic_to_ocr (attachment_id) {
      let vm = this
      var delete_list = []
      let obj = {attachment_id: attachment_id}
      delete_list.push(obj)
      let url = process.env.basePath + 'app_delete_attment' // 附件删除
      let param = {
        picturelist: delete_list,
      }
      vm.hlsHttp.post(url, param).then(function (res) {
        hlsPopup.hideLoading()
        if (res.result === 'S') {

        } else if (res.result === 'E') {

        }
      })
    },
    remove_dowload_list (attachment_id) {
      let vm = this
      for (let i = 0; i < vm.dowload_list.length; i++) {
        let list = vm.dowload_list[i]
        for (let j = 0; j < list.length; j++) {
          let li = list[j]
          if (parseFloat(li.attachment_id) === parseFloat(attachment_id)) {
            list.remove(j)
            break
          }
        }
      }
      vm.dowload_list.sort()
    },
    // 授权书上传入口
    LaUpload () {
      let vm = this
      hlsPopup.showActionSheet({
        titleText: '请选择照片',
        buttonArray: ['拍照', '从相册取'],
        callback: index => {
          if (index === 0) {
            vm.LaUploadOpenCamera()
          } else {
            vm.LaUploadTakePicture()
          }
        },
      })
    },
    LaUploadOpenCamera () {
      let vm = this
      let cameraoptions = {
        quality: 100,
      }
      let success = function (imgdata) {
        vm.LaEditFlag = true
        vm.laImg = hlsUtil.convertImageUrl(imgdata)
      }
      let error = function () {
        hlsPopup.showLongCenter('请拍照')
      }
      hlsUtil.openCamera(cameraoptions, success, error)
    },
    LaUploadTakePicture () {
      let vm = this
      let cameraoptions = {
        quality: 100,
      }
      let success = function (imgUrl) {
        if (imgUrl.length === 0) {
          hlsPopup.showLongCenter('请选择一张图片')
        } else {
          vm.LaEditFlag = true
          vm.laImg = hlsUtil.convertImageUrl(imgUrl[0])
        }
      }
      let error = function () {
      }
      vm.hlsUtil.takePicture(cameraoptions, success, error)
    },
    // 图片上传入口
    imgUploadShow (description, check_id) {
      let vm = this
      // vm.upload_list = []
      hlsPopup.showActionSheet({
        titleText: '请选择照片',
        buttonArray: ['拍照', '从相册取'],
        callback: index => {
          if (index === 0) {
            vm.imgUploadOpenCamera(description, check_id)
          } else {
            vm.imgUploadTakePicture(description, check_id)
          }
        },
      })
    },
    imgUploadOpenCamera (description, check_id) {
      let vm = this
      let obj = {
        'pkvalue': check_id,
        'source_type': 'PRJ_CDD_ITEM_CHECK',
        'picture': '',
        'check_id': check_id,
        'filePath': '',
        'attachment_id': '',
        'user_id': 1,
        'fileName': description + '_' + new Date().getTime(),
      }
      let cameraoptions = {
        quality: 100,
      }
      let success = function (imgdata) {
        obj.picture = hlsUtil.convertImageUrl(imgdata)
        obj.filePath = imgdata
        let list = []
        list.push(obj)
        // 拍完一张立马执行保存图片逻辑
        vm.save_picture(list)
      }
      let error = function () {
        hlsPopup.showLongCenter('请拍照')
      }
      hlsUtil.openCamera(cameraoptions, success, error)
    },
    imgUploadTakePicture (description, check_id) {
      let vm = this
      let cameraoptions = {
        quality: 100,
      }
      let success = function (imgUrl) {
        var list = []
        for (let i = 0; i < imgUrl.length; i++) {
          let obj = {
            'pkvalue': check_id,
            'source_type': 'PRJ_CDD_ITEM_CHECK',
            'picture': '',
            'check_id': check_id,
            'filePath': '',
            'attachment_id': '',
            'user_id': 1,
            'fileName': description + '_' + new Date().getTime(),
          }
          obj.picture = hlsUtil.convertImageUrl(imgUrl[i])
          obj.filePath = imgUrl[i]
          list.push(obj)
        }
        vm.save_picture(list)
      }
      let error = function () {
      }
      vm.hlsUtil.takePicture(cameraoptions, success, error)
    },
    // 图片保存
    save_picture (list) {
      let vm = this
      if (list.length) {
        // hlsPopup.showLoading('图片上传请稍候')
        var alreadyUploadNum = 0
        var attLength = 0
        var recordUploadInterval = setInterval(function () {
          if (alreadyUploadNum === attLength) {
            clearInterval(recordUploadInterval)
            /*  hlsPopup.hideLoading()
                hlsPopup.showLongCenter('图片上传成功') */
          }
        }, 500)
        for (var i = 0; i < list.length; i++) {
          let uploadSuccess = function (res) {
            if (res.result === 'S') {
              alreadyUploadNum++
              for (var j = 0; j < list.length; j++) {
                if (list[j].filePath === res.response.filePath) {
                  list[j].attachment_id = res.response.attachment_id
                  vm.upload_list.push(list[j])
                  break
                }
              }
            } else {
              hlsPopup.hideLoading()
            }
          }
          if (!list[i].attachment_id) {
            attLength++
            hlsUtil.fileUploadSvc(list[i], uploadSuccess)
          }
        }
      } else {
        hlsPopup.hideLoading()
      }
    },
    // 查看大图
    showBigPicture (pic) {
      let vm = this
      vm.hlsPopup.showBigPicture({
        imgUrl: pic,
        width: '100%',
      })
    },
  },
}
</script>
<style lang='less'>
  #base-info {
    font-family: PingFangSC-Regular;

    input::placeholder {
      color: #b4b4b5;
    }

    textarea::placeholder {
      color: #b4b4b5;
    }

    textarea {
      // height: 28px;
      text-align: right;
      color: #666;
      // padding-top:16px;
    }

    .type-save {
      color: #fff;
      width: 80px;
      height: 25px;
      font-size: 10px;
      border-radius: 5px;
      margin: 5px 15px 5px 0px;
      float: right;
      background-color: @headerColor;
    }

    .typeBP {
      span {
        display: inline-block;
        padding: 1px 5px;
        border-radius: 5px;
        text-align: center;
        line-height: 20px;
        background-color: rgba(220, 220, 221, 0.26);
        color: #666;
        margin-right: 5px;
        margin-top: 3px;
      }

      img {
        width: 10px;
        height: 10px;
        margin-left: 1px;
      }
    }

    .tax {
      width: 351px;
      height: 78px;
      background: #fff;
      margin: 0 auto;
      margin-bottom: 15px;
      display: flex;
      align-items: center;

      .left-img {
        width: 24px;
        height: 28px;
        flex: 2.5;
        padding-left: 24px;
      }

      div {
        flex: 25;
        padding-left: 24px;

        span {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #383F45;
          letter-spacing: 0;
          line-height: 22px;
        }

        p {
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: rgba(56, 63, 69, 0.50);
          letter-spacing: 0;
          line-height: 22px;
        }
      }

      .right-img {
        width: 10px;
        height: 16px;
        flex: 1;
        padding-right: 21px;
      }
    }

    .content {
      margin-top: 3px;
      height: 76%;
      padding-bottom: 40px;

      .font-color {
        color: #656464;
      }

      .martop {
        margin-top: -10px;
      }

      .userInfo {
        height: 40px;
        line-height: 40px;
        background-color: #fafafa;
        color: @headerColor;
        font-size: 15px;
        margin-left: 16px;
        position: relative;
      }

      .userInfo::before {
        content: "";
        display: block;
        width: 4px;
        height: 20px;
        background-color: @headerColor;
        position: absolute;
        left: -15px;
        top: 10px;
      }

      .types {
        margin-top: 0;
      }

      .authorize {
        width: 100%;
        height: 32px;
        display: flex;
        flex-direction: row;
        align-items: center;
        background: rgba(0, 70, 156, 0.03);
        margin-bottom: 10px;

        .authorize-select {
          // width: 48px;
          height: 20px;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #656464;
          line-height: 20px;
          margin-left: 16px;
        }

        .authorize-checklist {
          width: 16px;
          height: 16px;
          margin-left: 8px;

          div {
            width: 100%;
            height: 100%;
            border: 1px solid @headerColor;
            border-radius: 3px;
          }
        }
      }

      .upload-id-cards {
        height: 176px;
        background-color: #fff;

        span {
          display: block;
          color: #656464;
          margin-left: 16px;
          padding-top: 16px;
          font-size: 13px;
        }

        .upload-box {
          display: flex;
          justify-content: center;
          margin-top: 15px;

          div {
            width: 172px;
            height: 120px;
            border: 1px dashed #dcdcdd;
            text-align: center;
            font-size: 14px;
            color: #b4b4b5;

            .front,
            .back {
              width: 172px;
              height: 120px;
            }
          }

          div:nth-of-type(2) {
            margin-left: 7px;
          }

          img {
            margin-top: 32px;
            width: 58px;
            height: 45px;
          }

          p {
            margin-top: 12px;
            font-size: 13px;
          }
        }
      }

      .upload-id-card {
        height: 122px;
        background-color: #fff;

        span {
          display: block;
          color: #656464;
          margin-left: 16px;
          padding-top: 16px;
          font-size: 13px;
        }

        .upload-box1 {
          width: 80px;
          height: 80px;
          border: 1px dashed #dcdcdd;
          text-align: center;
          margin-top: 8px;
          margin-left: 16px;

          .licenseBox {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          img {
            margin-top: 30px;
            width: 25px;
            height: 25px;
          }
        }
      }

      .second-part {
        margin-top: 9px;

        .auto {
          color: #b4b4b5;
        }
      }

      .card2 {
        padding-bottom: 8px;
        height: auto;
        background-color: #fff;
        margin-bottom: 10px;

        display: flex;
        flex-direction: column;

        span {
          color: #656464;
          font-size: 13px;
          line-height: 18px;
          padding-top: 8px;
          display: block;
          margin-left: 16px;
        }

        .img-content {
          /* display: flex;
           flex-flow: row wrap;
           justify-content: flex-start;
           align-items: center;*/
        }

        .plus {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .card-upload {
          position: relative;
          width: 80px;
          height: 80px;
          border: 1px dashed #dcdcdd;
          /* display: flex;
           justify-content: center;
           align-items: center;*/
          margin-top: 12px;
          margin-left: 16px;
          float: left;

          .close {
            /* position: relative;
             color: #F96F68;
             margin-top: -100%;
             margin-left: -10%;*/
            position: absolute;
            color: #F96F68;
            top: -6px;
            right: -6px;

            img {
              width: 14px;
              height: 14px;
            }
          }

          img {
            /*width: 88px;
            height: 88px;*/
            width: 100%;
            height: 100%;
          }

          .upload-btn {
            width: 24px;
            height: 24px;
          }
        }
      }
    }

    .put {
      width: 175px;
      height: 45px;
      color: #FDB62F;
      border-radius: 4px;
      border: 1px solid #FDB62F;
      background-color: #fafafa;
    }

    .put-approved {
      width: 90%;
      height: 45px;
      color: #fff;
      border-radius: 4px;
      background-color: @headerColor;
    }

    .save {
      width: 175px;
      height: 45px;
      color: #fff;
      border-radius: 4px;
      background-color: @headerColor;
    }

    .footer-button {
      //height: 88px;
      padding-top: 15px;
      padding-bottom: 15px;
    }

    .front,
    .photo,
    .backphoto,
    .back {
      display: none;
    }

    .modal-content {
      width: 100%;
      height: 75%;
      position: absolute;
      top: 25%;
      background-color: #fff;
      overflow-y: scroll;

      .modal-content-add-top {
        width: 320px;
        height: 34px;
        line-height: 34px;
        padding-top: 10px;
        background-color: #fff;
        padding-bottom: 40px;
        position: fixed;
        left: 28px;

        span {
          font-family: PingFangSC-Semibold;
          font-size: 15px;
          color: @headerColor;
          letter-spacing: 0.47px;
        }

        img {
          width: 34px;
          height: 34px;
          float: right;
        }
      }

      .addBack {
        display: block;
        width: 320px;
        margin: 0 auto;
        margin-top: 50px;
        border-radius: 6px;
        margin-bottom: 17px;
      }

      .card-Info {
        margin-bottom: 220px;
      }
    }

    .add-card {
      width: 358px;
      height: 40px;
      background: @headerColor;
      border-radius: 4px;
      color: #fff;
    }

    .modal {
      background-color: rgba(0, 0, 0, 0) !important;
    }
  }
</style>