<template>
	<view class="container">
		<view v-for="(group, index) in workGroups" :key="index" class="group-card">
			<view class="group-header" @click="toggleGroup(index)">
				<text class="group-name">{{ group.workTypeName }}</text>
				<text class="group-status" :style="{ color: group.completionRate === 1 ? 'green' : 'orange' }">
					{{ group.completionRate === 1 ? '已完成' : '维修中' }}
				</text>
			</view>

			<!-- 展开后的维修项目列表 -->
			<view v-show="group.isExpanded" class="item-list">
				<view v-for="(item, i) in group.children" :key="i" class="item-card">
					<text class="item-name">{{ item.itemName }}</text>
					<view class="item-status">
						<text :style="{ backgroundColor: item.finished ? 'green' : 'orange' }"
							class="status-indicator"></text>
						<text class="status-text">{{ item.finished ? '已完成' : '维修中' }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			workGroups: {
				type: Array,
				required: true
			}
		},
		methods: {
			toggleGroup(index) {
				// 使用 Vue.set 确保 isExpanded 是响应式的
				this.$set(this.workGroups, index, {
					...this.workGroups[index],
					isExpanded: !this.workGroups[index].isExpanded
				});
				console.log(this.workGroups);
			}

		}
	};
</script>

<style scoped>
	.container {
		padding: 20px;
	}

	.group-card {
		margin-bottom: 20px;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 8px;
	}

	.group-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
	}

	.group-name {
		font-size: 18px;
		font-weight: bold;
	}

	.group-status {
		font-size: 14px;
	}

	.item-list {
		margin-top: 10px;
	}

	.item-card {
		padding: 10px;
		margin-top: 5px;
		/* background-color: #f9f9f9; */
		border-radius: 6px;
	}

	.item-status {
		display: flex;
		align-items: center;
		margin-top: 5px;
	}

	.status-indicator {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.status-text {
		font-size: 14px;
	}
</style>