<template>
	<div class="fishbone-wrapper">
		<div class="fishbone-scroll-container" ref="scrollContainerRef">
			<div class="fishbone" ref="fishboneRef" v-if="fishboneData.length > 0">
				<div class="main-line" :style="{ width: (fishboneData.length / 2) * 340 - 275 + 'px' }"></div>
				<!-- 奇数索引的数据组放在上方 -->
				<div
					v-for="(causeGroup, groupIndex) in getOddGroups(fishboneData)"
					:key="'top-' + groupIndex"
					:class="getTopBoneClass(groupIndex)"
					:style="{ left: groupIndex * 300 + 400 + 'px' }"
				>
					<div class="left-bone">
						<div
							class="left-bone-item"
							v-for="(item, index) in getLeftItems(causeGroup.causes)"
							:key="'left-' + index"
						>
							<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="'right-' + index"
						>
							<div class="line"></div>
							<div class="text">{{ item.name }}</div>
						</div>
					</div>
				</div>

				<!-- 偶数索引的数据组放在下方 -->
				<div
					v-for="(causeGroup, groupIndex) in getEvenGroups(fishboneData)"
					:key="'bottom-' + groupIndex"
					:class="getBottomBoneClass(groupIndex)"
					:style="{ left: groupIndex * 300 + 200 + 'px' }"
				>
					<div class="left-bone">
						<div
							class="left-bone-item"
							v-for="(item, index) in getLeftItems(causeGroup.causes)"
							:key="'left-bottom-' + index"
						>
							<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="'right-bottom-' + index"
						>
							<div class="line"></div>
							<div class="text">{{ item.name }}</div>
						</div>
					</div>
				</div>
			</div>
			<div v-else style="display: flex; justify-content: center; align-items: center; height: 200px; width: 100%">
				<el-empty description="暂无相关数据" />
			</div>
		</div>

		<!-- 滚动指示器 -->
		<!-- <div class="scroll-indicators" v-if="showScrollIndicator">
			<div class="scroll-btn left" :class="{ disabled: !canScrollLeft }" @click="scrollLeft">‹</div>
			<div class="scroll-btn right" :class="{ disabled: !canScrollRight }" @click="scrollRight">›</div>
		</div> -->
	</div>
</template>

<script setup>
import { getChainFishbone } from "@/api/exportControl";
import { onMounted, ref, nextTick, watch } from "vue";
// 这儿需要接收父组件传递来的产业链ID
const props = defineProps({
	chainId: {
		type: Number,
		default: 1
	}
});

// const chainId = ref(1);
const fishboneData = ref([]);
const scrollContainerRef = ref(null);
const fishboneRef = ref(null);
const showScrollIndicator = ref(false);
const canScrollLeft = ref(false);
const canScrollRight = ref(true);

// 获取奇数索引的数据组（放在上方）
const getOddGroups = data => {
	console.log(
		"getOddGroups:",
		data.filter((_, index) => index % 2 === 1)
	);
	return data.filter((_, index) => index % 2 === 1);
};

// 获取偶数索引的数据组（放在下方）
const getEvenGroups = data => {
	console.log(
		"getEvenGroups:",
		data.filter((_, index) => index % 2 === 0)
	);
	return data.filter((_, index) => index % 2 === 0);
};

// 获取上方鱼骨图位置类名
const getTopBoneClass = index => {
	const positions = ["top-bone", "top-bone1", "top-bone2"];
	return positions[index % 3] || "top-bone";
};

// 获取下方鱼骨图位置类名
const getBottomBoneClass = index => {
	const positions = ["bottom-bone", "bottom-bone1", "bottom-bone2"];
	return positions[index % 3] || "bottom-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);
};

// 检查滚动状态
const updateScrollState = () => {
	if (!scrollContainerRef.value) return;

	const container = scrollContainerRef.value;
	canScrollLeft.value = container.scrollLeft > 0;
	canScrollRight.value = container.scrollLeft < container.scrollWidth - container.clientWidth;
};

// 滚动处理
const scrollLeft = () => {
	if (scrollContainerRef.value) {
		scrollContainerRef.value.scrollBy({ left: -200, behavior: "smooth" });
	}
};

const scrollRight = () => {
	if (scrollContainerRef.value) {
		scrollContainerRef.value.scrollBy({ left: 200, behavior: "smooth" });
	}
};

// 处理滚动事件
const handleScroll = () => {
	updateScrollState();
};

onMounted(async () => {
	try {
		const chainFishboneData = await getChainFishbone(props.chainId);
		fishboneData.value = chainFishboneData?.causes ?? [];

		// 等待DOM更新后检查是否需要滚动
		nextTick(() => {
			if (scrollContainerRef.value && fishboneRef.value) {
				showScrollIndicator.value = fishboneRef.value.scrollWidth > scrollContainerRef.value.clientWidth;
				updateScrollState();
			}
		});

		console.log("鱼骨图数据:", fishboneData.value);
	} catch (error) {
		console.log(error);
	}
});

// 监听props中的chainId变化
watch(
	() => props.chainId,
	async () => {
		try {
			const chainFishboneData = await getChainFishbone(props.chainId);
			fishboneData.value = chainFishboneData?.causes ?? [];
		} catch (error) {
			console.log(error);
		}
	}
);
</script>

<style lang="scss" scoped>
.fishbone-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

.fishbone-scroll-container {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	scrollbar-color: rgba(144, 202, 249, 0.5) transparent;

	&::-webkit-scrollbar {
		height: 6px;
	}

	&::-webkit-scrollbar-track {
		background: transparent;
	}

	&::-webkit-scrollbar-thumb {
		background-color: rgba(144, 202, 249, 0.5);
		border-radius: 3px;
	}
}

/* ... 原有的样式保持不变 ... */

.fishbone {
	position: relative;
	width: fit-content;
	height: 100%;
	margin-top: 40px;
	min-width: 100%;
	padding-left: 275px;
	.main-line {
		margin-top: 280px;
		width: 1888px;
		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;
			.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;
			}
		}
	}
}

.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;
			.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;
			}
		}
	}
}

.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;
			.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;
			}
		}
	}
}

.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;
			.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;
			}
		}
	}
}

.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;
			.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;
			}
		}
	}
}

.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;
			.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;
			}
		}
	}
}

.scroll-indicators {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	padding: 0 10px;
	z-index: 10;
}

.scroll-btn {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: bold;
	color: #90caf9;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	transition: all 0.2s ease;

	&:hover:not(.disabled) {
		background: #90caf9;
		color: white;
		transform: scale(1.1);
	}

	&.disabled {
		color: #c0c4cc;
		cursor: not-allowed;
		background: rgba(255, 255, 255, 0.5);
	}
}
</style>
