<template>
	<view class="list-container">
		<!-- 救援司机列表 -->
		<view v-if="type === 'driver'" class="table-wrapper">
			<view class="table-header">
				<text class="col-driver">司机</text>
				<text class="col-num">救援数量(次)</text>
				<text class="col-distance">公里数(km)</text>
				<text class="col-money">金额(元)</text>
			</view>
			<view class="table-row" v-for="(item, index) in list" :key="index">
				<view class="col-driver">
					<!-- <image :src="item.avatar" class="avatar" /> -->
					<text>{{ item.driverName }}</text>
				</view>
				<text class="col-num">{{ item.rescueNum }}</text>
				<text class="col-distance">{{ item.mileage > 0 ? item.mileage : 0 }}</text>
				<text class="col-money">{{ item.money }}</text>
			</view>
		</view>

		<!-- 救援车辆列表 -->
		<view v-if="type === 'vehicle'" class="table-wrapper">
			<view class="table-header">
				<text class="col-driver">车牌号</text>
				<text class="col-num">救援数量(次)</text>
				<text class="col-distance">公里数(km)</text>
				<text class="col-money">金额(元)</text>
			</view>
			<view class="table-row" v-for="(item, index) in list" :key="index">
				<view class="col-driver">
					<!-- <image :src="item.avatar" class="avatar" /> -->
					<text>{{ item.driverCarNum }}</text>
				</view>
				<text class="col-num">{{ item.rescueNum }}</text>
				<text class="col-distance">{{ item.mileage > 0 ? item.mileage : 0 }}</text>
				<text class="col-money">{{ item.money }}</text>
			</view>
		</view>

		<!-- 调度列表 -->
		<view v-if="type === 'dispatch'" class="table-wrapper">
			<view class="table-header">
				<text class="disp-name">调度</text>
				<text class="disp-money">创建工单</text>
				<text class="disp-num">出发现场</text>
				<text class="disp-distance">转维修</text>
				<text class="disp-money">完成</text>
			</view>
			<view class="table-row" v-for="(item, index) in list" :key="index">
				<view class="disp-name">
					<!-- <image :src="item.avatar" class="avatar" /> -->
					<text>{{ item.driverName }}</text>
				</view>
				<text class="disp-money">{{ item.createRescueNum }}</text>
				<text class="disp-num">{{ item.toSceneNum }}</text>
				<text class="disp-distance">{{ item.toRepairNum }}</text>
				<text class="disp-money">{{ item.confirmCompleteNum }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "CategoryList",
		props: {
			type: {
				type: String,
				default: "driver",
			},
			list: {
				type: Array,
				default: () => [],
			},
		},
	};
</script>

<style scoped>
	.list-container {
		margin: 10px;
	}

	/* 通用表格样式 */
	.table-wrapper {
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
	}

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

	.table-row {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 50rpx 0;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.table-header {
		background: #f0f3f8;
		font-weight: bold;
		font-size: 14px;
		color: #333;
	}

	.table-row:last-child {
		border-bottom: none;
	}

	/* 列宽分配 */
	/* .col-driver {
		flex: 1;
		display: flex;
		align-items: center;
		padding-left: 10px;
	}

	.avatar {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		margin-right: 8px;
	} */

	.col-driver,
	.col-num,
	.col-distance,
	.col-money {
		width: 90px;
		text-align: center;
		flex-shrink: 0;
	}

	/* 其他类型列表样式 */
	.vehicle-list,
	.dispatch-list {
		padding: 40px 20px;
		text-align: center;
		background: #fff;
		border-radius: 8px;
		color: #999;
		font-size: 14px;
	}

	/* .disp-name {
		flex: 1;
		display: flex;
		align-items: center;
		padding-left: 10px;
	} */

	.disp-name,
	.disp-num,
	.disp-distance,
	.disp-money {
		width: 70px;
		text-align: center;
		flex-shrink: 0;
	}
</style>