<template>
  <div class="login-wrapper">
    <div class="login-box">
      <div class="white-box">
        <h3 class="white-box-title">Login</h3>
        <el-form ref="form" :model="loginForm" label-width="80px">
          <el-form-item label-width="0px">
            <el-input v-model="loginForm.adminName">
              <template slot="prepend"><i class="el-icon-user"></i></template>
            </el-input>
          </el-form-item>


          <el-form-item label-width="0px">
            <el-input type="password" v-model="loginForm.password" auto-complete="off">
              <template slot="prepend"><i class="el-icon-lock"></i></template>
            </el-input>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-input type="verifyCode" v-model="loginForm.verifyCode" auto-complete="off" @keyup.enter.native="onSubmit">
              <template slot="prepend"><i class="el-icon-camera"></i></template>
            </el-input>
            <el-image :src="captchaUrl" @click="changeCaptcha">
            </el-image>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-button class="submit-button" type="primary" @click="onSubmit" :loading="submitButtonStat">Login</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>

</template>

<script>
import network from '@/utils/network'
import tool from '@/utils/tool'
import userInfo from '@/utils/userInfo'
import baseInfo from '@/utils/baseInfo'
import {REQUEST_URL} from '@/utils/config'
import axiosObj from "../../utils/axiosPlugin";

export default {
  name: 'login',
  data () {
    return {
      errorMsg: {
        title: '',
        type: ''
      },
      loginForm: {
        adminName: '',
        password: '',
        verifyCode: '',
      },
      submitButtonStat: false,
      pageId:'',
      captchaUrl: '',
    }
  },
  beforeCreate () {
    let path = 'site/page-data'
    axiosObj.get(path, this.passwordInfo).then(response => {
      this.pageId = response.pageId
      this.captchaUrl = REQUEST_URL + 'site/captcha?page_id=' + this.pageId + '&v=' + Math.random()
    }).catch(error => {
      error = tool.errorHandle(error)
      this.$message.error(error.message)
      console.log(error)
    })
  },

  mounted () {
    // 检测用户是否已经登录，如果已经登录则直接跳转到控制台页
    // if (userInfo.hasLogin()) {
      //this.$router.push('dashboard/index');
    // }
  },
  methods: {
    onSubmit () {
      this.submitButtonStat = true
      let promise = null
      // 查看是否存在当前时间差，如果不存在，则向服务器请求时间差
      if (baseInfo.daysDiff() === null) {
        promise = network.getDaysDiff().then(response => {
          return network.loginGetAccessToken(this.loginForm.adminName, this.loginForm.password, this.loginForm.verifyCode, this.pageId)
        })
      } else {
        promise = network.loginGetAccessToken(this.loginForm.adminName, this.loginForm.password, this.loginForm.verifyCode, this.pageId)
      }
      promise.then(response => {
        return network.getUserInfo()
      }).then(response => {
        return network.getBaseInfo()
      }).then(response => {
        this.$router.push('dashboard/index')
      }).catch(error => {
        if( error.message === 'ERROR_IS_MODIFY_PASSWORD' ) {
          this.submitButtonStat = false
          this.$router.push(`/modify-password/${this.loginForm.adminName}`)
        }else {
          this.changeCaptcha()
          error = tool.errorHandle(error)
          this.$message.error(error.message)
          this.submitButtonStat = false
        }
      })

    },
    changeCaptcha() {
      this.captchaUrl = REQUEST_URL + 'site/captcha?page_id=' + this.pageId + '&v=' + Math.random();
    },
  }
}
</script>

<style>
  .login-wrapper {
    background: url(../../static/img/login-register.jpg) center center/cover no-repeat !important;
    width: 100%;
    height: 100%;
    position: fixed;
  }

  .login-wrapper .login-box {
    width: 400px;
    margin: 10% auto 0;
  }

  .login-wrapper .white-box {
    background: #fff;
    padding: 25px;
    margin-bottom: 15px;
    border-radius: 20px;
  }

  .white-box .white-box-title {
    margin: 0 0 12px;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    color: #522989;
  }

  .login-wrapper .el-input-group__prepend {
    background-color: #fff !important;
    border-radius: 20px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding: 0 15px 0 20px !important;
  }

  .login-wrapper .el-input-group--prepend i{font-size: 16px;}

  .login-wrapper .el-input__inner {
    border-radius: 20px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  .login-wrapper .submit-button {
    width: 100%;
    border-radius: 20px !important;
    background-color: #522989 !important;
    border-color: #522989 !important;
  }
</style>
