<!-- 自然人绑定 -->
<template>
  <h-view id="np-base-info">
    <h-header :proportion="[5, 1, 1]" class="bar-custom">
      <div slot="left" class="h-header-btn" @click="$route.meta.keepAlive = false;$routeGo();">
        <img src="@/assets/userBind/arrow.png" />
        <span>基本信息</span>
      </div>
    </h-header>
    <h-content>
      <list-item :item-height="44">
        <item v-if="!isApproved" :showArrow="true">
          <div slot="name" class="required">客户类型</div>
          <input
            slot="content"
            v-model="baseInfo.bp_type_n"
            placeholder="请选择"
            type="text"
            readonly
            onfocus="this.blur()"
            @click="selectIdTypeOnly()"
          />
        </item>
        <item v-if="isApproved && !isMultiRole">
          <div slot="name" class="required">客户类型</div>
          <span slot="content">{{ baseInfo.bp_type_n }}</span>
        </item>
        <item
          v-if="isApproved && isMultiRole && !hasMultiRole"
          :showArrow="true"
          @click.native="selectIdType"
        >
          <div slot="name" class="required">客户类型</div>
          <div slot="content" class="typeBP">
            <span>{{ baseInfo.bp_type_n }}</span>
            <span v-for="(item,index) in multiRoleList" :key="index">{{ item.bp_type_n }}</span>
            <span v-for="(item,index) in multiBpTypeSelectList" :key="item.bp_type">
              {{ item.bp_type_n }}
              <img
                v-if="item.bp_type_n"
                src="@/assets/userBind/deleteTag.png"
                @click.stop
                @click="deleteBP(item)"
              />
            </span>
          </div>
        </item>
        <item v-if="isApproved && isMultiRole && hasMultiRole" :showArrow="true">
          <div slot="name" class="required">客户类型</div>
          <div slot="content" class="typeBP">
            <span>{{ baseInfo.bp_type_n }}</span>
            <span v-for="(item,index) in multiRoleList" :key="index">{{ item.bp_type_n }}</span>
          </div>
        </item>
        <item
          v-if="(((isPaople && from) || (isPaople && isSelected))) || (multipleRole === 'GUTA' || multipleRole === 'TENANT') || searchPeople"
          :proportion="[3, 7]"
        >
          <div slot="name" class="required">业务经办人</div>
          <input slot="content" v-model="baseInfo.agent_username" placeholder="请输入业务经办员工代码" />
          <!-- <div slot="content" class="add-people"><input v-model="baseInfo.agent_username"><img src="@/assets/contractCreate/add1.png" @click="inputNum=true"></div> -->
          <!-- <div slot="content" class="add-people"><div class="people-list"><span v-for="(item,index) in peopleList" :key="index">{{ item }}</span></div>
          <div><img src="@/assets/contractCreate/add1.png" @click="inputNum=true"></div></div>-->
        </item>
        <item
          v-if="(((isLesons && from) || (isLesons && isSelected))) || multipleRole === 'AGENT' || searchLecens"
        >
          <div slot="name" class="required">营业执照</div>
          <input slot="content" v-model="baseInfo.business_license_num" placeholder="请输入营业执照号" />
        </item>
        <item v-if="(isMatter && from) || (isMatter && isSelected)">
          <div slot="name" class="required">办事处代码</div>
          <input slot="content" v-model="baseInfo.business_license_num" placeholder="请输入办事处代码" />
        </item>
        <button v-if="isAddNewType" class="type-save" @click="addNewRole">新增角色</button>
      </list-item>
      <div class="userInfo">客户信息</div>
      <div class="upload-id-card">
        <span>身份证照片上传</span>
        <div class="upload-box">
          <div v-if="!idCardFront" @click="ocrShow('idCard', 'front')">
            <img src="@/assets/userBind/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/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="required">姓名</div>
          <input
            slot="content"
            v-model="baseInfo.bp_name"
            readonly
            placeholder="上传身份证自动填充"
            class="auto"
          />
        </item>
        <item>
          <div slot="name" class="required">身份证号码</div>
          <input
            slot="content"
            v-model="baseInfo.id_card_no"
            readonly
            placeholder="上传身份证自动填充"
            class="auto"
          />
        </item>
        <item>
          <div slot="name" class="required">户籍地址</div>
          <textarea
            slot="content"
            ref="myTestarea"
            v-model="baseInfo.address_on_resident_booklit"
            readonly
            cols="30"
            rows="1"
            placeholder="上传身份证自动填充"
            class="auto"
            @input="addRows(baseInfo.address_on_resident_booklit)"
          />
        </item>
        <item>
          <div slot="name" class="required">身份证有效期从</div>
          <input
            slot="content"
            v-model="baseInfo.id_card_date_from"
            readonly
            placeholder="上传身份证自动填充"
            class="auto"
          />
          <!-- <span class="auto">{{ baseInfo.id_card_date_from|dateFormat }}</span> -->
        </item>
        <item>
          <div slot="name" class="required">身份证有效期到</div>
          <input
            slot="content"
            v-model="baseInfo.id_card_date_to"
            readonly
            placeholder="上传身份证自动填充"
            class="auto"
          />
        </item>
        <item>
          <div slot="name" class="required">手机号码</div>
          <input slot="content" v-model="baseInfo.cell_phone" readonly placeholder="请输入手机号码" />
        </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>
          <div slot="name" class="required">联系地址</div>
          <textarea
            slot="content"
            ref="myTestareaLive"
            v-model="baseInfo.living_address"
            rows="1"
            cols="30"
            placeholder="请输入联系地址"
            @input="addRowsLive(baseInfo.living_address)"
          />
        </item>
        <item>
          <div slot="name" class="required">资产信息</div>
          <input slot="content" v-model="baseInfo.capital" placeholder="请输入资产信息" />
        </item>
        <item :showArrow="true">
          <div slot="name" class="required">学历</div>
          <input
            slot="content"
            v-model="baseInfo.academic_background_n"
            placeholder="请选择学历"
            readonly
            onfocus="this.blur()"
            @click="selectBackType"
          />
        </item>
        <item
          v-if="((baseInfo.bp_type === 'TENANT' || baseInfo.bp_type === 'GUTA') && !multipleRole) || multipleRole === 'TENANT' || multipleRole === 'GUTA'"
          :showArrow="true"
        >
          <div slot="name" class="required">婚姻状况</div>
          <input
            slot="content"
            v-model="baseInfo.marital_status_n"
            placeholder="请选择"
            readonly
            onfocus="this.blur()"
            @click="selectMarital"
          />
        </item>
      </list-item>
      <div
        v-if="(hasSP && (((baseInfo.bp_type === 'TENANT' || baseInfo.bp_type === 'GUTA') && !multipleRole) || multipleRole === 'TENANT' || multipleRole === 'GUTA'))"
      >
        <!-- 主承租人活担保人为已婚显示-->
        <div class="userInfo">配偶信息</div>
        <div class="upload-id-card">
          <span>身份证照片上传</span>
          <div class="upload-box">
            <div v-if="!idCardFrontSp" @click="ocrShow('idCardSp', 'front')">
              <img src="@/assets/userBind/front.png" />
              <p>正面</p>
            </div>
            <div v-if="idCardFrontSp && !isApproved" @click="ocrShow('idCardSp', 'front')">
              <img :src="idCardFrontSp" style="width: 100%;height: 100%;margin: 0" />
            </div>
            <div v-if="isApproved && idCardFrontSp">
              <img
                v-if="idCardFrontSp"
                :src="idCardFrontSp"
                style="width: 100%;height: 100%;margin: 0"
                @click="showBigPicture(idCardFrontSp)"
              />
            </div>
            <div v-if="!idCardBackSp" @click="ocrShow('idCardSp', 'back')">
              <img src="@/assets/userBind/back.png" />
              <p>反面</p>
            </div>
            <div v-if="idCardBackSp && !isApproved" @click="ocrShow('idCardSp', 'back')">
              <img :src="idCardBackSp" style="width: 100%;height: 100%;margin: 0" />
            </div>
            <div v-if="isApproved && idCardBackSp">
              <img
                v-if="idCardBackSp"
                :src="idCardBackSp"
                style="width: 100%;height: 100%;margin: 0"
                @click="showBigPicture(idCardBackSp)"
              />
            </div>
          </div>
        </div>
        <list-item :item-height="44">
          <item>
            <div slot="name" class="required">姓名</div>
            <input slot="content" v-model="baseInfo.bp_name_sp" readonly placeholder="上传身份证自动填充" />
          </item>
          <item>
            <div slot="name" class="required">配偶身份证号</div>
            <input slot="content" v-model="baseInfo.id_card_no_sp" readonly placeholder="上传身份证自动填充" />
          </item>
          <item>
            <div slot="name" class="required">身份证有效期从</div>
            <input
              slot="content"
              v-model="baseInfo.id_card_date_from_sp"
              readonly
              placeholder="上传身份证自动填充"
            />
          </item>
          <item>
            <div slot="name" class="required">身份证有效期到</div>
            <input
              slot="content"
              v-model="baseInfo.id_card_date_to_sp"
              readonly
              placeholder="上传身份证自动填充"
            />
          </item>
          <item>
            <div slot="name" class="required">手机号码</div>
            <input slot="content" v-model="baseInfo.spouse_phone" placeholder="请输入手机号码" />
          </item>
          <item>
            <div slot="name" class="required">工作单位</div>
            <input slot="content" v-model="baseInfo.working_place_sp" placeholder="请输入工作单位" />
          </item>
          <item>
            <div slot="name" class="required">联系地址</div>
            <input slot="content" v-model="baseInfo.address_sp" placeholder="请输入联系地址" />
          </item>
        </list-item>
      </div>
    </h-content>
    <bottom-tab class="footer-button">
      <tab-button class="save" @click.native="verified(false)">下一步</tab-button>
    </bottom-tab>
    <!-- <InputNum
      v-show="inputNum"
      ref="inputtNum"
      @roleCancle="roleCancle"
      @roleConfirm="roleConfirm"
    />-->
  </h-view>
</template>
<script>
import InputNum from '../input-num'
export default {
  components: {
    InputNum,
  },
  data() {
    return {
      list: {},
      idCardFrontUpload: '',
      idCardBackUpload: '',
      idCardFrontSpUpload: '',
      idCardBackSptSpUpload: '',
      isAddNewType: false,
      hasSP: false,
      isPaople: false,
      isLesons: false,
      isMatter: false,
      isApproved: false,
      searchPeople: false,
      searchLecens: false,
      inputNum: false, // 填写业务经办
      isSave: false,
      isAGENT: JSON.parse(window.localStorage.getItem('handleUser')).isAGENT, 
      isMultiRole: false, // 能否选择多角色
      isSelected: false,
      hasMultiRole: false, // 是否有第二个角色
      multipleRole: '', // 切换的角色
      from: false,
      multiBpType: {
        bp_type_n: '',
        bp_type: '',
      },
      // peopleList: [],
      cityList: [],
      provinceList: [],
      upload_list: [], // 上传图片列表
      dowload_list: [], // 下载图片列表
      typeList: [],
      backList: [],
      bankList: [],
      maritalList: [],
      districtList: [],
      multiBpTypeSelectList: [], // 添加的角色
      img_url: {},
      multiRole: {
        bp_type_n: '',
        bp_type: '',
      }, // 查询出来的第二个角色
      multiRoleList: [], // 查询出来的多角色
      baseInfo: {
        bp_type_n: '',
        academic_background_n: '',
        marital_status_n: '',
        bp_type: '',
        bp_class: JSON.parse(window.localStorage.getItem('handleUser')).bp_class || 'NP',
        bp_name: '',
        province_name: '',
        province_id: '',
        city_name: '',
        city_id: '',
        id_card_no: null,
        id_card_date_from: '', // 身份证有效期从
        id_card_date_to: '', // 身份证有效期到
        cell_phone: window.localStorage.getItem('user_phone'),
        living_address: '',
        address_on_resident_booklit: '',
        marital_status: '',
        academic_background: '',
        bp_name_sp: '',
        id_card_no_sp: '', // 配偶身份证号
        id_card_date_from_sp: '', // 配偶身份证有效期从
        id_card_date_to_sp: '', // 配偶身份证有效期到
        district_id: '',
        district_name: '',
        spouse_phone: '',
        working_place_sp: '',
        address_sp: '',
        user_phone: window.localStorage.user_phone,
        bp_id: JSON.parse(window.localStorage.handleUser).bp_id 
      },
      idCardFront: '', // 身份证正面图片
      idCardBack: '', // 身份证反面图片
      idCardFrontSp: '', // 配偶身份证正面图片
      idCardBackSp: '', // 配偶身份证反面图片
      idCardFrontUrlFlag: false, // 身份证正面图片查看标识，为false则用查询出来的，为true则用拍照出来的
      idCardBackUrlFlag: false, // 身份证反面图片，为false则用查询出来的，为true则用拍照出来的
      idCardFrontSpUrlFlag: false, // 配偶身份证正面图片，为false则用查询出来的，为true则用拍照出来的
      idCardBackSpUrlFlag: false, // 配偶身份证反面图片，为false则用查询出来的，为true则用拍照出来的
      bankImg: '', // 银行卡图片
      cddItemList: [], // 资料清单列表
      idCardFrontCheck_id: '', // 身份证正面check_id
      idCardBackCheck_id: '', // 身份证反面check_id
      idCardFrontSpCheck_id: '', // 配偶身份证正面check_id
      idCardBackSpCheck_id: '', // 配偶身份证反面check_id
      idCardFrontAttachmentId: '', // 身份证正面AttachmentId
      idCardBackAttachmentId: '', // 身份证反面AttachmentId
      idCardFrontSpAttachmentId: '', // 配偶身份证正面AttachmentId
      idCardBackSpAttachmentId: '', // 配偶身份证反面AttachmentId
      // idCardImgList: [], // 存身份证图片列表
      idCardFrontEditFlag: false, // 身份证正面修改标识，为true则标识已修改，后续需要重新上传此照片
      idCardBackEditFlag: false, // 身份证反面修改标识，为true则标识已修改，后续需要重新上传此照片
      idCardFrontSpEditFlag: false, // 配偶身份证正面修改标识，为true则标识已修改，后续需要重新上传此照片
      idCardBackSpEditFlag: false, // 配偶身份证反面修改标识，为true则标识已修改，后续需要重新上传此照片
      isClear: false,
    }
  },
  watch: {
    'baseInfo.bp_type_n'(newVal, oldVal) {
      let vm = this
      if (vm.baseInfo.bp_type === 'TENANT' || vm.baseInfo.bp_type === 'GUTA') {
        vm.isPaople = true
        vm.isMatter = false
        vm.isLesons = false
      } else if (
        vm.baseInfo.bp_type === 'AGENT' ||
        vm.baseInfo.bp_type === 'FACTORY'
      ) {
        vm.isPaople = false
        vm.isMatter = false
        vm.isLesons = true
      } else if (vm.baseInfo.bp_type === 'OFFICE') {
        vm.isMatter = true
        vm.isPaople = false
        vm.isLesons = false
      }
    },
    'baseInfo.marital_status_n': {
      handler: function (newVal, oldVal) {
        if (newVal === '已婚') {
          this.hasSP = true
        } else {
          this.hasSP = false
          this.baseInfo.bp_name_sp = ''
          this.baseInfo.spouse_phone = ''
          this.baseInfo.working_place_sp = ''
          this.baseInfo.address_sp = ''
        }
      },
      deep: true,
      immediate: true,
    },

  },
  created() {
    this.getBpType()
    this.getEducationBackground()
    this.getMarital()
    this.getProvince()
  },
  beforeRouteEnter(to, from, next) {
    // 绑定查询入口
    next(vm => {
      vm.$route.meta.keepAlive = true;
      vm.isAddNewType = false
      if (['/tab/my-info', '/tab/function-center', '/Setting', '/myBindUser'].includes(from.fullPath)) {
        if (JSON.parse(window.localStorage.getItem('handleUser')).status === 'APPROVED') {
          vm.isApproved = true
        } else {
          vm.isApproved = false
        }
        vm.isMultiRole = JSON.parse(window.localStorage.getItem('handleUser')).isMultiRole
        vm.multipleRole = JSON.parse(window.localStorage.getItem('handleUser')).bp_type
        // window.localStorage.getItem('multipleRole')
        vm.list = {}
        vm.multiBpType = {}
        vm.multiBpTypeSelectList = []// 选择的角色
        vm.multiRoleList = []// 查询的角色
        vm.upload_list = [] // 上传图片列表
        vm.dowload_list = [] // 下载图片列表
        vm.img_url = {}
        vm.baseInfo = {
          bp_type_n: '',
          academic_background_n: '',
          marital_status_n: '',
          bp_type: '',
          bp_class: JSON.parse(window.localStorage.getItem('handleUser')).bp_class || 'NP',
          bp_name: '',
          province_name: '',
          province_id: '',
          city_name: '',
          city_id: '',
          id_card_no: null,
          id_card_date_from: '', // 身份证有效期从
          id_card_date_to: '', // 身份证有效期到
          cell_phone: window.localStorage.getItem('user_phone'),
          living_address: '',
          address_on_resident_booklit: '',
          marital_status: '',
          academic_background: '',
          bp_name_sp: '',
          id_card_no_sp: '', // 配偶身份证号
          id_card_date_from_sp: '', // 配偶身份证有效期从
          id_card_date_to_sp: '', // 配偶身份证有效期到
          district_id: '',
          district_name: '',
          spouse_phone: '',
          working_place_sp: '',
          address_sp: '',
          user_phone: window.localStorage.user_phone,
          bp_id: JSON.parse(window.localStorage.handleUser).bp_id,

        }
        vm.idCardFront = '' // 身份证正面图片
        vm.idCardBack = '' // 身份证反面图片
        vm.idCardFrontSp = '' // 配偶身份证正面图片
        vm.idCardBackSp = '' // 配偶身份证反面图片
        vm.searchPeople = false
        vm.searchLecens = false
        vm.idCardFrontUpload = ''
        vm.idCardBackUpload = ''
        vm.idCardFrontSpUpload = ''
        vm.idCardBackSptSpUpload = ''
        vm.idCardFrontUrlFlag = false // 身份证正面图片查看标识，为false则用查询出来的，为true则用拍照出来的
        vm.idCardBackUrlFlag = false // 身份证反面图片，为false则用查询出来的，为true则用拍照出来的
        vm.idCardFrontSpUrlFlag = false // 配偶身份证正面图片，为false则用查询出来的，为true则用拍照出来的
        vm.idCardBackSpUrlFlag = false // 配偶身份证反面图片，为false则用查询出来的，为true则用拍照出来的
        vm.cddItemList = [] // 资料清单列表
        vm.idCardFrontCheck_id = '' // 身份证正面check_id
        vm.idCardBackCheck_id = '' // 身份证反面check_id
        vm.idCardFrontSpCheck_id = '' // 配偶身份证正面check_id
        vm.idCardBackSpCheck_id = '' // 配偶身份证反面check_id
        vm.idCardFrontAttachmentId = '' // 身份证正面AttachmentId
        vm.idCardBackAttachmentId = '' // 身份证反面AttachmentId
        vm.idCardFrontSpAttachmentId = '' // 配偶身份证正面AttachmentId
        vm.idCardBackSpAttachmentId = '' // 配偶身份证反面AttachmentId
        vm.idCardFrontEditFlag = false // 身份证正面修改标识，为true则标识已修改，后续需要重新上传此照片
        vm.idCardBackEditFlag = false // 身份证反面修改标识，为true则标识已修改，后续需要重新上传此照片
        vm.idCardFrontSpEditFlag = false // 配偶身份证正面修改标识，为true则标识已修改，后续需要重新上传此照片
        vm.idCardBackSpEditFlag = false // 配偶身份证反面修改标识，为true则标识已修改，后续需要重新上传此照片
        vm.isClear = false
        vm.from = true
        window.localStorage.setItem('from', true)
        vm.basicInfoQuery()
        vm.loadItemList(true) // 附件查询
        vm.getMultipleRole()// 获取第二角色
      } else if (from.name === 'UserBind') {
        vm.list = {}
        window.localStorage.setItem('from', false)
        vm.isApproved = false
        vm.from = false
        vm.searchPeople = false
        vm.searchLecens = false
        vm.multiBpType = {
          bp_type_n: '',
          bp_type: '',
        }
        vm.multiBpTypeSelectList = []// 选择的角色
        vm.multiRoleList = []// 查询的角色
        vm.upload_list = [] // 上传图片列表
        vm.dowload_list = [] // 下载图片列表
        vm.img_url = {}
        vm.baseInfo = {
          bp_type_n: '',
          academic_background_n: '',
          marital_status_n: '',
          bp_type: '',
          bp_class: JSON.parse(window.localStorage.getItem('handleUser')).bp_class || 'NP',
          bp_name: '',
          province_name: '',
          province_id: '',
          city_name: '',
          city_id: '',
          id_card_no: null,
          id_card_date_from: '', // 身份证有效期从
          id_card_date_to: '', // 身份证有效期到
          cell_phone: window.localStorage.getItem('user_phone'),
          living_address: '',
          address_on_resident_booklit: '',
          marital_status: '',
          academic_background: '',
          bp_name_sp: '',
          id_card_no_sp: '', // 配偶身份证号
          id_card_date_from_sp: '', // 配偶身份证有效期从
          id_card_date_to_sp: '', // 配偶身份证有效期到
          district_id: '',
          district_name: '',
          spouse_phone: '',
          working_place_sp: '',
          address_sp: '',
          user_phone: window.localStorage.user_phone,
          bp_id: JSON.parse(window.localStorage.handleUser).bp_id,
        }
        vm.idCardFrontUpload = ''
        vm.idCardBackUpload = ''
        vm.idCardFrontSpUpload = ''
        vm.idCardBackSptSpUpload = ''
        vm.idCardFront = '' // 身份证正面图片
        vm.idCardBack = '' // 身份证反面图片
        vm.idCardFrontSp = '' // 配偶身份证正面图片
        vm.idCardBackSp = '' // 配偶身份证反面图片
        vm.idCardFrontUrlFlag = false // 身份证正面图片查看标识，为false则用查询出来的，为true则用拍照出来的
        vm.idCardBackUrlFlag = false // 身份证反面图片，为false则用查询出来的，为true则用拍照出来的
        vm.idCardFrontSpUrlFlag = false // 配偶身份证正面图片，为false则用查询出来的，为true则用拍照出来的
        vm.idCardBackSpUrlFlag = false // 配偶身份证反面图片，为false则用查询出来的，为true则用拍照出来的
        vm.cddItemList = [] // 资料清单列表
        vm.idCardFrontCheck_id = '' // 身份证正面check_id
        vm.idCardBackCheck_id = '' // 身份证反面check_id
        vm.idCardFrontSpCheck_id = '' // 配偶身份证正面check_id
        vm.idCardBackSpCheck_id = '' // 配偶身份证反面check_id
        vm.idCardFrontAttachmentId = '' // 身份证正面AttachmentId
        vm.idCardBackAttachmentId = '' // 身份证反面AttachmentId
        vm.idCardFrontSpAttachmentId = '' // 配偶身份证正面AttachmentId
        vm.idCardBackSpAttachmentId = '' // 配偶身份证反面AttachmentId
        vm.idCardFrontEditFlag = false // 身份证正面修改标识，为true则标识已修改，后续需要重新上传此照片
        vm.idCardBackEditFlag = false // 身份证反面修改标识，为true则标识已修改，后续需要重新上传此照片
        vm.idCardFrontSpEditFlag = false // 配偶身份证正面修改标识，为true则标识已修改，后续需要重新上传此照片
        vm.idCardBackSpEditFlag = false // 配偶身份证反面修改标识，为true则标识已修改，后续需要重新上传此照片
        vm.isClear = false
        // vm.baseInfo.bp_class = vm.$route.params.bp_class
      }
    })
  },
  methods: {
    // roleCancle () {
    //   this.inputNum = false
    // },
    // roleConfirm (e) {
    //   if (this.peopleList.includes(e)) {
    //     hlsPopup.showLongCenter('您已添加了该业务经办')
    //   } else {
    //     this.peopleList.push(e)
    //   }
    //   this.inputNum = false
    // },
    timeFormat(str) {
      return `${str.substring(0, 4)}-${str.substring(4, 6)}-${str.substring(6)}`
    },
    deleteBP(e) {
      let deleteIndex
      this.multiBpTypeSelectList.forEach((i, index, arr) => {
        if (arr[index].bp_type.indexOf(e.bp_type) !== -1) {
          deleteIndex = index
        }
      })
      this.multiBpTypeSelectList.splice(deleteIndex, 1)
      this.isAddNewType = false
    },
    addNewRole() {
      let vm = this
      let url = process.env.basePath + 'bp_type_save'
      let param = {
        master: {
          bp_id: JSON.parse(window.localStorage.handleUser).bp_id,
          bp_type: vm.multiBpType.bp_type,
        },
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          hlsPopup.showLongCenter('新增成功')
          vm.isAddNewType = false
          let item = vm.multiBpTypeSelectList.pop()
          vm.multiRoleList.push(item)
          vm.searchLecens = true
          vm.searchPeople = true
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    basicInfoQuery() {
      let vm = this
      let url = process.env.basePath + 'bp_np_info_query'
      let param = {
        bp_id: JSON.parse(window.localStorage.handleUser).bp_id,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          Object.assign(vm.baseInfo, res.info)
          // vm.baseInfo = res.info
          vm.from = true
          vm.addRows(vm.baseInfo.address_on_resident_booklit)
          vm.addRowsLive(vm.baseInfo.living_address)
          // vm.peopleList = res.info.agent_username.split(',')
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    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 'NP_ID_CARD_F': // 承租人身份证正面
              if (!vm.idCardFrontUrlFlag) {
                vm.idCardFront = res.lists[0].url
              }
              vm.idCardFrontAttachmentId = res.lists[0].attachment_id
              break
            case 'NP_ID_CARD_B': // 承租人身份证背面
              if (!vm.idCardBackUrlFlag) {
                vm.idCardBack = res.lists[0].url
              }
              vm.idCardBackAttachmentId = res.lists[0].attachment_id
              break
            case 'MATE_ID_CARD_F': // 配偶身份证正面
              if (!vm.idCardFrontSpUrlFlag) {
                vm.idCardFrontSp = res.lists[0] ? res.lists[0].url : null;
              }
              vm.idCardFrontSpAttachmentId = res.lists[0].attachment_id
              break
            case 'MATE_ID_CARD_B': // 配偶身份证背面
              if (!vm.idCardBackSpUrlFlag) {
                vm.idCardBackSp =  res.lists[0] ? res.lists[0].url : null;
              }
              vm.idCardBackSpAttachmentId = res.lists[0].attachment_id
              break
            default:
              vm.dowload_list.push(res.lists)
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    async verified(flag) {
      this.dowload_list = [] // 保存之前将图片下载列表清空，防止出现重复的图片
      this.upload_list = [] // 保存之前将待上传列表清空，防止出现重复的图片
      let bpId = await this.saveWord()
      if (bpId) {
        // 查询资料清单
        this.loadItemList(flag)
      }
    },
    loadItemList(flag) { // flag用来判断是否需要加载图片文件
      let vm = this 
      let bpId =  JSON.parse(window.localStorage.getItem('handleUser')).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: 'HLS_NP',
        },
      }
      // 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 'NP_ID_CARD_F': // 承租人身份证正面
                vm.idCardFrontCheck_id = item.check_id
                break
              case 'NP_ID_CARD_B': // 承租人身份证背面
                vm.idCardBackCheck_id = item.check_id
                break
              case 'MATE_ID_CARD_F': // 配偶身份证正面
                vm.idCardFrontSpCheck_id = item.check_id
                break
              case 'MATE_ID_CARD_B': // 配偶身份证背面
                vm.idCardBackSpCheck_id = item.check_id
                break
              case 'BANK_CARD':
                break
              default:
                vm.cddItemList.push(item)
            }
          })
          // 查询图片 
          if (flag) {
            console.log(listTemp);
            listTemp.forEach((item, index) => {
              if (item.cdd_item !== 'HOUSE_CARD' || item.cdd_item !== 'REAL_EST_CERTIFICATE' || item.cdd_item !== 'CAR_CARD' || item.cdd_item !== 'ASSETS_CARD' || item.cdd_item !== 'FAMILY_REGISTER' || item.cdd_item !== 'MARITAL STATUS') {
                vm.load_picture(item.check_id, index, item.cdd_item)
              }
            })
          }
          if (vm.idCardFrontEditFlag) {
            vm.idCardFrontUrlFlag = true
            vm.delete_pic_to_ocr(vm.idCardFrontAttachmentId)// 先删除之前识别的图片
            // 身份证正面图片已修改，重新上传
            let list = []
            let obj = {
              pkvalue: vm.idCardFrontCheck_id,
              source_type: 'PRJ_CDD_ITEM_CHECK',
              picture: '',
              check_id: vm.idCardFrontCheck_id,
              filePath: vm.idCardFrontUpload,
              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)// 先删除之前识别的图片
            // 身份证反面图片已修改，重新上传
            let list = []
            let obj = {
              pkvalue: vm.idCardBackCheck_id,
              source_type: 'PRJ_CDD_ITEM_CHECK',
              picture: '',
              check_id: vm.idCardBackCheck_id,
              filePath: vm.idCardBackUpload,
              attachment_id: '',
              user_id: 1,
              fileName: '自然人身份证背面',
            }
            list.push(obj)
            vm.save_picture(list)
            vm.idCardBackEditFlag = false // 置为false,防止再次保存重复上传，只有重新识别才会重新上传
          }
          if (vm.idCardFrontSpEditFlag) {
            vm.idCardFrontSpUrlFlag = true
            vm.delete_pic_to_ocr(vm.idCardFrontSpAttachmentId)// 先删除之前识别的图片
            // 配偶身份证正面图片已修改，重新上传
            let list = []
            let obj = {
              pkvalue: vm.idCardFrontSpCheck_id,
              source_type: 'PRJ_CDD_ITEM_CHECK',
              picture: '',
              check_id: vm.idCardFrontSpCheck_id,
              filePath: vm.idCardFrontSpUpload,
              attachment_id: '',
              user_id: 1,
              fileName: '配偶身份证正面',
            }
            list.push(obj)
            vm.save_picture(list)
            vm.idCardFrontSpEditFlag = false // 置为false,防止再次保存重复上传，只有重新识别才会重新上传
          }
          if (vm.idCardBackSpEditFlag) {
            vm.idCardBackSpUrlFlag = true
            vm.delete_pic_to_ocr(vm.idCardBackSpAttachmentId)// 先删除之前识别的图片
            // 配偶身份证背面图片已修改，重新上传
            let list = []
            let obj = {
              pkvalue: vm.idCardBackSpCheck_id,
              source_type: 'PRJ_CDD_ITEM_CHECK',
              picture: '',
              check_id: vm.idCardBackSpCheck_id,
              filePath: vm.idCardBackSptSpUpload,
              attachment_id: '',
              user_id: 1,
              fileName: '配偶身份证背面',
            }
            list.push(obj)
            vm.save_picture(list)
            vm.idCardBackSpEditFlag = false // 置为false,防止再次保存重复上传，只有重新识别才会重新上传
          }
        }
      })
    },
    async getMultipleRole() {
      let vm = this
      let url = process.env.basePath + 'bp_role_query'
      let flag = vm.checkHasmultiple()
      let param = {
        master: {
          bp_id: JSON.parse(window.localStorage.handleUser).bp_id,
          bp_type: JSON.parse(window.localStorage.handleUser).bp_type,
        },
      }
      if (flag) {
        vm.hlsHttp.post(url, param).then(function (res) {
          if (res.result === 'S') {
            vm.multiRoleList = res.lists
            if (res.lists.length === 0 || res.lists.length === 1) {
              vm.hasMultiRole = false
            } else if (res.lists.length === 2) {
              vm.hasMultiRole = true
            }
            if (res.lists.length !== 0) {
              vm.searchPeople = res.lists.some(item => {
                return item.bp_type === 'TENANT' || item.bp_type === 'GUTA'
              })
              vm.searchLecens = res.lists.some(item => {
                return item.bp_type === 'AGENT'
              })
            }
          }
        })
      }
    },
    async checkHasmultiple() {
      let vm = this
      let url = process.env.basePath + 'bp_role_check'
      let param = {
        bp_id: JSON.parse(window.localStorage.handleUser).bp_id,
      }
      let res = await vm.hlsHttp.post(url, param)
      if (res.result === 'S') {
        // vm.hasMultiRole = true
        return true
      } else {
        vm.hasMultiRole = false
        return false
      }
    },
    // 基本信息保存前校验
    bindCheck() {
      let vm = this
      var business_num = ''
      if (vm.baseInfo.bp_type === 'TENANT' || vm.baseInfo.bp_type === 'GUTA') {
        business_num = vm.baseInfo.agent_username
      } else if (vm.baseInfo.bp_type === 'AGENT' || vm.baseInfo.bp_type === 'FACTORY') {
        business_num = vm.baseInfo.business_license_num
      } else if (vm.baseInfo.bp_type === 'OFFICE') {
        business_num = vm.baseInfo.business_license_num
      }
      window.localStorage.setItem('business_num', business_num)
      let url = process.env.basePath + 'bp_bind_check'
      let param = {
        'master': {
          bp_class: 'NP',
          bp_type: vm.baseInfo.bp_type,
          business_num: business_num,
        },
      }
      vm.hlsPopup.showLoading('正在校验数据有效性')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.$router.push({
            name: 'NPInvoiceInfo'
          })
        } else {
          hlsPopup.showError(res.message)
        }
      })
    },
    async saveProtocol() {
      let vm = this
      let url = process.env.basePath + 'bp_np_bind_save'
      let param = {
        master: this.baseInfo,
      }
      vm.hlsPopup.showLoading('保存中!')
      let res = await vm.hlsHttp.post(url, param)
      if (res.result === 'S') {
        hlsPopup.hideLoading()
        // vm.hlsPopup.showSuccess('保存成功,请去维护附件信息')
        vm.isSave = true
        // window.localStorage.setItem('user_id', res.bp_id)
        // window.localStorage.setItem('bp_id', res.bp_id)
        // window.localStorage.setItem('bp_name', vm.baseInfo.bp_name)
        // window.localStorage.setItem('bp_type', vm.baseInfo.bp_type)
        window.localStorage.setItem('handleUser', JSON.stringify({...JSON.parse(window.localStorage.getItem('handleUser')), bp_id: res.bp_id, bp_name: vm.baseInfo.bp_name, bp_type: vm.baseInfo.bp_type, multiRoleList: [...vm.multiRoleList.map(item => item.bp_type), ...vm.multiBpTypeSelectList.map(item => item.bp_type), vm.baseInfo.bp_type]}));
        await vm.bindCheck()
        return res.bp_id
      } else {
        hlsPopup.hideLoading()
        vm.hlsPopup.showLongCenter(res.message)
      }
    },
    async saveWord() {
      let vm = this
      if (!vm.baseInfo.bp_type) {
        vm.hlsPopup.showLongCenter('客户类型不能为空！')
      } else if (vm.isPaople && !vm.baseInfo.agent_username) {
        vm.hlsPopup.showLongCenter('业务经办员工代码不能为空！')
      } else if (
        !vm.isPaople &&
        !vm.baseInfo.business_license_num
      ) {
        vm.hlsPopup.showLongCenter('营业执照号不能为空！')
      } else if (!vm.baseInfo.bp_name) {
        vm.hlsPopup.showLongCenter('客户姓名不能为空！')
      } else if (!vm.baseInfo.id_card_no) {
        vm.hlsPopup.showLongCenter('身份证号不能为空！')
      } else if (!vm.baseInfo.id_card_date_from) {
        vm.hlsPopup.showLongCenter('身份证有效期从不能为空！')
      } else if (!vm.baseInfo.id_card_date_to) {
        vm.hlsPopup.showLongCenter('身份证有效期到不能为空！')
      } else if (!vm.baseInfo.cell_phone) {
        vm.hlsPopup.showLongCenter('手机号不能为空！')
      } else if (!vm.baseInfo.living_address) {
        vm.hlsPopup.showLongCenter('联系地址不能为空！')
      } else if (!vm.baseInfo.address_on_resident_booklit) {
        vm.hlsPopup.showLongCenter('户籍地址不能为空！')
      } else if (!vm.baseInfo.province_name) {
        vm.hlsPopup.showLongCenter('业务办理省不能为空！')
      } else if (!vm.baseInfo.city_name) {
        vm.hlsPopup.showLongCenter('业务办理市不能为空！')
      } else if (!vm.baseInfo.capital) {
        vm.hlsPopup.showLongCenter('资产信息不能为空！')
      } else if (!vm.baseInfo.academic_background) {
        vm.hlsPopup.showLongCenter('学历不能为空！')
      } else if (!vm.baseInfo.marital_status && (((vm.baseInfo.bp_type === 'TENANT' || vm.baseInfo.bp_type === 'GUTA') && !vm.multipleRole) || vm.multipleRole === 'TENANT' || vm.multipleRole === 'GUTA')) {
        vm.hlsPopup.showLongCenter('婚姻状况不能为空！')
      } else if (vm.baseInfo.marital_status_n === '已婚' && !vm.baseInfo.bp_name_sp) {
        vm.hlsPopup.showLongCenter('配偶姓名不能为空！')
      } else if (vm.baseInfo.marital_status_n === '已婚' && !vm.baseInfo.id_card_no_sp) {
        vm.hlsPopup.showLongCenter('配偶身份证号不能为空！')
      } else if (
        vm.baseInfo.marital_status_n === '已婚' &&
        !vm.baseInfo.id_card_date_from_sp
      ) {
        vm.hlsPopup.showLongCenter('配偶身份证有效期从不能为空！')
      } else if (
        vm.baseInfo.marital_status_n === '已婚' &&
        !vm.baseInfo.id_card_date_to_sp
      ) {
        vm.hlsPopup.showLongCenter('配偶身份证有效期到不能为空！')
      } else if (vm.baseInfo.marital_status_n === '已婚' && !vm.baseInfo.spouse_phone) {
        vm.hlsPopup.showLongCenter('配偶手机号不能为空！')
      } else if (
        vm.baseInfo.marital_status_n === '已婚' &&
        !vm.baseInfo.working_place_sp
      ) {
        vm.hlsPopup.showLongCenter('配偶工作单位不能为空！')
      } else if (vm.baseInfo.marital_status_n === '已婚' && !vm.baseInfo.address_sp) {
        vm.hlsPopup.showLongCenter('配偶联系地址不能为空！')
      } else if (!vm.hlsUtil.phoneNumber(vm.baseInfo.cell_phone)) {
        vm.hlsPopup.showLongCenter('手机号码有误!')
      } else if (vm.baseInfo.marital_status_n === '已婚' && !vm.hlsUtil.phoneNumber(vm.baseInfo.spouse_phone)) {
        vm.hlsPopup.showLongCenter('配偶手机号码有误!')
      } else {
        let bpId = await vm.saveProtocol()
        return bpId;
      }
    },
    // 图片上传入口
    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.upload_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()
      }
    },
    // 移除图片
    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()
    },
    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.idCardFrontUpload = imgdata),
                (vm.idCardFrontEditFlag = true))
              : ((vm.idCardBack = hlsUtil.convertImageUrl(imgdata)),
                vm.idCardBackIdentify(imgdata, 'idCard'),
                (vm.idCardBackUpload = imgdata),
                (vm.idCardBackEditFlag = true))
          } else if (ocrType === 'idCardSp') {
            // 配偶身份证识别
            type === 'front'
              ? ((vm.idCardFrontSp = hlsUtil.convertImageUrl(imgdata)),
                vm.idCardIdentify(imgdata, 'idCardSp'),
                (vm.idCardFrontSpUpload = imgdata),
                (vm.idCardFrontSpEditFlag = true))
              : ((vm.idCardBackSp = hlsUtil.convertImageUrl(imgdata)),
                vm.idCardBackIdentify(imgdata, 'idCardSp'),
                (vm.idCardBackSptSpUpload = imgdata),
                (vm.idCardBackSpEditFlag = true))
          } else if (ocrType === 'bankCard') {
            vm.bankImg = hlsUtil.convertImageUrl(imgdata)
            vm.bankCardIdentify(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.idCardFrontUpload = imgUrl[0]),
                (vm.idCardFrontEditFlag = true))
              : ((vm.idCardBack = hlsUtil.convertImageUrl(imgUrl[0])),
                vm.idCardBackIdentify(imgUrl[0], 'idCard'),
                (vm.idCardBackUpload = imgUrl[0]),
                (vm.idCardBackEditFlag = true))
          } else if (ocrType === 'idCardSp') {
            // 配偶身份证识别
            type === 'front'
              ? ((vm.idCardFrontSp = hlsUtil.convertImageUrl(imgUrl[0])),
                vm.idCardIdentify(imgUrl[0], 'idCardSp'),
                (vm.idCardFrontSpUpload = imgUrl[0]),
                (vm.idCardFrontSpEditFlag = true))
              : ((vm.idCardBackSp = hlsUtil.convertImageUrl(imgUrl[0])),
                vm.idCardBackIdentify(imgUrl[0], 'idCardSp'),
                (vm.idCardBackSptSpUpload = imgUrl[0]),
                (vm.idCardBackSpEditFlag = true))
          } else if (ocrType === 'bankCard') {
            vm.bankImg = hlsUtil.convertImageUrl(imgUrl[0])
            vm.bankCardIdentify(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.bp_name = result.姓名.words
          vm.baseInfo.id_card_no = result.公民身份号码.words
          vm.baseInfo.address_on_resident_booklit = result.住址.words
          vm.baseInfo.living_address = vm.baseInfo.address_on_resident_booklit // 联系地址默认为户籍地址，支持修改
        } else {
          vm.baseInfo.bp_name_sp = result.姓名.words
          vm.baseInfo.id_card_no_sp = result.公民身份号码.words
          vm.baseInfo.address_sp = 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.baseInfo.id_card_date_from = vm.timeFormat(result.签发日期.words)
          if (result.失效日期.words.indexOf('长期') != -1) {
            hlsPopup.showPopup({
              title: '提示',
              content: `检测到您的身份证为长期有效，系统自动置为【9999-12-31】`,
              onConfirm: () => { },
            })
            vm.baseInfo.id_card_date_to = '9999-12-31'
          } else {
            vm.baseInfo.id_card_date_to = vm.timeFormat(result.失效日期.words)
          }
        } else {
          vm.baseInfo.id_card_date_from_sp = vm.timeFormat(result.签发日期.words)
          if (result.失效日期.words.indexOf('长期') != -1) {
            hlsPopup.showPopup({
              title: '提示',
              content: `检测到您的身份证为长期有效，系统自动置为【9999-12-31】`,
              onConfirm: () => { },
            })
            vm.baseInfo.id_card_date_to_sp = '9999-12-31'
          } else {
            vm.baseInfo.id_card_date_to_sp = vm.timeFormat(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.bank_account_num = result.bank_card_number.replace(/\s*/g, '')
        vm.bank.bank_full_name = result.bank_name
        vm.bank.bank_card_type = result.bank_card_type
      })
    },
    addRows(e) {
      if (e) {
        let addNum = Math.ceil(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
        // }
        this.$refs.myTestarea.rows = addNum
      }
    },
    addRowsLive(e) {
      if (e) {
        let addNum = Math.ceil(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
        // }
        this.$refs.myTestareaLive.rows = addNum
      }
    },
    selectIdType() {
      let vm = this
      let List
      if (vm.baseInfo.bp_type === 'TENANT') {
        List = vm.typeList.filter(i => {
          return i.code === 'GUTA' || i.code === 'AGENT'
        })
      } else if (vm.baseInfo.bp_type === 'GUTA') {
        List = vm.typeList.filter(i => {
          return i.code === 'TENANT' || i.code === 'AGENT'
        })
      } else if (vm.baseInfo.bp_type === 'AGENT') {
        List = vm.typeList.filter(i => {
          return i.code === 'TENANT' || i.code === 'GUTA'
        })
      }
      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
          let selectList = false
          let queryList = false
          let baseInfo = false
          vm.multiBpTypeSelectList.forEach((item, index, arr) => {
            if (item.bp_type === vm.multiBpType.bp_type) {
              selectList = true
            }
          })
          vm.multiRoleList.forEach((item, index, arr) => {
            if (item.bp_type === vm.multiBpType.bp_type) {
              queryList = true
            }
          })
          if (vm.baseInfo.bp_type === vm.multiBpType.bp_type) {
            baseInfo = true
          }
          if (baseInfo || queryList || selectList) {
            hlsPopup.showLongCenter('您已经添加了该角色')
            vm.isAddNewType = false
            vm.isSelected = false
          } else {
            vm.multiBpTypeSelectList.push(vm.multiBpType)
            vm.isAddNewType = true
            vm.isSelected = true
          }
        },
      })
    },
    selectIdTypeOnly(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
        },
      })
      vm.isSelected = true
    },
    selectBackType(e) {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.backList,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.baseInfo.academic_background = obj.bp_type
          vm.baseInfo.academic_background_n = obj.bp_type_n
        },
      })
    },
    selectMarital(e) {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.maritalList,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.baseInfo.marital_status = obj.bp_type
          vm.baseInfo.marital_status_n = obj.bp_type_n
        },
      })
    },
    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,
            }
          })
        }
      })
    },
    getMarital() {
      let vm = this
      let url = process.env.basePath + 'bp_marital_status_query'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.maritalList = res.lists.map(item => {
            return {
              code: item.marital_status,
              code_name: item.marital_status_n,
            }
          })
        }
      })
    },
    getEducationBackground() {
      let vm = this
      let url = process.env.basePath + 'bp_academic_bg_query'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.backList = res.lists.map(item => {
            return {
              code: item.academic_bg,
              code_name: item.academic_bg_n,
            }
          })
        }
      })
    },
    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') {
          vm.typeList = res.lists.map(item => {
            return {
              code: item.bp_type,
              code_name: item.bp_type_n,
            }
          })
        }
      })
    },
    // 查看大图
    showBigPicture(pic) {
      let vm = this
      vm.hlsPopup.showBigPicture({
        imgUrl: pic,
        width: '100% !important',
      })
    },
  },
}
</script>
<style lang="less" scoped>
#np-base-info {
  font-family: PingFangSC-Regular;
  input::placeholder {
    color: #b4b4b5;
  }
  textarea::placeholder {
    color: #b4b4b5;
  }
  textarea {
    text-align: right;
    color: #666;
    resize: none;
  }
  .add-people {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    img {
      // width:23px;
      flex-shrink: 0;
      // margin-left:10px;
      float: right;
    }
    .people-list {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      flex-flow: row wrap;
    }
    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;
      font-size: 14px;
    }
  }
  .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: 30px;
    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.5);
        letter-spacing: 0;
        line-height: 22px;
      }
    }
    .right-img {
      width: 10px;
      height: 16px;
      flex: 1;
      padding-right: 21px;
    }
  }
  .content {
    height: 76%;
    .userInfo {
      height: 45px;
      line-height: 45px;
      color: @headerColor;
      margin-top: -10px;
      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: 12px;
    }
    .upload-id-card {
      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;
        }
      }
    }
    .second-part {
      margin-top: 9px;
      .auto {
        color: #b4b4b5;
      }
    }
    .card {
      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 {
    color: #fff;
    border-radius: 4px;
    background-color: @headerColor;
  }
  .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;
}
.hls-notify-wrap {
  height: 50px;
  line-height: 34px !important;
}
</style>
