<template>
    <view class="bg-white">
        <view v-for="(item, index) in list" :key="index" class="item-wrap u-p-b-20">
            <view class="row-between u-p-r-20 u-p-t-20 u-p-b-24" v-if="mode === 'order'">
                <view class="u-line-1 nr bold-500 text-000"> {{ item.goods_name || item.name }}</view>
                <!-- 未发货订单暂时理解为未制作 -->
                <!-- 已发货订单暂时理解为已完成 -->
                <view class="flex1 u-m-l-40 text-nowrap" :class="{'primary': orderStatus == 1, 'text-999': orderStatus != 1}">{{ orderDesc }}</view>
            </view>
            <view class="item" :class="{row: mode != 'pay', 'row-start': mode == 'pay'}" @tap="toGoods(item.goods_id)">
                <view :style="{ width: imageWidth + 'rpx', height: imageHeight + 'rpx' }">
                    <u-image :src="item.image_str || item.image" 
                        :width="imageWidth"
                        :height="imageHeight"
                        :border-radius="imageRadius"
                        :mode="imgMode"
                        lazy-load/>
                </view>
                <view class="goods-info ml20 flex1">
                    <view class="sm text-999" v-if="mode === 'order'">
                        <view>下单时间:2024-10-10 16:58:53</view>
                        <view>预计时间:2025-10-10 16:58:54</view>
                        <view>数量:x{{ item.goods_num }}</view>
                        <view>实付:   
                            <price-format
                                v-if="!item.is_member && (order_type === 0 || order_type === 1)"
                                :weight="500"
                                :subscript-size="24"
                                :first-size="34"
                                :second-size="24"
                                :price="item.original_price || item.goods_price"
                            ></price-format>
                        </view>
                        <view>{{item.spec_value_str || item.spec_value}}</view>
                    </view>
                    <view class="sm text-999" v-if="mode === 'confirm'">
                        <view class="u-line-2" style="color: #1D2129">{{ item.goods_name || item.name }}</view>
                        <view class="u-m-t-4">周一至周日可用</view>
                        <view class="row u-m-t-10">
                            <view class="primary">
                                <price-format :price="item.original_price || item.goods_price" :subscriptSize="22" :firstSize="40" :secondSize="32"></price-format>
                            </view>
                        </view>
                    </view>
                    <view class="sm text-999" v-if="mode === 'pay'">
                        <view class="u-line-2" style="color: #1D2129">{{ item.goods_name || item.name }}</view>
                    </view>
                     <view class="sm text-999" v-if="mode === 'order_detail'">
                        <view class="u-line-2" style="color: #1D2129">{{ item.goods_name || item.name }}</view>
                        <view class="u-m-t-4">x{{ item.goods_num }}</view>
                        <view class="row u-m-t-10">
                            <view class="primary">
                                <price-format :price="item.original_price || item.goods_price" :subscriptSize="22" :firstSize="40" :secondSize="32"></price-format>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <template v-if="mode === 'confirm'">
                <view class="delivery" v-if="delivery === 1 && !item.is_express"
                    >该商品不支持快递配送</view
                >
                <view class="delivery" v-if="delivery === 2 && !item.is_selffetch"
                    >该商品不支持门店自提</view
                >
            </template>
        </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 | confirm | pay
        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: ''
        },
        imgMode: {
            type: String,
            default: 'scaleToFill'
        },
        orderStatus: {
            type: Number,
            default: 0
        }
    },

    methods: {
        toGoods(id) {
            if (!this.link) return
            uni.navigateTo({
                url: `/pages/goods_details/goods_details?id=${id}`
            })
        }
    }
}
</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>
