<template>
  <CommonRoot>
    <FlexCol gap="gap.xl" padding="space.lg">
      <FlexCol radius="radius.md" backgroundColor="white" overflow="hidden">
        <template v-if="isSuccess">
          <Result
            status="success"
            title="修改成功"
            description="您可以使用新密码登录"
          />
        </template>
        <template v-else>
          <DynamicForm
            ref="formRef"
            :model="formModel"
            :options="formDefine"
          />
        </template>
      </FlexCol>
      <FlexCol gap="gap.md">
        <Button type="primary" block :loading="loading" @click="handleSubmit">
          修改密码
        </Button>
        <Button block @click="back()">
          返回
        </Button>
      </FlexCol>
      <XBarSpace />
    </FlexCol>
  </CommonRoot>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { back } from '@/components/utils/PageAction';
import UserApi from '@/api/auth/UserApi';
import type { IDynamicFormOptions, IDynamicFormRef } from '@/components/dynamic';
import type { FormProps } from '@/components/form/Form.vue';
import type { RuleItem } from 'async-validator';
import FlexCol from '@/components/layout/FlexCol.vue';
import CommonRoot from '@/components/dialog/CommonRoot.vue';
import Result from '@/components/feedback/Result.vue';
import DynamicForm from '@/components/dynamic/DynamicForm.vue';
import Button from '@/components/basic/Button.vue';
import XBarSpace from '@/components/layout/space/XBarSpace.vue';
import { alert, toast } from '@/components/dialog/CommonRoot';

const formRef = ref<IDynamicFormRef>();
const loading = ref(false);
const isSuccess = ref(false);

const formModel = ref({
  oldPassword: '',
  password: '',
  passwordRepeat: '',
});

const formDefine: IDynamicFormOptions = {
  formAdditionaProps: {
    labelFlex: 4,
    inputFlex: 8,
  } as FormProps,
  formRules: {
    oldPassword: [
      { required: true, message: '请输入旧密码' },
      { min: 6, message: '密码长度必须大于等于6位' },
    ],
    password: [
      { required: true, message: '请输入密码' },
      { min: 6, message: '密码长度必须大于等于6位' },
    ],
    passwordRepeat: [
      { required: true, message: '请再输入一次密码' },
      {
        //表单自定义校验
        validator(rule, value, callback, source) {
          if (value !== formModel.value.password) {
            callback('两次输入密码不一致，请检查');
            return;
          }
          callback();
        },
      },
    ] as RuleItem[],
  },
  formItems: [
    {
      label: '旧密码',
      name: 'oldPassword',
      type: 'password',
      additionalProps: {
        placeholder: '请输入旧密码' 
      }
    },
    {
      label: '新密码',
      name: 'password',
      type: 'password',
      additionalProps: {
        placeholder: '请输入密码' 
      }
    },
    {
      label: '确认新密码',
      name: 'passwordRepeat',
      type: 'password',
      additionalProps: {
        placeholder: '请输入新密码' 
      }
    },
  ],
};

async function handleSubmit() {
  if (!formRef.value)
    return;
  try {
    await formRef.value.validate();
  } catch {
    uni.showToast({
      title: '有必填项未填写，请检查',
      icon: 'none',
    });
    return;
  }
  loading.value = true;
  try {
    await UserApi.updatePassword({
      oldpassword: formModel.value.oldPassword,
      newpassword: formModel.value.password,
    });
    toast('修改密码成功');
    isSuccess.value = true;
  } catch (error) {
    alert({
      title: '修改密码失败',
      content: '' + error,
      icon: 'error',
    });
  } finally {
    loading.value = false;
  }
}

</script>
