<!--
 * @Author: your name
 * @Date: 2019-09-29 10:02:11
 * @LastEditTime: 2019-12-12 17:34:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 -->
<template>
  <h-view id="entry-info" class="public-style">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
        <span>银行卡信息录入</span>
      </div>
    </h-header>

    <h-content>
      <div class="info">
        <div class="info-header">
          <p>请上传银行卡照片</p>
          <div v-if="!bankImg" class="bank-pic">
            <img src="@/assets/constractSigning/bank.png" alt="" @click="confirm_status !== 'APPROVED' && user_bp_type !== 'GUTA' ? ocrShow() : ''">
          </div>
          <div v-if="bankImg" class="bank-pic2">
            <img :src="bankImg" alt="" @click="ocrShow()">
          </div>
        </div>
        <list-item :item-height="44" class="info-center">
          <item>
            <div slot="name" >银行卡卡号</div>
            <input
              slot="content" v-model="bank_lists.bank_account_num" type="text"
              placeholder="上传银行卡自动填充" readonly
            >
          </item>
          <item>
            <div slot="name" >账户名称</div>
            <input
              slot="content" v-model="bank_lists.bank_account_name" type="text" readonly
              placeholder="请输入账户名称">
          </item>
          <item>
            <div slot="name" >银行名称</div>
            <input
              slot="content" v-model="bank_lists.bank_full_name" type="text"
              placeholder="请输入银行名称" readonly>
          </item>
          <item>
            <div slot="name" >预留手机号</div>
            <input
              slot="content" v-model="bank_lists.reserve_phone" type="number"
              placeholder="请输入手机号" @blur="phoneCheck(bank_lists.reserve_phone)">
          </item>
          <item>
            <div slot="name" >开户身份证</div>
            <input
              slot="content" v-model="bank_lists.id_card_no" type="text" readonly
              placeholder="请输入身份证">
          </item>
          <item>
            <div slot="name" >支行名称</div>
            <input
              v-if="user_bp_type !== 'GUTA' && confirm_status !== 'APPROVED'" slot="content" v-model="bank_lists.bank_branch_name" type="text"
              placeholder="请输入支行名称"
            >
            <input
              v-if="user_bp_type === 'GUTA' || confirm_status === 'APPROVED'" slot="content" v-model="bank_lists.bank_branch_name" readonly
              type="text" placeholder="请输入支行名称"
            >
          </item>

        </list-item>
      </div>

    </h-content>
    <bottom-tab v-if="confirm_status !== 'APPROVED' && user_bp_type !== 'GUTA'">
      <tab-button class="footer" @click.native="cardAdd">
        保存
      </tab-button>
    </bottom-tab>
  </h-view>
</template>

<script>
import Check1 from '@/assets/distributorSign/conditionChecked.png'
import Check2 from '@/assets/distributorSign/textChecked.png'
import unCheck1 from '@/assets/distributorSign/conditionUncheck.png'
import unCheck2 from '@/assets/distributorSign/textUncheck.png'

export default {
  name: 'EntryInfo',
  components: {
  },
  data () {
    return {
      num: 1,
      bankImg: '', // 银行卡图片
      project_id: '',
      user_bp_type: '', // 客户类型
      check1: Check1,
      check2: Check2,
      uncheck1: unCheck1,
      uncheck2: unCheck2,
      bank_card_flag: false,
      readyonlf_flag: false, // 支行是否可输入
      confirm_status: '',
      res: '',
      name: '',
      bank_lists: {
        bp_id: '',
        project_id: '',
        bank_full_name: '', // 银行名称
        bank_account_num: '', // 卡号
        bank_account_name: this.$route.params.bp_name,
        bank_branch_name: '',
        reserve_phone: '', // 预留手机号
        id_card_no: this.$route.params.id_card_no,
      },
    }
  },
  computed: {},
  watch: {},
  activated () {
    console.log('id', this.$route.params.bp_id)
    this.user_bp_type = this.$route.params.user_bp_type
    this.name = this.$route.params.name
    this.confirm_status = this.$route.params.confirm_status
    //  || !this.$route.params.entry_info_flag
    if (this.bank_lists.project_id !== this.$route.params.project_id) {
      // this.bank_lists.project_id = this.$route.params.project_id
      this.bankImg = ''
      this.bank_lists = {
        bp_id: this.$route.params.bp_id,
        project_id: this.$route.params.project_id,
        bank_full_name: '', // 银行名称
        bank_account_num: '', // 卡号
        bank_account_name: this.$route.params.bp_name,
        bank_branch_name: '',
        reserve_phone: '',
        id_card_no: this.$route.params.id_card_no,
      }
    }
    this.bankCardQuery()
  },
  methods: {
    // ocr识别入口
    ocrShow () {
      let vm = this
      hlsPopup.showActionSheet({
        titleText: '请选择照片',
        buttonArray: ['拍照', '从相册取'],
        callback: index => {
          if (index === 0) {
            vm.openCamera()
          } else {
            vm.takePicture()
          }
        },
      })
    },
    openCamera () {
      let vm = this
      let cameraoptions = {
        quality: 60,
        width: 1843,
        height: 1382,
      }
      let success = function (imgdata) {
        if (!imgdata) {
          hlsPopup.showLongCenter('请拍照')
        } else {
          vm.bankImg = imgdata
          vm.bankCardIdentify(imgdata)
        }
      }
      let error = function () {
        hlsPopup.showLongCenter('请拍照')
      }
      hlsUtil.openCamera(cameraoptions, success, error)
    },
    takePicture () {
      let vm = this
      var cameraoptions = {
        quality: 70,
        width: 1843,
        height: 1382,
        maxCount: 1,
      }
      let success = function (imgUrl) {
        if (imgUrl.length === 0) {
          hlsPopup.showLongCenter('请选择一张图片')
        } else {
          vm.bankImg = imgUrl[0]
          vm.bankCardIdentify(imgUrl[0])
        }
      }
      let error = function () {
        hlsPopup.showLongCenter(error)
      }
      vm.hlsUtil.takePicture(cameraoptions, success, error)
    },
    // 银行卡识别
    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.sort()
        // vm.bank_lists.bank_card_type = result.bank_card_type
      })
    },
    // 校验手机号
    phoneCheck (phone) {
      if (!hlsUtil.phoneNumber(phone) && !hlsUtil.phoneNumber86(phone)) {
        hlsPopup.showLongCenter('请输入正确的手机号')
        this.bank_card_flag = false
      }
    },
    cardAdd () {
      if (this.bank_lists.bank_account_num === '') {
        this.hlsPopup.showLongCenter('请识别银行卡')
        this.bank_card_flag = false
      } else if (this.hlsUtil.isBankAccount(this.bank_lists.bank_account_num)) {
        this.bank_card_flag = false
        this.hlsPopup.showLongCenter('请输入正确银行卡号！')
      } else if (this.bank_lists.bank_full_name !== '农业银行') {
        this.bank_card_flag = false
        this.hlsPopup.showLongCenter('请您识别农业银行卡！')
      } else {
        this.bank_card_flag = true
      }
      this.phoneCheck(this.bank_lists.reserve_phone)
      if (this.bank_card_flag) {
        let vm = this
        let url = $config.basePath + 'con_bank_save'
        let param = {
          master: {...vm.bank_lists},
        }
        vm.hlsPopup.showLoading('请稍后')
        vm.hlsHttp.post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading()
          if (res.result === 'S') {
            vm.hlsPopup.showSuccess('保存成功')
            vm.$routeGo()
            // vm.$router.push({
            //   name: 'ContractDetail',
            //   // params: {
            //   //   add_status: true,
            //   // },
            // })
          } else {
            hlsPopup.showLongCenter(res.message)
          }
        })
      }
    },
    bankCardQuery () {
      let vm = this
      let url = $config.basePath + 'con_bank_query'
      let param = {
        bp_id: vm.$route.params.bp_id,
        project_id: vm.$route.params.project_id,
      }
      vm.hlsHttp.post(url, param).then(function (res) {
        if (res.result === 'S') {
          if (res.info.bank_full_name !== ' ') {
            vm.readyonlf_flag = true
            vm.bank_lists = res.info
            // vm.bank_lists.bank_account_name = vm.$route.params.bp_name
            // vm.bank_lists.id_card_no = vm.$route.params.id_card_no
            // vm.bank_lists.project_id = vm.$route.params.project_id
          } else {
            // vm.bank_lists.bank_account_name = vm.$route.params.bp_name
            // vm.bank_lists.id_card_no = vm.$route.params.id_card_no
            // vm.bank_lists.project_id = vm.$route.params.project_id
          }
          vm.bank_lists.bank_account_name = vm.$route.params.bp_name
          vm.bank_lists.id_card_no = vm.$route.params.id_card_no
          vm.bank_lists.project_id = vm.$route.params.project_id
          vm.bank_lists.bp_id = vm.$route.params.bp_id
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
  },
}
</script>
<style lang='less' >
#entry-info {
  .h-header-btn {
    img {
      width: 16px;
      height: 16px;
      margin-left: 4px;
    }

    span {
      font-family: PingFangSC-Semibold;
      margin-left: 16px;
      font-size: 17px;
      letter-spacing: 0.61px;
      line-height: 24px;
    }
  }

  .info{
    background-color: #fff;

    .info-header {
      padding: 12px 16px;
      border-bottom: 1px solid #D9DBDF;

      p{
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: #656464;
        letter-spacing: 0;
      }

      div{
        border: 1px dashed #DCDCDD;
        border-radius: 2px;
        width: 172px;
        height: 120px;
        text-align: center;
        margin: 14px auto 0;
        line-height: 145px;
      }
      .bank-pic2 {
        border: 1px dashed #DCDCDD;
        border-radius: 2px;
        width: 172px;
        height: 120px;
        // text-align: center;
        // margin: 14px auto 0;
        // line-height: 145px;
        img {
          width: 100%;
          height: 120px;
        }
      }

      img{
          height: 45px;
      }
    }

    .info-center{
      div{
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #656464;
        letter-spacing: 0;
        line-height: 18px;
      }

      section{
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: rgba(180,180,181,0.60);
        letter-spacing: 0;
        line-height: 18px;
      }

      input::placeholder{
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #B4B4B5;
        letter-spacing: 0;
        line-height: 18px;
      }

      input{
        font-size: 14px;
        color: #383F45;
        line-height: 18px;
      }
    }
  }

  .bottom-tab-button{
    background: @headerColor;
    border-radius: 4px;
    color:white;
    height: 40px;
    margin: 4px 2% 0 2%;
  }
}
</style>
