<!--
 * @Description: In User Settings Edit
 * @Author: liuxin
 * @Date: 2019-09-19 09:18:14
 * @LastEditTime: 2019-09-19 09:18:14
 * @LastEditors: your name
 -->
<template>
  <h-view id="base-info1" class="public-style" title="基本信息">
    <h-header :proportion="[5,1,1]" class="header">
      <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 :showArrow="true">
            <div slot="name" class="required">客户类型</div>
            <input
              slot="content"
              v-model="bp_type_n"
              placeholder="请选择"
              type="text"
              readonly
              onfocus="this.blur()"
              @click="selectIdType()"
            >
          </item>
          <item v-if="isSelected&&isPaople">
            <div slot="name" class="required">业务经办人</div>
            <input slot="content" v-model="baseInfo.agent_username" placeholder="请输入业务经办员工代码" >
          </item>
          <item v-if="isSelected&&!isPaople">
            <div slot="name" class="required">营业执照</div>
            <input slot="content" v-model="baseInfo.business_license_num" placeholder="请输入营业执照号" >
          </item>
        </list-item>
        <div class="userInfo">客户信息</div>
        <div class="upload-id-card">
          <span>身份证照片上传</span>
          <div class="upload-box">
            <div>
              <img src="@/assets/userBind/front.png" >
              <p>正面</p>
            </div>
            <div>
              <img src="@/assets/userBind/back.png" >
              <p>反面</p>
            </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" placeholder="上传身份证自动填充" class="auto" >
          </item>
          <item>
            <div slot="name" class="required">身份证号码</div>
            <input
              slot="content"
              v-model="baseInfo.id_card_no"
              placeholder="上传身份证自动填充"
              class="auto"
            >
          </item>
          <item>
            <div slot="name" class="required">手机号码</div>
            <input slot="content" v-model="baseInfo.phone" placeholder="请输入手机号码" >
          </item>
          <item>
            <div slot="name" class="required">居住地址</div>
            <input slot="content" v-model="baseInfo.living_address" placeholder="请输入居住地址" >
          </item>
          <item>
            <div slot="name" class="required">户籍地址</div>
            <input
              slot="content"
              v-model="baseInfo.address_on_resident_booklit"
              placeholder="请输入户籍地址"
            >
          </item>
          <item :showArrow="true">
            <div slot="name" class="required">学历</div>
            <input
              slot="content"
              v-model="academic_bg_n"
              placeholder="请选择学历"
              readonly
              onfocus="this.blur()"
              @click="selectBackType"
            >
          </item>
          <item :showArrow="true">
            <div slot="name" class="required">婚姻状况</div>
            <input
              slot="content"
              v-model="marital_status_n"
              placeholder="请选择"
              readonly
              onfocus="this.blur()"
              @click="selectMarital"
            >
          </item>
        </list-item>
        <div class="userInfo">配偶信息</div>
        <list-item :item-height="44">
          <item>
            <div slot="name" class="required">姓名</div>
            <input slot="content" v-model="baseInfo.bp_name_sp" 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 class="userInfo">资产信息</div>
        <div class="card">
          <span>房产证件</span>
          <div class="img-content">
            <div class="card-upload">
              <img src="@/assets/userBind/camera.png" >
            </div>
          </div>
        </div>
        <div class="card">
          <span>车辆证件</span>
          <div class="img-content">
            <div class="card-upload">
              <img src="@/assets/userBind/camera.png" >
            </div>
          </div>
        </div>
        <div class="card">
          <span>其他资产证件</span>
          <div class="img-content">
            <div class="card-upload">
              <img src="@/assets/userBind/camera.png" >
            </div>
          </div>
        </div>
      </div>
      <BankInfo v-show="tabNum==1" :getBankList="getBankList" @getInfo="getInfo" />
      <InvoiceInfo v-show="tabNum==2" @getinvoiceList="getinvoiceList" />
    </h-content>
    <bottom-tab class="footer-button">
      <tab-button class="put" @click.native="putData">提交</tab-button>
      <tab-button class="save" @click.native="verified">保存</tab-button>
    </bottom-tab>
    <h-modal ref="modal" v-model="showModalValue" position="bottom" cus-class="search-modal">
      <h-view>
        <h-content class="modal-content">
          <notify v-model="show1" content="请输入本人的银行卡" type="warning" class="notice" />
          <notify v-model="show2" content="请输入完整字段" type="warning" class="notice" />
          <notify v-model="show3" content="添加成功，记得保存哦" type="success" class="notice" />
          <div class="modal-content-add-top">
            <span>添加银行卡</span>
            <img src="@/assets/userBind/close.png" @click="hideModal" >
          </div>
          <img 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.bank_account_num" placeholder="银行卡卡号自动填充" >
            </item>
            <item>
              <div slot="name">账户姓名</div>
              <input slot="content" v-model="bank.bank_account_name" placeholder="请输入账户名称" >
            </item>
            <item>
              <div slot="name">银行名称</div>
              <input slot="content" v-model="bank.bank_full_name" placeholder="请输入银行名称" >
            </item>
            <item>
              <div slot="name">支行名称</div>
              <input slot="content" v-model="bank.bank_branch_name" placeholder="请输入支行名称" >
            </item>
          </list-item>
        </h-content>
      </h-view>
      <bottom-tab class="add-box">
        <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 '@/pages/userBind/np/invoiceInfo'
import BankInfo from '@/pages/userBind/np/bankInfo'
export default {
  components: {
    Tab,
    InvoiceInfo,
    BankInfo,
  },
  data () {
    return {
      list: {},
      isPaople: false,
      isEnter: false,
      show1: false,
      show2: false,
      show3: false,
      showModalValue: false,
      isSelected: false,
      tabNum: 0,
      bp_type_n: '',
      academic_bg_n: '',
      marital_status_n: '',
      typeList: [],
      backList: [],
      bankList: [],
      maritalList: [],
      getBankList: [],
      bank: {
        bank_account_num: '',
        bank_account_name: '',
        bank_card_type: '信用卡',
        bank_full_name: '',
        bank_branch_name: '',
      },
      img_url: {},
      baseInfo: {
        bp_type: '',
        bp_class: this.$route.params.bp_class,
        bp_name: '',
        id_card_no: null,
        phone: null,
        living_address: '',
        address_on_resident_booklit: '',
        marital_status: '',
        academic_background: '',
        bp_name_sp: '',
        spouse_phone: '',
        working_place_sp: '',
        address_sp: '',
        invoice_bp_bank_account: '',
        taxpayer_type: '',
        invoice_title: '',
        invoice_bp_address_phone_num: '',
        invoice_kind: '',
      },
    }
  },
  watch: {
    bp_type_n () {
      let vm = this
      if (vm.baseInfo.bp_type === 'TENANT' || vm.baseInfo.bp_type === 'GUTA') {
        vm.isPaople = true
        vm.isEnter = false
      } else if (
        vm.baseInfo.bp_type === 'AGENT' ||
        vm.baseInfo.bp_type === 'OFFICE' ||
        vm.baseInfo.bp_type === 'FACTORY'
      ) {
        vm.isEnter = true
        vm.isPaople = false
      }
    },
    'tabNum': function (newVal, oldVal) {
      if ((newVal === 1 && !window.sessionStorage.user_id) || (newVal === 2 && !window.sessionStorage.user_id)) {
        this.hlsPopup.showError('清先保存基本信息')
        this.tabNum = oldVal
      }
    },
  },
  created () {
    this.getBpType()
    this.getEducationBackground()
    this.getMarital()
    this.getBankInfo()
  },
  updated () {
    this.getinvoiceList()
  },
  methods: {
    verified () {
      let vm = this
      if (!vm.baseInfo.bp_type || !vm.baseInfo.bp_name || !vm.baseInfo.id_card_no || !vm.baseInfo.phone || !vm.baseInfo.living_address ||
      !vm.baseInfo.address_on_resident_booklit || !vm.baseInfo.marital_status || !vm.baseInfo.academic_background || !vm.baseInfo.bp_name_sp || !vm.baseInfo.spouse_phone ||
      !vm.baseInfo.working_place_sp || !vm.baseInfo.address_sp
      ) {
        vm.hlsPopup.showLongCenter('必输字端不能为空！')
        return
      }

      if (!vm.hlsUtil.phoneNumber(vm.baseInfo.phone)) {
        vm.hlsPopup.showLongCenter('手机号码有误!')
        return
      }
      let url = process.env.basePath + 'bp_np_bind_save'
      let param = {
        'master': this.baseInfo,
      }
      vm.hlsPopup.showLoading('保存中!')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.hlsPopup.showSuccess('保存成功')
          window.localStorage.setItem('user_id', res.bp_id)
          window.sessionStorage.setItem('user_id', res.bp_id)
          window.localStorage.setItem('bp_name', vm.baseInfo.bp_name)
          console.log('dbnxuweijhcdieuc', window.localStorage.getItem('bp_name'))
        }
      })
    },
    showNotifyAtTop () {
      if (this.show1) return
      this.show1 = true
    },
    showNotifyAtTop1 () {
      if (this.show2) return
      this.show2 = true
    },
    showNotifyAtTopSuccess () {
      if (this.show3) return
      this.show3 = true
    },
    successCall () {
      this.hideModal()
      this.getBankInfo()
      this.bank.bank_account_num = ''
      this.bank.bank_account_name = ''
      this.bank.bank_full_name = ''
      this.bank.bank_branch_name = ''
    },
    addBankInfo () {
      let bpName = window.localStorage.getItem('bp_name')
      if (this.bank.bank_account_num === '' || this.bank.bank_account_name === '' || this.bank.bank_full_name === '' || this.bank.bank_branch_name === '') {
        this.showNotifyAtTop1()
      } else if (this.hlsUtil.isBankAccount(this.bank.bank_account_num)) {
        this.hlsPopup.showLongCenter('银行卡号有误')
      } else if (this.bank.bank_account_name !== bpName) {
        console.log(bpName)
        this.showNotifyAtTop()
      } else {
        let list = JSON.parse(JSON.stringify(this.bank))
        this.bankList.push(list)
        let vm = this
        let url = process.env.basePath + 'bp_bank_save'
        let param = {
          'master': {
            'bp_id': window.localStorage.getItem('user_id'),
            'bank_lists': this.bankList,
          },
        }
        vm.hlsPopup.showLoading('请稍候')
        vm.hlsHttp.post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading()
          if (res.result === 'S') {
            vm.showNotifyAtTopSuccess()
            setTimeout(
              vm.successCall
              , 2000)
          }
        })
      }
    },
    putData () {
      let vm = this
      let url = process.env.basePath + 'bp_bind_submit'
      let param = {
        'master': {
          'bp_id': window.localStorage.getItem('user_id'),
          'company_id': '2145',
        },
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          console.log(res)
        }
      })
    },
    hideModal () {
      this.showModalValue = false
    },
    getInfo (i) {
      this.showModalValue = i
    },
    showModal () {
      this.showModalValue = true
    },
    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.bp_type_n = obj.bp_type_n
          vm.isSelected = true
        },
      })
    },
    getBankInfo () {
      let vm = this
      let bpId = window.localStorage.getItem('user_id')
      let url = process.env.basePath + 'bp_bank_query'
      let param = {
        'bp_id': bpId,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.getBankList = res.lists
        }
      })
    },
    getinvoiceList (i) {
      Object.assign(this.baseInfo, i)
    },
    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.academic_bg_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.marital_status_n = obj.bp_type_n
        },
      })
    },
    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,
            }
          })
        }
      })
    },
    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') {
          vm.typeList = res.lists.map(item => {
            return {
              code: item.bp_type,
              code_name: item.bp_type_n,
            }
          })
        }
      })
    },
  },
}
</script>
<style lang="less">
#base-info1 {
  font-family: PingFangSC-Regular;
  input::placeholder {
    color: #b4b4b5;
  }
  .header {
    background-color: #00469c;
    color: #fff;
    .h-header-btn {
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }
      span {
        color:#fff;
        font-family: PingFangSC-Semibold;
        margin-left: 16px;
        font-size: 17px;
        letter-spacing: 0.6px;
        line-height: 24px;
      }
    }
  }
  .content {
    height: 76%;
    .userInfo {
      height: 45px;
      line-height: 45px;
      color: #00469c;
      margin-top: -10px;
      font-size: 15px;
      margin-left: 16px;
      position: relative;
    }
    .userInfo::before {
      content: "";
      display: block;
      width: 4px;
      height: 20px;
      background-color: #00469c;
      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: 15px;
      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;
      }
      .card-upload {
        width: 88px;
        height: 88px;
        border: 1px dashed #dcdcdd;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 12px;
        margin-left: 12px;
        // float: left;
        img {
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .put {
    width: 175px;
    height: 45px;
    color: #00469c;
    border-radius: 4px;
    border: 1px solid #00469c;
    background-color: #fafafa;
  }
  .save {
    width: 175px;
    height: 45px;
    color: #fff;
    border-radius: 4px;
    background-color: #00469c;
  }
  .footer-button {
    padding-top: 15px;
    margin-bottom: 15px;
  }
  .front,
  .photo,
  .backphoto,
  .back {
    display: none;
  }
  .modal-content {
    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: #00469c;
        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: #00469c;
    border-radius: 4px;
    color: #fff;
  }
}
.modal {
  background-color: rgba(0, 0, 0, 0) !important;
}
.hls-notify-wrap {
  height: 50px;
  line-height: 34px !important;
}
</style>
