<template>
  <h-view class="public-style companyRegister" title="企业用户注册">
    <h-content>
      <list-item class="reg-content">
        <!-- <div class="repre-type">
          代理店
          <input
            type="radio"
            name="agent"
            v-model="agentType"
            value="Y"
            disabled
          />
          非代理店
          <input
            type="radio"
            name="agent"
            v-model="agentType"
            value="N"
            disabled
          />
        </div>-->
        <div class="repre-type">
          <span>经办人类型：</span>
          <input
            type="radio"
            name="peopleType"
            v-model="staffType"
            @change="getRadioVal"
            value="组织其他员工"
            disabled
          />组织其他员工
          <input
            type="radio"
            name="peopleType"
            v-model="staffType"
            @change="getRadioVal"
            value="法定代表人"
            disabled
          />法定代表人
        </div>
        <!-- 法定代表人 -->
        <div v-if="staffType == '法定代表人'">
          <div class="info_list">
            <div class="list_left" style="width:39%;">
              <img
                src="../../../assets/userRegister/company.png"
                alt
                style="width:16px;height:16px;margin-right:5px;"
              />
              组织机构名称：
            </div>
            <div class="list_right" style="width:61%;">
              <input type="text" class="edit" v-model="organizationName" readonly />
            </div>
          </div>
          <div class="info_list">
            <div class="list_left" style="width:48%;">
              <img
                src="../../../assets/userRegister/idCard.png"
                alt
                style="width:16px;height:16px;margin-right:5px;"
              />
              统一社会信用代码：
            </div>
            <div class="list_right" style="width:52%;">
              <input type="text" class="edit" v-model="socialCode" readonly />
            </div>
          </div>
          <!-- <div class="info_list" style="border-bottom:none;">
            <div class="list_left2">请上传营业执照照片</div>
          </div>-->
          <div class="bus-license">
            <img :src="busLic" alt class="pic" @click="previewImage(orgAttachmentId)" />
          </div>
          <div class="info_list">
            <div class="list_left" style="width:43%;">
              <img
                src="../../../assets/userRegister/people.png"
                alt
                style="width:16px;height:16px;margin-right:5px;"
              />
              法定代表人姓名：
            </div>
            <div class="list_right" style="width:57%;">
              <input type="text" class="edit" v-model="legalRepresentativeName" readonly />
            </div>
          </div>
          <div class="info_list">
            <div class="list_left" style="width:54%;">
              <img
                src="../../../assets/userRegister/idCard.png"
                alt
                style="width:16px;height:16px;margin-right:5px;"
              />
              法定代表人身份证号码：
            </div>
            <div class="list_right" style="width:46%;">
              <input type="text" class="edit" v-model="legalRepresentativeCardNumber" readonly />
            </div>
          </div>
          <div class="info_list">
            <div class="list_left" style="width:30%;">
              <img
                src="../../../assets/userRegister/phone.png"
                alt
                style="width:16px;height:16px;margin-right:5px;"
              />
              手机号码：
            </div>
            <div class="list_right" style="width:70%;">
              <input type="text" class="edit" v-model="legalPhoneNumber" readonly />
            </div>
          </div>
          <!-- <div style="margin: 10px 0 0 14px;">
            <p>请上传身份证照片</p>
          </div>-->
          <div style="height:100px;margin-top:30px">
            <div
              style="border:1px solid #b2b2b2;width:140px;height:100px;margin:0 auto;border-radius:5px;position:relative;"
            >
              <img :src="cardUp" alt class="pic" @click="previewImage(attachmentId)" />
            </div>
          </div>
          <p style="margin-top:10px;text-align:center;">正面</p>
          <!-- <button
            class="next_step"
            style="width:120px;height:30px;border-radius:15px;background-color:#09bb07;color:#FFFFFF;margin:100px 0 0 -60px;position:relative;left:50%;"
            @click="logout()"
          >注销</button> -->



          <div class="button_all">
              <div v-if="isManagerFlag=='Y'"
                class="next_step"
                @click="goAutohrized()"
              >授权管理</div>
              <div
                class="next_step"
                @click="logout()"
              >注销</div>

          </div>
        </div>

        <!-- 组织其他员工 -->
        <div v-if="staffType ==='组织其他员工'">
          <div class="info_list">
            <div class="list_left" style="width:39%;">
              <img
                src="../../../assets/userRegister/people.png"
                alt
                style="width:16px;height:16px;margin-right:5px;"
              />
              经办人姓名：
            </div>
            <div class="list_right" style="width:61%;">
              <input type="text" class="edit" v-model="jbName" readonly />
            </div>
          </div>
          <div class="info_list">
            <div class="list_left" style="width:30%;">
              <img
                src="../../../assets/userRegister/phone.png"
                alt
                style="width:16px;height:16px;margin-right:5px;"
              />
              手机号码：
            </div>
            <div class="list_right" style="width:70%;">
              <input type="text" class="edit" v-model="jbPhoneNumber" readonly />
            </div>
          </div>
          <div class="info_list">
            <div class="list_left" style="width:48%;">
              <img
                src="../../../assets/userRegister/idCard.png"
                alt
                style="width:16px;height:16px;margin-right:5px;"
              />
              经办人身份证号：
            </div>
            <div class="list_right" style="width:52%;">
              <input type="text" class="edit" v-model="jbIdNumber" readonly />
            </div>
          </div>
          <!-- <div style="margin: 10px 0 0 14px;">
            <p>请上传身份证照片</p>
          </div>-->
          <div style="height:100px;margin-top:30px">
            <div
              style="border:1px solid #b2b2b2;width:140px;height:100px;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="cardUp1" alt class="pic" @click="previewImage(attachmentId1)" />
            </div>
          </div>
          <p style="margin-top:10px;text-align:center;">正面</p>
          <div class="info_list">
            <div class="list_left" style="width:39%;">
              <img
                src="../../../assets/userRegister/company.png"
                alt
                style="width:16px;height:16px;margin-right:5px;"
              />
              组织机构名称：
            </div>
            <div class="list_right" style="width:61%;">
              <input type="text" class="edit" v-model="organizationName1" readonly />
            </div>
          </div>
          <div class="info_list">
            <div class="list_left" style="width:48%;">
              <img
                src="../../../assets/userRegister/idCard.png"
                alt
                style="width:16px;height:16px;margin-right:5px;"
              />
              统一社会信用代码：
            </div>
            <div class="list_right" style="width:52%;">
              <input type="text" class="edit" v-model="socialCode1" readonly />
            </div>
          </div>
          <!-- <div class="info_list" style="border-bottom:none;">
            <div class="list_left2">请上传营业执照照片</div>
          </div>-->
          <div class="bus-license">
            <!-- <input
              type="file"
              name="avatar"
              id="uppic"
              accept="image/gif, image/jpeg, image/jpg, image/png"
              ref="avatarInput"
              class="uppic"
              disabled
            />-->
            <img :src="busLic1" alt class="pic" @click="previewImage(orgAttachmentId1)" />
          </div>
          <div class="info_list">
            <div class="list_left" style="width:43%;">
              <img
                src="../../../assets/userRegister/people.png"
                alt
                style="width:16px;height:16px;margin-right:5px;"
              />
              法定代表人姓名：
            </div>
            <div class="list_right" style="width:57%;">
              <input type="text" class="edit" v-model="legalRepresentativeName1" readonly />
            </div>
          </div>
          <div class="info_list">
            <div class="list_left" style="width:54%;">
              <img
                src="../../../assets/userRegister/idCard.png"
                alt
                style="width:16px;height:16px;margin-right:5px;"
              />
              法定代表人身份证号码：
            </div>
            <div class="list_right" style="width:46%;">
              <input type="text" class="edit" v-model="legalRepresentativeCardNumber1" readonly />
            </div>
          </div>
          <!--<button-->
            <!--class="next_step"-->
            <!--style="width:120px;height:30px;border-radius:15px;background-color:#09bb07;color:#FFFFFF;margin:100px 0 0 -60px;position:relative;left:50%;"-->
            <!--@click="logout()"-->
          <!--&gt;注销</button>-->
          <div class="button_all">
            <div v-if="isManagerFlag=='Y'"
                 class="next_step"
                 @click="goAutohrized()"
            >授权管理</div>
            <div
              class="next_step"
              @click="logout()"
            >注销</div>
          </div>
        </div>
      </list-item>
    </h-content>
  </h-view>
</template>

<script>
// import { Grid, GridItem } from "vux";

import { getUrlParam } from "@/scripts/utils";
export default {
  data() {
    return {
      staffType: "法定代表人",
      cardUp: "", //身份证照片url
      busLic: "", //营业执照照片url
      organizationName: "", //组织机构名称
      socialCode: "", //统一社会信用代码
      legalRepresentativeName: "", //法定代表人姓名
      legalRepresentativeCardNumber: "", //法定代表人身份证号码
      jbName: "", //经办人姓名
      jbPhoneNumber: "", //经办人手机号码
      jbIdNumber: "", //经办人身份证号码
      cardUp1: "", //身份证照片url
      busLic1: "", //营业执照照片url
      organizationName1: "", //组织机构名称
      socialCode1: "", //统一社会信用代码
      legalRepresentativeName1: "", //法定代表人姓名
      legalRepresentativeCardNumber1: "", //法定代表人身份证号码
      // 11111
      attachmentId: "",
      orgAttachmentId: "",
      attachmentId1: "",
      orgAttachmentId1: "",

      isManagerFlag:"",
      managerAuthFlag:"",
      // agentType: ""
    };
  },
  components: {
    // Grid,
    // GridItem
  },
  activated: function() {},
  updated: function() {},
  methods: {
    // 法人和其他人切换状态
    getRadioVal() {
      console.log(this.staffType);
    },
    //预览图片
    previewImage(id) {
      let vm = this;
      var preview_url =
        process.env.rootPath +
        "/app/fileViewSvc?attachment_id=" +
        id +
        "&apiName=download&sysName=HCL_UPLOAD_FILE&access_token=" +
        window.localStorage.access_token_rl;
      // window.open(url,"_self");
      hlsPopup.showBigPicture({
        imgUrl: preview_url
      });
    },
    UrlSearch() {
      var name, value;
      var str = window.location.href; //取得整个地址栏
      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;
        }
      }
    },
    logout() {
      let vm = this;
      hlsPopup.showConfirm({
        title: "提示",
        content: "请确认合同是否都已下载完成，注销后无法下载,请知悉,谢谢！",
        onConfirm: function(index) {
          if (index === 1) {
            let url =
              process.env.rootPath + "/organizations/outerOrgans/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");
              }
            });
          }
          // console.log(index);
        }
      });
    },
    // 进入授权管理
    goAutohrized(){
      if(this.agentType=="1"){
        window.localStorage.setItem('AuthSocialCode',this.socialCode);
      }else{
        window.localStorage.setItem('AuthSocialCode',this.socialCode1);
      }
      this.$router.push({
        name: 'AuthorizedAgent',
        params: {
        },
      })
    },
    // 调用微信接口的基础配置
    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;
    var agentType = data.agentType;
    // console.log(data);
    if (agentType == 1) {
      this.agentType = agentType;
      this.organizationName = data.name;
      this.socialCode = data.idNo;
      this.legalRepresentativeName = data.legalName;
      this.legalRepresentativeCardNumber = data.legalIdNo;
      this.legalPhoneNumber = data.mobile;
      this.attachmentId = data.attachmentId;
      this.orgAttachmentId = data.orgAttachmentId;
       window.localStorage.setItem('isManagerFlag', data.isManagerFlag);
       window.localStorage.setItem('managerAuthFlag', data.managerAuthFlag);
      this.isManagerFlag = data.isManagerFlag;
      this.managerAuthFlag = data.managerAuthFlag;


      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.busLic =
        process.env.rootPath +
        "/app/fileViewSvc?attachment_id=" +
        data.orgAttachmentId +
        "&apiName=download&sysName=HCL_UPLOAD_FILE&access_token=" +
        window.localStorage.access_token_rl;
    } else if (agentType == 2) {
      this.agentType = agentType;
      this.staffType = "组织其他员工";
      this.jbName = data.agentName;
      this.jbPhoneNumber = data.mobile;
      this.jbIdNumber = data.agentIdNo;
      this.organizationName1 = data.name;
      this.socialCode1 = data.idNo;
      this.legalRepresentativeName1 = data.legalName;
      this.legalRepresentativeCardNumber1 = data.legalIdNo;
      this.attachmentId1 = data.attachmentId;
      this.orgAttachmentId1 = data.orgAttachmentId;
      window.localStorage.setItem('isManagerFlag', data.isManagerFlag);
      window.localStorage.setItem('managerAuthFlag', data.managerAuthFlag);
      this.isManagerFlag = data.isManagerFlag;
      this.managerAuthFlag = data.managerAuthFlag;
      this.cardUp1 =
        process.env.rootPath +
        "/app/fileViewSvc?attachment_id=" +
        data.attachmentId +
        "&apiName=download&sysName=HCL_UPLOAD_FILE&access_token=" +
        window.localStorage.access_token_rl;
      this.busLic1 =
        process.env.rootPath +
        "/app/fileViewSvc?attachment_id=" +
        data.orgAttachmentId +
        "&apiName=download&sysName=HCL_UPLOAD_FILE&access_token=" +
        window.localStorage.access_token_rl;
    }
  }
};
</script>
<style lang="less" type="text/less" scoped>
@import "../../../styles/vue-1px.less";

.companyRegister {
  .reg-content {
    padding: 20px;
    font-size: 14px;
    .repre-type {
      padding: 10px;
      border-bottom: 1px solid #d0d0d0;
      color: #11111187;
      font-size: 16px;
      font-weight: 700;
    }
    .info_list {
      width: 100%;
      // height: 50px;
      // border-bottom: 1px solid #f2f2f2;
      font-size: 14px;
      border-bottom: 1px solid #d0d0d0;
      display: flex;
      display: -webkit-flex;
      .list_left {
        width: 35%;
        // margin-left: 3%;
        height: 50px;
        font-family: "微软雅黑";
        font-size: 14px;
        color: #636363;
        line-height: 50px;
        // float: left;
      }
      .list_right {
        // width: auto;
        // margin-right: 3%;
        height: 50px;
        color: #636363;
        line-height: 50px;
        // float: right;
      }
      .edit {
        width: 100%;
        // height: 50px;
        color: #898989;
        font-family: "微软雅黑";
        font-size: 14px;
        border: none;
      }
      .list_left2 {
        width: 97%;
        margin-left: 3%;
        height: 50px;
        font-family: "微软雅黑";
        font-size: 14px;
        color: #636363;
        line-height: 50px;
        // float: left;
      }
    }
    .button_all{
        width: 100%;
        font-size: 14px;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        justify-content: space-around;
        -webkit-align-items: center;
        -webkit-justify-content: space-around;
        .next_step{
        // width:30%;
          height:30px;
          line-height: 30px;
          text-align: center;
          border-radius:15px;
          background-color:#09bb07;
          color:#FFFFFF;
        }
    }
    .uppic {
      height: 100%;
      width: 100%;
      margin: 0 auto;
      opacity: 0;
      z-index: 1000;
      position: absolute;
    }
    .pic {
      width: 100%;
      height: 100%;
      position: absolute;
    }
    .bus-license {
      width: 140px;
      height: 100px;
      margin: 10px auto;
      border: 1px solid #b2b2b2;
      border-radius: 8px;
      position: relative;
    }
    .next_step {
      width: 120px;
      height: 30px;
      border-radius: 15px;
      background-color: #999999;
      color: #ffffff;
      margin-top: 50px;
    }
  }
}

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