<template>
  <div class="login-container">
123
  </div>
</template>

<script>
import { captchaImage } from '@/api/user'

export default {
  name: 'Login',
  data() {
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    this.captchaImage()
  },
  methods: {
    captchaImage() {
      captchaImage({ type: 'math' }).then(res => {
        const url = 'data:image/jpg;base64,' + res.img
        this.imgSrc = url
        this.loginForm.uuid = res.uuid
      })
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .login-container {
    background-image: url('../../assets/login/bg.png');
    background-size: 100% 100%;
    .el-form {
      width: 70%;
      margin: 0 auto;
      .el-input__inner{
        height: 40px;
      }
    }

  }
</style>

<style lang="css" scoped>
  .title-container{
    color: #547BD4;
    font-family: Noto Sans Malayalam UI;
    font-size: 28px;
    line-height: 26px;
    letter-spacing: 0px;
  }
  /deep/ .el-input__inner {
    border: 0;
    border-bottom: 1px solid #DCDFE6;
    border-radius: 0;
    padding: 0;
  }
  /deep/ .el-form-item__label{
    padding:0;
  }
  .login-container {
    min-height: 100%;
    width: 100%;
    overflow: hidden;
  }

  /deep/ .el-form-item{
    margin-bottom: 4px;
  }

  .window-login {
    overflow: hidden;
    border-radius: 15px;
    margin: 0 auto;
    margin-top: 3%;
    width: 800px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }
  .picColor{
    background: linear-gradient(166.06deg, #2782DF 0%, #003DAE 100%);
    box-shadow: 0px 4px 8px 0px #46BBFD5B;
  }
</style>
