<template>
  <div class="password-reset-container">
    <el-card class="password-reset-card">
      <div class="title-with-dot">
        <div class="blue-dot"></div>
        <h3 class="title">重设密码</h3>
      </div>
      <el-divider></el-divider>

      <el-form
        ref="passwordForm"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="password-form"
      >
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input
            v-model="form.oldPassword"
            type="password"
            placeholder="请输入旧密码"
          ></el-input>
        </el-form-item>

        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="form.newPassword"
            type="password"
            placeholder="请输入新密码"
          ></el-input>
        </el-form-item>

        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input
            v-model="form.confirmPassword"
            type="password"
            placeholder="请再次输入新密码"
          ></el-input>
        </el-form-item>

        <div class="form-actions">
          <el-button type="primary" @click="submitForm">修改密码</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { autoPwdEdit } from "@/api/tyler/sys";
export default {
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("密码长度必须大于等于6个字符"));
      } else {
        if (this.form.confirmPassword !== "") {
          this.$refs.passwordForm.validateField("confirmPassword");
        }
        callback();
      }
    };

    const validateConfirmPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      form: {
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      rules: {
        oldPassword: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { validator: validatePassword, trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          { validator: validateConfirmPassword, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.passwordForm.validate((valid) => {
        if (valid) {
          autoPwdEdit(this.form).then(response => {
            this.$modal.msgSuccess("密码修改成功");
            this.form={
              oldPassword: "",
              newPassword: "",
              confirmPassword: "",
            }
          });
        } else {
          console.log("验证失败");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.password-reset-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 84px);
  background-color: #f5f5f5;
}

.password-reset-card {
  width: 500px;
}

.title-with-dot {
  display: flex;
  align-items: center;
  /* margin-bottom: 10px; */
}

.blue-dot {
  width: 8px;
  height: 8px;
  background-color: #409eff;
  border-radius: 50%;
  margin-right: 10px;
}

.title {
  font-size: 18px;
  color: #409eff;
  margin: 0;
  font-weight: bold;
}

.password-form {
  margin-top: 20px;
}

.form-actions {
  text-align: center;
  margin-top: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  color: #606266;
  font-size: 14px;
}

.el-input {
  width: 100%;
}

.el-button {
  width: 180px;
  height: 40px;
  background-color: #409eff;
  border: none;
  color: white;
  font-size: 14px;
}
</style>