<script setup>
import { ref, computed } from 'vue'
import { useThemeStore } from '@/store/useThemeStore'
import { usePromoStore } from '@/store/usePromoStore'
import { openWeb } from '@/module/utils/openUrl'
import config from '@/config/global.config.js'

const promoStore = usePromoStore()
const themeStore = useThemeStore()
const popup = ref(null)
const emit = defineEmits(['close'])
const tgLink = computed(() => {
    const idx = promoStore.promoList.findIndex(item => item.jumpUrl === 'module:lottery')
    if (idx > -1) {
        return promoStore.promoList[idx]?.content?.tgLink
    }
    return ''
})
const popImg = computed(() => {
    return config.appImageStartPrefix + '/zptc.png'
})
const open = () => {
    popup.value.open()
}
const close = () => {
    popup.value.close()
    emit('close')
}
const toWheel = () => {
    uni.navigateTo({
        url: '/pages/activity/Activity'
    })
}
const toTg = () => {
    if (tgLink.value) {
        openWeb(tgLink.value)
    }
}

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="pop-content relative">
            <theme-image src="@/static/deposit_wheel/image_x.png" class="pop-close" @click.stop="close"></theme-image>
            <theme-image :src="popImg" class="pop-image" mode="widthFix"></theme-image>
            <view class="btns flex justify-between items-center">
                <view class="flex-center btn btn-wheel" @click.stop="toWheel"
                    :style="{ background: themeStore.theme.popup.btnImgBg, color: themeStore.theme.popup.textColor }">Go
                </view>
                <view class="flex-center btn btn-tg" @click.stop="toTg"
                    :style="{ background: themeStore.theme.popup.btnImgBg, color: themeStore.theme.popup.textColor }">
                    Telegram
                </view>
            </view>
        </view>
    </uni-popup>
</template>
<style scoped lang="scss">
.pop-content {
    width: 592rpx;

    .pop-image {
        width: 592rpx;
    //    height: 686rpx;
    }

    .pop-close {
        position: absolute;
        top: 0;
        right: 0;
        width: 30rpx;
        height: 30rpx;
        z-index: 99;
    }

    .btns {
        margin-top: 50rpx;

        .btn {
            width: 264rpx;
            height: 70rpx;
            font-family: Roboto;
            font-weight: 400;
            font-size: 36rpx;
            color: #7B0810;
        }
    }
}
</style>