<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"
                    @click="getSignCode()"
                    style="width:1.7rem;height:30px;border-radius:15px;background-color:#09bb07;color:#FFFFFF;margin:8px 0 0 -60px;position:relative;left:30%"
            >
              <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
          @click="next_step()"
          style="width:120px;height:30px;border-radius:15px;background-color:#09bb07;color:#FFFFFF;margin:70px 0 0 -60px;position:relative;left:50%;"
        >签约
        </button>
        <p/>
      </list-item>
    </h-content>
  </h-view>
</template>

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

  export default {
    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
      };
    },
    components: {},
    activated: function () {
      // this.getUserInfo();
    },
    updated: function () {
    },
    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("必输字端不能为空！");
          return;
        } else if (vm.hlsUtil.isCardID(vm.certNo)) {
          vm.hlsPopup.showLongCenter("身份证号有误");
          return;
        } else if (!vm.hlsUtil.phoneNumber(vm.phoneNumber)) {
          vm.hlsPopup.showLongCenter("手机号码有误!");
          return;
        } 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)
          }
        })
      },
    },
    created() {
      this.wxConfig();
      // wx.hideOptionMenu();

      // var data = this.$route.params.userInfo;
      //this.getUserInfo();
    }
  };
</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>
