<template>
    <div class="page page-shadow">
        <div class="tips">You'll receive a card password reset link via your registered email.</div>

        <div class="g">
            <img src="../assets/images/apply-record-1.png" alt="" />
            <div class="g-l">
                <div class="g-item">
                    <div class="label">Visa Virtual Card (Precious Card)</div>
                </div>
                <div class="g-item">
                    <div class="label">{{ cardNo }}</div>
                </div>
            </div>
        </div>
        <remit-input
            v-model:value="kycForm.signaturePhoto"
            type="upload"
            fkey="signaturePhoto"
            :label="t('find-password.desc')"
            :isUploadD="true"
            :required="true"
            accept="image/png, image/jpeg, image/jpg"
            @change="handleChange"
        >
            <div class="cwg-upload">
                <van-icon name="back-top" />
                <p class="name">{{t('improve-info.p28_1')}}{{ t('find-password.desc') }}</p>
                    <p class="back">{{t('find-password.p1')}}</p>
            </div>
        </remit-input>
        <div class="fixed-btn">
            <div class="cwg-button">
                <van-button type="primary" block @click="handleNext1">{{ t('find-password.nextStep') }}</van-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { showToast } from 'vant'
import { ucardApi } from '@/api/ucard'
import useUserStore from '@/stores/use-user-store'
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const route = useRoute()
const { t } = useI18n()
const router = useRouter()
const kycForm = ref({
    signaturePhoto: '',
    data: '',
    uniqueId: '',
})
const { cardNo, cardTypeId } = route.query as { cardNo: string; cardTypeId: string }
const formData = ref<typeof kycForm.value>({ cardNo: cardNo, cardTypeId: cardTypeId } as any)

const handleNext1 = async () => {
    console.log(formData.value)
    if (formData.value.signaturePhoto) {
        formData.value.uniqueId = userInfo.value?.customInfo?.uniqueId
        const res = await ucardApi.ucardResetPassword(formData.value as any)
        if (res.code === 200) {
            showToast(t('find-password.success'))
            router.push('/cards')
        } else {
            showToast(t('find-password.error'))
        }
    }
}
const handleChange = (value: any) => {
    formData.value = { ...formData.value, [value.key]: value.value }
}
</script>

<style scoped lang="scss">
.tips {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #474747;
    padding-bottom: 24px;
}

:deep(.van-uploader) {
    width: 100%;
    .van-uploader__wrapper {
        width: 100%;
        display: block;
    }
}
::v-deep(.van-uploader__preview) {
    width: 100% !important;
    height: 160px !important;
    border: 1px dashed #beb6b6;
    border-radius: 24px;
    overflow: hidden;
    .van-uploader__preview-image {
        width: 100%;
        height: 100%;
        .van-image__img {
            object-fit: contain;
        }
    }
    .van-uploader__preview-delete {
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        height: 30px;
        border-radius: 0 24px 0 0;
        i {
            text-align: center;
            line-height: 30px;
            font-size: 30px;
        }
    }
}
</style>
