<template>
	<view class="card">
		<view class="card-header">
			<view class="content-combined">
				<text>{{item.taskCode}}</text>
				<text>{{currentIndex + 1}}/{{cardData.length}}</text>
			</view>
		</view>
		<view class="card-content">
			<view class="content-item">
				<text>AGV编号:</text>
				<text>{{item.agvCode}}</text>
			</view>
			<view class="content-item">
				<text>AGV状态:</text>
				<text>{{item.agvStatus}}</text>
			</view>
			<view class="content-item">
				<text>任务状态:</text>
				<text>{{item.taskStatusStr}}</text>
			</view>
			<view class="content-item" style="font-weight: 400;">
				<text>货架:</text>
				<text>{{item.shelfCode}}</text>
			</view>
			<view class="content-item" style="font-weight: 600;color: green;">
				<text>起点:</text>
				<text>{{item.startLocationCode}}</text>
			</view>
			<view class="content-item" style="font-weight: 600;color: firebrick;">
				<text>终点:</text>
				<text>{{item.endLocationCode}}</text>
			</view>
			<view class="content-combined">
				<view class="content-item" style="font-weight: 600;color: violet;">
					<text>人员:</text>
					<text>{{item.createUser}}</text>
				</view>
				<view class="content-time">
					<text>任务时间:</text>
					<text>{{item.createTime}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	
	const props = defineProps({
		item: {
			type: Object,
			required: true
		},
		currentIndex: {
			type: Number,
			required: true
		},
		cardData: {
			type: Array,
			required: true
		}
	});
</script>

<style scoped>
	.card {
		border: 3rpx solid black;
		border-radius: 15rpx;
		margin: 8rpx;
		padding: 8rpx;
		background-color: beige;
	}

	.card-header {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 2rpx;
		text-align: center;
	}

	.content-item {
		margin-bottom: 5rpx;
		font-size: 30rpx;
	}

	.content-time {
		margin-bottom: 0rpx;
		font-size: 18rpx;
		display: flex;
		align-items: center;
	}

	.content-combined {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5rpx;
	}
</style>