<template>
  <div class="flex pt-14 items-center">
    <img class="w-254 h-322" src="@/assets/images/set-password-bg.png" alt="" />
    <a-form :model="passwordForm" ref="passwordFormRef" :rules="passwordFormRules" :label-col="{ span: 8 }">
      <a-form-item label="当前密码：" name="oldPassword" class="mb-36">
        <a-input placeholder="请输入当前密码" type="password" v-model:value="passwordForm.oldPassword"></a-input>
      </a-form-item>
      <a-form-item label="新密码：" name="newPassword" class="mb-36">
        <a-input placeholder="请输入新密码，6-20位字母， 数字或字符" type="password" v-model:value="passwordForm.newPassword"></a-input>
      </a-form-item>
      <a-form-item label="确认新密码：" name="confirmPassword" class="mb-36">
        <a-input placeholder="请再次输入新密码，6-20位字母， 数字或字符" type="password" v-model:value="passwordForm.confirmPassword"></a-input>
      </a-form-item>
      <async-button class="w-96 h-48 ml-170 bg-#0068FF text-#fff b-rd-6px !hover:bg-#0068FF/60" type="primary" @click="handleSubmit"
        >提交</async-button
      >
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { type FormInstance, message } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form'
import { validatePassword, genValidateRePassword } from 'Utils/validate'
import { apiChangePwd } from '@/api/settings'

const passwordForm = reactive<PasswordDto>({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
})
const passwordFormRules: Record<string, Rule> = {
  oldPassword: { required: true, validator: validatePassword },
  newPassword: { required: true, validator: validatePassword },
  confirmPassword: { required: true, validator: genValidateRePassword(toRefs(passwordForm).newPassword) },
}
const passwordFormRef = ref<FormInstance>()
const handleSubmit = (done: () => void) => {
  passwordFormRef.value
    ?.validate()
    .then(() => {
      apiChangePwd(passwordForm)
        .then((res) => {
          message.success('修改成功')
          passwordFormRef.value?.resetFields()
          done()
        })
        .catch((err) => {
          done()
        })
    })
    .catch((error: Error) => {
      done()
      console.log(error)
    })
}
</script>
<style lang="less" scoped>
::v-deep(.ant-form) {
  width: 620px;
  .ant-form-item {
    .ant-form-item-row {
      .ant-form-item-label {
        width: 150px;
        text-align: right;
        flex: unset;
        margin-right: 20px;
      }
      .ant-form-item-control {
        input,
        textarea {
          height: 48px;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>
