<template>
  <div class="login-container">
    <div class="login-logo">
      <img src="../../assets/images/login/logo.png" alt="">
    </div>
    <div class="login-form">
      <div class="form">
        <div class="title">账号登录</div>
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          autocomplete="on"
          label-position="left">
          <el-form-item prop="username">
            <el-input
              ref="username"
              v-model="loginForm.username"
              placeholder="用户名"
              type="text"
              tabindex="1"
              autocomplete="on">
              <span slot="prefix" class="svg-container">
                <svg-icon icon-class="user"/>
              </span>
            </el-input>
          </el-form-item>
          <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
            <el-form-item prop="password">
              <el-input
                ref="password"
                :key="passwordType"
                v-model="loginForm.password"
                :type="passwordType"
                placeholder="密码"
                tabindex="2"
                autocomplete="on"
                @keyup.native="checkCapslock"
                @blur="capsTooltip = false">
                <span slot="prefix" class="svg-container">
                  <svg-icon icon-class="password"/>
                </span>
              </el-input>
            </el-form-item>
          </el-tooltip>
          <validation ref="validation"/>
          <el-button
            :loading="loading"
            :disabled="flag"
            type="primary"
            size="medium"
            @click.native.prevent="handleLogin"
          >
            登录
          </el-button>
          <div style="position:relative;cursor:pointer;">
            <div class="tips">
              <span @click="goqrcode">秦港-相关方APP下载</span>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <el-dialog :visible.sync="dialogFormQrcode" title="秦港-相关方APP下载" width="340px">
      <el-form ref="form" label-width="110px" style="width: 300px;">
        <vue-qr :text="qrcodeStr" :margin="0" :size="300" color-dark="#000" color-light="#fff" />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormQrcode = false">取 消</el-button>
      </div>
    </el-dialog>
    <div class="login-foot">
      COPYRIGHT © 2023 河北秦安安全科技股份有限公司
    </div>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'
import validation from './components/validation'
import vueQr from 'vue-qr'
import JSEncrypt from '../../../static/js/jsencrypt.min.js'
export default {
  name: 'Login',
  components: { vueQr, validation },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('用户名不能为空'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('密码不能为空'))
      } else {
        callback()
      }
    }
    return {
      dialogFormQrcode: false,
      qrcodeStr: '',
      imgUrl: require('@/assets/images/logo-tit2.png'),
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      passwordType: 'password',
      capsTooltip: false,
      loading: false,
      showDialog: false,
      redirect: undefined,
      otherQuery: {},
      rangeStatus: false,
      flag: false
    }
  },
  watch: {
    $route: {
      // eslint-disable-next-line
      handler: function (route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  created() {
    sessionStorage.clear()

    // window.addEventListener('storage', this.afterQRScan)
  },
  mounted() {
    if (this.loginForm.username === '') {
      this.$refs.username.focus()
    } else if (this.loginForm.password === '') {
      this.$refs.password.focus()
    }
  },
  destroyed() {
    // window.removeEventListener('storage', this.afterQRScan)
  },
  methods: {
    checkCapslock(e) {
      const { key } = e
      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.flag = true
      // 设置定时器，1秒后，按钮可用
      setTimeout(() => {
        this.flag = false
      }, 5000)
      this.$refs.loginForm.validate(valid => {
        /*        if (this.rangeStatus) {
          console.info(this.rangeStatus)
        } else {
          console.info(this.rangeStatus)
        }*/

        if (this.$refs.validation.rangeStatus) {
          if (valid) {
            this.loading = true
            var jsencrypt = new JSEncrypt()
            jsencrypt.setPublicKey(config.publicKey)
            const loginData = jsencrypt.encrypt('qdkjchina' + this.loginForm.username + ',qd,' + this.loginForm.password)
            requestFN(
              '/admin/check',
              {
                KEYDATA: loginData
              }
            ).then((data) => {
              sessionStorage.setItem('user', JSON.stringify(data))
              this.$router.push({ path: '/index' })
              this.loading = false
            })
              .catch((e) => {
                this.flag = false
                this.loading = false
              })
          } else {
            this.flag = false
            return false
          }
        } else {
          this.flag = false
          this.$message({
            message: '请进行登录验证',
            type: 'error'
          })
        }
      })
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    },
    goqrcode() {
      requestFN(
        '/app/versionmanager/getVersion',
        {
          FILETYPE: '1'
        }
      ).then((data) => {
        //   this.qrcodeStr = 'http://192.168.192.201:8991/file/uploadFiles/gwjapp/app.apk'
        this.qrcodeStr = config.fileUrl + data.pd.FILEURL
        this.dialogFormQrcode = true
      }).catch((e) => {

      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
@supports (-webkit-mask: none) and (not (cater-color: #fff)) {
  .login-container .el-input input {
    color: #fff;
  }
}

.login-container {
  background-image: url("../../assets/images/login/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
  position: relative;

  .login-logo {
    padding-left: 120px;
    padding-top: 85px;

    img {
      width: 650px;
      height: 97px;
    }
  }

  .login-form {
    width: 500px;
    height: 480px;
    background-color: #fff;
    border-radius: 20px;
    margin-top: 102px;
    margin-left: 265px;
    box-shadow: -10px 9px 0 0 rgba(239, 239, 239, 0.4);

    .form {
      padding: 50px;

      .title {
        font-size: 20px;
        width: max-content;
        color: #009ccf;
        font-weight: 700;
        border-bottom: 2px solid #009ccf;
        padding-bottom: 10px;
        margin-bottom: 30px;
      }

      .el-form-item--small.el-form-item {
        margin-bottom: 30px;
      }

      .el-button {
        background-color: #1b4f98;
        border: none;
        width: 100%;
        margin: 30px 0;
        height: 50px;
      }
    }
  }

  .login-foot {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
  }
}
</style>

<style scoped>
.form >>> .el-input--small .el-input__inner {
  height: 50px;
  line-height: 50px;
  padding-left: 50px;
}

.form >>> .el-input__prefix {
  height: 50px;
  line-height: 50px;
  left: 20px;
}
</style>
