<template>
    <div class="vip-card relative rounded-xl overflow-hidden">
        <img class="block w-full" src="@/assets/bg_vip.png" alt="" />

        <div class="vip-text">
            <!-- <div class="text1">
                <span>走马AI助手</span>
                <n-gradient-text gradient="linear-gradient(289deg, #8F008E 0%, #2900D4 100%)"> 会员 </n-gradient-text>
            </div> -->

            <div class="text2 text-xs lg:text-lg" v-if="isVip">{{ userMemberStore.getExpireAt() }}</div>
            <div class="text2 text-xs lg:text-lg" v-else>升级成为一级会员！全球仅限10000席！</div>

            <div class="text3 text-xs lg:text-lg" v-if="props.pageType === 'vip'">开启无限制人工智能时代！</div>

            <div class="btn" @click="goVip" v-else>
                <img src="@/assets/icon-anniu.png" alt="" />
                <div class="btn-text">{{ isVip ? '去续费' : '去开通' }}</div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { NGradientText } from 'naive-ui'
import { useUserMemberStore } from '@/store'
import { ref, computed } from 'vue'

const emit = defineEmits(['goVip'])

const props = defineProps({
    pageType: {
        type: String,
        default: 'mine'
    }
})

const userMemberStore = useUserMemberStore()
const isVip = computed(() => {
    return userMemberStore.isVip()
})

function goVip() {
    emit('goVip')
}
</script>
<style lang="less" scoped>
.vip-card {
    z-index: 1;
    position: relative;
    .vip-text {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        overflow: hidden;
        // padding: 0 5% 16px;
        .f-col();
        .text1 {
            font-size: 26px;
            font-family: AlimamaShuHeiTi;
            color: #2c00d2;
            line-height: 26px;
        }

        .text2 {
            position: absolute;
            color: #006f66;
            top: 36%;
            left: 5%;
        }

        .text3{
            position: absolute;
            color: #006f66;
            bottom: 8%;
            left: 5%;
        }

        .btn {
            position: absolute;
            width: 24%;
            cursor: pointer;
            left: 5%;
            bottom: 8%;
            min-width: 82px;
            max-width: 100px;
            img {
                width: 100%;
            }

            .btn-text {
                position: absolute;
                left: 50%;
                top: 45%;
                transform: translate(-50%, -50%);
                font-size: 12px;
                font-family: AlimamaShuHeiTi;
                color: #006f66;
                line-height: 24px;
            }
        }
    }
}
</style>
