<template>
  <h-view class="public-style bank-account" title="四要素验证">
    <!--    <h-header>
      <div slot="left" class="h-header-btn" @click="$routeGo()">
        <i class="ion-ios-arrow-back"/>
      </div>
      <div slot="center">四要素验证</div>
    </h-header>-->
    <h-content>
      <list-item>
        <item>
          <section slot="name" class="required">姓名</section>
          <input slot="content" v-model="personName" placeholder="输入姓名">
        </item>
        <item :show-arrow="true">
          <section slot="name" class="required" >证件类型</section>
          <input
            slot="content" v-model="idType_n" placeholder="请选择证件类型" readonly>
        </item>
        <item>
          <section slot="name" class="required">证件号</section>
          <input
            slot="content" v-model="identificationNumber" class="required" placeholder="输入证件号"
            type="number">
        </item>
        <item>
          <section slot="name" class="required" >银行卡号</section>
          <input slot="content" v-model="bankCardNumber" placeholder="银行卡号" type="number">
        </item>
        <item>
          <section slot="name" class="required">银行预留手机号</section>
          <input slot="content" v-model="bankReservedPhoneNumber" placeholder="输入手机号" type="tel">
        </item>
        <item :show-name="false" :item-height="30" class="tip-item">
          <section slot="content" class="tips">我们收集您的个人信息仅用于实名认证，请放心填写</section>
        </item>
      </list-item>
      <section class="button">
        <h-button @click.native="verified()">验证</h-button>
      </section>
    </h-content>
  </h-view>
</template>
<script>

export default {
  data () {
    return {
      personName: this.$route.params.item['bpName'],
      idType: '1',
      idType_n: '身份证',
      identificationNumber: '',
      bankCardNumber: '',
      bankReservedPhoneNumber: '',
    }
  },
  activated: function () {
    /* // 海马汇桥接获取个人信息
    hmapLogin('local').then(res => {

    }) */
  },
  updated: function () {

  },
  methods: {
    /**
     * 演示用 不调用验证接口
     * url=$config.rootPath+'/electronicSignature/bankVerified'
     * 金格 2001 实名认证(银行卡四要素验证)
     * 参数为data里面参数
     */
    verified () {
      let vm = this
      if (!vm.idType || !vm.personName || !vm.identificationNumber || !vm.bankCardNumber || !vm.bankReservedPhoneNumber) {
        vm.hlsPopup.showLongCenter('必输字端不能为空！')
        return
      }
      if (vm.hlsUtil.isCardID(vm.identificationNumber)) {
        vm.hlsPopup.showLongCenter('身份证号有误')
        return
      }
      if (vm.hlsUtil.isBankAccount(vm.bankCardNumber)) {
        vm.hlsPopup.showLongCenter('银行卡号有误!')
        return
      }
      if (!vm.hlsUtil.phoneNumber(vm.bankReservedPhoneNumber)) {
        vm.hlsPopup.showLongCenter('手机号码有误!')
        return
      }
      vm.hlsPopup.showLoading('认证中!')
      // TODO 此处应该调用金格个人开户接口去做开户请求 但由于演示环境开户完成后并无实际效果，故不调用接口
      setTimeout(() => {
        vm.hlsPopup.hideLoading()
        vm.hlsPopup.showSuccess('认证成功')
        setTimeout(() => {
          vm.$router.push({
            name: 'PersonAccount',
            params: {
              personName: vm.personName,
              identificationNumber: vm.identificationNumber,
              phoneNumber: vm.bankReservedPhoneNumber,
            },
          })
        }, 500)
      }, 2000)
    },
  },
}
</script>
<style lang="less" type="text/less">

  .bank-account {
    .content {
      .hls-list-item{
        .tip-item{
          .contents{
            .add-content{
              .tips{
                font-size: 12px;
              }
            }
          }

        }
      }
      .button{
        width: 100%;
        margin-top: 40px;
        display: flex;
        justify-content: center;
        .hls-h-button{
          background-color: @headerColor;
          border: none;
          border-radius: 20px;
          width: 140px;
          height: 40px;
          color: #fff;
        }
      }
    }
  }

  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      #home {
      }
    }
  }

  // iPhoneX Max适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      .platform-ios {
        #home {
        }
      }
    }
  }
</style>
