<template>
    <div class="login">
        <el-form :rules="rules" ref='ruleForm' label-width="80px" label-position="right" v-model="user">
            <el-form-item prop="username">
                <el-input placeholder="用户名"></el-input>
            </el-form-item>
             <el-form-item prop="password">
                <el-input type="password" placeholder="密码"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
		    <el-button type="primary" @click="login('ruleForm')">登录</el-button>
		    <el-button type="info" @click="resetTempPwd">重置密码</el-button>
		</div>
    </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { login, resetTempPwd } from '../../utils/api.js'
export default {
  data() {
    return {
      user: {},
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      pwdError: '',
      loading: false
    };
  },
  computed: {
    ...mapState(['username','isLogin'])
  },
  methods: {
    ...mapMutations(['loginUser']),
	  resetTempPwd(){
	  	this.$confirm('确认重置密码吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(async () => {
          let res = await resetTempPwd()
          this.pwdError = ''
          if (res) {
            this.$router.push({ path: '/resetPwd' })
          } else {
            this.$message({
              message: '重置密码失败',
              type: 'error'
            })
          }
        }).catch(() => {
          console.log('取消')
        })
	  },
	   login(formName) {
        this.$refs[formName].validate((valid, fieldsView) => {
          if (!valid) {
            return false;
          }
          let { username, password } = this.user
          this.loading = true
          login({username,password}).then(res=>{
            this.$store.commit('loginUser',res)
            this.$router.push('/index')
            this.$message({
              message: '登录成功',
              type: 'success'
            })
          }).catch(() => {
            this.pwdError = ''
            this.loading = false
          });
        });
      }
  }
}
</script>