<template>
    <div :class="'login_form'+(questType=='ajax'?' dialogLogin':'') + ((captchaObj&&captchaObj.captchaId)?' showCaptcha':'')">
      <div class="loginMainBox">
        <div class="login_form_bd">
          <div class="error_tips"></div>
          <input type="hidden" name="directAction" value>
          <input type="hidden" name="refererurl" value>
          <div class="login_field">
            <label>{{$t('hivuiLogin_main_user')}}</label>
            <input
              class="login_field_text"
              v-model="username"
              type="text"
              id="txtUserName"
              name="userName"
              :placeholder="$t('hivuiLogin_main_user_ph')"
              autofocus
              required
              autocomplete="off"
              :readonly="(questType=='ajax'&&oldUserName)?true:false"
              @keyup.enter="loginFunc"
            >
            <i class="fa fa-user"></i>
          </div>
          <div class="login_field">
            <label>{{$t('hivuiLogin_main_pw')}}</label>
            <input
              class="login_field_text"
              v-model="password"
              type="text"
              onfocus="this.type='password'"
              id="txtPassword"
              name="password"
              :placeholder="$t('hivuiLogin_main_pw_ph')"
              required
              autocomplete="off"
              @keyup.enter="loginFunc"
            >
            <i class="fa fa-unlock-alt"></i>
          </div>
          <div class="login_field captcha_field" v-if="captchaObj&&captchaObj.captchaId">
            <label>{{$t('hivuiLogin_main_captcha')}}</label>
            <div style="display:flex;align-items:center;">
              <input
                class="login_field_text"
                v-model="loginCaptcha"
                type="text"
                id="loginCaptcha"
                name="captcha"
                :placeholder="$t('hivuiLogin_main_captcha_ph')"
                autofocus
                required
                autocomplete="off"
                @keyup.enter="loginFunc"
                style="width:50%;"
              />
              <img :src="captchaObj.imageData" @click="getCaptchaPicObj">
            </div>
          </div>
          <div class="login_form_btn">
            <div class="login_btn_area">
              <button
                :style="btnStyle"
                :class="'loginBtn' + (loginLoading ? ' disabled' : '')"
                @click="loginFunc"
              >
                {{$t('hivuiLogin_main_login_btn')}}
                <i :hidden="!loginLoading" class="el-icon-loading"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      <!-- 管理员解锁 -->
      <el-dialog :title="$t('hivuiLogin_main_admin_forget_title')" append-to-body :visible.sync="isShowAdminResetPw" width="430px" :close-on-click-modal="false" @close="cancelAdminResetPw">
        <div class="unlock_field">
          <label>{{$t('hivuiLogin_main_pw')}}</label>
          <div class="unlock_field_input">
            <input
              ref="aaaa"
              class="unlock_field_text"
              v-model="unlockPassword"
              type="password"
              name="unlockPassword"
              :placeholder="$t('hivuiLogin_main_pw_ph')"
              autocomplete="off"
              @keyup.enter="adminUnlock"
            />
            <i class="fa fa-unlock-alt"></i>
          </div>
        </div>
        <div class="unlock_field" v-if="captchaObj2&&captchaObj2.captchaId">
          <label>{{$t('hivuiLogin_main_captcha')}}</label>
          <div class="unlock_field_input">
            <input
              class="unlock_field_text"
              v-model="unlockCaptcha"
              type="text"
              name="unlockCaptcha"
              :placeholder="$t('hivuiLogin_main_captcha_ph')"
              autocomplete="off"
              @keyup.enter="adminUnlock"
              style="width:50%;"
            />
            <i class="fa fa-unlock-alt"></i>
            <img :src="captchaObj2.imageData" @click="getCaptchaPicObj(2)">
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" type="primary" @click="adminUnlock">{{$t('hivuiLogin_main_admin_unlock')}}</el-button>
        </span>
      </el-dialog>
    </div>
</template>
<script>
import { baseLogin,adminUnlock } from "../api/login";
import { getCaptchaPic } from "../api/user";
import md5 from "js-md5";
import { projectName } from "../config";
import "font-awesome/css/font-awesome.css";
import _loginLogoImg from "../assets/Logo1.png"
import _loginBgImg from "../assets/background.png"
import {
  setToken,
  removeToken,
  getUserId,
  setUserId,
  removeUserId,
} from "../utils/auth.js";
import {
  getUrlValue,
} from "../utils/index.js";

export default {
  components: {},
  data() {
    return {
      msg: "这是小登录页",
      oldUserName:(top.window.Scp&&top.window.Scp.User.fuserid)||false,
      username: (top.window.Scp&&top.window.Scp.User.fuserid)||"",
      password: "",
      //登录输入验证码
      loginCaptcha:"",
      config: {
        mainColor:window.customSysCofig?.mainColor||"#06c",
      },
      loginLoading: false,
      questType:getUrlValue("","questType"),
      isRefresh:getUrlValue("","isRefresh")=="true"?true:false,
      isShowAdminResetPw:false,
      //验证码对象
      captchaObj:null,
      captchaObj2:null,
    };
  },
  computed:{
    btnStyle(){
        return {
            "background-color": this.config.mainColor,
        };
    },
  },
  async created(){
    let me=this;
    //获取验证码图片
    await me.getCaptchaPicObj();
  },
  mounted() {},
  methods: {
    loginFunc() {
      this.defaultLogin();
    },
    defaultLogin() {
      let me=this;
      /*this.$refs.loginForm.validate(valid => {
                        if (valid) {*/
                        
      if(me.captchaObj && me.captchaObj.captchaId && !me.loginCaptcha.trim()){
        me.$message.error(me.$t('hivuiLogin_main_valid_captcha'));
        return;
      }else if (!me.username.trim()) {
        me.$message.error(me.$t('hivuiLogin_main_valid_user'));
        return;
      } else if (!me.password) {
        me.$message.error(me.$t('hivuiLogin_main_valid_pw'));
        return;
      }
      removeToken();
      me.loginLoading = true;
      let _params={
        username: me.username.trim(),
        password: md5(me.password),
      };
      if(me.loginCaptcha && me.captchaObj && me.captchaObj.captchaId){
        _params.captchaId=me.captchaObj.captchaId;
        _params.captcha=me.loginCaptcha;
      }
      baseLogin(_params).then(response => {
        const data = response;
        setToken(data.token);
        if (me.isCheckRu) {
          setUserId(me.username);
        } else {
          removeUserId();
        }
        if(me.questType=="ajax"){
            top.window.SysPage.closeMiniLogin(me.isRefresh);
        }else{
            //top.window.SysPage.newPage(me.$route.params.redirectTitle||"",me.$route.params.redirect||"",me.$route.params.pushData||{},"post");
            location.reload();
        }
      })
      .catch(error => {
        me.loginLoading = false;
        if(me.captchaObj && me.captchaObj.captchaId && error.status==500){
          me.getCaptchaPicObj();
        }
        if(me.username.trim()=="admin" && error&&error.dataPack&&error.dataPack.lock){
          me.isShowAdminResetPw=true;
          //获取验证码图片
          me.getCaptchaPicObj(2);
        }
      });
    },
    //解锁
    adminUnlock(){
      let me=this;
      if(!me.unlockPassword){
        me.$message.error(me.$t('hivuiLogin_main_valid_pw'));
        return;
      }
      let _params={
          userId: me.username.trim(),
          password: md5(me.unlockPassword)
      };
      if(me.unlockCaptcha && me.captchaObj2 && me.captchaObj2.captchaId){
        _params.captchaId=me.captchaObj2.captchaId;
        _params.captcha=me.unlockCaptcha;
      }
      adminUnlock(_params).then((response)=>{
        if(response.status==200){
          me.isShowAdminResetPw=false;
          if(!response.msg){
            me.$message.error(me.$t('hivuiLogin_main_unlock_success'));
          }
          me.password=me.unlockPassword;
          if(!me.captchaObj || !me.captchaObj.captchaId){
            me.loginFunc();
          }else{
            me.loginCaptcha="";
          }
        }
      }).catch((err)=>{
        if(me.captchaObj2 && me.captchaObj2.captchaId && err.status==500){
          me.getCaptchaPicObj(2);
        }else{
          me.isShowAdminResetPw=false;
        }
      });
    },
    cancelAdminResetPw(){
      this.isShowAdminResetPw=false;
    },
    //获取验证码
    getCaptchaPicObj(num){
      let me=this;
      getCaptchaPic({
        type:"login"
      }).then((res)=>{
        if(res&&res.dataPack){
          if(num==2){
            me.captchaObj2=res.dataPack;
          }else{
            me.captchaObj=res.dataPack;
          }
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}
button {
  outline: none;
  border: none;
}
html,
body {
  height: 100%;
  width: 100%;
  background: #fff;
}
input,
body,
button {
  font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial,
    helvetica, clean, sans-serif;
}
body {
  font-size: 14px;
  color: #333;
}
.bg {
  height: 100%;
  width: 100%;
  position: relative;
}
.login_form {
  width: 400px;
  height: 360px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  padding: 1px;
  z-index: 100;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
  &.dialogLogin{
    height: 350px;
    box-shadow:none;
  }
  .login_form_hd {
    color: #333;
    font-weight: bold;
    padding: 0 18px;
    box-sizing: border-box;
    width: 100%;
    font-size: 16px;
    text-align: left;
    line-height: 44px;
    height: 44px;
    border-bottom: 1px solid #ccc;
  }
  .login_form_bd {
    min-height: 231px;
    height: 100%;
    position: relative;
    padding: 24px 40px 0;
    .login_form_foot {
      line-height: 40px;
      margin-top: 20px;
      &i {
        color: #0190d4;
      }
      .login_form_app,.login_download_app {
        color: #0190d4;
        float: right;
        cursor: pointer;
        &:hover {
          color: #0f406c;
          &i {
            color: #0f406c;
          }
        }
      }
    }
    .error_tips {
      position: absolute;
      line-height: 30px;
      font-size: 12px;
      color: #f60000;
      text-align: center;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      margin: auto;
    }
    .login_field {
      position: relative;
      padding-bottom: 20px;
      label {
        line-height: 35px;
        display: block;
        height: 35px;
        font-size: 16px;
      }
      i {
        font-size: 20px;
        color: #aaa;
        width: 35px;
        text-align: center;
        line-height: 40px;
        height: 40px;
        position: absolute;
        top: 35px;
        left: 0;
        margin: auto;
      }
      .login_field_text {
        height: 40px;
        width: 100%;
        line-height: 40px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #fff;
        font-size: 16px;
        color: #000;
        padding-left: 35px;
        box-sizing: border-box;
        font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial,helvetica, clean, sans-serif;
        &[readonly]{
          background-color: #eee;
          color: #666;
        }
        &::input-placeholder {
          color: #ccc;
        }
      }
      img{
        width:calc(50% - 10px);
        margin-left:10px;
        cursor: pointer;
      }
    }
    .login_form_btn {
      font-size: 13px;
      margin-top: 20px;
      .loginBtn {
        /* background-color: #135189; */
        width: 100%;
        height: 40px;
        border: none;
        border-radius: 5px;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        display: inline-block;
        i {
          margin-left: 5px;
        }
        &:hover {
          filter: brightness(0.8);
        }
        &.disabled {
          background-color: #ccc !important;
          &:hover {
              filter: brightness(1);
          }
        }
      }
    }
  }
  &.showCaptcha{
    .login_form_bd {
      .login_field{
        padding-bottom:10px;
      }
      .captcha_field{
        input{
          padding-left:10px;
        }
      }
    }
  }
}
.unlock_field {
  display:flex;
  padding-top:10px;
  label {
    line-height: 35px;
    display: block;
    height: 35px;
    width:80px;
    font-size: 14px;
    padding-left:20px;
  }
  .unlock_field_input{
    position: relative;
    margin-left:20px;
    flex: 0 0 calc(100% - 150px);
    display:flex;
    align-items: center;
    i {
      font-size: 20px;
      color: #aaa;
      width: 35px;
      text-align: center;
      line-height: 35px;
      height: 35px;
      position: absolute;
      top: 0;
      left: 0;
      margin: auto;
    }
    .unlock_field_text {
      height: 35px;
      width: 100%;
      line-height: 35px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #fff;
      font-size: 14px;
      color: #000;
      padding-left: 35px;
      box-sizing: border-box;
      font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial,
        helvetica, clean, sans-serif;
      &::input-placeholder {
        color: #ccc;
      }
    }
    img{
      width:calc(50% - 10px);
      margin-left:10px;
      cursor: pointer;
    }
  }
}
</style>