<template>
    <div @click="handleGoTo"
         class="bg-white pt-30rem px-34rem rounded-10rem relative pb-24rem mb-24rem">
        <div class="flex justify-between items-center mb-64rem text-size-30rem">
            <div>{{item.refVipSmName}}</div>
            <div class="text-[#686868]">{{item.expire}}天</div>
            <div class="text-primary font-light">¥{{item.sum.toFixed(2)}}</div>
        </div>
        <div>
            <span class="text-primary text-size-30rem">{{$t('实付金额')}}：</span>
            <span class="text-primary text-size-42rem font-light">¥{{item.sum.toFixed(2)}}</span>
        </div>
        <div
                v-if="item.status === '2'"
                class="right-30rem bottom-43rem absolute w-180rem h-70rem bg-primary rounded-full flex justify-center items-center text-size-30rem text-white">
            {{$t('去支付')}}
        </div>
        <div
                v-else
                class="right-30rem bottom-12rem absolute w-180rem h-70rem  rounded-full flex justify-center items-center text-size-30rem text-primary border-1rem border-solid border-primary">
            {{$t(item.statusDesc)}}
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            item: {
                type: Object,
                default() {
                    return [];
                }
            }
        },

    methods:{
        handleGoTo(){
            this.$router.push('/order-detail?type=vip&data=' + encodeURIComponent(JSON.stringify(this.item)))
        }
    }
    }
</script>

