<template>
    <div class="product column">
        <div class=" bg-info row items-center" style="padding:10px 24px;">
            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_1.png"
                style="height: 24px" class="cusor-pointer" @click="forwardSpace" />
            <div class="col"></div>
            <!-- <div class="primary-link-button q-ml-lg cusor-pointer">创建设计</div> -->
            <UserCard :size="33"></UserCard>
        </div>
        <div class="col full-width">
            <el-scrollbar class="full-width full-height">
                <div class="title text-center">全新Travel Design 一站式协同行程设计平台</div>
                <div class="row flex-center">
                    <div class="item">
                        <div class="top-box">
                            <div class="text-weight-bold" style="font-size: 1.25vw">免费版</div>
                            <div class="tag default">免费试用1个月</div>
                            <div class="text-weight-bolder text-dark" style="font-size: 2.39583vw;">
                                <span>￥0</span>
                                <span class="text-info text-small text-light q-ml-md">/人/年</span>
                            </div>
                            <div class="button">注册生效</div>
                        </div>
                        <div class="bottom-box">
                            <div class="content-item" v-for="(x,i) in free" :key="i">
                                <span>{{ x.name }}</span>
                                <span v-if="x.value=='no'"><IconClose :size="16" class="text-negative"></IconClose> </span>
                                <span v-else-if="x.value=='yes'"><IconCheck :size="16" class="text-success" /></span>
                                <span v-else><span class="text-grey-8" v-if="x.sub">{{ x.sub }}</span>{{ x.value }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="item dark">
                        <div class="top-box" style="background: #3556F9;">
                            <div class="text-weight-bold" style="font-size: 1.25vw">个人专业版</div>
                            <div class="tag">可季度·半年·1年·2年</div>
                            <div class="text-weight-bolder" style="font-size: 2.39583vw;">
                                <span>￥49.9</span>
                                <span class="text-small text-light q-ml-md">/月起</span>
                            </div>
                            <div class="button opcatiy" @click="openOrderView(1)">立即购买</div>
                        </div>
                        <div class="bottom-box">
                            <div class="bottom-box">
                                <div class="content-item" v-for="(x,i) in person" :key="i">
                                    <span>{{ x.name }}</span>
                                    <span v-if="x.value=='no'"><IconClose :size="16" class="text-negative"></IconClose> </span>
                                    <span v-if="x.value=='yes'"><IconCheck :size="16" class="text-success" /></span>
                                    <span v-else><span class="text-grey-8" v-if="x.sub">{{ x.sub }}</span>{{ x.value }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item dark">
                        <div class="top-box" style="background: #581BDA;">
                            <div class="text-weight-bold" style="font-size: 1.25vw">企业/团队专业版</div>
                            <div class="tag">1年起购</div>
                            <div class="text-weight-bolder" style="font-size: 2.39583vw;">
                                <span>￥2999</span>
                                <span class="text-small text-light q-ml-md">/ 年起</span>
                            </div>
                            <div class="button opcatiy" @click="openOrderView(2)">立即购买</div>
                        </div>
                        <div class="bottom-box">
                            <div class="bottom-box">
                                <div class="content-item" v-for="(x,i) in ent" :key="i">
                                    <span>{{ x.name }}</span>
                                    <span v-if="x.value=='no'"><IconClose :size="16" class="text-negative"></IconClose> </span>
                                    <span v-if="x.value=='yes'"><IconCheck :size="16" class="text-success" /></span>
                                    <span v-else><span class="text-grey-8" v-if="x.sub">{{ x.sub }}</span>{{ x.value }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        
    </div>
    <OrderReview v-if="orderVisible" :default-type="showType" @close="()=>orderVisible=false"></OrderReview>
</template>

<script lang="ts" setup>
import { EntMemberRight, FreeMemberRight, PersonMemberRight } from '@/configs/customer'
import OrderReview from '@/views/components/Order/Review.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const free = FreeMemberRight
const person = PersonMemberRight
const ent = EntMemberRight
const showType = ref(1)
const orderVisible = ref(false)
const router = useRouter()

const openOrderView = (t:number)=>{
    showType.value=t
    orderVisible.value=true
}
const forwardSpace = ()=> router.push('/space')
</script>

<style scoped>
.product {
    width: 100vw;
    height: 100vh;
    background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713929308000_541.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    
}
.product .title{
    font-weight: 800;
    font-size: 2.0833vw;
    color: #000000;
    margin-top: 5.20833vw;
    line-height: 1;
    margin-bottom:4.323vw;
}
.product .item{
    width: 21.1979vw;
    box-shadow: 0px 0px 1.09375vw 0px rgba(140,171,241,0.27);
    border-radius: 8px;
    margin-right: 3.64583vw;
    background: linear-gradient(0deg, #FFFFFF, #F3F7FF);
    margin-bottom: 50px;
}
.product .item.dark{
    color:#FFF;
    background: linear-gradient(0deg, #F8FAFF, #E6EEFF);
    box-shadow: 0px 0px 1.09375vw 0px rgba(140,171,241,0.27);
}
.product .item .bottom-box{
    padding: 1.71875vw;
    /* padding-top: 0; */
}
.product .item .top-box{
    background: #FFFFFF;
    border-radius: 8px;
    padding: 1.71875vw;
    box-shadow: 0px 0px 1.09375vw 0px rgba(140,171,241,0.27);
}
.product .item *{
    line-height: 1;
}
.product .item:last-child{
    margin-right: 0;
}
.product .item .tag{
    padding:0 0.78125vw;
    height: 1.5625vw;
    font-size: 0.7291vw;
    line-height: 1.5625vw;
    background: #8CABF145;
    color:#FFF;
    margin-top: 0.7291vw;
    margin-bottom: 2.9166vw;
    display: inline-block;
    border-radius: 0px 8px 8px 8px;
}
.product .item .tag.default{
    background: #f6f7f9;
    color: #000000;
}
.product .item .button{
    height: 2.0833vw;
    line-height: 2.0833vw;
    background: #f6f7f9;
    border-radius: 8px;
    border: 1px solid #f6f7f9;
    font-weight: 400;
    font-size: 0.729166vw;
    color: grey;
    margin-top: 2.34375vw;
    /* margin-bottom: 3.64583vw; */
    cursor:not-allowed;
    text-align: center;
    user-select: none;
}
.product .item .button.opcatiy{
    background: rgba(0,0,0,.1);
    border: 1px solid rgba(255,255,255,.5);
    color:#FFF;
    cursor: pointer;
}
.product .item .content-item{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.7291666vw;
    margin-bottom: 1.0vw;
    color: #000000;
}
.product .item .content-item:last-child{
    margin: 0;
}
</style>