<template>
  <transition name="slide">
    <div :style="{backgroundImage:`url(${backgroundImg})`}" class="login">
      <div class="logo">
        <img :src="logoImg">
        <div class="title">
          管理者驾驶舱
        </div>
      </div>
      <div class="login-form-div">
        <el-form id="login-form" ref="loginForm" :model="loginForm" :rules="loginRules" :hide-required-asterisk="true" label-width="40px" class="login-form" auto-complete="on" label-position="right">
          <el-form-item prop="username">
            <span slot="label" class="svg-container">
              <svg-icon icon-class="user" />
            </span>
            <el-input v-model.trim="loginForm.username" name="username" type="text" auto-complete="on" placeholder="用户名" />
          </el-form-item>
          <el-form-item prop="password">
            <span slot="label" class="svg-container">
              <svg-icon icon-class="password" />
            </span>
            <el-input
              :type="pwdType"
              v-model.trim="loginForm.password"
              name="password"
              auto-complete="on"
              placeholder="密码"
              @keyup.enter.native="handleLogin" />
          </el-form-item>
          <div class="login-btn-div">
            <el-button :loading="loading" class="login-btn" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
              登录
            </el-button>
          </div>
        </el-form>
      </div>
    </div>
  </transition>
</template>

<script>
import { RSAencrypt } from '@/utils/security'
export default {
  name: 'AppLogin',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('用户名不能为空'))
      } else {
        callback()
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('密码不能为空'))
      } else {
        callback()
      }
    }
    return {
      backgroundImg: require('@/assets/login_images/app-login-back.png'),
      logoImg: require('@/assets/login_images/logo-simple.png'),
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, trigger: ['blur', 'change'], validator: validateUsername }],
        password: [{ required: true, trigger: ['blur', 'change'], validator: validatePass }]
      },
      loading: false,
      pwdType: 'password'
    }
  },
  beforeCreate: function() { // 从后台获取系统配置，根据配置判断是否加载验证码控件
    this.loading = true
    this.$store.dispatch('GetConfig').then(() => {
      this.loading = false
    }).catch((e) => {
      this.$message.error('连接服务器失败')
      this.loading = false
    })
  },
  methods: {
    handleLogin() { // 点击登录按钮
      // if (!this.showKaptcha) { // 如果未开启验证码，将验证码字段从提交字段中移除
      //   delete this.loginForm['kaptcha']
      //   delete this.loginRules['kaptcha']
      // }
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          // 密码加密
          const loginForm = {
            sid: this.$store.getters.sid,
            username: this.loginForm.username,
            password: RSAencrypt(this.loginForm.password),
            kaptcha: this.loginForm.kaptcha
          }
          this.$store.dispatch('Login', loginForm).then(() => {
            this.loading = false
            this.$message.success('登录成功')
            // 判断配置项，是要跳转九宫盒还是主页
            if (this.baseConfig.toDashboard) {
              this.$router.push({ path: '/appIndex' })
            } else {
              this.$store.commit('SET_SYSTEM', { name: '综合业务', url: this.baseConfig.dashUrl })
              const params = '?token=' + this.$store.getters.token + '&url=' + this.baseConfig.dashUrl
              const loginUrl = this.baseConfig.biLogin
              this.$router.push({ path: '/appSubject', query: { name: '综合业务', url: loginUrl + params }})
            }
          }).catch(() => {
            this.loading = false
            if (this.showKaptcha) {
              this.$refs.kaptcha.refreshCode()
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .login {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    input: -webkit-autofill;
    .logo {
      margin: 25% auto;
      margin-bottom: 15%;
      text-align: center;
      img {
        text-align: center;
        height: 25vw;
        width:25vw;
      }
      .title{
        margin-top: 20px;
        font-size:20px;
      }
    }
    .login-form-div{
      width:100%;
      padding: 0px 20px;
      .login-form {
        max-width: 100%;
        padding: 0px 10px 0px 0px;
        margin: auto;
        overflow:hidden;
        .svg-container {
          padding: 0px 0px 0px 0px;
          color: #889aa4;
          vertical-align: middle;
          width: 30px;
          display: inline-block;
        }
        .el-form-item{
          margin-bottom: 35px;
          .el-form-item__error{
            line-height: 1.5 !important;
          }
        }
        .login-btn-div{
          padding-left: 10px;
        }
      }
    }

  }
</style>