<template>
  <h-view class="public-style person-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 @click="seelctIdType">
        </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="phoneNumber" placeholder="输入手机号" type="tel">
        </item>
        <item>
          <section slot="name" >住宅</section>
          <input slot="content" v-model="location" placeholder="输入居住地址" type="text">
        </item>
        <item>
          <section slot="name">邮箱</section>
          <input slot="content" v-model="email" placeholder="输入邮箱" type="email">
        </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="sign()">确认开户</h-button>
      </section>
    </h-content>
  </h-view>
</template>
<script>

export default {
  data () {
    return {
      personName: this.$route.params.personName,
      idType: '1',
      idType_n: '身份证',
      identificationNumber: this.$route.params.identificationNumber,
      phoneNumber: this.$route.params.phoneNumber,
      location: '',
      email: '',
      idTypeList: [
        {
          'code': '1',
          'code_name': '身份证',
        }, {
          'code': '2',
          'code_name': '护照',
        }],
    }
  },
  activated: function () {
    /* // 海马汇桥接获取个人信息
    hmapLogin('local').then(res => {

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

  },
  methods: {
    seelctIdType () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.idTypeList,
        code: 'idType',
        object: {},
        returnItem (index) {
          vm.idType = vm.idTypeList[index].code
          vm.idType_n = vm.idTypeList[index].code_name
        },
      })
    },
    /**
     * 演示用 不调用接口开户
     * url=$config.rootPath+'/electronicSignature/personalAccountOpen'
     * 金格 1001个人开户
     * 参数为data里面参数
     */
    sign () {
      let vm = this
      if (!vm.idType || !vm.personName || !vm.identificationNumber || !vm.phoneNumber) {
        vm.hlsPopup.showLongCenter('必输字端不能为空！')
        return
      }
      if (vm.idType === '1') {
        let result = vm.hlsUtil.isCardID(vm.identificationNumber)
        if (result) {
          vm.hlsPopup.showLongCenter(result)
          return
        }
      }
      if (!vm.hlsUtil.phoneNumber(vm.phoneNumber)) {
        vm.hlsPopup.showLongCenter('手机号码有误!')
        return
      }
      vm.hlsPopup.showLoading('开户中!')
      // TODO 此处应该调用金格个人开户接口去做开户请求 但由于演示环境开户完成后并无实际效果，故不调用接口
      setTimeout(() => {
        vm.hlsPopup.hideLoading()
        vm.hlsPopup.showSuccess('开户成功')
        setTimeout(() => {
          vm.$router.push({
            name: 'SignPdf',
            params: {
              personName: vm.personName,
              identificationNumber: vm.identificationNumber,
            },
          })
        }, 500)
      }, 2000)
    },
  },
}
</script>
<style lang="less" type="text/less">

  .person-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>
