<template>
  <div class="passForm">
    <div class="btn" @click="openDialog">
      <slot></slot>
    </div>
    <el-dialog
      title="修改密码"
      :close-on-click-modal="false"
      :visible.sync="visible"
      lock-scroll
      append-to-body
      width="600px"
      :modal-append-to-body="false"
      class="NCC-dialog NCC-dialog_center dialog-box"
      destroy-on-close
    >
      <el-form ref="form" :model="user" :rules="rules" label-width="80px">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input
            v-model="user.oldPassword"
            placeholder="请输入旧密码"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="user.newPassword"
            placeholder="请输入新密码"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="user.confirmPassword"
            placeholder="请确认新密码"
            type="password"
            show-password
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">保存</el-button>
        <el-button type="danger" @click="visible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { updateUserPwd } from "@/api/index";
export default {
  name: "PassForm",
  props: {},
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.user.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      visible: false,
      user: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined,
      },
      // 表单校验
      rules: {
        oldPassword: [
          { required: true, message: "旧密码不能为空", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
          {
            pattern: /^[^<>"'|\\]+$/,
            message: "不能包含非法字符：< > \" ' \\\ |",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" },
        ],
      },
    };
  },
  watch: {},
  mounted() {},
  created() {},
  methods: {
    openDialog() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["form"].resetFields();
      });
    },
    
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          updateUserPwd(
            this.$store.state.id,
            this.user.oldPassword,
            this.user.newPassword
          ).then((res) => {
            this.$message({
              message: "修改密码成功，请重新登录！",
              type: "success",
              duration: 1000,
              onClose: () => {
                // 修改成功之后重新登陆
                this.visible = false;
                this.$store.dispatch("LogOut").then(() => {
                  this.$router.push({ path: "/login" });
                });
              },
            });
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
