<script setup>
import { getBonusAmountApi } from '@/api/promo'
import { usePromoStore } from '@/store/usePromoStore'
import { useThemeStore } from '@/store/useThemeStore'
import { computed, getCurrentInstance, nextTick, onMounted, ref } from 'vue'
const popup = ref(null)
const promoStore = usePromoStore()
const themeStore = useThemeStore()

const rewardList = computed(() => promoStore.detailList)
const emit = defineEmits(['close'])
const popTheme = computed(() => themeStore.theme.popup)
const instance = getCurrentInstance()
function open() {
    popup.value.open()
    nextTick(() => {
        const popBox = uni.createSelectorQuery().in(instance.proxy)
        popBox.select('#claim-content').boundingClientRect((data) => {
            console.log('data: ', data);
        }).exec()
    })
    
}
function close() {
    popup.value.close()
    emit('close')
}
const handleCollect = async (item) => {
    console.log('collect')
    getBonusAmountApi({ id: item.id }).then(() => {
        const idx = promoStore.detailList.findIndex((i) => i.id === item.id)
        promoStore.detailList[idx].status = 2
    })
}
const date2Date = (dateStr) => {
    const date = new Date(dateStr)
    const year = date.getFullYear()
    const month = date.getMonth()
    const day = date.getDate()
    return new Date(year, month, day)
}
function judgeStatus(item) {
    const curDate = date2Date(Date.now())
    const endtDate = date2Date(item.giveDate)
    if (curDate < endtDate) {
        return {
            type: 'button',
            color: '#565656',
            disabled: true,
            text: 'Not Reach',
        }
    }
    if (item.status === 0) {
        return {
            type: 'button',
            color: '#565656',
            text: 'Incomplete',
            disabled: true,
        }
    }
    if (item.status === 2) {
        return {
            type: 'text',
            text: 'Collected',
            color: '#FBA7AE',
            disabled: true
        }
    }

    if (item.status === 1) {
        return {
            type: 'button',
            text: 'Collect',
            color: '#7B0810',
            disabled: false,
            onClick: () => {
                console.log('collect')
                handleCollect(item)
            }
        }
    }
    if (curDate > endtDate) {
        return {
            type: 'text',
            color: '#D51414',
            text: 'Expired',
            disabled: true,
        }
    }

}
const handleStatus = (item) => {
    if (judgeStatus(item).type === 'button' && item.status === 1) {
        judgeStatus(item).onClick()
    }
}
const calPercent = (a1, a2) => {
    if (a1 >= a2) return 100
    return Math.ceil(a1 / a2 * 100)
}
const handleSpread = (item) => {
    item.show = !item.show
}

defineExpose({
    open,
    close
})

</script>
<template>
    <uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.7)">
        <view class="claim-content relative" id="claim-content">
            <view class="head flex-center">Claim rewards</view>
            <theme-image src="@/static/rank/image_phbsy_x.png" class="icon-close" @click="close" />
            <view class="w-full act-box">
                <view class="w-full table-head flex justify-between items-center">
                    <view class="tb-head-col flex-center flex-1">Day</view>
                    <view class="tb-head-col flex-center medium-width">Rewards</view>
                    <view class="tb-head-col flex-center flex-1">Status</view>
                </view>
                <view class="day-reward" v-for="(item, index) in rewardList" :key="index">
                    <view class="flex items-center justify-between reward-label">
                        <view class="flex-center flex-1 label-text">Day {{ index + 1 }}</view>
                        <view class="flex-center medium-width amount">₹{{ item.giveAmount }}</view>
                        <view v-if="judgeStatus(item).type === 'text'" :style="{ color: judgeStatus(item).color }"
                            class=" flex-center flex-1 flex-center label-text text-status">
                            {{ judgeStatus(item).text }}
                        </view>
                        <view v-else class=" flex-center flex-1 flex-center label-text text-status" :style="{
                            color: judgeStatus(item).color,
                            background: judgeStatus(item).disabled ? popTheme.disableBtnBg : popTheme.enableBtnBg
                        }" @click="handleStatus(item)">
                            {{ judgeStatus(item).text }}
                        </view>
                    </view>
                    <view class="flex-1 conditions" v-if="item.conditions !== ''">
                        <view class="flex items-center justify-between condi-line">
                            <view class="condi-label">Conditions:</view>
                            <view class="icon-spad2" v-if="item.show" @click.stop="handleSpread(item)"></view>
                            <view class="icon-spad" v-else @click.stop="handleSpread(item)"></view>
                            <view class="condi-progress relative">
                                <view class="progress-inner"
                                    :style="{ width: calPercent(item.curBets, item.maxBets) + '%' }"></view>
                                <view class="progress-txt">{{ item.curBets }}/{{ item.maxBets }}</view>
                            </view>
                        </view>
                        <template v-if="item.show && item.conditions !== ''">
                            <!-- v-for="(condi, index2) in item.conditions" :key="index2" -->
                            <view class="condi-item">
                                Need to complete the following games including
                            </view>
                            <view class="condi-item">[<text style="color: #FDE261;">{{ item.conditions }}</text>], and
                                bet more than <text style="color: red;">{{ item.maxBets }}</text></view>
                        </template>
                    </view>
                    <!-- <view class="flex items-center justify-between reward-label"></view> -->
                </view>
            </view>
        </view>
    </uni-popup>
</template>
<style lang="scss">
.claim-content {
    width: 680rpx;
    max-height: 1250rpx;
    background-color: #450408;
    border: 4px solid #FFD77B;
    // border: 4px solid;
    // border-image: linear-gradient(0deg, #FFD679, #FFEC95, #FFD77B) 4 4;
    border-radius: 10rpx;
    padding: 0 10rpx;
    padding-bottom: 16rpx;

    .icon-close {
        position: absolute;
        top: -20rpx;
        right: -20rpx;
        width: 42rpx;
        height: 42rpx;
    }

    .head {
        height: 90rpx;
        width: 100%;
        color: white;
        font-family: Roboto;
        font-weight: bold;
        font-size: 38rpx;
    }

    .act-box {
        border: 1px solid #851E25;
        border-radius: 6rpx;
        overflow-y: auto;
        // height: calc(1250rpx - 90rpx - 16px);
    }

    .table-head {
        height: 62rpx;

        .tb-head-col {
            height: 100%;
            font-family: Roboto;
            font-weight: 400;
            font-size: 25rpx;
            color: #DE848D;
            border-right: 1px solid #851E25;

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

    .medium-width {
        width: 270rpx;
        flex-shrink: 0;
    }

    .day-reward {
        border-top: 1px solid #851E25;

        .reward-label {
            height: 84rpx;

            .text-status {
                width: 180rpx;
                height: 62rpx;
                font-family: Roboto;
                font-weight: 400;
                font-size: 24rpx;
            }
        }

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

        .amount {
            font-family: Roboto;
            font-weight: 400;
            font-size: 25rpx;
            color: #FDE261;
        }

        .conditions {
            // border-top: 1px solid #851E25;
            padding: 10rpx;

            .condi-label {
                width: 188rpx;
                font-family: Roboto;
                font-weight: 400;
                font-size: 22rpx;
                color: #FFFFFF;
            }

            .condi-progress {
                width: 188rpx;
                height: 26rpx;
                background: #000000;
                border-radius: 10rpx;
                border: 1px solid #AC2E36;

                .progress-inner {
                    // width: 108rpx;
                    height: 22rpx;
                    background: linear-gradient(0deg, #009311, #1BCE39, #009412);
                    border-radius: 10rpx;
                }

                .progress-txt {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 188rpx;
                    height: 26rpx;
                    font-family: Roboto;
                    font-weight: 400;
                    font-size: 19rpx;
                    color: #FEFEFE;
                    text-align: center;
                }
            }

            .condi-line {
                margin-bottom: 12rpx;

                .icon-spad {
                    width: 0;
                    height: 0;
                    border-bottom: 20rpx solid #FFE68E;
                    border-left: 16rpx solid transparent;
                    border-right: 16rpx solid transparent;
                }

                .icon-spad2 {
                    width: 0;
                    height: 0;
                    border-top: 20rpx solid #FFE68E;
                    border-left: 16rpx solid transparent;
                    border-right: 16rpx solid transparent;
                }
            }

            .condi-item {
                font-family: Roboto;
                font-weight: 400;
                font-size: 20rpx;
                color: #DE848D;
                line-height: 25rpx;
            }
        }
    }
}
</style>