<template>
    <van-popup class="buy-page" v-model:show="show" closeable round position="bottom" :style="{ maxHeight: '70%' }">
        <div class="news-title text-white text-lg AlimamaShuHeiTi relative">
            <span class="z-[1] relative">購買金豆</span>
            <img class="w-[78px] h-[16px] absolute bottom-0 left-0 z-0" src="@/assets/png-xiantiao1.png" alt="" />
        </div>
        <div class="money text-xs text-white mt-[5px]">帳戶餘額：789金豆</div>

        <div class="choose-list flex flex-wrap justify-between">
            <div class="choose-btn active flex flex-col items-center justify-center">
                <div class="val text-white">
                    <span class="text-[16px]">¥</span>
                    <span class="text-[26px]">19.9</span>
                </div>
                <div class="sub text-xs text-white">1990金豆+<span class="text-[#FFEF00]">送888金豆</span></div>
                <div class="btn-tag">首充福利</div>
            </div>
            <div v-for="i in 3" :key="i" class="choose-btn flex flex-col items-center justify-center">
                <div class="val text-white">
                    <span class="text-[16px]">¥</span>
                    <span class="text-[26px]">19.9</span>
                </div>
                <div class="sub text-xs text-white">1990金豆+<span class="text-[#FFEF00]">送888金豆</span></div>
                <div class="btn-tag">粉丝福利</div>
            </div>
        </div>

        <div class="tips text-[10px] text-[#61657A] text-center pt-[90px] pb-[18px]">
            虛擬商品購買後不可退換，青少年請在家長陪同下購買
        </div>

        <div class="btn">
            <van-button class="AlimamaShuHeiTi" type="primary" block round>立即支付</van-button>
        </div>
    </van-popup>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
// const props = defineProps({
//     show: {
//         type: Boolean,
//         default: false
//     }
// })
// const emit = defineEmits(['update:show'])
function changeShow(val) {
    show.value = val
}
defineExpose({ changeShow })
</script>

<style lang="less" scoped>
.buy-page {
    --van-popup-background: #20223c;
    padding: 21px 18px;
}

.choose-btn {
    width: calc(50vw - 27px);
    height: 88px;
    background: #2d3059;
    border-radius: 8px;
    border: 1px solid #525686;
    margin-top: 18px;
    display: inline-flex;
    position: relative;

    .btn-tag {
        font-size: 12px;
        color: #ffffff;
        line-height: 18px;
        position: absolute;
        top: 0;
        left: 0;
        width: 62px;
        height: 18px;
        background: #7f82af;
        border-radius: 8px 0px 8px 0px;
        text-align: center;
    }

    &.active {
        background: #2d3059 linear-gradient(318deg, rgba(255, 87, 186, 0.1) 0%, rgba(255, 87, 186, 0.2) 100%);
        border-radius: 8px;
        border: 2px solid #ff57ba;
        .sub {
            span {
                color: #fff !important;
            }
        }
        .btn-tag {
            background: #2d3059 linear-gradient(-318deg, #ff3b20, #ff57ba);
            left: -2px;
            top: -1px;
        }
    }
}
</style>
