<template>
	<view class="order-item" @click="$emit('click')">
		<view class="order-header">
			<text class="car-model">{{ orderData.carModel || '暂无车辆型号'}}</text>
			<text class="car-num">{{ orderData.carNum || '暂无车牌'}}</text>
		</view>

		<view class="order-body">
			<view class="info-row">
				<text class="label">检测类型:</text>
				<text class="value">{{ orderData.skuName }}</text>
			</view>

			<view class="info-row">
				<text class="label">检测状态:</text>
				<text class="value">{{ orderData.status || '未指定' }}</text>
			</view>

			<!-- <view class="info-row">
				<text class="label">检测员:</text>
				<text class="value">{{ orderData.workerName }} ({{ orderData.workerPhone }})</text>
			</view> -->

			<view class="info-row">
				<text class="label">客户:</text>
				<text class="value">{{ orderData.buyName }} ({{ orderData.buyPhone || '无电话' }})</text>
			</view>

			<view class="info-row">
				<text class="label">检测时间:</text>
				<text class="value">{{ formatTime(orderData.startTime) }} - {{ formatTime(orderData.endTime) }}</text>
			</view>
		</view>

		<view class="order-footer">
			<text class="work-id">工单号: {{ orderData.workId }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "OrderItem",
		props: {
			orderData: {
				type: Object,
				required: true,
				default: () => ({})
			}
		},
		methods: {
			formatTime(timestamp) {
				if (!timestamp) return "未完成";
				const date = new Date(timestamp);
				return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
			}
		}
	};
</script>

<style scoped>
	.order-item {
		margin-bottom: 30rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		background-color: #fff;
		padding: 20rpx;
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.car-model {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}

	.car-num {
		font-size: 30rpx;
		color: #888;
	}

	.order-body {
		padding: 20rpx 0;
	}

	.info-row {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.label {
		width: 160rpx;
		color: #888;
		font-weight: 500;
	}

	.value {
		flex: 1;
		color: #111;
		word-break: break-all;
	}

	.order-footer {
		padding-top: 20rpx;
		border-top: 2rpx solid #f0f0f0;
		text-align: right;
		font-size: 26rpx;
		color: #aaa;
	}
</style>