<template>
    <t-dialog class="pc-change-password-dialog" :visible="visible" :header="t('修改密码')" :footer="false"
        :close-on-overlay-click="false" width="480px" placement="center" destroy-on-close
        @update:visible="handleVisibleChange">
        <template #body>
            <div class="pc-cp">
                <div class="pc-cp__form">
                    <div class="pc-cp__row">
                        <div class="pc-cp__label">{{ t('当前密码') }}</div>
                        <input v-model="form.oldPassword" class="pc-cp__input" type="password"
                            :placeholder="t('请输入当前密码')" />
                    </div>
                    <div class="pc-cp__row">
                        <div class="pc-cp__label">{{ t('新密码') }}</div>
                        <input v-model="form.newPassword" class="pc-cp__input" type="password"
                            :placeholder="t('请输入新密码')" />
                    </div>
                    <div class="pc-cp__row">
                        <div class="pc-cp__label">{{ t('重复密码') }}</div>
                        <input v-model="form.confirmPassword" class="pc-cp__input" type="password"
                            :placeholder="t('请再次输入新密码')" />
                    </div>
                    <div v-if="newPwdError" class="pc-cp__error">{{ newPwdError }}</div>
                    <div v-else-if="confirmMismatch" class="pc-cp__error">{{ t('两次输入的密码不一致') }}</div>
                    <div v-else-if="errorMsg" class="pc-cp__error">{{ errorMsg }}</div>
                </div>

                <div class="pc-cp__footer">
                    <button type="button" class="pc-profile__btn pc-profile__btn--primary" :disabled="hasRealtimeError"
                        @click="handleConfirm">
                        {{ t('确定') }}
                    </button>
                    <button type="button" class="pc-profile__btn pc-profile__btn--ghost" @click="handleCancel">
                        {{ t('取消') }}
                    </button>
                </div>
            </div>
        </template>
    </t-dialog>
</template>

<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import AIDeskCoreInstance from '@tencentcloud/ai-desk-core';
import toast from '../../../../utils/toast';
import { parseUnknownError } from '../../../../utils/parseUnknownError';

const props = defineProps<{
    visible: boolean;
}>();

const emit = defineEmits<{
    (event: 'update:visible', value: boolean): void;
}>();

const { t } = useI18n();

const form = reactive({
    oldPassword: '',
    newPassword: '',
    confirmPassword: '',
});
const errorMsg = ref('');

const validatePassword = (password: string) => {
    const re = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&^()])[A-Za-z\d@$!%*#?&^()]{8,20}$/;
    return re.test(password);
};

const newPwdError = computed(() => {
    if (form.newPassword === '') {
        return '';
    }
    if (form.newPassword.length < 8 || form.newPassword.length > 20) {
        return t('密码长度必须在8-20位之间');
    }
    if (!validatePassword(form.newPassword)) {
        return t('密码需要同时包含数字、字母以及特殊符号');
    }
    return '';
});

const confirmMismatch = computed(() => {
    return (
        form.confirmPassword !== ''
        && form.newPassword !== form.confirmPassword
    );
});

const hasRealtimeError = computed(() => {
    return Boolean(newPwdError.value) || confirmMismatch.value;
});

const resetForm = () => {
    form.oldPassword = '';
    form.newPassword = '';
    form.confirmPassword = '';
    errorMsg.value = '';
};

watch(
    () => props.visible,
    (val) => {
        if (val) {
            resetForm();
        }
    },
);

const handleVisibleChange = (val: boolean) => {
    emit('update:visible', val);
};

const handleCancel = () => {
    emit('update:visible', false);
};

const handleConfirm = async () => {
    errorMsg.value = '';
    if (!form.oldPassword) {
        errorMsg.value = t('请输入当前密码');
        return;
    }
    if (!form.newPassword) {
        errorMsg.value = t('请输入新密码');
        return;
    }
    if (form.newPassword.length < 8 || form.newPassword.length > 20) {
        errorMsg.value = t('密码长度必须在8-20位之间');
        return;
    }
    if (!validatePassword(form.newPassword)) {
        errorMsg.value = t('密码需要同时包含数字、字母以及特殊符号');
        return;
    }
    if (form.newPassword !== form.confirmPassword) {
        errorMsg.value = t('两次输入的密码不一致');
        return;
    }

    try {
        await AIDeskCoreInstance.userInfoService.changePassword(form.oldPassword, form.newPassword);
        emit('update:visible', false);
    } catch (error) {
        console.error(error);
        toast.error(parseUnknownError(error));
    }
};
</script>

<style scoped>
.pc-cp {
    padding: 4px 0 0;
}

.pc-cp__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pc-cp__row {
    display: flex;
    align-items: center;
    gap: 24px;
}

.pc-cp__label {
    width: 88px;
    font-size: 14px;
    color: #86909C;
    line-height: 22px;
    flex-shrink: 0;
}

.pc-cp__input {
    flex: 1;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #E5E6EB;
    border-radius: 8px;
    background: #fff;
    color: #1D2129;
    font-size: 14px;
    line-height: 22px;
    outline: none;
    box-sizing: border-box;
}

.pc-cp__input:focus {
    border-color: #316EF5;
}

.pc-cp__input::placeholder {
    color: #A5A9B0;
}

.pc-cp__error {
    margin-top: 4px;
    padding-left: 112px;
    color: #E54545;
    font-size: 12px;
    line-height: 20px;
}

.pc-cp__footer {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    gap: 16px;
}

.pc-profile__btn {
    min-width: 88px;
    height: 36px;
    padding: 0 20px;
    border-radius: 999px;
    font-size: 14px;
    line-height: 22px;
    cursor: pointer;
    border: 1px solid transparent;
    box-sizing: border-box;
}

.pc-profile__btn--primary {
    background: #316EF5;
    color: #fff;
    border-color: #316EF5;
}

.pc-profile__btn--primary:hover {
    background: #2758c9;
    border-color: #2758c9;
}

.pc-profile__btn--primary:disabled,
.pc-profile__btn--primary:disabled:hover {
    background: #A5A9B0;
    border-color: #A5A9B0;
    cursor: not-allowed;
}

.pc-profile__btn--ghost {
    background: #fff;
    color: #316EF5;
    border-color: #316EF5;
}

.pc-profile__btn--ghost:hover {
    background: #F2F6FF;
}
</style>

<style>
.pc-change-password-dialog .t-dialog {
    border-radius: 16px;
    overflow: hidden;
}

.pc-change-password-dialog .t-dialog__header,
.pc-change-password-dialog .t-dialog__header-content {
    text-align: left;
    justify-content: flex-start;
}
</style>
