<template>
  <el-dialog v-model="resetPasswordDialog" title="修改密码">
    <el-form ref="resetPasswordFormRef" :model="resetPasswordForm" :rules="rules">
      <el-form-item prop="password">
        <el-input
          type="password"
          class="input-item"
          v-model="resetPasswordForm.password"
          placeholder="请输入密码"
          show-password
        />
      </el-form-item>
      <el-form-item prop="new_password">
        <el-input
          type="password"
          class="input-item"
          v-model="resetPasswordForm.new_password"
          placeholder="请输入密码"
          show-password
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="repeat_new_password">
        <el-input
          type="password"
          class="input-item"
          v-model="resetPasswordForm.repeat_new_password"
          placeholder="请输入确认密码"
          show-password
        >
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetPasswordDialog = false">取消</el-button>
        <el-button type="primary" @click="resetPassword">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import type { ResetCurrentUserPasswordRequest } from '@/api/type/user'
import type { FormInstance, FormRules } from 'element-plus'
import { editPassword } from "@/utils/api";

const router = useRouter()

const resetPasswordDialog = ref<boolean>(false)

const resetPasswordForm = ref<ResetCurrentUserPasswordRequest>({
  password: '',
  new_password: '',
  repeat_new_password: ''
})

const resetPasswordFormRef = ref<FormInstance>()

const rules = ref<FormRules<ResetCurrentUserPasswordRequest>>({
  password: [{ required: true, message: "请输入旧密码", trigger: 'blur' }],
  new_password: [
    {
      required: true,
      message: '请输入新密码',
      trigger: 'blur'
    },
    {
      min: 6,
      max: 20,
      message: '长度在6~20',
      trigger: 'blur'
    }
  ],
  repeat_new_password: [
    {
      required: true,
      message: '请确认新密码',
      trigger: 'blur'
    },
    {
      min: 6,
      max: 20,
      message: '长度在6~20',
      trigger: 'blur'
    },
    {
      validator: (rule, value, callback) => {
        if (resetPasswordForm.value.new_password != resetPasswordForm.value.repeat_new_password) {
          callback(new Error('两次密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})

const open = () => {
  resetPasswordForm.value = {
    password: '',
    new_password: '',
    repeat_new_password: ''
  }
  resetPasswordDialog.value = true
  resetPasswordFormRef.value?.resetFields()
}
const resetPassword = () => {
  resetPasswordFormRef.value?.validate().then(() => {
      editPassword(resetPasswordForm.value).then(res => {
        if (res) {
          sessionStorage.clear();
          router.push("/login")
        }
      })
    })
}
const close = () => {
  resetPasswordDialog.value = false
}

defineExpose({ open, close })
</script>
