<!--  -->
<template>
<div class='layout'>
  <div class="layout-con">
    <img class="lay-bg" :src="require('@/assets/img/login_bg.png')" alt="">
    <div class="middle">
      <div class="middle-left">
        <img :src="require('@/assets/img/login_ele.png')" alt="">
      </div>
      <div class="middle-con">
        <div class="middle-title">
          <div class="middle-subtitle">欢迎登录</div>
        </div>
      <el-form :rules="ruleLogin" status-icon :model="formLogin" ref="formLogin">
        <el-form-item prop="username">
          <el-input v-model="formLogin.username" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input @keyup.enter.native="submitForm('formLogin')" v-model="formLogin.password" placeholder="密码" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="login" @click="submitForm('formLogin')">登录</div>
        </el-form-item>
      </el-form>
      </div>
    </div>
  </div>
</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    var checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('账号不能为空'))
      }
      setTimeout(() => {
        if (value.length > 10) {
          callback(new Error('账号字符不能大于10位'))
        } else {
          callback()
        }
      }, 1000)
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    // 这里存放数据
    return {
      formLogin: {
        username: '',
        password: '',
        region: 'high'
      },
      ruleLogin: {
        username: [
          { validator: checkUsername, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        let data = {
          userName: this.formLogin.username,
          password: this.formLogin.password
        }
        if (valid) {
          this.$http.post('/login', data).then(res => {
            if (res.code === 0) {
              window.localStorage.setItem('userInfo', JSON.stringify(res.data))
              window.localStorage.setItem('menu', JSON.stringify(res.data.permission))
              window.localStorage.setItem('roleType', res.data.role[0])
              window.localStorage.setItem('token', res.data.token)
              setTimeout(() => {
                this.$router.push('/')
              })
            } else {
              this.$notify.error({
                title: '错误',
                message: res.msg
              })
            }
          })
        } else {
          return false
        }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  }
}
</script>

<style scoped>
/* 引入公共css类 */
@import url(./style);
</style>
