<!-- 商品参数展示组件-->
<template>
  <div class="container comp-login">
    <img class="bg-img" :src="comp.props.bgImg.val">

    <div class="login-form">
      <div class="form-item title">企业员工登录入口</div>
      <div class="form-item input-box">
        <input class="user-input" placeholder="请输入用户名" type="text" v-model="username"/>
      </div>
      <div class="form-item input-box">
        <input class="pwd-input" placeholder="请输入密码" type="password" v-model="password"/>
      </div>
      <div class="form-item input-box cl">
        <input class="captcha-input" placeholder="请输入验证码" type="text" v-model="captcha"/>
        <div class="captcha-img" v-html="verificationCode" @click="postVerificationCode"></div>
      </div>
      <div class="form-item auto-login">
        <label>
          <input type="checkbox" v-model="recordPwd"/><span>记录密码</span>
        </label>&nbsp;&nbsp;
        <label>
          <input type="checkbox" v-model="autoLogin"/><span>自动登陆</span>
        </label>
      </div>
        
      <button class="item-btn" :disabled="disabled" @click="login()">登录</button>
    </div>
    <footer class="foot">
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAUCAYAAACeXl35AAACvElEQVRIicWVW0/bQBCFx2FysZNAIOFiVJ4q+lf6m/srKrWveQIhHtpgwsXkss5W38pj2ZAWqFR1JGud9e6ePWfOTCLvvTjn2iLSEZGPqvpN/mEYYAsIVd0YlHMuUlX/HHq1WvnlcimLxULW67Xs7e1Jv9+P3npFLce4ZJhVH2pg6/XabzYbeXp6kizL5OHhQYqikFarJUmSvEsOA/ykql+3sQEIgNlsJjADSFUFZaIoCs/fAH6vTzrnPAfD6Pb2NoztdluOj4+l2+3KfD6Xm5ubd4PVAVMRueRluVx6bm/S9ft9OTw8DECqGhCyLAtriJ2dnfcDqmoFhhEAIj+np6eBWafTaVBhjckJ+zzPwz7nXJCcNJjknMOluPDJyUmkpYSXRVF8WK1W5E0Gg0EA6na7FZDJzHdGDgPk+vo6HG5zBCNzgNk8T5IkPjJpfhc4FLPkeS739/dVOdg+O7yez/pvRhhPJhM5OzuLdBuO5RG5MAgSA8KNeXq9XiUTSjCHc40Je+/u7oIPCBQ7ODhomCaAWH4AwJ28cxAbAOEZjUZvsiZ5ldJUsLPmEAAXi4UnN4+PjwGM2N3dlTiOA0gcxw0Q59zEmoSqFs65RFVz+855SI+U+/v7jeYQAKEPYKfTkfPz81cZqOrPGnhkYM65z6r6BbeSjtFoFNjVzafz+dyTi6Ojo2pyNpt5ckF+hsPhHy9AC3TODURkLCI/mEMlpKRR9Hq9xv6GSy8uLrwZxABhPRwOGxd6La6urjypGI/HL/ZEZVfx1BO6S2lleVZPZS5D5+EdVQjyJLVSsFqljIg0TV8ynE6noUmbxQk2wrTeQUoJK+aMSGflAhDryR/r0jTl72u7pHSS8sCwAKexCda4l6LnIMBtj7FntDkuQc3hzm3/k692Ggvqytxnljc5TX6kpmZh/9ws/ydE5BdYcOyH+i1I7QAAAABJRU5ErkJggg==" alt="超级8">
      <span>由超级8提供技术支持</span>
    </footer>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import apiHelper from "../assets/js/apiHelper.js";
import { base64 } from "../assets/js/cryptoHelper";
import { debug } from 'util';
import '../assets/js/libs/js.cookie';
import { Indicator } from 'mint-ui';
export default {
  name: "CompLogin",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      username: "",
      password: "",
      captcha: "",
      recordPwd:false,
      autoLogin:false,
      verificationCode:"<img src='' alt='验证码'/>",//验证码图片，svg元素
      disabled:false,
      randomCodeId:""//验证码一对一标识，登陆时传给后台
    };
  },
  methods: {
    // 输入验证
    validation(){
      if(this.username == ""){
        Toast('请输入用户名');
        return true;
      }
      if(this.password == ""){
        Toast('请输入密码');
        return true;
      }
      if(this.captcha == "" && !this.autoLogin){
        Toast('请输入验证码');
        return true;
      }
    },
    // 用户登陆
    login(isAuto = false){
      //isAuto是true表示自动登陆
      let that = this;
      if(that.validation()){
        return;
      };
      Indicator.open();
      // 登陆请求
    //   let eno = that.sup8.codeInfo.EnterpriseNo?that.sup8.codeInfo.EnterpriseNo:that.sup8.context.eno;
      let eno = that.sup8.context.eno;
      apiHelper.postLogin(
        that.username,
        that.password,
        isAuto,
        that.captcha,
        eno,
        that.randomCodeId,
        function(res) {
          Indicator.close();
          if (res.flag){
            //自动登陆处理
            if(that.recordPwd || that.autoLogin){
              // 非自动登陆信息保存到cookie
              if(!isAuto){
                let employee = {
                  username:base64.en(that.username),
                  password:base64.en(that.password),
                  recordPwd:that.recordPwd,
                  autoLogin:that.autoLogin
                }
                Cookies.set('employeeInfo', JSON.stringify(employee),{ expires: 7 });
              }
            }else{
              Cookies.remove('employeeInfo');
            }
            // 保存登陆凭证
            sessionStorage.setItem('loginInfo', JSON.stringify({
              username:base64.en(that.username),
              password:base64.en(that.password),
              eno:base64.en(that.sup8.context.eno),
              isLogin:true
            }));
            // 页面跳转
            let newPage = _.find(that.cfg.pages, { type: "7" });
            if (newPage) {
              that.$emit("changeData", {selectedPage: newPage});
            }
          }else{
            sessionStorage.removeItem('loginInfo');
            // 刷新验证码
            that.postVerificationCode();
            Toast(res.msg||"登陆失败");
          }
        },
        function(res) {
          Toast("登陆失败");
          // 刷新验证码
          that.postVerificationCode();
          Indicator.close();
        }
      );
    },
    // 获取验证码
    postVerificationCode(){
      let that = this;
      apiHelper.postVerificationCode(
        function(res) {
          if (res.flag && res.data !== undefined) {
            that.verificationCode = res.data.picture;
            that.randomCodeId = res.data.randomCodeId;
          }else{
            that.verificationCode ="<img src='' alt='验证码'/>";
            that.randomCodeId = "";
          }
        },
        function(res) {
          that.verificationCode ="<img src='' alt='验证码'/>";
          that.randomCodeId = "";
        }
      );
    }
  },
  watch: {
    autoLogin:function(){
      if(this.autoLogin){
        this.recordPwd = true;
      }
    },
    recordPwd:function(){
      if(!this.recordPwd){
        this.autoLogin = false;
      }
    }
  },
  created: function() {
    var that = this;
    // 合并参数是为了当实际属性少于基础属性时 补位
    that.mergeCompProps(that.comp);

    that.style = {};
    switch (that.sup8.env) {
      case that.sup8._def.env.design:
        that.disabled = true;
        break;
      case that.sup8._def.env.preview:
        break;
      case that.sup8._def.env.run:
        let cookie = {};
        // cookie过期JSON.parse容错处理
        try {
          cookie = JSON.parse(Cookies.get('employeeInfo'));
        } catch (error) {
          cookie = {};
        }
        if(cookie.autoLogin || cookie.recordPwd){
          this.username = base64.de(cookie.username);
          this.password = base64.de(cookie.password);
          this.recordPwd = cookie.recordPwd;
          this.autoLogin = cookie.autoLogin;
          if(cookie.autoLogin){
            this.login(true);
          }
        }
        break;
      default:
        break;
    }
  },
  mounted: function() {
    // console.log("CompLogin:mounted:this.comp", this.comp);
    // var that = this;
    this.postVerificationCode();
  }
};
</script>

<style scoped>
.bg-img {
  height: 100% !important;
  width: 100% !important;
  min-height: 200px;
}

.login-form {
  width: 90%;
  background-color: white;
  position: relative;
  margin-top: -12%;
  margin-left: 5%;
  box-shadow: -1px 1px 15px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  text-align: center;
}

.form-item {
  width: 90%;
  margin: 15px auto;
}
.form-item input{
  outline: none;
}

.form-item.title {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 1.1rem;
  color: #2c2c2c;
}
.user-input{
  box-sizing: border-box;
  padding: 0 10px 0 50px;
  width: 100%;
  height: 40px;
  border: none;
  background: #f5f6f8 url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/icon/user.png) no-repeat 10px center;
  background-size: 20px 20px;
}
.pwd-input{
  box-sizing: border-box;
  padding: 0 10px 0 50px;
  width: 100%;
  height: 40px;
  border: none;
  background: #f5f6f8 url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/icon/pwd.png) no-repeat 10px center;
  background-size: 20px 20px;
}
.captcha-input{
  box-sizing: border-box;
  float: left;
  margin-right: -100px;
  padding: 0 10px 0 10px;
  width: 100%;
  height: 40px;
  border: none;
  background: #f5f6f8;
}
.captcha-img{
  float: right;
  width: 100px;
  height: 40px;
}
.captcha-img svg{
  width: 100%;
  height: 100%;
}

.auto-login{
  text-align: right;
}
.auto-login label { 
  display: inline-block;
  font-size: 14px;
}
.auto-login label span{ 
  vertical-align: middle;
}

.auto-login input[type=checkbox] {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  cursor: pointer;
  background: #fff;
  border: 1px solid #aeaeae;
}

.auto-login input[type=checkbox]:checked::after {
  content: "\2713";
  display: block;
  position: absolute;
  top: 2px;
  left: 1px;
  width: 14px;
  height: 14px;
  line-height: 10px;
  font-weight: bold;
  color: #4367b3;
}

.mr-10{
  margin-right: 10px;
}
.item-btn{
  width: 100%;
  height: 48px;
  line-height: 48px;
  border: none;
  outline: none;
  background: #4367b3;
  color: #fff;
  font-size: 1.1rem;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  cursor: pointer;
}
.foot{
  margin-top: 70px;
  padding-bottom: 15px;
  color: #d2d2d2;
  font-size: 0.8rem;
  line-height: 20px;
  text-align: center;
}
.foot img,.foot span{
  vertical-align: middle;
}
.cl { 
  zoom:1;
} 
.cl:after { 
  content:'';
  display:block;
  width:0;height:0;
  visibility:hidden;
  clear:both; 
}

</style>
