<template>
    <uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.7)">
        <view class="recharge-content flex-center relative">
            <view class="recharge-img-wrap relative">
                <theme-image src="@/static/frecharge/image_cztc_X.png" class="close-btn" mode="aspectFit"
                    @click.stop="close"></theme-image>
                <theme-image src="@/static/frecharge/image_czdk2.png" class="pop-main-img"
                    mode="aspectFit"></theme-image>
                <view class="charge-box">
                    <view v-for="(item, index) in awardList" :key="index" class="water-back-item flex items-center justify-between">
                        <view class="back-left flex items-center" :style="{color: themeStore.theme.deposit.depCorlor}">
                            <theme-image src="@/static/frecharge/icon_coins01.png" mode="aspectFit"
                                class="coin-img"></theme-image>
                            <text style="line-height: 32rpx; margin-left: 12rpx;">≥{{ item.amount }}</text>
                        </view>
                        <view class="back-right flex items-center" :style="{color: themeStore.theme.deposit.awarColor}">
                            <theme-image src="@/static/frecharge/icon_coins02.png" mode="aspectFit"
                                class="coin2-img"></theme-image>
                            <text style="line-height: 32rpx;margin-left: 12rpx;">{{ item.award }}</text>
                        </view>
                    </view>
                </view>
                <theme-image src="@/static/frecharge/btn_deposit.png" class="pop-deposit-img" mode="aspectFit"
                    @click.stop="toDeposit"></theme-image>
            </view>
            <view class="show-dayonce flex items-center">
                <view class="check-box relative" @click="onChecked">
                    <theme-image src="@/static/frecharge/image_gx.png" mode="aspectFit" class="check-bg"></theme-image>
                    <theme-image v-if="showToday" src="@/static/frecharge/image_gou.png" class="checked-img"
                        mode="aspectFit"></theme-image>
                </view>
                <view class="tips" :style="{ color: themeStore.theme.text.normal }">{{ $t('home.popTip') }}</view>
            </view>
            <theme-image src="@/static/frecharge/image_djs.png" class="count-down-img" mode="aspectFit"></theme-image>
            <view class="count-down">{{ countDownStr }}</view>
        </view>
    </uni-popup>
</template>
<script setup>
import { useDepositStore } from '@/store/useDepositStore';
import { useThemeStore } from '@/store/useThemeStore';
import { computed, onMounted, ref } from 'vue';
const popup = ref(null)

const countDown = ref(10 * 60 * 60)
const countDownStr = ref('')
const timer = ref(null)
const themeStore = useThemeStore()
const depositStore = useDepositStore()
defineProps({
    showToday: {
        type: Boolean,
        default: false
    }
})
const awardList = computed(() => {
    return depositStore.awardList   
})
const emit = defineEmits(['close', 'checked'])
const onChecked = () => {
    emit('checked')
}
const open = () => {
    popup.value.open()
}
const close = () => {
    uni.setStorageSync('hour', countDown.value)
    clearInterval(timer.value)
    popup.value.close()
    emit('close')
}
const toDeposit = () => {
    close()
    uni.navigateTo({
        url: '/pages/wallet/Deposit'
    })
}
const addZero = (num) => {
    return num < 10 ? '0' + num : num
}
const genCountDown = () => {
    const seconds = countDown.value - 1
    const hours = Math.floor(seconds / 3600)
    const minutes = Math.floor((seconds - hours * 3600) / 60)
    const second = seconds - hours * 3600 - minutes * 60
    countDownStr.value = `${addZero(hours)} : ${addZero(minutes)} : ${addZero(second)}`
    countDown.value = seconds
    if (seconds <= 0) {
        clearInterval(timer.value)
        uni.setStorageSync('hour', 10 * 60 * 60)
        close()
        return
    }
}
defineExpose({
    open,
    close
})
onMounted(() => {
    const hour = uni.getStorageSync('hour')
    if (hour) {
        countDown.value = hour
    } else {
        uni.setStorageSync('hour', countDown.value)
    }
    timer.value = setInterval(() => {
        genCountDown()
    }, 1000)
})
</script>
<style scoped lang="scss">
.recharge-content {
    flex-direction: column;

    .charge-box {
        position: absolute;
        bottom: 110rpx;
        width: 470rpx;
        height: 452rpx;
        left: 50%;
        transform: translateX(-50%);

        .water-back-item {
            position: relative;
            font-family: Roboto;
            font-weight: 400;
            font-size: 26rpx;
            padding: 4rpx 30rpx;

            &::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 1px;
                transform: scaleY(0.5);
                background-color: #A22255;
            }

            .coin-img {
                width: 28rpx;
                height: 32rpx;
            }

            .coin2-img {
                width: 52rpx;
                height: 42rpx;
            }
            .back-left{
                width: 150rpx;
            }
            .back-right{
                width: 120rpx;
            }
        }
    }

    .pop-main-img {
        width: 573rpx;
        height: 816rpx;
    }

    .close-btn {
        position: absolute;
        top: -50rpx;
        right: 0;
        z-index: 100;
        width: 34rpx;
        height: 34rpx;
    }

    .pop-deposit-img {
        position: absolute;
        bottom: 30rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 323rpx;
        height: 63rpx;
    }

    .show-dayonce {
        margin-top: 34rpx;

        .check-box {
            width: 28rpx;
            height: 28rpx;
            margin-right: 4rpx;
            display: flex;

            .check-bg {
                width: 28rpx;
                height: 28rpx;
            }

            .checked-img {
                position: absolute;
                top: 0;
                left: 0;
                width: 26rpx;
                height: 26rpx;
            }
        }

        .tips {
            font-size: 28rpx;
        }
    }

    .count-down-img {
        margin-top: 20rpx;
        width: 300rpx;
        height: 23rpx;
    }

    .count-down {
        margin-top: 24rpx;
        font-family: Bahnschrift;
        font-weight: 400;
        font-size: 50rpx;
        color: #F5E74C;
    }
}
</style>