<template>
    <div class="page page-shadow">
        <div class="apply-card-footer">
            <div v-if="cardList.length > 0">
                <div class="kyc-list">
                    <div class="kyc-item" v-for="item in cardList" :key="item.id">
                        <div class="g">
                            <img src="../assets/images/apply-record-1.png" alt="" />
                            <div class="g-l">
                                <div class="g-item">
                                    <div class="label a1 ellipsis">{{ item.cardName }}</div>
                                    <div class="status" v-if="item.kycStatus != 2" :class="statusClass(item.kycStatus)">{{ statusMap[item.kycStatus] }}</div>
                                    <div class="status" v-else :class="statusClass1(item.applyStatus)">{{ applyStatusMap[item.applyStatus] }}</div>
                                </div>
                                <div class="g-item">
                                    <div class="label a2">{{ item?.cardNo?.replace(/(\d{4})\d+(\d{4})/, '$1 **** **** $2') }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="g">
                            <div class="g-l g-l1">
                                <div class="g-item">
                                    <div class="label a3">{{ t('cards.p12') }}</div>
                                    <div class="status-views" @click="handleApply(1, item)">{{ t('cards.p11') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <EmptyState v-if="cardList.length === 0" :title="t('empty-state.t3')" :text="t('empty-state.c3')" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import EmptyState from '@/components/EmptyState.vue'
import { ucardApi } from '@/api/ucard'
import { useI18n } from 'vue-i18n'
import useUserStore from '@/stores/use-user-store'
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const router = useRouter()
const { t } = useI18n()
import type { CardInfo } from '@/api/ucard'

const statusMap: Record<string, string> = {
    null: t('kyc.statusDesc'),
    '-1': t('kyc.statusDesc'),
    '1': t('kyc.statusDesc2'),
    '2': t('kyc.statusDesc3'),
    '3': t('kyc.statusDesc4'),
}
const applyStatusMap: Record<string, string> = {
    '0': t('apply-record-detail.p8'),
    '1': t('apply-record-detail.p6'),
}
function statusClass(status: number) {
    switch (status) {
        case 2:
            return 'status-default status-success'
        case 3:
            return 'status-default status-error'
        default:
            return 'status-default'
    }
}
function statusClass1(status: number) {
    switch (status) {
        case 1:
            return 'status-default status-success'
        default:
            return 'status-default'
    }
}

const globalStore = useGlobalStore()
const cardList = ref<CardInfo[]>([])

const getCardList = async () => {
    globalStore.setFullScreenLoading(true)
    try {
        const [response1, response2] = await Promise.all([
            ucardApi.cardList({ page: { current: 1, row: 10 } }),
            ucardApi.cardKycTypesList({ page: { current: 1, row: 10 } }),
        ])

        const mergedMap = new Map()

        let [data1, data2] = await Promise.all([response1.data, response2.data])
        if (data1.length > 0) {
            data1.forEach((item: any) => {
                mergedMap.set(item.cardTypeId, { ...item })
            })
        }
        if (data2.length > 0) {
            data2.forEach((item: any) => {
                const existing = mergedMap.get(item.cardTypeId) || {}
                mergedMap.set(item.cardTypeId, { ...existing, ...item })
            })
        }
        const mergedArray = Array.from(mergedMap.values())
        let a = mergedArray.map((i) => {
            if (i.cardNo) {
                i.isOk = true
            } else {
                i.isOk = false
                i.cardNo = '**** **** **** ****'
            }
            return i
        })
        // 已申请-银行卡
        let c = a.filter((i) => {
            return i.kycStatus != null
        })
        cardList.value = c
        userStore.saveUserCard(cardList.value)
    } catch (error) {
    } finally {
        globalStore.setFullScreenLoading(false)
    }
}
const ucardApply = async (item: any) => {
    const res = await ucardApi.ucardApply({
        cardTypeId: item.cardTypeId,
        uniqueId: userInfo.value.customInfo.uniqueId,
    })
    if (res.code === 200) {
        showToast(t('improve-info.kycSuccess'))
    }
}
const handleApply = (type: number, item: any) => {
    if (type == 1) {
        router.push({
            path: '/apply/record/detail',
            query: {
                cardTypeId: item.cardTypeId,
            },
        })
    } else if (type == 2) {
        ucardApply(item)
    } else if (type == 3) {
        router.push({
            path: '/kyc',
            query: {
                cardTypeId: item.cardTypeId,
                type: 0,
            },
        })
    }
}

onMounted(async () => {
    getCardList()
})
</script>

<style scoped lang="scss">
.apply-card-footer {
    width: 100%;
}

.kyc-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 12px;
    border-bottom: 1px solid var(--border, #333);
    font-size: 16px;
    background: var(--action-bg);
    border-radius: 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(214, 255, 0, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    gap: 16px;
}

.kyc-item:last-child {
    border-bottom: none;
}
.g {
    width: 100%;
    img {
        width: 56px;
        height: 35px;
    }
    .g-l {
        .g-item {
            margin-bottom: 0;
        }
        .label {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 600;
            font-size: 14px;
            line-height: 20px;
            text-align: left;
            color: #1a1a1a;
            width: 180px;
        }
        .a2 {
            color: #6b7280;
            font-size: 12px;
            line-height: 16px;
        }
        .a3 {
            color: #8e8a8a;
            font-family: Roboto;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 36px;
            letter-spacing: 0.07px;
        }
    }
    .g-l1 {
        margin-left: 0;
    }
}
</style>
