<template>
  <div>
    <div class="background">
      <img src="../../../static/login.png" width="100%" height="100%"/>
    </div>
    <div class='page'>
      <div class="text">
        <p style="color: white;font-size: 50px;text-align: left;">{{firstTitle}}</p>
<!--        <div style="border:1px solid ;color: white;width:62%;"></div>-->
        <p style="color: white;font-size: 45px;text-align: left">{{secondTitle}}</p>
      </div>
      <div class="login-box">
        <el-form :model="ruleForm" ref="ruleForm">
          <!--<h3 class="title">{{ $t("login.login") }}</h3>-->
          <el-form-item prop="account" >
            <el-input type="text"
                      v-model="ruleForm.account"
                      autocomplete="off"
                      :placeholder="$t('login.inputAccount')"
                      id="loginAccount"
                      :disabled="showLoginLoading"
                      v-on:blur="accountCheck"
                      style="width:230px">
              <i slot="prefix" class="el-icon-user-solid" style="padding-left: 5px;padding-right: 5px;font-size: 16px;color: #006FE9"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="checkPass" >
            <el-input type="password"
                      v-model="ruleForm.checkPass"
                      autocomplete="off"
                      :placeholder="$t('login.inputPass')"
                      id="loginPassword"
                      :disabled="showLoginLoading"
                      v-on:blur="passwordCheck"
                      style="width:230px">
              <i slot="prefix" class="el-icon-lock" style="padding-left: 5px;padding-right: 5px;font-size: 16px;color: #006FE9"></i>
            </el-input>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" style="width:230px" @click="userLogin" :loading="showLoginLoading">{{ $t("login.login") }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import UserService from '@/domain/services/UserService'
import AuthorityManager from '@/domain/models/AuthorityManager'
import legitimacyCheck from '../../utils/legitimacyCheck'
import HelperUtil from '../../utils/HelperUtil'
import md5 from 'js-md5'
import {LANGUAGE_LOCALSTORAGE, USER_NAME, LOCKED} from '../../utils/constantCollection'

let curThis
export default {
  name: 'login',
  // 创建期间
  beforeCreate () {
  },
  created: function () {
    curThis = this
    let initAuthorityList = {}
    this.$store.commit('setAuthorityList', initAuthorityList)
    // const lang = localStorage.getItem(LANGUAGE_LOCALSTORAGE) || 'zh-cn'
    // window.localStorage.setItem(LANGUAGE_LOCALSTORAGE, lang)

    // let name = HelperUtil.getDesCookie('userName')
    // let pwd = HelperUtil.getDesCookie('passWord')
    let requestParams = HelperUtil.getRequest()
    let name = requestParams['userName']
    let pwd = requestParams['passWord']
    let id = requestParams['id']
    if (name !== undefined && pwd !== undefined && id !== undefined) {
      history.replaceState(null, null, window.location.origin.concat(window.location.pathname))
      curThis.ruleForm.account = name
      curThis.ruleForm.checkPass = pwd
      curThis.isAutoLogin = true
      HelperUtil.setCookie('subnetId', id, window.location.hostname)
      curThis.userLogin()
    }

  },
  mounted: function () {
    const lang = localStorage.getItem(LANGUAGE_LOCALSTORAGE) || 'zh-cn'
    window.localStorage.setItem(LANGUAGE_LOCALSTORAGE, lang)

    document.onkeypress = function (e) {
      if (e.keyCode === 13 && !(curThis.showLoginLoading)) {
        curThis.userLogin() // 登录方法名
        return false
      }
    }
  },
  data () {
    return {
      // firstTitle: HelperUtil.getSystemParams('firstTitle'),
      firstTitle: configSelf.firstTitle,
      // secondTitle: HelperUtil.getSystemParams('secondTitle'),
      secondTitle: configSelf.secondTitle,
      showLoginLoading: false,
      formLabelWidth: '80px',
      localPosition: 'right',
      ruleForm: {
        account: '',
        checkPass: ''
      },
      isAutoLogin: false
    }
  },
  methods: {
    // ------------------------------------验证开始-------------------------------------------------------------------
    /**
       * @Description  ：用户名校验： 不能为空
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    accountCheck: function () {
      let userCheck = legitimacyCheck()
      if (!userCheck.textNullCheck(this.ruleForm.account)) {
        this.InfoTip.warningTip_login(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('login.account'))
        return false
      } else {
        if (this.textLengthCheck(this.ruleForm.account)) {
          return true
        } else {
          this.InfoTip.warningTip_login(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.LENGTH_CODE), this.$t('login.account'))
          return false
        }
      }
    },

    /**
       * @Description  ：密码校验： 不能为空
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
    passwordCheck: function () {
      let userCheck = legitimacyCheck()
      if (!userCheck.textNullCheck(this.ruleForm.checkPass)) {
        this.InfoTip.warningTip_login(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('login.password'))
        return false
      } else {
        // 自动登录的长度是加密后的长度，为了通过长度检查，如果是自动登录，可以超过长度
        if (this.textLengthCheck(this.ruleForm.checkPass) || this.isAutoLogin) {
          return true
        } else {
          this.InfoTip.warningTip_login(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.LENGTH_CODE), this.$t('login.password'))
          return false
        }
      }
    },

    /**
       * @Description  ：文本框所输入的字符长度校验： 控制在20之内
       * @author       :bjh
       * @param        :
       * @return       :
       * @exception    :
       * @date         : 2019/1/15 16:09
       */
    textLengthCheck: function (text) {
      let userCheck = legitimacyCheck()
      return userCheck.textLengthCheck(text)
    },

    // ------------------------------------登陆开始-------------------------------------------------------------------
    /***
       * @Description  : 登录操作
       * @author       : zf
       * @date         : 2019/03/13 15:02
       */
    userLogin: function () {
      const lang = localStorage.getItem(LANGUAGE_LOCALSTORAGE) || 'zh-cn'
      window.localStorage.setItem(LANGUAGE_LOCALSTORAGE, lang)
      let _this = this
      if (this.accountCheck() && this.passwordCheck()) {
        this.showLoginLoading = true
        var arr = []
        if (!curThis.isAutoLogin) {
          arr.push(this.ruleForm.account, md5(this.ruleForm.checkPass).toUpperCase())
        } else {
          arr.push(this.ruleForm.account, this.ruleForm.checkPass)
        }
        UserService.login(arr).then((result) => {
          // window.sessionStorage.setItem(USER_NAME, _this.ruleForm.account);
          // window.sessionStorage.setItem(LOCKED, "0");
          // _this.$store.commit("set_tabs", []);
          // _this.$store.commit("set_keepAliveRouter", []);
          // _this.$router.push('/TheLayout');
          window.sessionStorage.setItem(USER_NAME, _this.ruleForm.account)
          // 存加密后的密码
          window.sessionStorage.setItem('passWord', arr[1])
          window.sessionStorage.setItem(LOCKED, '0')

          UserService.getAllUserAuthority().then((result) => {
            let authorityManager = AuthorityManager(result)
            let authorityList = authorityManager.getEditFlag(result)
            _this.$store.commit('setAuthorityList', authorityList)
            window.sessionStorage.setItem('au', JSON.stringify(authorityList))
            this.showLoginLoading = false
            _this.$store.commit('set_tabs', [])
            _this.$store.commit('set_keepAliveRouter', [])
            _this.$router.push('/TheLayout')
          }).catch((err) => {
            this.showLoginLoading = false
            _this.InfoTip.errorTip(_this, err)
          })
        }).catch((err) => {
          this.showLoginLoading = false
          _this.InfoTip.errorTip(_this, err)
        })
      }
    }
  },
  destroyed: function () {
    // 取消enter事件的触发，否则其它页面也可触发enter登录
    document.onkeypress = undefined
  }
}
</script>

<style scoped>
  .background{
    width:100%;
    height:100%;  /**宽高100%是为了图片铺满屏幕 */
    z-index:-1;
    position: absolute;
  }
  .title {
    text-align: center;
    margin-bottom: 15px;
  }

  .page {
    background-color: #eff3f4;
    /*position: absolute;*/
    /*width: 100%;*/
    /*height: 100%;*/
    z-index:1;
    font-size: 16px;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
  }

  .login-box {
    position: absolute;
    top: 50%;
    left: 73%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: block;
    width: 100%;
    max-width: 400px;
    background-color: rgba(0,0,0,0.2);
    margin: 0;
    padding: 2.25em;
    box-sizing: border-box;
    /*border: solid 1px #FFF;*/
    border-radius: .5em;
    font-family: 'Source Sans Pro', sans-serif;
  }
  .text {
    position: absolute;
    top: 32%;
    left: 20%;
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 0;
    padding: 2.25em;
    box-sizing: border-box;
    font-family: 'Source Sans Pro', sans-serif;
  }

</style>
