/*登录*/
<template>
  <div class="login">
    <div class="container">
      <div class="content">
        <div class="text">
          <div class="back">
            <p>前沿动力</p>
            <p>引领创新</p>
          </div>
          <div class="face">
            <p>前沿动力</p>
            <p>引领创新</p>
          </div>
        </div>

        <el-form
          ref="loginForm"
          class="login-form"
          :model="loginForm"
          :rules="loginRules"
          auto-complete="on"
          label-position="left"
        >
          <h3 class="title">账户登录</h3>
          <el-form-item prop="username">
            <el-input
              ref="username"
              type="text"
              size="small"
              name="username"
              v-model="loginForm.username"
              placeholder="邮箱/用户名"
              auto-complete="on"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              ref="password"
              :type="passwordType"
              size="small"
              name="password"
              minlength="6"
              maxlength="8"
              v-model="loginForm.password"
              placeholder="请输入密码"
              auto-complete="on"
              @keyup.enter.native="Login"
            >
              <svg-icon
                slot="suffix"
                :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
                @click="showPwd"
              />
            </el-input>
          </el-form-item>
          <el-button
            type="danger"
            size="small"
            class="login-btn"
            :loading="loading"
            @click.native.prevent="Login"
          >登录</el-button>
          <div class="link">
            <router-link class="link-item" to="/forget/index">忘记密码</router-link>
            <router-link class="link-item" to="/register/index">免费注册</router-link>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { request, enPassword } from '@/utils/request'
import { setToken } from '@/utils/token'
import { validPwd } from '@/utils/validate'

export default {
  name: 'Login',
  data() {
    const validatePwd = (rule, value, callback) => {
      if (value) {
        if (!validPwd(value)) {
          callback(new Error('6~8位,字母开头，只能包含字母、数字和下划线'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请输入密码'))
      }
    }
    return {
      loginForm: {
        username: '', //zhaochangjun
        password: '' // 密码(zhao1234)
      },
      loginRules: {
        username: [
          { required: true, message: '请输入邮箱/用户名', trigger: 'blur' }
        ],
        password: [
          // { required: true, trigger: 'blur', validator: validatePwd }
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 8, message: '密码长度为6到8位', trigger: 'blur' }
        ]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  created() {},
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    showPwd() {
      this.passwordType = this.passwordType == 'password' ? 'text' : 'password'
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    Login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          let params = {
            transCode: 'A00002',
            userName: this.loginForm.username,
            authCode: '',
            password: enPassword(this.loginForm.password),
            type: ''
          }
          request(params)
            .then(res => {
              this.$store.dispatch('user/changeState', {
                key: 'token',
                value: res.clientToken
              })
              this.$store.dispatch('user/changeState', {
                key: 'name',
                value: res.nickName
              })
              this.$store.dispatch('user/changeState', {
                key: 'userId',
                value: res.userId
              })
              this.$store.dispatch('user/changeState', {
                key: 'userType',
                value: res.userType
              })
              this.$store.dispatch('user/changeState', {
                key: 'realStatus',
                value: res.authenticationState
              })
              this.$store.dispatch('user/changeState', {
                key: 'loginStatus',
                value: true
              })

              this.$message.success('登录成功!')
              this.loading = false
              setToken(res.clientToken)
              setTimeout(() => {
                this.$router.replace({
                  path: this.$route.query.redirect || '/index'
                })
              }, 1000)
            })
            .catch(err => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.login {
  padding: 50px 0;
  @include w_h(100%, calc(100vh - 80px));
  .container {
    @include w_h(100%, 100%);
    background: $color_b url('../../assets/img/login.png') no-repeat center;
    background-size: cover;
    .content {
      padding: 0 $pad;
      @include flex();
      @include w_h(100%, 100%);
      .text {
        @include w_h(440px, 280px);
        @include position();
        font-size: 100px;
        font-weight: 700;
        line-height: 105px;
        white-space: nowrap;
        .back {
          @include w_h(440px, 280px);
          @include position(absolute, 30px, 0, 0, 0, 1);
          color: rgba(255, 255, 255, 1);
          text-shadow: 2px 5px 6px rgba(4, 92, 160, 0.75);
        }
        .face {
          @include w_h(440px, 280px);
          @include position(absolute, 30px, 0, 0, 0, 2);
          color: rgba(255, 255, 255, 0.12);
          background: linear-gradient(
            0deg,
            rgba(177, 226, 247, 1) 0%,
            rgba(247, 251, 255, 1) 100%
          );
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .login-form {
        padding: 35px 15px;
        @include w_h(250px);
        background: $color_f;
        .title {
          margin-bottom: 30px;
          font-size: 20px;
          text-align: center;
          color: $color_3;
        }
        .login-btn {
          margin: 10px auto 30px;
          @include w_h();
        }
        .link {
          @include flex(center);
          font-size: 12px;
          color: $color_9;
          .link-item {
            margin: 0 10px;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
@import '@/styles/variables.scss';
@supports (-webkit-mask: none) and (not (cater-color: $color_9)) {
  .login-form .el-input input {
    font-size: 12px;
    color: $color_9;
  }
}
.login-form {
  .el-input {
    &__inner:focus {
      border-color: $color_9;
    }
  }
}
</style>>
