<template>
    <van-dialog v-model:show="show" :show-confirm-button="false" width="90%">
        <template #default>
            <div class="w-full max-w-md mx-auto bg-white p-8 rounded-lg shadow-md">
                <div class="text-center">
                    <h1 class="text-3xl font-bold mb-2 text-[#F96825]">Set Withdrawal Password</h1>
                    <p class="text-gray-600 mb-8">Please set your withdrawal password with caution for security reasons.</p>
                </div>

                <div>
                    <label for="withdrawal-password" class="block text-sm font-medium text-gray-700 mb-2">Withdrawal
                        Password:</label>
                    <input type="password" name="password" id="withdrawal-password"
                        class="block w-full rounded-md border-0 py-1.5 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-[#F96825] sm:text-sm sm:leading-6 h-12 mb-6"
                        :placeholder="t('withdrawal.enterPassword')" v-model="password" :max="10" />
                    <button class="w-full bg-[#F96825] text-white rounded-lg h-12" @click="submitPassword">Set
                        Password</button>
                </div>
            </div>
        </template>
    </van-dialog>
    <Success ref="successRef" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import {setWithdrawalPassword} from '@/api/balance'
import Success from '@/components/Success.vue';

const emits = defineEmits(['success'])

const { t } = useI18n()
const show = ref(false)
const password = ref('');
const successRef = ref()

const open = () => {
    show.value = true
}

const close = () => {
    show.value = false
}
const submitPassword = async () => {
    const data = {
        password: password.value
    }
    try {
        const res = await setWithdrawalPassword(data)
        if (res) {
            successRef.value.open()
            setTimeout(() => {
                emits('success')
            }, 2000)
        }
    }finally {
        show.value = false
    }

};
defineExpose({
    open,
    close
})
</script>