<template>
  <transition name="slide">
    <div class="login" :style="{backgroundImage:`url(${backgroundImg})`}">
      <div class="logo">
        <img :src="logoImg"/>
      </div>
      <div class="login-form">
        <div class="userName">
          <i class="iconfont icon-mine"></i>
          <input type="text" placeholder="请输入账号" v-model="loginForm.username"/>
        </div>
        <div class="password">
          <i class="iconfont icon-31mima"></i>
          <input type="password" placeholder="请输入密码" v-model="loginForm.password"/>
        </div>
        <div v-if="showKaptcha" class="kaptcha-div">
          <input type="text" placeholder="验证码" v-model="loginForm.kaptcha"/>
          <img :src="kaptcha_src" class="kaptcha" alt="验证码" @click="refreshCode" >
        </div>
      </div>
      <div class="form-btn">
        <mt-button type="primary" @click="login">登录</mt-button>
      </div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import { Button, Toast, MessageBox } from 'mint-ui'
  import { MyLocalStorage } from 'assets/js/utils'
  import { LOGIN_FLAG, AD_FLAG } from 'assets/js/storageConst'
  import { RSAencrypt } from '@/utils/security'
  import { getKaptcha } from '@/api/login'

  export default {
    name: 'Login',
    data () {
      return {
        loading: true,
        backgroundImg: require('@/assets/image/login-back.png'),
        logoImg: require('@/assets/image/icon-yizhuang.png'),
        kaptcha_src: '',
        loginForm: {
          username: '',
          password: '',
          kaptcha:''
        },
        showKaptcha: false
      }
    },
    mounted(){
      this.getConfig()
    },
    methods: {
      //请求配置
      getConfig(){
        this.$store.dispatch('GetConfig').then(()=> {
          Toast({
            message: '连接服务器成功',
            position: 'bottom',
            duration: 1 * 1000
          })
          this.showKaptcha = this.$store.getters.kaptcha
          if(this.showKaptcha){
            this.refreshCode()
          }
          this.loading = true
          // 清空用户rolelist
          this.$store.commit('SET_ROLELIST', [])
        }).catch((error)=>{
          // this.getConfig()
        })
      },
      //验证输入
      validateInputs(){
        this.loginForm.username = this.loginForm.username.trim()
        this.loginForm.password = this.loginForm.password.trim()
        if(this.loginForm.username.length==0){
          Toast({
            message: '用户名不能为空',
            position: 'bottom',
            duration: 3 * 1000
          })
          return false
        }
        if(this.loginForm.password.length==0){
          Toast({
            message: '密码不能为空',
            position: 'bottom',
            duration: 3 * 1000
          })
          return false
        }
        if(this.showKaptcha){
          if(this.loginForm.kaptcha.length==0){
            Toast({
              message: '验证码不能为空',
              position: 'bottom',
              duration: 3 * 1000
            })
            return false
          }
        }
        return true
      },
      //登录
      login () {
        this.loading = true
        if (this.validateInputs()) {//通过验证
          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.$router.replace({name: 'index'})
          }).catch(() => {
            this.loading = false
            this.refreshCode()
          })
        }
      },
      // 刷新验证码
      refreshCode() {
        new Promise((resolve, reject) => {
          getKaptcha().then(response => {
            console.log('kaptcha:' + response.data.kaptcha)
            this.kaptcha_src = response.data.kaptcha
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~assets/css/variable.styl"
  @import "~assets/css/transition.styl"
  .login
    position fixed
    z-index 100
    top 0
    left 0
    right 0
    bottom 0
    background-color $color-background-w
    width 100%
    height 100%
    background-repeat no-repeat
    background-size cover
    -webkit-background-size cover
    -o-background-size cover
    input:-webkit-autofill
      -webkit-text-fill-color: $color-text !important
    .logo
      margin 25% auto
      text-align center
      img
        text-align center
        height: 7.5rem
    .login-form, .bg
      position absolute
      width 80%
      left 50%
    .bg
      top 15%
      transform translate3d(-50%, 0, 0)
    .login-form
      top 47%
      background-color #ffffff
      transform translate3d(-50%, -50%, 0)
      .userName, .password
        font-size 20px
        display flex
        align-items center
        height 40px
        line-height 40px
        margin-bottom 5px
        background-color #fff
        border-bottom: 1px solid #f0f0f0
        i
          flex 1
          font-size 23px
          text-align center
          color $color-text
        input
          flex 5
          height 30px
          outline 0
          padding-left 5px
          background-color #fff
          color $color-text!important
          outline: none
          -webkit-appearance: none
          border-radius: 0
          margin-left 5px
    .form-btn
      display flex
      position absolute
      width 80%
      left 50%
      top 55%
      transform translate3d(-50%, 0, 0)
      button
        margin-top 20px
        flex 1
        height 45px
        line-height 38px


    input:-webkit-autofill
      -webkit-box-shadow: 0 0 0px 1000px $color-background inset;
      -webkit-text-fill-color white

  .slide-enter-active, .slide-leave-active
    transition: all .3s

  .slide-enter, .slide-leave-to
    transform: translate3d(100%, 0, 0)
  .kaptcha-div{
    display flex;
    /*justify-content space-between*/
    line-height 40px
    margin-bottom 5px
    input{
      width:60%
      border-bottom 1px solid #f0f0f0
      padding-left 10px
      background-color #fff
      color $color-text!important
      font-size 20px
      -webkit-appearance: none
      border-radius: 0
    }
    .kaptcha{
      width:40%;
      height 40px;
    }
  }

</style>