<template>
  <div class="login-container">
    <!-- Liukexin 20210120 调整背景 start -->
    <div class="bg" :style="loginBg">
      <div class="bg-title">
        <!-- LiuKexin 20210204 调整图标大小不被挤压成椭圆 -->
        <div style="width:64px;height:64px;float:left;margin-right: 12px;"><img style="width:100%;height:1005" src="file.jpeg" /></div>
        <div class="header-app-name">广东省社区矫正一体化平台电子卷宗</div>
      </div>
    </div>
    <!-- Liukexin 20210120 调整背景 end -->
    <div class="login-card">
      <!-- LiuKexin 20201201 调整标题的内容 start -->
      <div class="login-card-title">
        <!-- LiuKexin 202010120 图片 -->
        <img class="login-img" src="login-box-bg.png" />
      </div>
      <!-- LiuKexin 20201201 调整标题的内容 end -->
      <!-- LiuKexin 20210305 ModifyModal调整位置 -->
      <ModifyModal class="login-card-content" :formData="form" v-if="showModifyModal" />
      <div class="login-card-content" v-if="!showModifyModal">
        <div class="login-card-productName">欢迎登录</div>
        <div class="login-message-panel">
          <div
            class="login-message"
            :class="{ success: isSuccess, error: isError }"
          >
            <span style="word-break:break-all;whiteSpace:normal">{{ message }}</span>
          </div>
        </div>
        <div class="login-form">
          <form>
            <div class="login-form-item">
              <div class="form-item-label">用户名</div>
              <div class="form-item-input">
                <input
                  type="text"
                  name="username"
                  class="form-input"
                  placeholder="请输入用户名"
                  v-model="form.username"
                  @input="handleUsernameInput"
                  @keyup.enter="handleEnter"
                />
              </div>
              <div class="form-item-tooltip" v-show="disabledUsername">
                请输入用户名
              </div>
            </div>
            <div class="login-form-item">
              <div class="form-item-label">密码</div>
              <div class="form-item-input">
                <input
                  type="password"
                  name="password"
                  class="form-input"
                  placeholder="请输入密码"
                  v-model="form.password"
                  @input="handlePasswordInput"
                  @keyup.enter="handleEnter"
                />
              </div>
              <div class="form-item-tooltip" v-show="disabledPassword">
                请输入密码
              </div>
            </div>
            <!-- Liukexin 20210329 添加验证码 start -->
            <div class="login-form-item">
              <div class="form-item-label">校验码</div>
              <div class="form-item-input">
                <input
                  v-model="code"
                  placeholder="请输入验证码"
                  :maxlength="codeMax"
                  class="form-input"
                  style="width: 140px;float:left"
                  @input="compareCode"
                  @keyup.enter="handleEnter"
                />
                <div class="form-item-tooltip" v-show="disabledCode && codeIsFalse">
                  验证码错误
                </div>
                <div class="form-item-tooltip" v-show="disabledCode && codeIsNull">
                  请输入验证码
                </div>
                <sidentify :identifyCode="identifyCode" style="float:left"></sidentify>
                <Button type="text" style="padding:0;margin-top:10px;" @click="updateCode">换一换</Button>
              </div>
            </div>
             <!-- Liukexin 20210329 添加验证码 end -->
            <div class="login-form-item">
              <div class="form-item-label"></div>
              <div class="form-item-submit">
                <input
                  type="button"
                  value="登录"
                  class="form-submit"
                  :class="{ disabled: disabledLogin }"
                  @click="handleLogin"
                />
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import qs from 'qs'
import ModifyModal from './modify-modal'
// import { sm2 } from 'sm-crypto'
import {Encrypt} from './secert'
import { snVerify, ruleValidate, registered,getUserHome,getSystemUrl } from '@/api/login'
import Sidentify from './Sidentify.vue'
export default {
  name: '',
  components: {
    ModifyModal,
    Sidentify,
  },
  data() {
    return {
      appUrl: "",
      showModifyModal: false,
      loginBg: {
        backgroundImage: 'url(login-bg.jpg)',
      },
      showLogin: false,
      isSuccess: false,
      isError: false,
      message: '登录成功',
      form: {
        app: 'aserver',
        callback: '/aserver/',
        username: 'admin',
        password: '',
      },
      disabledUsername: false,
      disabledPassword: false,
      disabledLogin: false,
      isHaveHome:false, //LiuKexin 20210315 是否有设置首页
      /** Liukexin 20210329 验证码 start */
      identifyCode:"",
      identifyCodes:"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ",  //随机生成验证码的范围
      codeIsFalse: false, //验证码错误
      codeIsNull: false, //验证码未填写
      codeIsTrue: false, //验证码正确
      codeMax: 4,
      code: '',
      disabledCode:false
      /** Liukexin 20210329 验证码 end */
    }
  },
  methods: {
    /**
     * Liukexin 20210329 生成验证码
     */
    updateCode() {
      this.identifyCode = "";
      this.codeIsFalse = ""
      this.codeIsNull = ""
      this.code = ""
      this.makeCode(this.identifyCodes,4);
    },

    /**
     * Liukexin 20210329 随机生成4位验证码字符串
     * */
    makeCode (data, len) {
      for (let i = 0; i < len; i++) {
        this.identifyCode += data[this.randomNum(0, data.length - 1)]
      }
    },

    /**
     * Liukexin 20210329 随机数
     */
    randomNum (min, max) {
      max = max + 1
      return Math.floor(Math.random() * (max - min) + min)
    },

    /**
     * LiuKexin 20210329 校验验证码
     */
    compareCode() {
      if (this.code.length === 0) {
        this.codeIsNull = true
        this.codeIsFalse = false
        this.codeIsTrue = false
        this.disabledCode = true
        return false
      }
      if (this.code.length > 0 && this.code.length < 4) {
        this.codeIsFalse = true
        this.codeIsTrue = false
        this.codeIsNull = false
        this.disabledCode = true
        return false
      }
      if (!this.testCode()) {
        this.codeIsFalse = true
        this.codeIsTrue = false
        this.codeIsNull = false
        this.disabledCode = true
        return false
      } else if (this.testCode()) {
        this.codeIsTrue = true
        this.codeIsNull = false
        this.codeIsFalse = false
        this.disabledCode = false
        return true
      }
    },
    /**
     * Liukexin 20210329 比较校验码的值
     */
    testCode() {
      if(this.identifyCode.toLowerCase() == this.code.toLowerCase()){
        return true
      } else {
        return false
      }
    },
    registered() {
      this.$refs['snValidate'].validate((valid) => {
        if (valid) {
          registered(this.snValidate).then((res) => {
            window.console.log(res)
            if (res.data.state == 'ok') {
              this.showLogin = true
            } else {
              this.$Notice.error({ title: '提示', desc: res.data.msg })
            }
          })
        }
      })
    },
    handleUsernameInput() {
      if (this.form.username) {
        this.disabledUsername = false
      }
    },
    handlePasswordInput() {
      if (this.form.password) {
        this.disabledPassword = false
      }
    },
    handleEnter() {
      this.handleLogin()
    },
    handleLogin() {
      if (this.disabledLogin) return
      this.isSuccess = false
      this.isError = false
      if (this.valid()) {
        this.disabledLogin = true
        let params = Object.assign({}, this.form)
        /**LiuKexin 20210311 根据用户名获取设置的首页 start */
        this.isHaveHome=false
        getUserHome({username:params.username}).then(url => {
          if(url.data.state == 'ok'){
            params.app = url.data.app
            params.callback = url.data.callback
            this.isHaveHome = true
          } else {
            params.app = this.form.app
            params.callback = this.form.callback
            this.isHaveHome = false
          }
        }).then(()=>{
          getSystemUrl({app:params.app}).then((res) => {
            console.log(params.app);
            if (res.data.state == 'ok') {
              console.log(res.data.url);
              this.appUrl = res.data.url
            } else {
              this.$Notice.error({ title: '提示', desc: res.data.msg })
            }
          })
        
          /**LiuKexin 20210311 根据用户名获取设置的首页 end */
          params.username = Encrypt(params.username);
          params.password = Encrypt(params.password);
          this.login(params).then((res) => {
            if (res.data.state === 'ok') {
              let verify = res.data.verify
              if (verify) {
                /**LiuKexin 20210311 区分默认首页和设置首页的callback start */
                let callback = res.data.callback
                if (callback) {
                  console.log(this.isHaveHome);
                  console.log(this.appUrl+callback.split("#")[0] + "?token="+ res.data.token+"#"+callback.split("#")[1]);
                  console.log(this.appUrl+callback + '?token=' + res.data.token);
                  document.location.href = this.isHaveHome ?
                    this.appUrl+callback.split("#")[0] + "?token="+ res.data.token+"#"+callback.split("#")[1]
                    :
                    this.appUrl+callback + '?token=' + res.data.token
                /**LiuKexin 20210311 区分默认首页和设置首页的callback end */
                } else {
                  console.log(this.appUrl+this.form.callback + '?token=' + res.data.token);
                  document.location.href = this.appUrl+this.form.callback + '?token=' + res.data.token
                }
                this.setSuccess()
              } else {
                this.form.token = res.data.token
                this.showModifyModal = true
              }
            } else {
              this.setError(res.data.msg ? res.data.msg : '登录失败')
            }
            this.disabledLogin = false
          })
          .catch(() => {
            this.setError('登录失败')
            this.disabledLogin = false
          })
        })
      }
    },
    // encrypt(data) {
    //   let publicKey =
    //     '04272a7c8997d9883078acc011f450f88d54fdbbd6ddab950d7856a565182aad7e0b5da415f50e1d4433c2b633752dfa3bc04de879311091361db05584d972ff06'
    //   return sm2.doEncrypt(data, publicKey, 0)
    // },
    // encrypt(data) {
    //   let publicKey =
    //     '04272a7c8997d9883078acc011f450f88d54fdbbd6ddab950d7856a565182aad7e0b5da415f50e1d4433c2b633752dfa3bc04de879311091361db05584d972ff06'
    //   return sm2.doEncrypt(data, publicKey, 0)
    // },

    valid() {
      let isValid = true
      if (!this.form.username) {
        this.disabledUsername = true
        isValid = isValid && false
      }
      if (!this.form.password) {
        this.disabledPassword = true
        isValid = isValid && false
      }
      // LiuKexin 20210329 登录时校验验证码
      if(!this.codeIsTrue){
        isValid = this.compareCode()
      }
      return isValid
    },
    login({ app, callback, username, password }) {
      return this.$http.post('/aserver/login', {
        app,callback,username,password,
      })
    },
    setSuccess(msg = '登录成功') {
      this.message = msg
      this.isSuccess = true
      this.isError = false
    },
    setError(msg = '登录失败') {
      this.message = msg
      this.isSuccess = false
      this.isError = true
    },
  },
  mounted() {
    let para = qs.parse(document.location.search, { ignoreQueryPrefix: true })
    if (para) {
      this.form.app = para.app ? para.app : 'aserver'
      this.form.callback = para.callback ? para.callback : '/aserver/'
    }
    this.updateCode() //LiuKexin 20210329 初始化验证码
  },
}
</script>

<style>
html,
body,
.login-container {
  height: 100%;
  width: 100%;
}
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
div,
input {
  box-sizing: border-box;
  color: #666;
}
/** LiuKexin 20201201 调整登录也背景图片的位置及大小 */
.bg {
  height: 100%;
  width: 100%;
  position: absolute;
  background-size: 80%;
  background-position: 50%;
  float: left;
}
/* Liukexin 20210126 调整样式 start */
.bg-title{
  position:absolute;
  width:35%;
  left:15%;
  top:10%;
}
.header-app-name{
  padding:0 10px;
  color: #5b6270;
  /* color: #ffffff; */
  border-radius: 3px;
  font-size: 32px;
  line-height: 64px;
}
/* Liukexin 20210126 调整样式 end */
.SnForm {
  width: 80%;
  margin: 0 12%;
  margin-top: 5%;
}
.SnForm button {
  width: 80%;
  margin: 0 10%;
  margin-top: 5%;
}
/** LiuKexin 20201201 调整登录页内容的 */
.login-card {
  position: absolute;
  opacity: 0.92;
  float: right;
  height: 60%;
  width: 70%;
  top: 20%;
  left:15%;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  background-color: rgb(250, 250, 253);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
/**LiuKexin 20201201 修改标题  2021026 样式调整*/
.login-card-title {
  position: absolute;
  width: 50%;
  height: 100%;
}
.login-img{
  position: absolute;
  width:80%;
  top:30%;
  left:10%;
}
/**Liukexin 20201201 数字档案室V2.0的样式 */
.login-card-productName {
  font-size: 18px;
  color: #000000;
  text-align: center;
  font-family: 'Microsoft YaHei';
}
/**Liukexin 20201207 调整登录框的位置 20210126 样式调整*/
.login-card-content {
  position: absolute;
  top: 6%;  /**LiuKexin 20210329 调整间距 */
  right: 10%;
  width: 32%;
}
.login-message-panel {
  height: 18px;
  margin:5px 0;
}
.login-message {
  position: relative;
  text-align: center;
  font-size: 14px;
}
.login-message span {
  display: none;
}
.login-message.error span {
  display: inline;
  background-color: #ffefe6;
  padding: 5px;
  border: 1px solid #ffb08f;
  border-radius: 5px;
}
.login-message.success span {
  display: inline;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #8ce6b0;
  background-color: #edfff3;
}
/* .login-form {
  margin-top: 120px;
} */
.login-form-item {
  padding: 8px 0px;
  position: relative;
}
.login-form-item .form-item-label {
  height: 28px;
  padding-bottom: 8px;
}
.login-form-item input {
  width: 100%;
  height: 32px;
  border-radius: 3px;
  padding: 6px 10px;
  margin: 0;
}
.login-form-item .form-input {
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.login-form-item .form-submit {
  background: #006dde;
  color: white;
  border: 1px solid #0056b3;
  cursor: pointer;
  box-shadow: inset 0 -1px -1px rgba(0, 0, 0, 0.075);
}
.login-form-item .form-submit:hover {
  background: #005dc0;
}
.form-item-submit .disabled {
  background: #969696;
  color: #d1d1d1;
  border: 1px solid #868686;
  cursor: pointer;
  outline: 0;
  box-shadow: inset 0 -1px -1px rgba(0, 0, 0, 0.075);
}
.form-item-submit .disabled:hover {
  background: #969696;
  border: 1px solid #868686;
  cursor: default;
  outline: 0;
  box-shadow: inset 0 -1px -1px rgba(0, 0, 0, 0.075);
}
.form-item-label {
  font-weight: bold;
}
.form-item-tooltip {
  position: absolute;
  bottom: -30px;
  left: 100px;
  background-color: #ffefe6;
  padding: 5px 10px;
  border: 1px solid #ffb08f;
  border-radius: 5px;
  box-shadow: 0 2px 5px #ffb08f;
}
.form-item-tooltip::before {
  content: ' ';
  position: absolute;
  top: -6px;
  left: 20%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #ffb08f transparent;
}
.form-item-tooltip::after {
  content: ' ';
  position: absolute;
  top: -5px;
  left: 20%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #ffefe6 transparent;
}
.form-item-remind {
  font-weight: normal;
  padding-top: 30px;
  text-align: center;
}
</style>

