<template>
    <view class="order-item-wrapper flex flex-col box-border" @click="goDetail">
        <view class="nav-info flex flex-justify-between" >
            <view>订单编号：{{ detail.order_no }}</view>
            <view :style="{color:stateColor[detail.state] || ''}">{{ stateConfig[detail.state] }}</view>
        </view>
        <view class="order-info">
            <view class="content flex">
                <image
                    :src="detail.main_image"
                    class="pro-img"
                />
                <view class="flex flex-1 flex-col">
                    <view class="flex flex-justify-between name info-item">
                        <view class="text-over">{{ detail.product_name }}</view>
                        <view class="amount"><text>￥</text>{{ detail.price }}<text>元</text></view>
                    </view>
                    <view class="flex flex-justify-between num">
                        <view>数量</view>
                        <view>x1</view>
                    </view>
                </view>
            </view>
            <view class="time">下单时间：{{ detail.create_time }}</view>
        </view>
        <view class="btns flex flex-justify-end">
            <view class="btn del" @click="goDel">删除订单</view>
            <view class="btn pay"  v-if="[1].includes(detail.state)" @click="goPay">立即付款</view>
            <view class="btn view"  v-if="[3].includes(detail.state) && !!detail.voucher_link" @click="goPwd">查看卡券</view>
            <view class="btn pay"   @click="goRefund"  v-if="[4].includes(detail.state)">申请退款</view>
        </view>
    </view>
 </template>
 
 <script setup>
    import { stateConfig, stateColor } from '../config';
    const props = defineProps({
        detail:{
            type:Object,
            required: true,
            default:() => ({})
        }
    })
    const emits = defineEmits(['pay-event','detail-event','pwd-event','del-event'])

    function goPay(e){
        if(e.stopPropagation) { //W3C阻止冒泡方法  
            e.stopPropagation();  
        }
        emits('pay-event', props.detail);
    }


    function goDetail(e){
        emits('detail-event', props.detail);
    }

    function goPwd(e){
        if(e.stopPropagation) { //W3C阻止冒泡方法  
            e.stopPropagation();  
        }
        emits('pwd-event', props.detail);
    }

    function goDel(e){
        if(e.stopPropagation) { //W3C阻止冒泡方法  
            e.stopPropagation();  
        }
        emits('del-event', props.detail);
    }

    function goRefund(e){
        if(e.stopPropagation) { //W3C阻止冒泡方法  
            e.stopPropagation();  
        }
        emits('refund-event', props.detail);
    }
</script>
 
 <style lang="scss">
 .order-item-wrapper{
    width: 702rpx;
    // height: 386rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    padding:24rpx;
    margin:24rpx 0 16rpx;
 }
 .nav-info{
    font-size:22rpx;
    font-weight:400;
    :first-child{
        color: #333333;
    }
    :last-child{
        color: #787878;
    }
 }
 .order-info{
    margin-top:24rpx;
    .content{
        margin-bottom:24rpx;
        font-weight: 400;
        .pro-img{
            display: block;
            width:90rpx;
            height:90rpx;
            margin-right:34rpx;
        }
    }
    .time{
        font-size: 22rpx;
        color: #6C6C6C;
    }
    .info-item{
        font-weight: bold;
        margin-bottom:12rpx;
    }
    .text-over{
        max-width:80%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap; 
    }
    .amount{
        color: #333333;
        font-weight: bold;
        font-size:24rpx;
        text:nth-child(1){
            font-size:20rpx;
            font-weight: 400;
        }
        text:nth-child(2){
            font-size:22rpx;
        }
    }
    .name{
        font-size: 24rpx;
        color: #333333;
        font-weight: 700;
    }
    .num{
        font-size: 20rpx;
        color: #9E9E9E;
        font-weight: 400;
    }
 }
 .btns{
    border-top: 1rpx solid #F0E1E1;
    padding:36rpx 0 12rpx;
    margin-top:24rpx;
    .btn{
        width: 168rpx;
        height: 64rpx;
        border-radius: 68rpx;
        font-weight: 400;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left:48rpx;
    }
    .del{
        color: #545454;
        border: 2rpx solid #B9C8C7;
    }
    .pay{
        color: #FFFFFF;
        background: #EA0000;
    }
    .view{
        background: #FFFFFF;
        border-radius: 68rpx;
        border: 2rpx solid #EA0000;
        color:#EA0000;
    }
 }
 </style>