<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="https://img13.360buyimg.com/n1/jfs/t1/117234/35/34799/82687/6449f2b4Fd6e2eef9/a754c5e178c9e9be.jpg.avif"
					mode="aspectFill" />
				<view class="name ml10 c333">家纺专营店</view>
			</view>
			<!-- 购买用户 -->
			<view class="store df aic thd f1" v-else-if="mode == 'shop'">
				<image class="wh50 cir"
					src="https://img13.360buyimg.com/n1/jfs/t1/117234/35/34799/82687/6449f2b4Fd6e2eef9/a754c5e178c9e9be.jpg.avif"
					mode="aspectFill" />
				<view class="name ml10 c333">用户小A</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="https://img13.360buyimg.com/n1/jfs/t1/117234/35/34799/82687/6449f2b4Fd6e2eef9/a754c5e178c9e9be.jpg.avif"
					mode="aspectFill" />
			</view>

			<!-- 产品名称 和 购买的规格 -->
			<view class="info mlr20 f1">
				<view class="name c333 f28">靠枕 纯棉靠枕 车载居家 纯棉100% 卡通靠枕 人体工学</view>
				<view class="spec mt10 c999 f26">款式：普通款 小熊</view>
			</view>

			<!-- 单价 数量 -->
			<view class="tar">
				<view class="price c666">
					<text class="f20">￥</text>
					<text class="f26">89</text>
				</view>
				<view class="number f24 c999">x 1</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">89</text>
			</view>
		</view>

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

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