<template>
    <uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.7)">
        <view class="pop-content relative"
            :style="{ background: `top / contain no-repeat ${themeStore.theme.popup.bgImage}` }">
            <theme-image src="@/static/rank/image_phbsy_x.png" class="icon-close" @click.stop="close" />
            <theme-image src="@/static/deposit_continue/image_cdbbanner.png" mode="aspectFit" class="banner-img" />
            <view class="bonus-box pos-absolute" :style="{ background: themeStore.theme.activity.normalBg }">
                <view v-for="(item, index) in content" :key="index" class="bonus-box-item relative"
                    :style="{ background: `top / contain no-repeat ${popTheme.itemBg}` }" @click="activeIndex = index">
                    <theme-image v-if="activeIndex === index" src="@/static/deposit_continue/gouxuan.png"
                        class="bonus-box-item-img" />
                    <view class="dot-box relative" :style="{ background: `top / contain no-repeat ${popTheme.dotBg}` }">
                        <text class="label" :style="{ color: popTheme.subLabel }">Extra</text>
                        <text class="add-percent" :style="{ color: popTheme.light }">+{{ calPercent(item) }}%</text>
                    </view>
                    <view class="day-left flex justify-between items-center">
                        <view class="days-row ">
                            <view class="day-label" :style="{ color: popTheme.title }">Day 1</view>
                            <view class="day-bonus plus" :style="{ color: popTheme.title2 }">{{ item.rechargeAmount }}
                            </view>
                        </view>
                        <view v-for="(d, index2) in item.give" :key="index2" class="days-row">
                            <view class="day-label" :style="{ color: popTheme.title }">{{ d.name }}</view>
                            <view v-if="index2 !== item.give.length - 1" class="day-bonus plus"
                                :style="{ color: popTheme.title2 }">{{ d.giveAmount }}
                            </view>
                            <view v-else class="day-bonus equal" :style="{ color: popTheme.title2 }">{{ d.giveAmount }}
                            </view>
                        </view>
                        <view class="bonus-total">
                            <view class="day-label" :style="{ color: popTheme.title }">Total</view>
                            <view class="day-bonus" :style="{ color: popTheme.title2 }">₹{{ calTotal(item.rechargeAmount,
                                item.give) }}</view>
                        </view>
                    </view>
                    <view class="day-right flex-center" :style="{ color: popTheme.bold }">₹{{ item.rechargeAmount }}
                    </view>
                </view>
            </view>
            <!-- <view class="other-amount" :style="{ color: themeStore.theme.popup.textLink }">Other amount</view> -->
            <theme-image src="@/static/deposit_continue/btn_addcash.png" class="btn-add-img"
                @click.stop="handleDeposit"></theme-image>
            <!-- <view class="close-text" :style="{ color: themeStore.theme.light }" @click.stop="close">
                {{ $t("promo.popup.tapClose") }}</view> -->
        </view>
    </uni-popup>
</template>
<script setup>
import { computed, ref } from 'vue'
import { useThemeStore } from '@/store/useThemeStore';
import { usePromoStore } from '@/store/usePromoStore';
import { formatNum } from '@/module/utils/util';
import toast from '@/module/toast/toast';
import { createRechargeApi } from '@/api/promo';
import { openUrl } from '@/module/utils/openUrl';

const popup = ref(null)
const themeStore = useThemeStore()
const emit = defineEmits(['close'])
const popTheme = computed(() => themeStore.theme.popup)
const activeIndex = ref(0)
const promoStore = usePromoStore()
const content = computed(() => {
    return promoStore.rechargeContent || []
})
console.log("content: ", content.value);
const handleDeposit = async () => {
    toast.showLoading('Loading')
    try {
        const amount = content.value[activeIndex.value].rechargeAmount
        const { data } = await createRechargeApi({ amount })
        uni.setStorageSync('rechargeAmount', amount)
        openUrl(data.url)
        toast.hideLoading()
    } catch (error) {
        console.log("deposit error: ", error);

    } finally {
        toast.hideLoading()
    }
}
const calTotal = (d1, list) => {
    return list.reduce((total, item) => {
        return total + item.giveAmount
    }, 0) + d1
}
const calPercent = (item) => {
    const totalBonus = item.give.reduce((total, item) => {
        return total + item.giveAmount
    }, 0)
    return formatNum(totalBonus / item.rechargeAmount * 100, 1)
}
function open() {
    popup.value.open()
}
function close() {
    popup.value.close()
    emit('close')
}
defineExpose({
    open,
    close
})
</script>
<style lang="scss">
.pop-content {
    width: 701rpx;
    height: 1195rpx;

    .icon-close{
        position: absolute;
        top: 120rpx;
        right: 20rpx;
        width: 50rpx;
        height: 50rpx;
        z-index: 100;
    }

    .banner-img {
        position: absolute;
        top: 160rpx;
        left: 34rpx;
        width: 626rpx;
        height: 122rpx;
        z-index: 10;
    }

    .bonus-box {
        width: 620rpx;
        height: 718rpx;
        left: 38rpx;
        top: 296rpx;
        border-radius: 10rpx;
        overflow-y: auto;
        z-index: 10;
        padding: 14rpx;

        .bonus-box-item {
            width: 100%;
            height: 118rpx;

            .dot-box {
                position: absolute;
                top: 2px;
                right: 2px;
                width: 78rpx;
                height: 44rpx;

                .label {
                    position: absolute;
                    left: 12rpx;
                    top: 0;
                    font-weight: 400;
                    font-size: 18rpx;
                    color: #FFFDC6;
                    line-height: 18rpx;
                }

                .add-percent {
                    position: absolute;
                    bottom: 6rpx;
                    left: 50%;
                    transform: translateX(-50%);
                    font-family: Roboto;
                    font-weight: bold;
                    font-size: 18rpx;
                    color: #FFFFFF;
                    line-height: 18rpx;
                }
            }

            .bonus-box-item-img {
                position: absolute;
                top: -2px;
                left: -2px;
                width: calc(100% + 4px);
                height: 100%;
            }

            .day-left {
                width: 490rpx;
                height: 100%;
                padding: 12rpx;
            }

            .day-right {
                width: 114rpx;
                height: 114rpx;
                position: absolute;
                top: 10rpx;
                right: 0;
                font-family: Roboto;
                font-weight: bold;
                font-size: 24rpx;
            }

            .day-left {
                flex: 1;
            }

            .day-label {
                font-family: Roboto;
                font-weight: 400;
                font-size: 20rpx;
                color: #813F0A;
                text-align: center;
            }

            .day-bonus {
                font-family: Roboto;
                font-weight: bold;
                font-size: 22rpx;
                color: #582204;
                margin-top: 10rpx;
                text-align: center;
            }

            .plus {
                position: relative;

                &::after {
                    content: '+';
                    position: absolute;
                    right: -24rpx;
                    bottom: 2rpx;
                    color: #582204;
                    font-weight: bold;
                }
            }

            .equal {
                position: relative;

                &::after {
                    content: '=';
                    position: absolute;
                    right: -22rpx;
                    bottom: 2rpx;
                    color: #582204;
                    font-weight: bold;
                }
            }
        }
    }

    .other-amount {
        position: absolute;
        bottom: 184rpx;
        left: 50%;
        transform: translateX(-50%);
        font-family: Roboto;
        font-weight: 400;
        font-size: 25rpx;
        color: #FFE76A;
        text-decoration-line: underline;
    }

    .btn-add-img {
        position: absolute;
        bottom: 30rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 338rpx;
        height: 81rpx;
        z-index: 10;
    }

    .close-text {
        position: absolute;
        bottom: -60rpx;
        left: 50%;
        transform: translateX(-50%);
        font-family: Roboto;
        font-weight: bold;
        font-size: 27rpx;
        text-decoration: underline;
    }
}
</style>