<template>
	<div class="fishbone">
		<div class="main-line"></div>
		<div v-for="(causeGroup, groupIndex) in fishboneData.causes" :key="groupIndex" :class="getBoneClass(groupIndex)">
			<div class="left-bone">
				<div class="left-bone-item" v-for="(item, index) in getLeftItems(causeGroup.causes)" :key="index">
					<!-- <div class="icon">
						<img :src="item.picture" alt="" />
					</div> -->
					<div class="text">{{ item.name }}</div>
					<div class="line"></div>
				</div>
			</div>
			<div class="right-bone">
				<div class="right-bone-item" v-for="(item, index) in getRightItems(causeGroup.causes)" :key="index">
					<div class="line"></div>
					<div class="text">{{ item.name }}</div>
					<!-- <div class="icon">
						<img :src="item.picture" :alt="item.name" />
					</div> -->
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { getChainFishbone } from "@/api/exportControl";
import { onMounted, ref } from "vue";

const chainId = ref(1);
const fishboneData = ref({
	text: "",
	causes: []
});

// 根据索引确定鱼骨图位置类名
const getBoneClass = index => {
	const positions = ["top-bone", "top-bone1", "top-bone2", "bottom-bone", "bottom-bone1", "bottom-bone2"];
	return positions[index] || "top-bone";
};

// 获取左侧显示的项目（前半部分）
const getLeftItems = items => {
	const midpoint = Math.ceil(items.length / 2);
	return items.slice(0, midpoint);
};

// 获取右侧显示的项目（后半部分）
const getRightItems = items => {
	const midpoint = Math.ceil(items.length / 2);
	return items.slice(midpoint);
};

onMounted(async () => {
	try {
		const chainFishboneData = await getChainFishbone(chainId.value);
		fishboneData.value = chainFishboneData ?? {
			text: "",
			causes: []
		};
	} catch (error) {
		console.log(error);
	}
});
</script>

<style lang="scss" scoped>
/* ... 原有的样式保持不变 ... */

.fishbone {
	position: relative;
	width: 100%;
	height: 100%;
	margin-top: 40px;
	.main-line {
		position: absolute;
		top: 280px;
		right: 0;
		width: 888px;
		height: 3px;
		background: rgba(174, 208, 255, 1);
	}
}

.top-bone {
	position: absolute;
	top: 20px;
	right: 200px;
	width: 3px;
	height: 260px;
	background: #90caf9;
	transform: skew(30deg);
	z-index: 1;
	.left-bone {
		color: #777;
		position: absolute;
		top: 0;
		left: -150px;
		width: 150px;
		height: 260px;
		.left-bone-item {
			transform: skew(-30deg);
			height: 35px;
			margin-bottom: 5px;
			margin-top: 15px;
			display: flex;
			justify-content: flex-end;
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text {
				margin-left: 4px;
				height: 70px;
				line-height: 35px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.line {
				margin-left: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}
		}
	}
	.right-bone {
		color: #777;
		position: absolute;
		top: 0;
		right: -150px;
		width: 150px;
		height: 260px;
		.right-bone-item {
			transform: skew(-30deg);
			height: 35px;
			margin-bottom: 15px;
			margin-top: 5px;
			display: flex;
			justify-content: flex-start;
			.line {
				margin-right: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}
			.text {
								width: 100px;
				margin-right: 4px;
				height: 35px;
				line-height: 35px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}

.top-bone1 {
	position: absolute;
	top: 20px;
	right: 500px;
	width: 3px;
	height: 260px;
	background: #90caf9;
	transform: skew(30deg);
	z-index: 1;
	.left-bone {
		color: #777;
		position: absolute;
		top: 0;
		left: -150px;
		width: 150px;
		height: 260px;
		.left-bone-item {
			transform: skew(-30deg);
			height: 35px;
			margin-bottom: 5px;
			margin-top: 15px;
			display: flex;
			justify-content: flex-end;
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text {
								width: 100px;
				margin-left: 4px;
				height: 35px;
				line-height: 35px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.line {
				margin-left: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}
		}
	}
	.right-bone {
		color: #777;
		position: absolute;
		top: 0;
		right: -150px;
		width: 150px;
		height: 260px;
		.right-bone-item {
			transform: skew(-30deg);
			height: 35px;
			margin-bottom: 15px;
			margin-top: 5px;
			display: flex;
			justify-content: flex-start;
			.line {
				margin-right: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}
			.text {
								width: 100px;
				margin-right: 4px;
				height: 35px;
				line-height: 35px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}

.top-bone2 {
	position: absolute;
	top: 20px;
	right: 800px;
	width: 3px;
	height: 260px;
	background: #90caf9;
	transform: skew(30deg);
	z-index: 1;
	.left-bone {
		color: #777;
		position: absolute;
		top: 0;
		left: -150px;
		width: 150px;
		height: 260px;
		.left-bone-item {
			transform: skew(-30deg);
			height: 35px;
			margin-bottom: 5px;
			margin-top: 15px;
			display: flex;
			justify-content: flex-end;
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text {
								width: 100px;
				margin-left: 4px;
				height: 35px;
				line-height: 35px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.line {
				margin-left: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}
		}
	}
	.right-bone {
		color: #777;
		position: absolute;
		top: 0;
		right: -150px;
		width: 150px;
		height: 260px;
		.right-bone-item {
			transform: skew(-30deg);
			height: 35px;
			margin-bottom: 15px;
			margin-top: 5px;
			display: flex;
			justify-content: flex-start;
			.line {
				margin-right: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}
			.text {
								width: 100px;
				margin-right: 4px;
				height: 35px;
				line-height: 35px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}

.bottom-bone {
	position: absolute;
	top: 280px;
	right: 360px;
	width: 3px;
	height: 260px;
	background: #90caf9;
	transform: skew(-30deg);
	z-index: 1;
	.left-bone {
		color: #777;
		position: absolute;
		top: 0;
		left: -150px;
		width: 150px;
		height: 260px;
		.left-bone-item {
			transform: skew(30deg);
			height: 35px;
			margin-bottom: 5px;
			margin-top: 15px;
			display: flex;
			justify-content: flex-end;
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text {
								width: 100px;
				margin-left: 4px;
				height: 35px;
				line-height: 35px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.line {
				margin-left: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}
		}
	}
	.right-bone {
		color: #777;
		position: absolute;
		top: 0;
		right: -150px;
		width: 150px;
		height: 260px;
		.right-bone-item {
			transform: skew(30deg);
			height: 35px;
			margin-bottom: 15px;
			margin-top: 5px;
			display: flex;
			justify-content: flex-start;
			.line {
				margin-right: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}
			.text {
								width: 100px;
				margin-right: 4px;
				height: 35px;
				line-height: 35px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}

.bottom-bone1 {
	position: absolute;
	top: 280px;
	right: 660px;
	width: 3px;
	height: 260px;
	background: #90caf9;
	transform: skew(-30deg);
	z-index: 1;
	.left-bone {
		color: #777;
		position: absolute;
		top: 0;
		left: -150px;
		width: 150px;
		height: 260px;
		.left-bone-item {
			transform: skew(30deg);
			height: 35px;
			margin-bottom: 5px;
			margin-top: 15px;
			display: flex;
			justify-content: flex-end;
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text {
								width: 100px;
				margin-left: 4px;
				height: 35px;
				line-height: 35px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.line {
				margin-left: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}
		}
	}
	.right-bone {
		color: #777;
		position: absolute;
		top: 0;
		right: -150px;
		width: 150px;
		height: 260px;
		.right-bone-item {
			transform: skew(30deg);
			height: 35px;
			margin-bottom: 15px;
			margin-top: 5px;
			display: flex;
			justify-content: flex-start;
			.line {
				margin-right: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}
			.text {
								width: 100px;
				margin-right: 4px;
				height: 35px;
				line-height: 35px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}

.bottom-bone2 {
	position: absolute;
	top: 280px;
	right: 960px;
	width: 3px;
	height: 260px;
	background: #90caf9;
	transform: skew(-30deg);
	z-index: 1;
	.left-bone {
		color: #777;
		position: absolute;
		top: 0;
		left: -150px;
		width: 150px;
		height: 260px;
		.left-bone-item {
			transform: skew(30deg);
			height: 35px;
			margin-bottom: 5px;
			margin-top: 15px;
			display: flex;
			justify-content: flex-end;
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text {
								width: 100px;
				margin-left: 4px;
				height: 35px;
				line-height: 35px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.line {
				margin-left: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}
		}
	}
	.right-bone {
		color: #777;
		position: absolute;
		top: 0;
		right: -150px;
		width: 150px;
		height: 260px;
		.right-bone-item {
			transform: skew(30deg);
			height: 35px;
			margin-bottom: 15px;
			margin-top: 5px;
			display: flex;
			justify-content: flex-start;
			.line {
				margin-right: 7px;
				margin-top: 16px;
				width: 30px;
				height: 2px;
				background: rgba(174, 208, 255, 1);
			}
			.text {
				width: 100px;
				margin-right: 4px;
				height: 35px;
				line-height: 35px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.icon {
				margin-top: 7px;
				width: 20px;
				height: 20px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
</style>
