<template>
    <uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.7)">
        <view class="rank-his-pop relative"
            :style="{ 'border-color': themeStore.theme.promo.rank.borderColor, background: themeStore.theme.promo.rank.historyBgColor }">
            <theme-image src="@/static/rank/image_history_X.png" class="close-image" @click="closePopup"></theme-image>
            <view class="rank-his-pop-content-title w-full flex-center" :style="{ color: themeStore.theme.light }">
                {{ $t('promo.pop.title') }}
            </view>
            <view class="rank-top w-full flex justify-center items-end"
                :style="{ background: `top / cover no-repeat ${themeStore.theme.promo.rank.historyTitleImg}` }">
                <text class="rank-top-amount" :style="{ color: themeStore.theme.promo.rank.borderColor }">₹{{ totalBet
                    }}</text>
            </view>
            <view class="rank-his-pop-content-list">
                <view class="table-tab flex justify-between items-center">
                    <view class="tab-item"
                        :style="{ color: active === 'day' ? themeStore.theme.promo.rank.tabActive : themeStore.theme.promo.rank.tabColor }"
                        @click="betDateChange('day')">{{ $t('promo.pop.lastDay') }}</view>
                    <view class="tab-item"
                        :style="{ color: active === 'week' ? themeStore.theme.promo.rank.tabActive : themeStore.theme.promo.rank.tabColor }"
                        @click="betDateChange('week')">{{ $t('promo.pop.lastWeek') }}</view>
                    <view class="tab-item"
                        :style="{ color: active === 'month' ? themeStore.theme.promo.rank.tabActive : themeStore.theme.promo.rank.tabColor }"
                        @click="betDateChange('month')">{{ $t('promo.pop.lastMonth') }}</view>
                </view>
                <view class="table-head w-full flex items-center justify-between"
                    :style="{ color: themeStore.theme.promo.rank.tabColor }">
                    <view class="table-head-item flex-1 flex-center">{{ $t('promo.pop.columnRank') }}</view>
                    <view class="table-head-item flex-1 flex-center">{{ $t('promo.pop.columnPhone') }}</view>
                    <view class="table-head-item flex-1 flex-center">{{ $t('promo.pop.columnBet') }}</view>
                    <view class="table-head-item flex-1 flex-center">{{ $t('promo.pop.columnReward') }}</view>
                </view>
                <view class="list-wrap">
                    <template v-for="(item, index) in rankHis">
                        <template v-if="index === 0">
                            <view :key="item.rank" class="table-row w-full flex items-center justify-between"
                                :style="{ color: themeStore.theme.promo.rank.tabColor, background: themeStore.theme.promo.rank.firstRowBgColor }">
                                <view class="table-column-item flex-1 flex-center">
                                    <theme-image src="@/static/rank/pm1.png" class="rank-image"></theme-image>
                                </view>
                                <view class="table-column-item flex-1 flex-center">{{ encipherPhone(item.mobile) }}
                                </view>
                                <view class="table-column-item flex-1 flex-center">₹{{ encipherAmount(item.betAmount, 3)
                                    }}
                                </view>
                                <view class="table-column-item flex-1 flex-center"
                                    :style="{ color: themeStore.theme.promo.rank.borderColor }">
                                    ₹{{ encipherAmount(item.rewardAmount, 3) }}</view>
                            </view>
                        </template>
                        <template v-else-if="index === 1">
                            <view :key="item.rank" class="table-row w-full flex items-center justify-between"
                                :style="{ color: themeStore.theme.promo.rank.tabColor, background: themeStore.theme.promo.rank.secondRowBgColor }">
                                <view class="table-column-item flex-1 flex-center">
                                    <theme-image src="@/static/rank/pm2.png" class="rank-image"></theme-image>
                                </view>
                                <view class="table-column-item flex-1 flex-center">{{ encipherPhone(item.mobile) }}
                                </view>
                                <view class="table-column-item flex-1 flex-center">₹{{ encipherAmount(item.betAmount, 3)
                                    }}
                                </view>
                                <view class="table-column-item flex-1 flex-center"
                                    :style="{ color: themeStore.theme.promo.rank.borderColor }">
                                    ₹{{ encipherAmount(item.rewardAmount,3) }}</view>
                            </view>
                        </template>
                        <template v-else-if="index === 2">
                            <view :key="item.rank" class="table-row w-full flex items-center justify-between"
                                :style="{ color: themeStore.theme.promo.rank.tabColor, background: themeStore.theme.promo.rank.thirdRowBgColor }">
                                <view class="table-column-item flex-1 flex-center">
                                    <theme-image src="@/static/rank/pm3.png" class="rank-image"></theme-image>
                                </view>
                                <view class="table-column-item flex-1 flex-center">{{ encipherPhone(item.mobile) }}
                                </view>
                                <view class="table-column-item flex-1 flex-center">₹{{ encipherAmount(item.betAmount, 3)
                                    }}
                                </view>
                                <view class="table-column-item flex-1 flex-center"
                                    :style="{ color: themeStore.theme.promo.rank.borderColor }">
                                    ₹{{ encipherAmount(item.rewardAmount,3) }}</view>
                            </view>
                        </template>
                        <template v-else>
                            <view :key="item.rank" class="table-row w-full flex items-center justify-between"
                                :style="{ color: themeStore.theme.promo.rank.tabColor }">
                                <view class="table-column-item flex-1 flex-center">{{ item.rank }}</view>
                                <view class="table-column-item flex-1 flex-center">{{ encipherPhone(item.mobile) }}
                                </view>
                                <view class="table-column-item flex-1 flex-center">₹{{ encipherAmount(item.betAmount, 3)
                                    }}
                                </view>
                                <view class="table-column-item flex-1 flex-center"
                                    :style="{ color: themeStore.theme.promo.rank.borderColor }">
                                    ₹{{ encipherAmount(item.rewardAmount, 3) }}</view>
                            </view>
                        </template>
                    </template>
                </view>
            </view>
        </view>
    </uni-popup>
</template>
<script setup>
import { getBetRankDataApi } from '@/api/promo';
import { encipherPhone } from '@/module/utils/encipherPhone';
import { useThemeStore } from '@/store/useThemeStore';
import { computed, onMounted, ref } from 'vue';

const themeStore = useThemeStore()

const popup = ref(null)
const active = ref('day')
const ranks = ref({})

const totalBet = computed(() => {
    return ranks.value[active.value]?.totalBetAmount ?? 0
})
const rankHis = computed(() => {
    return ranks.value[active.value]?.ranks ?? []
})
console.log('rankHis', rankHis);

const props = defineProps({
    content: String
})

const betDateChange = (type) => {
    active.value = type
}
const open = () => {
    popup.value.open()
}
const close = () => {
    popup.value.close()
}
const closePopup = () => {
    close()
}
const calcRate = (rank) => {
    console.log('rank', rank);

    console.log('rankAwards', ranks.value[active.value]?.rankAwards);

    const idx = ranks.value[active.value]?.rankAwards?.findIndex((item) => {
        return rank >= item[0] && rank <= item[1];
    })
    if (idx > -1) {
        return ranks.value[active.value]?.rankAwards[idx][2]
    }
    return 0
}
const encipherAmount = (value, type = 0) => {
    if (value != "") {
        if (type == 0) {
            return Math.floor(value).toString().replace(/\d(?=(\d{3})+\.)/g, "$&,");
        }
        if (type == 1) {
            return (Math.floor(value * 100) / 100).toFixed(2);
        }
        if (type == 3) {
            return (isNaN(value) ? 0 : value).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,");
        }
    }
    return "";
};
const getBetData = async () => {
    const { data } = await getBetRankDataApi({ rankOption: -1 })
    if (data?.ranks) {
        ranks.value = data.ranks.reduce((acc, cur) => {
            acc[cur.rankType] = cur
            return acc
        }, {})
        console.log('hist ranks', ranks.value);

        if (props.content && props.content != '') {
            let content = JSON.parse(props.content)
            console.log('content', content);

            content.ranks.forEach((item) => {
                ranks.value[item.type].rankAwards = item.rank_awards
                ranks.value[item.type].rankShow = item?.rank_show ?? 50
                ranks.value[item.type].rankShowMax = item?.rank_show_max ?? 1000
                ranks.value[item.type].betRate = item?.bet_rate ?? 0
            })
            console.log('ranksVal', ranks.value);
        }
    }
}
onMounted(() => {
    getBetData()
})
defineExpose({
    open,
    close
})
</script>
<style lang="scss" scoped>
.rank-his-pop {
    width: 652rpx;
    height: 974rpx;
    border-radius: 18rpx;
    border: 2px solid;

    .close-image {
        width: 24rpx;
        height: 24rpx;
        position: absolute;
        right: 30rpx;
        top: 30rpx;
    }

    .rank-his-pop-content-title {
        height: 94rpx;
    }

    .rank-top {
        height: 106rpx;

        .rank-top-amount {
            font-family: Roboto;
            font-weight: 400;
            font-size: 52rpx;
        }
    }

    .rank-his-pop-content-list {
        width: 100%;

        .table-tab {
            width: 100%;
            height: 74rpx;
            padding: 0 54rpx;

            .tab-item {
                font-family: Roboto;
                font-weight: 400;
                font-size: 25rpx;
                color: #DE848D;
            }
        }

        .table-head {
            height: 50rpx;
            font-family: Roboto;
            font-weight: 400;
            font-size: 21rpx;
        }
        .list-wrap{
            height: 640rpx;
            width: 100%;
            overflow-y: auto;
        }
        .table-row {
            height: 42rpx;
            font-family: Roboto;
            font-weight: 400;
            font-size: 21rpx;

            .rank-image {
                width: 40rpx;
                height: 32rpx;
            }
        }
    }
}
</style>