<script setup>
import { ref, computed } from 'vue'
import { useThemeStore } from '@/store/useThemeStore.js'
import { createBankruptRechargeApi } from '@/api/home'
import { openUrl } from '@/module/utils/openUrl'

const props = defineProps({
    detail: {
        type: Array,
        default: () => []
    }
})
const themeStore = useThemeStore()
const theme = computed(() => themeStore.theme.greatRebet)
const popup = ref(null)
const currency = computed(() => import.meta.env.VITE_CURRENCY_SYMBOL)
const emit = defineEmits(['close'])
const open = () => {
    popup.value.open()
}
const close = () => {
    popup.value.close()
    emit('close')
}

const createOrder = async (recharge) => {
    uni.showLoading({ title: 'Loading...' })
    try {
        const { data } = await createBankruptRechargeApi(recharge);
        console.log('createOrder', data);
        if (data?.isSuccess) {
            openUrl(data?.url);
        }
    } catch (error) {
        console.log('createOrder error', error);
    } finally {
        uni.hideLoading()
    }

}

defineExpose({
    open,
    close
})
</script>
<template>
    <uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0,0,0,0.8)">
        <view class="pop-content relative" :style="{ background: theme.popBg }">
            <theme-image src="@/static/greatRebet/image_X.png" class="close pos-absolute" @click="close"></theme-image>
            <view class="tip pos-absolute" :style="{ color: theme.tip }">{{ $t('home.greatRebet.tip') }}</view>
            <view class="bonus left pos-absolute" v-if="detail.length > 0">
                <view class="amount flex-center">
                    <!-- <theme-image src="@/static/greatRebet/lubi.png" class="icon-num"></theme-image>
                    <theme-image v-for="(item, index) in transNumtoStrArr(130)" :key="index" class="icon-num"
                        :src="`@/static/greatRebet/${item}.png`"></theme-image> -->
                    {{ currency }}{{ detail[0]['give'] + detail[0]['recharge'] }}
                </view>
                <view class="percent pos-absolute percent-left flex-center"
                    :style="{ background: theme.percentBg, color: theme.percent }">
                    <text>{{ detail[0]['rate'] }}</text>
                    <text style="font-size: 20rpx;">%</text>
                </view>
            </view>
            <view class="bonus center pos-absolute">
                <view class="amount flex-center">{{ currency }}{{ detail[1]['give'] + detail[1]['recharge'] }}</view>
                <view class="percent percent-center pos-absolute flex-center"
                    :style="{ background: theme.percentBg, color: theme.percent }">
                    <text>{{ detail[1]['rate'] }}</text>
                    <text style="font-size: 20rpx;">%</text>
                </view>
            </view>
            <view class="bonus right pos-absolute">
                <view class="amount flex-center">{{ currency }}{{ detail[2]['give'] + detail[2]['recharge'] }}</view>
                <view class="percent percent-right pos-absolute flex-center"
                    :style="{ background: theme.percentBg, color: theme.percent }">
                    <text>{{ detail[2]['rate'] }}</text>
                    <text style="font-size: 20rpx;">%</text>
                </view>
            </view>
            <view class="btn-box pos-absolute flex justify-between w-full">
                <view v-for="(item, index) in detail" :key="index" class="recharge-btn flex-center"
                    :style="{ background: theme.btnBg, color: theme.light }" @click.stop="createOrder(item.recharge)">{{
                    currency }}{{ item.recharge }}</view>
                <!-- <view class="recharge-btn flex-center" :style="{ background: theme.btnBg, color: theme.light }"
                    @click.stop="createOrder">{{ currency }}22</view>
                <view class="recharge-btn flex-center" :style="{ background: theme.btnBg, color: theme.light }"
                    @click.stop="createOrder">{{ currency }}33</view> -->
            </view>
        </view>
    </uni-popup>
</template>
<style lang="scss" scoped>
.pop-content {
    width: 737rpx;
    height: 689rpx;

    .close {
        top: 0;
        right: 60rpx;
        width: 31rpx;
        height: 31rpx;
    }

    .tip {
        top: 134rpx;
        left: 51%;
        transform: translateX(-50%);
        font-family: Roboto;
        font-weight: 400;
        font-size: 22rpx;
        color: #FFCF72;
    }

    .left {
        width: 180rpx;
        height: 180rpx;
        left: 66rpx;
        top: 250rpx;
    }

    .center {
        width: 204rpx;
        height: 240rpx;
        left: 50%;
        transform: translateX(-50%);
        top: 180rpx;
    }

    .right {
        width: 180rpx;
        height: 180rpx;
        right: 60rpx;
        top: 220rpx;
    }

    .icon-num {
        width: 22rpx;
        height: 34rpx;
    }

    .amount {
        font-family: Roboto;
        font-weight: bold;
        font-size: 40rpx;
        color: #FFFFFF;
        // text-shadow: 1rpx 1rpx 4rpx #8A0A00;
        background: linear-gradient(45deg, #F5FF60, #FFDE00, #FFFFFF 10%, #FFDE00, #F5FF60);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .percent {
        width: 79rpx;
        height: 79rpx;
        font-size: 24rpx;
        font-weight: bold;
        transform: rotate(-15deg);
    }

    .percent-left {
        top: -64rpx;
        right: -20rpx;
    }

    .percent-center {
        top: -60rpx;
        right: -30rpx;
    }

    .percent-right {
        top: -60rpx;
        right: -30rpx;
    }

    .btn-box {
        padding: 0 60rpx;
        bottom: 180rpx;

        .recharge-btn {
            width: 176rpx;
            height: 63rpx;
        }
    }
}
</style>