<template>
    <view class="order-goods bg-white">
        <view v-for="(item, index) in list" :key="index" class="item-wrap u-p-b-20">
            <view class="row-between u-p-l-20 u-p-r-20 u-p-t-20">
                <view class="u-line-1 nr bold-500 text-000"> {{ item.goods_name || item.name }}</view>
                <view class="text-999 flex1 u-m-l-40 text-nowrap">{{ orderDesc }}</view>
            </view>
            <view class="item row" @tap="toGoods(item.goods_id)">
                <view>
                    <u-image :src="item.image_str || item.image" 
                        :width="imageWidth"
                        :height="imageHeight"
                        :border-radius="imageRadius"
                        mode="aspectFit"
                        lazy-load/>
                </view>
                <view class="goods-info ml20 flex1">
                    <view class="sm text-999">
                        <view>下单时间:2024-10-10 16:58:53</view>
                        <view>预计时间:2025-10-10 16:58:54</view>
                        <view>数量:x{{ item.goods_num }}</view>
                        <view>实付:￥0.00</view>
                        <view>{{item.spec_value_str || item.spec_value}}</view>
                    </view>
                </view>
            </view>
            <view class="u-m-t-26 u-m-b-26 u-p-l-20 u-p-r-20">
                <u-line color="#EEE" />
            </view> 
            <view class="u-m-t-26 row-between u-p-l-20 u-p-r-20">
				<view class="primary flex1">
                    <view v-if="getCancelTime(orderCancleTime) > 0" >
                        <u-count-down separator="zh"
                        :timestamp="getCancelTime(item.order_cancel_time)" separator-color="#FF2C3C"
                        color="#FF2C3C" :separator-size="26" :font-size="26" bg-color="transparent"
                        @end="refresh"></u-count-down>
                    </view>
    
                </view>
			    <view class="row">
					<view class="u-m-r-16">
						<u-button @click="cancleOrder" hover-class="none" :customStyle="{width: '164rpx', height: '60rpx', color: '#999', border: '1px solid #DDD'}" :plain="true" :hair-line="false" shape="circle">取消订单</u-button>
					</view>
					<view>
						<u-button @click="toPay" hover-class="none" :customStyle="{width: '164rpx', height: '60rpx', backgroundColor: themeColor, color: '#fff', border: 'none'}" :hair-line="false" shape="circle">去付款</u-button>
					</view>
				    <!-- <view>
						<u-button @click="seeDetails" hover-class="none" :customStyle="{width: '164rpx', height: '60rpx', backgroundColor: themeColor, color: '#fff', border: 'none'}" :hair-line="false" shape="circle">查看详情</u-button>
					</view>
					<view>
						<u-button @click="toRefund" hover-class="none" :customStyle="{width: '164rpx', height: '60rpx', backgroundColor: themeColor, color: '#fff', border: 'none'}" :hair-line="false" shape="circle">查看详情</u-button>
					</view> -->
				</view>
			</view>

            <template v-if="mode === 'comfirm'">
                <view class="delivery" v-if="delivery === 1 && !item.is_express"
                    >该商品不支持快递配送</view
                >
                <view class="delivery" v-if="delivery === 2 && !item.is_selffetch"
                    >该商品不支持门店自提</view
                >
            </template>

            <view class="goods-footer row" v-if="link">
                <view style="flex: 1"></view>
                <navigator
                    class="mr20"
                    hover-class="none"
                    :url="'/bundle/pages/goods_reviews/goods_reviews?id=' + item.id"
                    v-if="item.comment_btn"
                >
                    <button size="xs" class="plain br60" hover-class="none">评价晒图</button>
                </navigator>
                <navigator
                    v-if="item.refund_btn"
                    hover-class="none"
                    :url="
                        '/bundle/pages/apply_refund/apply_refund?order_id=' +
                        item.order_id +
                        '&item_id=' +
                        item.item_id
                    "
                >
                    <button size="xs" class="plain br60" hover-class="none">申请退款</button>
                </navigator>
                <view v-if="item.after_status_desc" style="color: orange">
                    {{ item.after_status_desc }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {}
    },

    components: {},
    props: {
        list: {
            type: Array,
            default: () => []
        },
        link: {
            type: Boolean,
            default: false
        },
        team: {
            type: [Object, Array],
            default: () => ({})
        },
        delivery: {
            type: Number,
            default: 1
        },
        // order | comfirm
        mode: {
            type: String,
            default: 'order'
        },
        order_type: {
            type: Number,
            default: 0
        },
        imageWidth: {
            type: Number,
            default: 180
        },
        imageHeight: {
            type: Number,
            default: 180
        },
        imageRadius: {
            type: Number,
            default: 0
        },
        orderDesc: {
            type: String,
            default: ''
        },
        orderCancleTime: { 
            type: Number,
            default: 0
        }
    },

    methods: {
        toGoods(id) {
            if (!this.link) return
            uni.navigateTo({
                url: `/pages/goods_details/goods_details?id=${id}`
            })
        },

        refresh() {
            this.$emit('refresh')
           
        }
    },
    computed: {
        getCancelTime() {
            return (time) => time - Date.now() / 1000;
        },
    },
}
</script>
<style lang="scss">
.order-goods {
    .item {
        padding: 20rpx 24rpx;
        .vip-price {
            // margin: 0 10rpx;
            background-color: #ffe9ba;
            line-height: 30rpx;
            border-radius: 6rpx;
            overflow: hidden;
            .price-name {
                background-color: #101010;
                padding: 3rpx 10rpx;
                color: #ffd4b7;
                position: relative;
                overflow: hidden;
                &::after {
                    content: '';
                    display: block;
                    width: 20rpx;
                    height: 20rpx;
                    position: absolute;
                    right: -15rpx;
                    background-color: #ffe9ba;
                    border-radius: 50%;
                    top: 50%;
                    transform: translateY(-50%);
                    box-sizing: border-box;
                }
            }
        }
    }
    .goods-footer {
        height: 70rpx;
        align-items: flex-start;
        padding: 0 24rpx;
        .plain {
            border: 1px solid #999;
            height: 52rpx;
            line-height: 52rpx;
            font-size: 26rpx;
        }
    }

    .delivery {
        display: inline-block;
        margin-left: calc(180rpx + 20rpx * 2);
        padding: 4rpx 15rpx;
        border-radius: 60px;
        font-size: 20rpx;
        background-color: #f4f4f4;
        color: #999999;
    }
}
</style>
