<template>
  <div class="app-container">
    <div class="password_card">
      <div class="logout">
        <h2 class="nickname">{{ userStore.nickName }}</h2>
        <el-button type="primary" @click="logout">退出登录</el-button>
      </div>
      <div class="password_box">
        <h2>修改密码</h2>
        <el-form
          ref="formRef"
          :model="formData"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item label="登录账号：">
            <span>{{ userStore.name }}</span>
          </el-form-item>
          <el-form-item label="旧密码：" prop="oldPassword">
            <el-input
              v-model="formData.oldPassword"
              placeholder="请输入旧密码"
              type="password"
              show-password
            />
          </el-form-item>
          <el-form-item label="新密码：" prop="newPassword">
            <el-input
              v-model="formData.newPassword"
              placeholder="请输入新密码"
              type="password"
              show-password
            />
          </el-form-item>
          <el-form-item label="重复密码：" prop="resetPassword">
            <el-input
              v-model="formData.resetPassword"
              placeholder="请确认新密码"
              type="password"
              show-password
            />
          </el-form-item>
          <el-form-item class="save_btn">
            <el-button type="primary" @click="handleChangePwd">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup name="Password">
import { ElMessageBox } from "element-plus";
import useUserStore from "@/store/modules/user";
import { changePasswordApi } from "@/api/login";
import Cookies from "js-cookie";
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const formRef = ref();

const formData = ref({
  oldPassword: "", // 旧密码
  newPassword: "", // 新密码
  resetPassword: "", // 重复密码
});
const equalToPassword = (rule, value, callback) => {
  if (formData.value.newPassword !== value) {
    callback(new Error("两次新密码不相同"));
  } else {
    callback();
  }
};
const rules = reactive({
  oldPassword: [
    { required: true, message: "请输入旧密码", trigger: "blur" },
    { min: 6, message: "不得少于6位字符", trigger: "blur" },
  ],
  newPassword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 6, message: "不得少于6位字符", trigger: "blur" },
  ],
  resetPassword: [
    { required: true, message: "请重复输入新密码", trigger: "blur" },
    { required: true, validator: equalToPassword, trigger: "blur" },
  ],
});
// 修改密码
function handleChangePwd() {
  formRef.value.validate((valid) => {
    if (valid) {
      proxy.$modal.loading("正在修改密码，请稍候...");
      changePasswordApi(formData.value)
        .then((res) => {
          if (res.code === 200) {
            proxy.$modal.closeLoading();
            proxy.$modal.msgSuccess("密码修改成功");
            setTimeout(() => {
              userStore.logOut().then(() => {
                location.href = import.meta.env.VITE_APP_CONTEXT_PATH + "index";
              });
            }, 1000);
          }
        })
        .catch(() => {
          proxy.$modal.closeLoading();
        });
    }
  });
}
// 退出登录
function logout() {
  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      userStore.logOut().then(() => {
        location.href = import.meta.env.VITE_APP_CONTEXT_PATH + "index";
      });
    })
    .catch(() => {});
}
</script>

<style lang="scss" scoped>
.password_card {
  display: flex;
  width: 700px;
  margin: 100px auto;
  padding: 20px 0;
  border-radius: 12px;
  background-color: #fff;
  border: 1px solid #a0a0a0;

  .logout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
    border-right: 1px solid #eee;
    .nickname {
      padding: 0 20px;
    }
  }
  .password_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70%;
    .save_btn {
      margin: 32px 0 0 0;
    }
  }
}
</style>
