<template>
    <div @click="handleGoTo" class="bg-white pt-35rem pl-34rem pr-26rem pb-34rem relative rounded-10rem mb-24rem">
        <div class="h-150rem flex mb-68rem">
            <img :src="item.coverUrl" class="w-150rem h-150rem object-cover" />

            <div class="flex flex-col flex-1 justify-space-between">
                <div class="ml-20rem flex justify-between flex-1 justify-items-start">
                    <div class="text-size-30rem flex-1 pr-24rem">
                        {{item.name}}{{item.name}}{{item.name}}{{item.name}}{{item.name}}{{item.name}}{{item.name}}
                    </div>
                    <div class="flex justify-between">
                        <div class="text-size-30rem text-primary font-light">¥ {{item.price?.toFixed(2)}}</div>
                    </div>
                </div>
                <div class="text-size-30rem text-[#686868] font-light flex justify-end">x{{item.num}}</div>
            </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=product&data=' + encodeURIComponent(JSON.stringify(this.item)))
        }
    }
}
</script>

<style lang="scss" scoped>

</style>