<template>
	<view class="card">
		<view class="card-header">
			<view class="content-combined">
				<text class="center-element">{{item.matCode}}</text>
				<text class="right-element">{{currentIndex + 1}}/{{cardData.length}}</text>
			</view>
		</view>
		<view class="card-content">
			<view class="content-item">
				<text>名称:</text>
				<text>{{item.matName}}</text>
			</view>
			<view class="content-item">
				<text>批次:</text>
				<text>{{item.matBatch}}</text>
			</view>
			<view class="content-item">
				<text>规格:</text>
				<text>{{item.matSpec}}</text>
			</view>
			<view class="content-item" style="font-weight: 600;">
				<text>数量:</text>
				<text>{{item.matQty}}</text>
			</view>
			<view class="content-combined">
				<view class="content-item" style="font-weight: 400;color: firebrick;">
					<text>库位:</text>
					<text>{{item.locationCode}}</text>
				</view>
				<view class="content-item" style="font-weight: 400;color: firebrick;">
					<text>货架:</text>
					<text>{{item.shelfCode}}</text>
				</view>
			</view>
			<view class="content-combined">
				<view class="content-item" style="font-weight: 600;color: violet;">
					<text>人员:</text>
					<text>{{item.modifyUser}}</text>
				</view>
				<view class="content-time">
					<text>更新时间:</text>
					<text>{{item.modifyTime}}</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: 19rpx;
		display: flex;
		align-items: center;
	}

	.content-combined {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 5rpx;
	}

	.center-element {
		align-items: center;
	}

	.right-element {
		margin-left: auto;
	}
</style>