<script setup>
	/**
	 *  订单列表项
	 * @property {String} mode 模式 mine个人订单 shop商家订单
	 */

	import {
		defineProps,
		defineEmits,
	} from 'vue'

	// 
	const props = defineProps({
		item: {
			type: Object,
			default: {},
		},
		mode: {
			type: String,
			default: 'mine',
		}
	})
	const emit = defineEmits(['item'])

	// 点击列表项
	function handleItem() {
		emit('item', props.item)
	}
</script>

<template>
	<view class="item oh plr30 bfff br20" @click="handleItem">
		<view class="header line rows ptb20 f28">
			<!-- 店铺 -->
			<view class="store df aic thd f1" v-if="mode == 'mine'">
				<image class="wh50 br10" :src="item.merImg" mode="aspectFill" />
				<view class="name ml10 c333">{{item.merName}}</view>
			</view>
			<!-- 购买用户 -->
			<view class="store df aic thd f1" v-else-if="mode == 'shop'">
				<image class="wh50 cir" :src="item.cusImg" mode="aspectFill" />
				<view class="name ml10 c333">{{item.cusName}}</view>
			</view>

			<!-- 订单状态 -->
			<view class="c666 f28">{{item.status_text}}</view>
		</view>

		<!-- 商品信息 -->
		<view class="product line df ptb20">
			<view class="poster wh160">
				<image class="wh160 br10" :src="item.productImage" mode="aspectFill" />
			</view>

			<!-- 产品名称 和 购买的规格 -->
			<view class="info mlr20 f1">
				<view class="name t2hd c333 f28">{{item.productName}}</view>
				<view class="spec mt10 thd c999 f26">款式：{{item.sku}}</view>
			</view>

			<!-- 单价 数量 -->
			<view class="tar">
				<view class="price c666">
					<text class="f20">￥</text>
					<text class="f26">{{item.productPrice}}</text>
				</view>
				<view class="number f24 c999">x {{item.totalNum}}</view>
			</view>
		</view>

		<!-- 汇总 -->
		<view class="total line ptb20 tar f34">
			<view class="">
				<text v-if="mode == 'mine'">应付：</text>
				<text v-else-if="mode == 'shop'">实收：</text>
				<text class="cFF9B27 f20">￥</text>
				<text class="cFF9B27">{{item.totalPrice}}</text>
			</view>
		</view>

		<slot name="menu" :item="item">
			<!--  -->
		</slot>
	</view>
</template>

<style lang="scss" scoped>
	.item {
		.line+.line {
			border-top: 2rpx solid #eee;
		}
	}
</style>