<template>
  <div class="base">
    <div class="base-content">
      <el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px">
        <el-form-item label="账号" prop="username" label-position="left">
          <el-input v-model="user.username" placeholder="请输入账号" clearable />
        </el-form-item>
        <el-form-item label="旧密码" prop="oldPassword" label-position="left">
          <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password label-position="left" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword" label-position="left">
          <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password label-position="left" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword" label-position="left">
          <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password label-position="left" />
        </el-form-item>
        <el-form-item style="margin: 50px 0 0 0">
          <el-button style="width: 100px; margin-left: 200px" type="primary" @click="submit">提交</el-button>
          <!-- <el-button type="danger" @click="close">关闭</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { updateUserPwd, getUserProfile } from '@/api/system/user';
import type { ResetPwdForm } from '@/api/system/user/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const pwdRef = ref<ElFormInstance>();
const user = ref({
  username: '',
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});

const equalToPassword = (rule: any, value: string, callback: any) => {
  if (user.value.newPassword !== value) {
    callback(new Error('两次输入的密码不一致'));
  } else {
    callback();
  }
};
const rules = ref({
  username: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
  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'
    }
  ]
});

/** 提交按钮 */
const submit = async () => {
  const res = await getUserProfile();
  console.log('当前用户信息', res);
  if (!user.value.username != res.data.userName) {
    proxy?.$modal.msgError('账号填写错误');
    return false;
  }
  pwdRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      await updateUserPwd(user.value.oldPassword, user.value.newPassword);
      proxy?.$modal.msgSuccess('修改成功');
    }
  });
};
/** 关闭按钮 */
const close = () => {
  proxy?.$tab.closePage();
};
</script>

<style lang="scss" scoped>
.base {
  margin: 0 auto;
  padding: 20px;
  height: 100vh;
  width: 100vw;
  background-color: #fff;
  .base-content {
    width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
}
</style>
