<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;"
          >个人信息</div>
        </div>
        <item style="border-bottom:1px solid #d0d0d0">
          <section slot="name">
            <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;"
            readonly
          />
        </item>
        <item style="border-bottom:1px solid #d0d0d0">
          <section slot="name">
            <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;"
            readonly
          />
        </item>
        <item style="border-bottom:1px solid #d0d0d0">
          <section slot="name">
            <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;"
            readonly
          />
        </item>
        <!-- <div style="margin: 40px 0 0 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;"
          >
            <img :src="cardUp" alt class="pic" @click="previewImage()" />
          </div>
        </div>
        <p style="margin-top:10px;text-align:center;">正面</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: "../../../assets/userRegister/camear.png", //身份证正面url
      identificationNumber: "",
      phoneNumber: "",
      personName: "",
      attchmentId: "" //附件预览id
    };
  },
  components: {},
  activated: function() {},
  updated: function() {},
  methods: {
    //预览图片
    previewImage() {
      let vm = this;
      hlsPopup.showBigPicture({
        imgUrl: vm.cardUp
      });
    },
    // 注销
    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");
              }
            });
          }
        }
      });
    },
    // 调用微信接口的基础配置
    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 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();
         })
      });
    },
  },
  created() {
    this.wxConfig();
    var data = this.$route.params.userInfo;
    this.personName = data.name;
    this.cardUp =
      process.env.rootPath +
      "/app/fileViewSvc?attachment_id=" +
      data.attachmentId +
      "&apiName=download&sysName=HCL_UPLOAD_FILE&access_token=" +
      window.localStorage.access_token_rl;
    this.phoneNumber = data.mobile;
    this.identificationNumber = data.idNo;
  }
};
</script>
<style lang="less" type="text/less" scoped>
@import "../../../styles/vue-1px.less";

.personalRegister {
  font-size: 14px;
  .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>
