<template>
  <h-view class="public-style personalRegister" title="个人用户注册">
    <h-content v-if="status!= 1">
      <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:12px">
          <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="personName"
            style="text-align: left;font-size:12px"
            readonly
          />
        </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="identificationNumber"
            style="text-align: left;font-size:14px"
            readonly
          />
        </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>
        <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:140px;height:100%;margin:0 auto;border-radius:5px;position:relative;"
          >
            <!-- <input
              type="file"
              name="avatar"
              id="uppic"
              accept="image/gif, image/jpeg, image/jpg, image/png"
              @change="uploadUpImg($event)"
              ref="avatarInput"
              class="uppic"
            />-->
            <img :src="cardUp" alt class="pic" @click="addCardImage()"/>
          </div>

          <!-- <div style="border:1px solid #b2b2b2;width:50%;border-radius:5px;position:relative;">
            <input
              type="file"
              name="avatar"
              id="uppic"
              accept="image/gif, image/jpeg, image/jpg, image/png"
              @change="uploadDownImg($event)"
              ref="avatarInput"
              class="uppic"
            />
            <img :src="cardDown" alt class="pic" />
          </div>-->
        </div>
        <p style="margin-top:10px;text-align:center;font-size:14px">
          正面
          <!-- <span style="float:right;margin-right:21%;margin-top:10px">反面</span> -->
        </p>
        <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/>
        <button v-if="showStatus== 1"
                @click="go_forword()"
                style="width:120px;height:30px;border-radius:15px;background-color:#09bb07;color:#FFFFFF;margin:20px 0 0 -60px;position:relative;left:50%;"
        >退出
        </button>
      </list-item>
    </h-content>

    <h-content v-if="status == 1">
      <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">
          <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="personName"
            style="text-align: left;font-size:14px"
            readonly
          />
        </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="identificationNumber"
            style="text-align: left;font-size:14px"
            readonly
          />
        </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"
            readonly
          />
        </item>
        <div style="margin: 40px 0 0 14px;color:#333333">
          <p>请上传身份证照片</p>
        </div>
        <div style="height:100px;margin-top:30px">
          <div
            style="border:1px solid #b2b2b2;width:140px;height:100%;margin:0 auto;border-radius:5px;position:relative;"
          >
            <!-- <input
              type="file"
              name="avatar"
              id="uppic"
              accept="image/gif, image/jpeg, image/jpg, image/png"
              ref="avatarInput"
              class="uppic"
              disabled
            />-->
            <img :src="cardUp" alt class="pic" @click="previewImage()"/>
          </div>

          <!-- <div style="border:1px solid #b2b2b2;width:50%;border-radius:5px;position:relative;">
            <input
              type="file"
              name="avatar"
              id="uppic"
              accept="image/gif, image/jpeg, image/jpg, image/png"
              @change="uploadDownImg($event)"
              ref="avatarInput"
              class="uppic"
            />
            <img :src="cardDown" alt class="pic" />
          </div>-->
        </div>
        <p style="margin-top:10px;text-align:center;">
          正面
          <!-- <span style="float:right;margin-right:21%;margin-top:10px">反面</span> -->
        </p>
        <button
          @click="logout()"
          style="width:120px;height:30px;border-radius:15px;background-color:#09bb07;color:#FFFFFF;margin:70px 0 0 -60px;position:relative;left:50%;"
        >注销
        </button>
      </list-item>
    </h-content>
  </h-view>
</template>

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

  export default {
    data() {
      return {
        cardUp: require("../../../assets/userRegister/camear.png"), //身份证正面url
        identificationNumber: "",
        phoneNumber: "",
        personName: "",
        cardUp1: "", //身份证正面url
        identificationNumber1: "",
        phoneNumber1: "",
        personName1: "",
        status: "",
        showStatus: "",
        serverId: "",
        preview_url: "", //图片预览地址
        attchmentId: "" //附件预览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 () {
        let self = this;
        // if(!self.cardUp){
        wx.chooseImage({
          count: 1, //张数， 默认9
          sizeType: ["compressed"], //建议压缩图
          sourceType: ["album", "camera"], // 来源是相册、相机
          success: function (res) {
            self.cardUp = res.localIds[0];
            self.uploadToWeixinServer(res.localIds[0]);
          }
        });
        // }else{
        //   if(self.attchmentId){
        //     this.previewImage();
        //   }

        // }
      },
      //预览图片
      previewImage() {
        hlsPopup.showBigPicture({
          imgUrl: vm.cardUp
        });
      },
      uploadToWeixinServer(localId) {
        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);
          }
        });
      },
      uploadToserver(serverId) {
        let vm = this;
        let url = process.env.rootPath + "/auth/upload/image/hls/from/wx";
        let param = {
          openId: window.localStorage.openId,
          mediaId: serverId,
          sourceType: "app_file_id_card",
          fileName: new Date().getTime() + ".jpg"
        };
        vm.hlsPopup.showLoading("请稍等");
        vm.$post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading();
          vm.personName = res["姓名"];
          vm.identificationNumber = res["公民身份号码"];
          vm.attchmentId = res["attchmentId"];
          vm.cardUp =
            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.personName ||
          !vm.identificationNumber ||
          !vm.phoneNumber ||
          !vm.cardUp
        ) {
          vm.hlsPopup.showLongCenter("必输字端不能为空！");
          return;
        } else if (vm.hlsUtil.isCardID(vm.identificationNumber)) {
          vm.hlsPopup.showLongCenter("身份证号有误");
          return;
        } else if (!vm.hlsUtil.phoneNumber(vm.phoneNumber)) {
          vm.hlsPopup.showLongCenter("手机号码有误!");
          return;
        } else {
          // alert("验证通过");
          let url = process.env.rootPath + "/auth/api/individual/face";
          let param = {
            openId: window.localStorage.openId,
            idNo: vm.identificationNumber,
            name: vm.personName,
            mobile: vm.phoneNumber,
            redirectUrl:
              "http://sign.hitachics.com/www/#/UserRegister/PersonalRegister?Regstatus=1"
          };
          vm.hlsPopup.showLoading("请稍等");
          vm.$post(url, param).then(function (res) {
            vm.hlsPopup.hideLoading();
            if (res.code == 0) {
              vm.$vux.toast.text(res.message, "middle");
              if (res.url) {
                window.open(res.url, "_self");
              }
            } else {
              vm.$vux.toast.text(res.message, "middle");
            }
          });
        }
      },
      // 获取url地址参数
      UrlSearch() {
        var name, value;
        // var str="http://sign.hitachics.com/www/#/UserRegister/PersonalRegister?Regstatus=1&status=true&serviceId=1151815015435601748&verifycode=4accf0d2106f9c7361be72093e1fb793&contextId=10074&passed=true"; //取得整个地址栏
        var str = window.location.href; //取得整个地址栏
        // alert(str)
        var num = str.indexOf("?");
        str = str.substr(num + 1); //取得所有参数   stringvar.substr(start [, length ]

        var arr = str.split("&"); //各个参数放到数组里
        for (var i = 0; i < arr.length; i++) {
          num = arr[i].indexOf("=");
          if (num > 0) {
            name = arr[i].substring(0, num);
            value = arr[i].substr(num + 1);
            this[name] = value;
          }
        }
      },
      // 认证结果返回给接口
      authResult(id, code, suc) {
        let vm = this;
        let url = "http://sign.hitachics.com/core/api/public/listen/auth/result";
        let param = {
          contextId: id,
          verifycode: code,
          success: suc
        };
        vm.hlsPopup.showLoading("请稍等");
        vm.$post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading();
        });
      },
      // 注销
      logout() {
        let vm = this;
        hlsPopup.showConfirm({
          title: "签名成功",
          content: "请确认合同是否都已下载完成，注销后无法下载,请知悉,谢谢！",
          onConfirm: function (index) {
            if (index === 1) {
              let url = process.env.rootPath + "/accounts/outerAccounts/delete";
              let param = {
                openId: window.localStorage.openId
              };
              vm.hlsPopup.showLoading("请稍等");
              vm.$post(url, param).then(function (res) {
                vm.hlsPopup.hideLoading();
                if (res.code == 0) {
                  vm.$vux.toast.text(res.message, "middle");
                  window.open(
                    "http://sign.hitachics.com/www/#/UserRegister",
                    "_self"
                  );
                } else {
                  vm.$vux.toast.text(res.message, "middle");
                }
              });
            }
          }
        });
      },
      // 退出
      go_forword() {
        let vm = this;
        let url = process.env.rootPath + "/accounts/outerAccounts/delete";
        let param = {
          openId: window.localStorage.openId
        };
        vm.hlsPopup.showLoading("请稍等");
        vm.$post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading();
          if (res.code == 0) {
            vm.$vux.toast.text(res.message, "middle");
            window.open(
              "http://sign.hitachics.com/www/#/UserRegister",
              "_self"
            );
          } else {
            vm.$vux.toast.text(res.message, "middle");
          }
        });
      },
      // 键盘消失，页面回到顶部
      goTop() {
        setTimeout(function () {
          var scrollHeight =
            document.documentElement.scrollTop || document.body.scrollTop || 0;
          console.log(scrollHeight);
          window.scrollTo(0, Math.max(scrollHeight, 0));
        }, 100);
      },
      // 获取用户信息
      getUserInfo() {
        var Request = new this.UrlSearch(); //实例化
        this.status = Request.Regstatus;
        var contextId = Request.contextId;
        var verifycode = Request.verifycode;
        var success = Request.passed;
        if (this.status == 1) {
          this.authResult(contextId, verifycode, success);
        }
        let vm = this;
        let url =
          process.env.rootPath +
          "/sign/info/hclc/query/by/openid?openId=" +
          window.localStorage.openId;
        vm.hlsPopup.showLoading("请稍等");
        vm.$post(url).then(function (res) {
          vm.hlsPopup.hideLoading();
          if (res.rows) {
            if (res.rows.length > 0) {
              var data = res.rows[0];
              var historyFlag=data.historyFlag;
              if(historyFlag=='N'){
                vm.cardUp =
                  process.env.rootPath +
                  "/app/fileViewSvc?attachment_id=" +
                  data.attachmentId +
                  "&apiName=download&sysName=HCL_UPLOAD_FILE&access_token=" +
                  window.localStorage.access_token_rl;
                vm.identificationNumber = data.idNo;
                vm.phoneNumber = data.mobile;
                vm.personName = data.name;
                // vm.identificationNumber = '22222222222222222';
                // vm.phoneNumber = '18230982828';
                // vm.personName = 'chaiwei';
                vm.showStatus = "1";
              }
            }
          }
        });
      }
    },
    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>
