<template>
  <h-view class="public-style personalRegister" title="银联电子签约">
    <h-content>
      <list-item class="personalInf" style="padding:20px;height:100%">
        <div style="height:40px;border-bottom:1px solid #d0d0d0">
          <div class="personalInf-text" style=" width: 150px;line-height: 30px;text-align: center;
      border-radius: 5px;
      background-color: #ddd;font-size:16px;font-weight:700;color:#11111187">签约信息
          </div>
        </div>
        <item style="border-bottom:1px solid #d0d0d0;font-size:14px">
          <section slot="name" style="font-size:14px">
            <img src="../../../assets/userRegister/bankIcon@2x.png"
              style="float:left;width:20px;height:20px;margin: 2px 5px 0 0;">银行卡号:
          </section>
          <input slot="content" v-model="bankCardNumber" style="text-align: left;font-size:14px" placeholder="请输入银行卡号">
        </item>
        <item style="border-bottom:1px solid #d0d0d0">
          <section slot="name" style="font-size:14px">
            <img src="../../../assets/userRegister/people-name.png"
              style="float:left;width:20px;height:20px;margin: 2px 5px 0 0;">账户名称:
          </section>
          <input slot="content" v-model="bankAccName" style="text-align: left;font-size:14px" placeholder="请输入账户名称">
        </item>
        <item style="border-bottom:1px solid #d0d0d0">
          <section slot="name" style="font-size:14px">
            <img src="../../../assets/userRegister/idCard.png"
              style="float:left;width:20px;height:20px;margin: 2px 5px 0 0;">证件号码:
          </section>
          <input slot="content" v-model="certNo" style="text-align: left;font-size:14px" placeholder="请输入证件号码"
            @blur="goTop()">
        </item>
        <item style="border-bottom:1px solid #d0d0d0">
          <section slot="name" style="font-size:14px">
            <img src="../../../assets/userRegister/phone.png"
              style="float:left;width:20px;height:20px;margin: 2px 5px 0 0;">预留手机:
          </section>
          <input slot="content" v-model="phoneNumber" style="text-align: left;font-size:14px" placeholder="请输入电话号码"
            @blur="goTop()">
        </item>
        <item style="border-bottom:1px solid #d0d0d0">
          <section slot="name" style="font-size:14px">
            <img src="../../../assets/userRegister/indentifyCode.png"
              style="float:left;width:20px;height:20px;margin: 2px 5px 0 0;">验证码:
          </section>
          <input slot="content" v-model="authCode" style="text-align: left;font-size:14px;margin-left: 0.13rem"
            placeholder="请输入验证码" @blur="goTop()">
          <div>
            <button v-if="!showTimer"
              style="width:1.7rem;height:30px;border-radius:15px;background-color:#09bb07;color:#FFFFFF;margin:8px 0 0 -60px;position:relative;left:30%"
              @click="getSignCode()">
              <div style="font-size: 11px">获取验证码</div>
            </button>
            <button v-if="showTimer"
              style="width:1.7rem;height:30px;border-radius:15px;background-color:#888c8f;color:#FFFFFF;margin:8px 0 0 -60px;position:relative;left:30%">
              <div style="font-size: 11px">{{ timerCount }}{{ text }}</div>
            </button>
          </div>
        </item>
        <div>
          <div style="width:50%;float: left;">
            <div style="margin: 40px 0 0 14px;color:#333333;font-size:14px">
              <div>请上传银行卡照片</div>
            </div>
            <div style="height:100px;margin-top:30px">
              <div
                style="border:1px solid #b2b2b2;width:70%;height:100%;margin:0 auto;border-radius:5px;position:relative;">
                <img :src="cardUp" alt class="pic" @click="addCardImage(0)">
              </div>
            </div>
            <p style="margin-top:10px;text-align:center;font-size:14px">
              银行卡正面
            </p>
          </div>
          <div style="width:50%;float: left;">
            <div style="margin: 40px 0 0 14px;color:#333333;font-size:14px">
              <p>请上传身份证照片</p>
            </div>
            <div style="height:100px;margin-top:30px">
              <div
                style="border:1px solid #b2b2b2;width:70%;height:100%;margin:0 auto;border-radius:5px;position:relative;">
                <img :src="cardUp1" alt class="pic" @click="addCardImage(1)">
              </div>
            </div>
            <p style="margin-top:10px;text-align:center;font-size:14px">
              身份证正面
            </p>
          </div>
        </div>
        <button
          style="width:120px;height:30px;border-radius:15px;background-color:#09bb07;color:#FFFFFF;margin:70px 0 0 -60px;position:relative;left:50%;"
          @click="next_step()">签约
        </button>
        <p />
      </list-item>
    </h-content>
  </h-view>
</template>

<script>
import { getUrlParam } from '@/scripts/utils'

export default {
  components: {},
  data () {
    return {
      cardUp: require('../../../assets/userRegister/camear.png'), // 身份证正面url
      bankCardNumber: '',
      bankAccName: '',
      certNo: '',
      phoneNumber: '',
      authCode: '',
      phoneNumberFlag: false,
      showTimer: false,
      timerCount: 60,
      timer: 60000,
      captchaKey: '',
      signId: '',
      signStatus: 0,
      text: '秒后失效',
      cardUp1: require('../../../assets/userRegister/camear.png'), // 身份证正面url
      preview_url: '', // 图片预览地址
      attchmentId: '', // 附件预览id
      attchmentId1: '', // 附件预览id
    }
  },
  activated: function () {
    // this.getUserInfo();
  },
  updated: function () {
  },
  created () {
    this.wxConfig()
    // wx.hideOptionMenu();

    // var data = this.$route.params.userInfo;
    // this.getUserInfo();
  },
  methods: {
    // 调用微信接口的基础配置
    wxConfig () {
      let clientUrl = ''
      let u = navigator.userAgent
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // g
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
      if (isAndroid) {
        // 这个是安卓操作系统
        console.log('机型：android')
        clientUrl = location.href
      }
      if (isIOS) {
        // 这个是ios操作系统
        console.log('机型：ios')
        clientUrl = location.href.split('#')[0]
      }
      // let clientUrl = encodeURIComponent(location.href)
      // let url = $config.rootPath + '/js/sdk/getWxConfig?wxCode=' + $config.wxCode + '&clientUrl=' + clientUrl
      let url = process.env.basePathRl + 'getSignature'
      let param = {
        apiKey: 'handexinxi',
        url: clientUrl,
      }
      hlsHttp.post(url, param).then(function (res) {
        wx.config({
          beta: true,
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.result.appId, // 必填，公众号的唯一标识
          timestamp: res.result.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.result.nonceStr, // 必填，生成签名的随机串
          signature: res.result.signature, // 必填，签名，见附录1
          jsApiList: [
            'chooseImage',
            'previewImage',
            'downloadImage',
            'getLocalImgData',
            'uploadImage',
            'hideOptionMenu',
          ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        })
        wx.ready(function () {
          wx.hideOptionMenu()
        })
      })
    },
    addCardImage: function (cardType) {
      let self = this
      // if(!self.cardUp){
      wx.chooseImage({
        count: 1, // 张数， 默认9
        sizeType: ['compressed'], // 建议压缩图
        sourceType: ['album', 'camera'], // 来源是相册、相机
        success: function (res) {
          if (cardType == 0) {
            self.cardUp = res.localIds[0]
          } else {
            self.cardUp1 = res.localIds[0]
          }
          self.uploadToWeixinServer(res.localIds[0], cardType)
        },
      })
      // }else{
      //   if(self.attchmentId){
      //     this.previewImage();
      //   }

      // }
    },
    // 预览图片
    previewImage () {
      hlsPopup.showBigPicture({
        imgUrl: vm.cardUp,
        imgUrl1: vm.cardUp1,
      })
    },
    uploadToWeixinServer (localId, cardType) {
      let self = this
      wx.uploadImage({
        localId: localId,
        isShowProgressTips: 1, // 默认为1，显示进度提示
        success: function (res) {
          // res.serverId 返回图片的微信服务器端ID
          console.log('上传图片后返回的信息', res)
          self.serverId = res.serverId
          self.uploadToserver(res.serverId, cardType)
        },
      })
    },
    uploadToserver (serverId, cardType) {
      let vm = this
      let url = process.env.rootPath + '/auth/upload/image/hls/from/wx'
      let sourceType = ''
      if (cardType == 0) {
        sourceType = 'app_file_id_bank'
      } else {
        sourceType = 'app_file_id_card'
      }
      let param = {
        openId: window.localStorage.openId,
        mediaId: serverId,
        sourceType: sourceType,
        fileName: new Date().getTime() + '.jpg',
      }
      vm.hlsPopup.showLoading('请稍等')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        vm.attchmentId = res['attchmentId']
        if (cardType == 0) {
          vm.bankCardNumber = res['bank_card_number']
          vm.cardUp =
            process.env.rootPath +
            '/app/fileViewSvc?attachment_id=' +
            vm.attchmentId +
            '&apiName=download&sysName=HCL_UPLOAD_FILE&access_token=' +
            window.localStorage.access_token_rl
        } else {
          vm.bankAccName = res['姓名']
          vm.certNo = res['公民身份号码']
          vm.cardUp1 =
            process.env.rootPath +
            '/app/fileViewSvc?attachment_id=' +
            vm.attchmentId +
            '&apiName=download&sysName=HCL_UPLOAD_FILE&access_token=' +
            window.localStorage.access_token_rl
        }
      })
    },
    // 下一步
    next_step () {
      let vm = this
      if (
        !vm.bankCardNumber ||
        !vm.bankAccName ||
        !vm.phoneNumber ||
        !vm.certNo ||
        !vm.authCode
      ) {
        vm.hlsPopup.showLongCenter('必输字端不能为空！')
      } else if (vm.hlsUtil.isCardID(vm.certNo)) {
        vm.hlsPopup.showLongCenter('身份证号有误')
      } else if (!vm.hlsUtil.phoneNumber(vm.phoneNumber)) {
        vm.hlsPopup.showLongCenter('手机号码有误!')
      } else {
        // alert("验证通过");
        let url = process.env.rootPath + '/china/pay/send/sign'
        let param = {
          signId: vm.signId,
          auth_code: vm.authCode,
        }
        vm.hlsPopup.showLoading('请稍等')
        vm.$post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading()
          if (res.respCode == '0000') {
            vm.hlsPopup.showSuccess(res.respMsg)
          } else {
            vm.hlsPopup.showLongCenter(res.respMsg)
          }
        })
      }
    },

    // 键盘消失，页面回到顶部
    goTop () {
      setTimeout(function () {
        var scrollHeight =
          document.documentElement.scrollTop || document.body.scrollTop || 0
        console.log(scrollHeight)
        window.scrollTo(0, Math.max(scrollHeight, 0))
      }, 100)
    },
    // 获取验证码
    getSignCode () {
      let vm = this
      if (!vm.bankCardNumber) {
        vm.hlsPopup.showLongCenter('请输入银行卡号！')
        return
      }
      if (!vm.bankAccName) {
        vm.hlsPopup.showLongCenter('请输入账户名称！')
        return
      }
      if (!vm.certNo) {
        vm.hlsPopup.showLongCenter('请输入证件号码！')
        return
      }
      if (!vm.phoneNumber) {
        vm.hlsPopup.showLongCenter('请输入手机号！')
        return
      }
      if (!vm.showTimer) {
        if (
          hlsUtil.phoneNumber(vm.phoneNumber) ||
          hlsUtil.phoneNumber86(vm.phoneNumber)
        ) {
          vm.phoneNumberFlag = true
          vm.getVerifiedCode()
        } else {
          hlsPopup.showLongCenter('手机号不存在，请重新输入！')
          vm.phoneNumber = ''
        }
      }
    },
    // 前端生成验证码发送请求到后端进行判断
    getVerifiedCode () {
      let vm = this
      let url = process.env.rootPath + '/china/pay/send/sign/message'
      let param = {
        card_no: vm.bankCardNumber,
        acc_name: vm.bankAccName,
        cert_no: vm.certNo,
        mobile_no: vm.phoneNumber,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.signId = ''
        vm.signStatus = 0
        vm.hlsPopup.hideLoading()
        if (res.respCode === '0000') {
          vm.signId = res.signId
          vm.signStatus = 1
          vm.hlsPopup.showSuccess('验证码已发送')
          vm.showTimer = true
          vm.text = '秒后失效'
          let counter = setInterval(function () {
            if (vm.timerCount > 0) {
              vm.timerCount = vm.timerCount - 1
            }
          }, 1000)
          setTimeout(function () {
            vm.text = '获取验证码'
            vm.showTimer = false
            clearInterval(counter)
            vm.showTimer = false
            vm.timerCount = vm.timer / 1000
          }, vm.timer)
        } else {
          vm.hlsPopup.showLongCenter('验证码发送失败！' + res.respMsg)
        }
      })
    },
  },
}
</script>
<style lang="less" type="text/less" scoped>
@import "../../../styles/vue-1px.less";

.personalRegister {
  font-size: 12px !important;
  .personalInfo {
    width: 100%;
    height: 100% !important;
  }
  .uppic {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    opacity: 0;
    z-index: 1000;
    position: absolute;
  }
  .pic {
    width: 100%;
    height: 100%;
    position: absolute;
  }
}

// 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>
