<template>
  <div class="login">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <el-form-item prop="username" label-width="80px" label="账号">
        <el-input
          v-model="loginForm.username"
          type="text"
          name="username"
          auto-complete="off"
          tabindex="1"
          maxlength="20"
        >
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
        </el-input>
      </el-form-item>
      <el-form-item prop="password"  label-width="80px" label="密码">
        <el-input
          v-model="loginForm.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
          tabindex="2"
          maxlength="20"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
        </el-input>
      </el-form-item>

      <el-form-item prop="verifyCode" label-width="80px" label="验证码">
        <el-input
          v-model="loginForm.verifyCode"
          auto-complete="off"
          style="width: 58%"
          tabindex="3"
          maxlength="4"
        >
          <svg-icon slot="prefix" icon-class="verifyCode" class="el-input__icon input-icon"/>
        </el-input>
        <div class="login-code">
          <img :src="captchaUrl" @click="updateCaptcha" class="login-code-img"/>
        </div>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width:100%;"
          @click.native.prevent="handleLogin"
        >
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import store from "@/store";
import {doEncrypt, doSign} from "@/utils/smutil";
import {debounce} from "lodash";

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        // 用户名
        username: '',
        // 密码
        password: '',
        // 验证码
        verifyCode: '',
      },
      murmur: '',
      verifyuuid: '',
      captchaUrl: this.getCaptcha,
      captchaText: '',
      loginRules: {
        username: [{required: true, trigger: 'blur', message: '请输入用户名'}],
        password: [{required: true, trigger: 'blur', message: '请输入密码'}],
        verifyCode: [{required: true, trigger: 'blur', message: '请输入验证码'}, {
          min: 4,
          max: 4,
          message: '请输入4位验证码',
          trigger: 'blur'
        }]
      },
      loading: false,
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    (async () => {
      const f = await this.getFinger()
      // 指纹
      this.murmur = f
      // 加载验证码
      this.getCaptcha()
    })();
  },
  mounted() {

  },
  methods: {
    getFinger() {
      const Fingerprint2 = require('fingerprintjs2')
      return new Promise(resolve => {
        if (window.requestIdleCallback) {
          requestIdleCallback(function () {
            Fingerprint2.getV18(function (result) {
              resolve(result)
            })
          })
        } else {
          setTimeout(function () {
            Fingerprint2.getV18(function (result) {
              resolve(result)
            })
          }, 500)
        }
      })
    },
    // 获取验证码
    getCaptcha: debounce(function () {
      var searchParams = {
        murmur: this.murmur
      }
      this.$axios.get('/getVerifyCode',
        {params: searchParams}).then((res) => {
        this.verifyuuid = res.data.uuid
        this.captchaUrl = 'data:image/gif;base64,' + res.data.imgBase64;
        this.captchaText = res.data.captchaText
      }).catch((error) => {

      })
    }, 1000),
    updateCaptcha() {
      // 更新验证码
      this.getCaptcha()
    },
    handleLogin: debounce(function () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          let verifycodetemp = this.loginForm.verifyCode
          if (this.captchaText.toLowerCase() != verifycodetemp.toLowerCase()) {
            this.$message.error('验证码录入错误!')
            this.updateCaptcha()
            this.loading = false
            return
          }
          // const param = new URLSearchParams()
          // param.append('username', this.loginForm.username)
          // param.append('password', this.loginForm.password)
          // param.append('code', this.loginForm.verifyCode)
          // param.append('verifyuuid', this.verifyuuid)
          // param.append('mailbox', this.loginForm.mailbox)
          const param = {
            username: this.loginForm.username,
            password: this.loginForm.password,
            code: this.loginForm.verifyCode,
            verifyuuid: this.verifyuuid,
            mailbox: this.loginForm.mailbox,
            murmur: this.murmur
          }
          this.$axios.post('/user/login', param).then((res) => {
            let tokenStr = doEncrypt(res.data)
            let sign = doSign(res.data)
            localStorage.setItem('jy', tokenStr + '&' + sign)
            // 清空路由菜单
            store.commit('SET_R', [])
            this.$router.push('/dashboard')
            this.loading = false
          }).catch((error) => {
            // 登录失败刷新验证码
            this.updateCaptcha()
            this.loginForm.verifyCode = ''
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }, 1000)
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../../assets/login.jpg");
  background-size: cover;


  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  zoom: 1;

  background-position: bottom;

}

.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 38px;
  width: 105px;
}

.mail-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

</style>

