<template>
    <uni-popup ref="awardPopup" type="center" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.7)">
        <view class="award-content">
            <view class="award-inner flex-center relative">
                <view class="award-title flex-center"
                    :style="{ 'background': `top / cover no-repeat ${themeStore.theme.activity.recordTitleBg}`, color: themeStore.theme.activity.normal }">
                    {{ $t('promo.activity.awardTitle') }}
                </view>
                <view class="award-box flex-column items-center">
                    <view class="award-gold"
                        :style="{ 'background': `top / cover no-repeat ${themeStore.theme.activity.awardBg}` }">
                        <theme-image src="@/static/spins/image_jinbi.png" class="award-gold-icon"
                            mode="aspectFit"></theme-image>
                    </view>
                    <view class="award-amount" :style="{ color: themeStore.theme.activity.normal }">
                        <text v-if="!isNaN(prizeAmount)">{{ currency}}</text> {{ prizeAmount}}
                    </view>
                </view>
                <view class="btn-ok flex-center" @click="close"
                    :style="{ 'background': `top / cover no-repeat ${themeStore.theme.activity.awardBtnBg}`, 'color': themeStore.theme.deposit.button.textColor }">
                    {{ $t('promo.activity.ok') }}</view>
            </view>
        </view>
    </uni-popup>
</template>
<script setup>
import { ref } from 'vue';
import { useThemeStore } from '@/store/useThemeStore';


const themeStore = useThemeStore()
defineProps({
    prizeAmount: {
        type: [Number, String],
        default: 0
    },
    currency: {
        type: String,
        default: '₹'
    }
})
const emit = defineEmits(['close'])
const awardPopup = ref(null)

const open = () => {
    awardPopup.value.open()
}
const close = () => {
    awardPopup.value.close()
    emit('close')
}

defineExpose({
    open,
    close
})
</script>

<style lang="scss" scoped>
.award-content {
    width: 616rpx;
    height: 482rpx;
    background: linear-gradient(90deg, #F7A421, #FDF7AB, #F57F08);
    border-radius: 19rpx;
    padding: 2px;

    .award-inner {
        width: 100%;
        height: 100%;
        background-color: #440707;
        border-radius: 19rpx;
        padding: 60rpx 30rpx;

        .award-title {
            width: 460rpx;
            height: 69rpx;
            position: absolute;
            top: -28rpx;
            left: 50%;
            transform: translateX(-50%);
            font-family: Roboto;
            font-size: 14px;
            font-weight: 700;
            line-height: 14px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            color: #FEBF05;
        }

        .btn-ok {
            width: 464rpx;
            height: 88rpx;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: -44rpx;
            border-radius: 19rpx;
            overflow: hidden;
        }

        .award-box {
            width: 372rpx;

            .award-gold {
                width: 100%;
                height: 252rpx;
                display: flex;
                justify-content: center;
                align-items: flex-end;

                .award-gold-icon {
                    width: 200rpx;
                    height: 168rpx;
                }
            }

            .award-amount {
                font-family: Roboto;
                font-size: 34rpx;
                font-weight: 700;
                line-height: normal;
                text-align: left;
                text-underline-position: from-font;
                text-decoration-skip-ink: none;
                color: #FFBF01;
            }
        }
    }
}
</style>