<template>
    <div class="page">
        <div class="search" @click="showDatePicker = true">
            <icon name="cwg-search" :size="24" />
            <span class="date-str">{{ date }}</span>
            <icon name="cwg-calendar" :size="24" />
        </div>
        <div class="recharge" v-if="recharge.length > 0">
            <div v-for="i in recharge" :key="i.id" class="transaction" @click="goToTransactionDetail(i)">
                <div class="trans-icon">
                    <div class="trans-icon-inner">$</div>
                </div>
                <div class="trans-left">
                    <div class="trans-type">{{ i.typeDesc }}</div>
                    <div class="trans-desc">{{ statusMap[i.status] }}</div>
                </div>
                <div class="trans-right">
                    <div class="trans-amount">{{ i.amount }} {{ i.currency }}</div>
                    <div class="trans-date">{{ i.time }}</div>
                </div>
            </div>
        </div>
        <div class="recharge" v-else>
            <EmptyState :title="t('empty-state.t2')" :text="t('empty-state.c2')" />
        </div>

        <van-calendar
            v-model:show="showDatePicker"
            :min-date="minDate"
            :title="t('cards.selectDateRange')"
            :subtitle="t('cards.selectDate')"
            :max-date="maxDate"
            :show-mark="false"
            color="var(--main-yellow)"
            type="range"
            :show-confirm="false"
            @cancel="showDatePicker = false"
            :formatter="formatter"
            @confirm="onConfirmStart"
        />
    </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import dayjs from 'dayjs'
import { ucardApi } from '@/api/ucard'
import { showToast } from 'vant'
const router = useRouter()
const { t } = useI18n()
interface Transaction {
    id: string
    typeDesc: string
    remark: string
    amount: number
    currency: string
    status: string
    time: string
}
const statusMap = {
    '1': t('card-recharge.rechargeSuccess'),
    '2': t('card-recharge.rechargeFailed'),
    '3': t('card-recharge.rechargePending'),
}
const route = useRoute()
const { cardNo } = route.query as { cardNo: string }
const recharge = ref<Transaction[]>([])

const showDatePicker = ref(false)
const dateRange = ref<[string, string] | undefined>(undefined)
dateRange.value = ['', '']
const date = ref('YYYY - MM - DD')
const minDate = new Date(new Date().getFullYear() - 10, 0, 1)
const maxDate = new Date(new Date().getFullYear() + 10, 0, 1)
const onConfirmStart = (value: [string, string]) => {
    dateRange.value = ['', '']
    if (value && value.length === 2) {
        dateRange.value = value
        date.value = dayjs(dateRange.value?.[0]).format('YYYY-MM-DD') + '~' + dayjs(dateRange.value?.[1]).format('YYYY-MM-DD')
    } else {
        date.value = 'YYYY - MM - DD'
    }
    showDatePicker.value = false

    getRechargeList()
}
const formatter = (day: any) => {
    if (day.type === 'start') {
        day.bottomInfo = t('cards.start')
    } else if (day.type === 'end') {
        day.bottomInfo = t('cards.end')
    } else {
        day.bottomInfo = ''
    }
    return day
}
// 获取充值记录
async function getRechargeList() {
    try {
        const res = await ucardApi.rechargeList({
            cardNo: cardNo,
            beginDate: dateRange.value?.[0] ? dayjs(dateRange.value?.[0]).format('YYYY-MM-DD') : undefined,
            endDate: dateRange.value?.[1] ? dayjs(dateRange.value?.[1]).format('YYYY-MM-DD') : undefined,
            page: { current: 1, row: 10 },
        })
        if (res.code === 200 && res.data) {
            recharge.value = res.data
        }
    } catch (error) {
        showToast(error as string)
    }
}

const goToTransactionDetail = (i: TransactionInfo) => {
    router.push({
        path: '/recharge/record/detail',
        query: {
            orderNo: i.orderNo,
        },
    })
}

onMounted(() => {
    getRechargeList()
})
</script>

<style scoped lang="scss">
.recharge {
    border-radius: 16px;
    margin-bottom: 16px;
    padding: 16px 12px;
    width: 100%;
}
.search {
    padding: 0 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1 0 0;
    border-radius: 30px;
    border: 1px solid var(--interactive-secondary-default, #868685);
    color: #8e8a8a;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: 0.08px;
    height: 40px;
    .date-str {
        flex: 1;
        margin-left: 8px;
    }
}
.transaction {
    display: flex;
    align-items: center;
    padding: 12px 0;
    font-size: 16px;
}

.transaction:last-child {
    border-bottom: none;
}
.trans-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(212, 206, 206, 0.24);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}
.trans-icon-inner {
    width: 24px;
    height: 24px;
    color: #1a1a1a;
    font-size: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trans-left {
    flex: 1;
    min-width: 0;
}
.trans-right {
    text-align: right;
    margin-left: 12px;
}
.trans-type {
    color: #1a1a1a;
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 4px;
}
.trans-desc {
    color: #474747;
    font-size: 13px;
}
.trans-amount {
    font-size: 16px;
    line-height: 30px;
    color: #1a1a1a;
    margin-bottom: 4px;
}
.trans-date {
    color: #474747;
    font-size: 13px;
}
</style>
