<script setup>
import { ref, computed, onMounted } from 'vue';
import { useThemeStore } from '@/store/useThemeStore';
import { useAppStore } from '@/store/useAppStore';
import { getSpinRecordApi } from '@/api/promo';
import { formatDate } from '@/module/utils/util'
import NoData from "@/pages/promo/components/NoData.vue";

const themeStore = useThemeStore();
const appStore = useAppStore();
const dw = computed(() => themeStore.theme.depositWheel);
const currency = computed(() => import.meta.env.VITE_CURRENCY_SYMBOL);
const totalRewards = ref(0)
const records = ref([])
const typeEnum = ['Amount', 'Sliver Spin', 'Gold Spin', 'Diamond Spin', 'Supreme Spin'];

const getRecord = async () => {
    const { data } = await getSpinRecordApi();
    console.log("getSpinRecordApi:", data);
    if (data) {
        const { totalAmount, list } = data
        totalRewards.value = totalAmount ?? 0
        if (list && list?.length > 0) {
            records.value = list
        }
    }
}

onMounted(() => {
    getRecord();
})
</script>
<template>
    <mobile-custom-layout :bgColor="dw.bgColor" :headBgColor="themeStore.theme.bgColor" :title="$t('redeposit.history')"
        :paddingTop="appStore.headerStyle.height">
        <view class="total-reward flex flex-column items-center justify-center" :style="{ background: dw.rewardBg }">
            <view class="label" :style="{ color: dw.light }">{{ $t('redeposit.rewards') }}</view>
            <view class="amout" :style="{ color: dw.amount }">{{ currency }} {{ totalRewards }}</view>
        </view>
        <view class="record-list" :style="{ background: dw.recordBgLinear }">
            <view class="w-full flex items-center record-item">
                <view class="rec-row table-head flex-center rec-date" :style="{ color: dw.label }">Date</view>
                <view class="rec-row table-head flex-center flex-1 rec-type" :style="{ color: dw.label }">Type</view>
                <view class="rec-row table-head flex-center rec-reward" :style="{ color: dw.label }">Rewards</view>
            </view>
            <view v-for="item in records" :key="item.id" class="w-full flex items-center record-item"
                :style="{ color: dw.light }">
                <view class="rec-row flex-center rec-date">{{ formatDate(item.createTime) }}</view>
                <view class="rec-row flex-center flex-1 rec-type">{{ typeEnum[item.type] }}</view>
                <view class="rec-row flex-center rec-reward" :style="{ color: dw.amount }">{{ item.amount }}</view>
            </view>
        </view>
        <view v-if="records.length == 0" class="width100%; height: 400rpx;">
                <NoData :text="$t('redeposit.noRecord')"></NoData>
            </view>
        <empty-hold height="1px"></empty-hold>
    </mobile-custom-layout>
</template>
<style lang="scss" scoped>
.total-reward {
    width: 708rpx;
    height: 215rpx;
    margin: 0 auto;
    margin-top: 14rpx;

    .label {
        font-family: Roboto;
        font-weight: 400;
        font-size: 33rpx;
        color: #FFFFFF;
    }

    .amout {
        font-family: Roboto;
        font-weight: bold;
        font-size: 50rpx;
        color: #FFCE18;
    }
}

.record-list {
    width: 708rpx;
    border-radius: 13rpx;
    margin: 0 auto;
    margin-top: 21rpx;

    .record-item {
        height: 62rpx;
        border-bottom: 1px solid #8E281C;

        &:last-child {
            border-bottom: none;
        }

        .rec-row {
            border-right: 1px solid #8E281C;
            height: 100%;
            font-family: Roboto;
            font-weight: 400;
            font-size: 25rpx;
            color: #FFFFFF;

            &:last-child {
                border-right: none;
            }
        }

        .table-head {
            font-family: Roboto;
            font-weight: 400;
            font-size: 27rpx;
            color: #EF6D5F;
        }

        .rec-date,
        .rec-reward {
            width: 200rpx;
        }
    }
}
</style>