<template src="./newLogin.html"></template>
<script>
/**
 * 登陆页
 *
 *  version = "1.0.0";
 *  author = "徐飞";
 *  email = "xu.fei@data-u.com";
 * */
import Cookies from 'js-cookie'
import { mapGetters, mapState } from 'vuex'
export default {
  data () {
    return {
      // 验证码标识
      authId: '',
      // 验证码图片
      authCodeImg: '',
      // 登录信息
      ruleForm: {
        username: '',
        password: '',
        authCode: ''
        // entNo: 'datau001'
      },
      // 登录验证结果错误
      passwordErr: '',
      // 验证码错误信息
      authCodeErr: '',
      // 验证登录信息规则
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 15, message: '请输入5~15个字符长度的用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 30, message: '请输入6~30个字符长度的密码', trigger: 'blur' }
        ],
        authCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 4, max: 4, message: '请输入4个字符长度的验证码', trigger: 'blur' }
        ]
        // entNo: [
        //   { required: true, message: '请输入企业号', trigger: 'blur' }
        // ]
      }
    }
  },
  mounted () {
    this.getAuthCode()
  },
  computed: {
    ...mapState({
      menuInfo: state => state.menu.menuInfo
    }),
    ...mapGetters('user', {
      userName: 'userName',
      userInfo: 'userInfo'
    })
  },
  methods: {
    /* 清除错误信息 */
    clearErr () {
      this.passwordErr = ''
    },
    /* 登录提交前验证 */
    checkValidity (formName) {
      let _this = this
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          // 调用验证码校验接口
          let checkParams = {'authId': this.authId, 'authCode': this.ruleForm.authCode}
          _this.$api.account.ifAuthCodeCorrect(checkParams)
            .then(res => {
              if (res.code === '1' && res.data === true) {
                // 登录操作
                _this.loginAction()
              } else {
                this.authCodeErr = ''
                this.$nextTick(function () {
                  this.authCodeErr = '验证码不正确'
                })
              }
            })
        } else {
          return false
        }
      })
    },
    /* 点击登录按钮 */
    doLogin () {
      this.checkValidity('ruleForm')
      // this.$api.login.privMenu().then()
    },
    /* 路由跳转 */
    go (key) {
      this.$router.push(key)
    },
    /* 获取验证码 */
    getAuthCode () {
      this.$api.account.getAuthCode().then(res => {
        if (res.code === '1') {
          this.authId = res.data.authId
          this.authCodeImg = 'data:image/jpg;base64,' + res.data.img
        }
      })
    },
    /* 调用登录接口 */
    loginAction () {
      let params = {
        'password': this.ruleForm.password,
        'username': this.ruleForm.username
      }
      this.$api.account.login(params)
        .then(res => {
          if (res.code === '1') {
            // 将用户信息存到vuex
            this.$store.dispatch('user/setUserInfo', res.data)
            // 将菜单信息存到vuex
            // _this.$store.dispatch('menu/updateMenuInfo')

            // 登录成功
            let redirect = this.$route.query.redirect
            if(res.data.userType==1){
              this.go('/front')
            }else if (redirect && redirect.indexOf('login') < 0) {
              this.go(redirect)
            } else {
              this.go('/')
            }
          } else {
            // 登录失败
            this.passwordErr = ''
            this.$nextTick(function () {
              this.passwordErr = '账号或密码错误'
            })
          }
        })
    }
  }
}
</script>
<style  src="./login.less" lang="less"  >
</style>
