<template>
  <div class="change-fund-password-page">
    <el-card class="page-card">
      <template #header>
        <span class="page-title">{{ t('修改资金密码') }}</span>
      </template>

      <el-form :model="passwordForm" :rules="rules" ref="formRef" label-width="120px">
        <el-form-item :label="t('原资金密码')" prop="old_password">
          <el-input v-model="passwordForm.old_password" type="password" :placeholder="t('请输入原资金密码')" show-password />
        </el-form-item>

        <el-form-item :label="t('新资金密码')" prop="new_password">
          <el-input v-model="passwordForm.new_password" type="password" :placeholder="t('请输入新资金密码')" show-password />
        </el-form-item>

        <el-form-item :label="t('确认密码')" prop="confirm_password">
          <el-input v-model="passwordForm.confirm_password" type="password" :placeholder="t('请再次输入新资金密码')" show-password />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :loading="submitLoading" @click="handleSubmit" style="width: 100%;">
            {{ t('确认修改') }}
          </el-button>
          <el-button @click="router.back()">
            {{ t('取消') }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
import { changeFundPassword } from '@/request/api'

const { t } = useI18n()
const router = useRouter()
const formRef = ref(null)
const submitLoading = ref(false)

const passwordForm = reactive({
  old_password: '',
  new_password: '',
  confirm_password: ''
})

const validateConfirmPassword = (rule, value, callback) => {
  if (value !== passwordForm.new_password) {
    callback(new Error(t('两次输入的密码不一致')))
  } else {
    callback()
  }
}

const rules = {
  old_password: [
    { required: true, message: t('请输入原资金密码'), trigger: 'blur' }
  ],
  new_password: [
    { required: true, message: t('请输入新资金密码'), trigger: 'blur' },
    { min: 6, max: 20, message: t('密码长度在6到20个字符'), trigger: 'blur' }
  ],
  confirm_password: [
    { required: true, message: t('请再次输入新资金密码'), trigger: 'blur' },
    { validator: validateConfirmPassword, trigger: 'blur' }
  ]
}

const handleSubmit = async () => {
  try {
    await formRef.value.validate()
  } catch (error) {
    return
  }

  if (passwordForm.old_password === passwordForm.new_password) {
    ElMessage.warning(t('新密码不能与原密码相同'))
    return
  }

  submitLoading.value = true
  try {
    const res = await changeFundPassword({
      old_password: passwordForm.old_password,
      new_password: passwordForm.new_password
    })

    if (res.code === 1) {
      ElMessage.success(t('资金密码修改成功'))
      setTimeout(() => {
        router.back()
      }, 1500)
    }
  } catch (error) {
    ElMessage.error(t('资金密码修改失败'))
  } finally {
    submitLoading.value = false
  }
}
</script>

<style scoped>
.change-fund-password-page {
  max-width: 600px;
  margin: 0 auto;
}

.page-card {
  border-radius: 12px;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}
</style>
