<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useAppStore } from '@/store/modules/app';
import { Icon } from '@iconify/vue'
import { useThemeStore } from '@/store/modules/theme';
import { useRouterPush } from '@/hooks/common/router';
import { changePasswordApi } from '@/service/api/user';

const appStore = useAppStore();
const themeStore = useThemeStore();
const { toLogin } = useRouterPush();
const gap = computed(() => (appStore.isMobile ? 0 : 16));

const formModel = ref<{oldPassword: string;password: string;confirmPassword: string;}>({
    oldPassword: '',
    password: '',
    confirmPassword: '',
});
const rules = {
    oldPassword: [{ required: true, message: '请输入旧密码', trigger: ['blur'] }],
    password: [{ required: true, message: '请输入新密码', trigger: ['blur'] }],
    confirmPassword: [{ validator: (rule: any, value: string, callback: any) => {
        if (value !== formModel.value.password) {
            callback(new Error('两次输入密码不一致'));
        } else {
            callback();
        }
    }, required: true, message: '两次输入密码不一致', trigger: ['blur'] }],
}

const formRef = ref<any>(null);
const btnLoading = ref<boolean>(false);

const submitForm = async (e: MouseEvent) => {
    e.preventDefault()
    formRef.value?.validate(async (errors: any) => {
        if (!errors) {
            btnLoading.value = true;
            const {error} = await changePasswordApi({
                oldPassword: formModel.value.oldPassword,
                password: formModel.value.password,
            });
            if(!error){
                window.$message?.success('修改成功')
                toLogin();
            }
            btnLoading.value = false;
        }
    })
}



onMounted(() => {

})
</script>

<template>
<NSpace vertical :size="16">
    <!-- 修改密码 -->
    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
        <div class="border mb-3 py-2 px-3" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
          <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
            <NGi span="24 s:24 m:24">
                <div class="h-100% flex items-center gap-2">
                    <Icon icon="boxicons:lock-open" class="size-16px" :style="{ color: themeStore.themeColor }" />
                    <p class="text-[16px] font-600">修改密码</p>
                </div>
            </NGi>
          </NGrid>
        </div>
        <div class="scroll">
            <div class="mt-5 max-w-[800px] mx-auto">
                <NForm ref="formRef" :model="formModel" :rules="rules">
                    <NFormItem path="oldPassword" label="旧密码">
                        <NInput v-model:value="formModel.oldPassword" type="password" clearable show-password-on="click" placeholder="请输入旧密码" />
                    </NFormItem>
                    <NFormItem path="password" label="新密码">
                        <NInput v-model:value="formModel.password" type="password" clearable show-password-on="click" placeholder="请输入新密码" />
                    </NFormItem>
                    <NFormItem path="confirmPassword" label="确认密码">
                        <NInput v-model:value="formModel.confirmPassword" type="password" clearable show-password-on="click" placeholder="请确认新密码" />
                    </NFormItem>
                </NForm>
                <NButton type="primary" block :loading="btnLoading" @click="submitForm">修改密码</NButton>
            </div>
        </div>
    </NCard>
</NSpace>
</template>

<style scoped lang="scss">
.scroll {
  height: calc(100vh - 205px);
  overflow-y: auto;
}
</style>
