<template>
  <div id="uppasswd">
    <el-row>
      <el-col :span="24">
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-form-item label="新密码" prop="newpasswd">
            <el-input v-model="form.newpasswd" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="newpasswd">
            <el-input v-model="form._newpasswd" @input="insurePasswd()" show-password></el-input>
            <span v-if="display" style="color:red;"
              ><i class="el-icon-warning" style="margin-right:5px;"></i>两次输入密码不一致，请检查两次输入的密码并重新输入！</span
            >
          </el-form-item>
          <el-form-item label="旧密码" prop="oldpasswd">
            <el-input v-model="form.oldpasswd" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: login } = createNamespacedHelpers('login');
export default {
  name: 'uppasswd',
  props: {},
  components: {},
  data: () => ({
    form: {},
    rules: {
      newpasswd: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
      oldpasswd: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
    },
    display: false,
  }),
  created() {},
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...login(['logout', 'uppasswd']),
    insurePasswd() {
      let newpasswd = this.form.newpasswd;
      let _newpasswd = this.form._newpasswd;
      if (newpasswd === _newpasswd) {
        this.display = false;
      } else {
        this.display = true;
      }
    },
    async onSubmit() {
      let res = {};
      let data = JSON.parse(JSON.stringify(this.form));
      data.userid = this.user.uid;
      delete data._newpasswd;
      res = await this.uppasswd(data);
      if (res.errcode === 0) {
        this.$message({
          message: '密码修改成功',
          type: 'success',
        });
        this.logoutBtn();
      } else {
        this.$message.error('密码修改失败');
      }
    },
    // 退出登录
    logoutBtn() {
      this.logout();
      this.$router.push({ path: '/' });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-input__inner {
  width: 600px;
}
/deep/.el-form-item__content {
  width: 600px;
}
</style>
