<template>
	<div class="deep-mining">
		<div class="side-nav">
			<div
				v-for="(item, index) in activeTab"
				:key="index"
				class="tab-item"
				:class="{ active: index === activeIndex }"
				@click="activeIndex = index"
			>
				{{ item }}
				<span v-if="index === activeIndex" class="arrow"></span>
			</div>
		</div>
		<div class="main">
			<div class="left">
				<AnalysisBox title="选择制裁">
					<div class="left-main">
						<div class="date-picker-box">
							<el-date-picker
								v-model="dateRange"
								type="daterange"
								range-separator="--"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="YYYY-MM-DD"
								style="width: 100%"
								:clearable="false"
								@change="handleDateChange"
							/>
						</div>
						<div class="list-header">
							<div class="count">共{{ sanctionList.length }}次制裁</div>
							<!-- 暂时隐藏，说这里可能是轮播图的效果 -->
							<!-- <div class="pagination">
							<div class="page-btn prev">
								<el-icon><ArrowLeft /></el-icon>
							</div>
							<div class="page-btn next">
								<el-icon><ArrowRight /></el-icon>
							</div>
						</div> -->
						</div>
						<div class="list-content" v-loading="loading">
							<div
								class="list-item"
								v-for="item in sanctionList"
								:key="item.id"
								:class="{ active: currentSanctionId === item.id }"
								@click="handleSanctionSelect(item.id)"
							>
								<div class="item-left">{{ item.date }}-{{ item.title }}</div>
								<div class="item-right">{{ item.count }}{{ item.unit }}</div>
							</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
			<div class="right">
				<AnalysisBox title="制裁产业链时序图">
					<template #header-btn>
						<el-select
							v-model="selectedIndustryId"
							placeholder="请选择"
							class="industry-select"
							@change="
								() => {
									getFishboneData();
									getCnEntityOnChainData();
								}
							"
						>
							<el-option v-for="item in industryList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</template>
					<div class="right-main">
						<div class="right-main-content">
							<div class="hintWrap">
								<div class="icon1"></div>
								<div class="title">
									2025年实体清单制裁范围扩大至芯片制造环节，为中国的芯片制造能力划定“技术天花板”，阻止其向更先进水平发展。制裁范围向上游设备和材料、下游先进封装以及关键工具（如EDA软件）延伸，意图瓦解中国构建自主可控产业链的努力。
								</div>
								<div class="icon2Wrap">
									<div class="icon2"></div>
								</div>
							</div>
							<div class="right-main-content-main">
								<div class="fishbone-wrapper">
									<div class="fishbone-scroll-container" ref="scrollContainerRef">
										<div class="fishbone" ref="fishboneRef" v-if="fishboneDataList.length > 0">
											<div class="main-line" :style="{ width: fishboneDataList.length * 200 + 300 + 'px' }">
												<!-- 主轴上的标签 -->
												<div
													class="main-line-text"
													v-for="(item, index) in mainLineLabels"
													:key="'label-' + index"
													:class="{
														'blue-theme': index < 2,
														'green-theme': index >= 2 && index < 4,
														'purple-theme': index >= 4
													}"
													:style="{ left: index * 200 + 220 + 'px' }"
												>
													{{ item }}
												</div>
											</div>
											<!-- 奇数索引的数据组放在上方 -->
											<div
												v-for="(causeGroup, groupIndex) in getOddGroups(fishboneDataList)"
												:key="'top-' + groupIndex"
												:class="getTopBoneClass(groupIndex)"
												:style="{ left: groupIndex * 400 + 420 + 'px' }"
											>
												<div class="left-bone">
													<div
														class="left-bone-item"
														v-for="(item, index) in getLeftItems(causeGroup.causes)"
														:key="'left-' + index"
													>
														<img :src="defaultTitle || item.picture" alt="" class="company-icon" />
														<div class="text" :title="item.name">{{ 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>
														<img :src="defaultTitle || item.picture" alt="" class="company-icon" />
														<div class="text" :title="item.name">{{ item.name }}</div>
													</div>
												</div>
											</div>

											<!-- 偶数索引的数据组放在下方 -->
											<div
												v-for="(causeGroup, groupIndex) in getEvenGroups(fishboneDataList)"
												:key="'bottom-' + groupIndex"
												:class="getBottomBoneClass(groupIndex)"
												:style="{ left: groupIndex * 400 + 220 + 'px' }"
											>
												<div class="left-bone">
													<div
														class="left-bone-item"
														v-for="(item, index) in getLeftItems(causeGroup.causes)"
														:key="'left-bottom-' + index"
													>
														<img :src="defaultTitle || item.picture" alt="" class="company-icon" />
														<div class="text" :title="item.name">{{ 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>
														<img :src="defaultTitle || item.picture" alt="" class="company-icon" />
														<div class="text" :title="item.name">{{ 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>
							</div>
							<div class="right-main-content-footer">
								<div class="footer-item1">
									<div class="footer-item1-bottom">
										<div class="icon">
											<img src="../../../assets/images/warning.png" alt="" />
										</div>
										<div class="text">
											{{
												`中国企业${cnEntityOnChainData.upstreamInternalCount || 0}家（${formatRate(
													cnEntityOnChainData.upstreamInternalRate
												)}%），受制裁${cnEntityOnChainData.upstreamEntityCount || 0}家（${formatRate(
													cnEntityOnChainData.upstreamEntityRate
												)}%）`
											}}
										</div>
									</div>
									<div class="footer-item1-top">{{ "上游" }}</div>
								</div>
								<div class="footer-item2">
									<div class="footer-item2-bottom">
										<div class="icon">
											<img src="../../../assets/images/warning.png" alt="" />
										</div>
										<div class="text">
											{{
												`中国企业${cnEntityOnChainData.midstreamInternalCount || 0}家（${formatRate(
													cnEntityOnChainData.midstreamInternalRate
												)}%），受制裁${cnEntityOnChainData.midstreamEntityCount || 0}家（${formatRate(
													cnEntityOnChainData.midstreamEntityRate
												)}%）`
											}}
										</div>
									</div>
									<div class="footer-item2-top">{{ "中游" }}</div>
								</div>
								<div class="footer-item3">
									<div class="footer-item3-bottom">
										<div class="icon">
											<img src="../../../assets/images/warning.png" alt="" />
										</div>
										<div class="text">
											{{
												`中国企业${cnEntityOnChainData.downstreamInternalCount || 0}家（${formatRate(
													cnEntityOnChainData.downstreamInternalRate
												)}%），受制裁${cnEntityOnChainData.downstreamEntityCount || 0}家（${formatRate(
													cnEntityOnChainData.downstreamEntityRate
												)}%）`
											}}
										</div>
									</div>
									<div class="footer-item3-top">{{ "下游" }}</div>
								</div>
							</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import defaultTitle from "../../assets/default-icon2.png";
import {
	getDeepMiningSelect,
	getDeepMiningIndustry,
	getDeepMiningIndustryFishbone,
	getDeepMiningIndustryEntity
} from "@/api/exportControlV2.0";
import { useRoute } from "vue-router";

const route = useRoute();

// 实体清单-深度挖掘-产业链中国企业实体信息查询
const getCnEntityOnChainData = async () => {
	const currentSanction = sanctionList.value.find(item => item.id === currentSanctionId.value);
	const date = currentSanction ? currentSanction.date : "";
	// 确保 date 格式正确
	const formattedDate = date && date.includes("年") ? date.replace("年", "-").replace("月", "-").replace("日", "") : date;

	const params = {
		date: formattedDate
	};
	if (selectedIndustryId.value) {
		params.chainId = selectedIndustryId.value;
	}
	try {
		const res = await getDeepMiningIndustryEntity(params);
		if (res.code === 200 && res.data) {
			cnEntityOnChainData.value = res.data;
		} else {
			cnEntityOnChainData.value = {};
		}
	} catch (error) {
		console.error("获取产业链中国企业实体信息失败:", error);
		cnEntityOnChainData.value = {};
	}
};

// 实体清单-深度挖掘-产业链鱼骨图信息
const fishboneDataList = ref([]);
const getFishboneData = async () => {
	const currentSanction = sanctionList.value.find(item => item.id === currentSanctionId.value);
	const date = currentSanction ? currentSanction.date : "";
	// 确保 date 格式正确
	const formattedDate = date && date.includes("年") ? date.replace("年", "-").replace("月", "-").replace("日", "") : date;

	const params = {
		date: formattedDate
	};
	if (selectedIndustryId.value) {
		params.chainId = selectedIndustryId.value;
	}
	try {
		const res = await getDeepMiningIndustryFishbone(params);
		if (res.code === 200 && res.data && res.data.causes && res.data.causes.length > 0) {
			const rootCauses = res.data.causes;
			if (rootCauses.length > 0 && rootCauses[0].causes) {
				fishboneDataList.value = rootCauses.map(group => {
					return {
						causes: group.causes || []
					};
				});

				mainLineLabels.value = rootCauses.map(group => group.text || "");
			} else {
				fishboneDataList.value = [];
				mainLineLabels.value = [];
			}
		} else {
			fishboneDataList.value = [];
			mainLineLabels.value = [];
		}
	} catch (error) {
		console.error("获取产业链鱼骨图数据失败:", error);
		fishboneDataList.value = [];
	}
};

// 实体清单-深度挖掘-产业链列表信息
const industryList = ref([]);
const selectedIndustryId = ref(null);
const getIndustryList = async () => {
	try {
		const res = await getDeepMiningIndustry();
		if (res.code === 200 && res.data && res.data.length > 0) {
			industryList.value = res.data;
			selectedIndustryId.value = res.data[0].id;
			getFishboneData();
			getCnEntityOnChainData();
		} else {
			industryList.value = [];
			selectedIndustryId.value = null;
		}
	} catch (error) {
		console.error("获取产业链列表数据失败:", error);
		industryList.value = [];
		selectedIndustryId.value = null;
	}
};

// 获取选择制裁
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(100);
const total = ref(0);
const totalPage = ref(0);

const getDeepMiningSelectData = async () => {
	loading.value = true;
	const params = {
		startDate: dateRange.value && dateRange.value[0] ? dateRange.value[0] : "",
		endDate: dateRange.value && dateRange.value[1] ? dateRange.value[1] : "",
		// typeName: "实体清单",
		isCn: false,
		pageNum: currentPage.value,
		pageSize: pageSize.value,
		sanTypeIds: [Number(sanTypeId.value)] || 1 // 实体清单固定1
	};
	try {
		const res = await getDeepMiningSelect(params);
		if (res.code === 200 && res.data && res.data.content) {
			sanctionList.value = res.data.content.map(item => ({
				id: item.id,
				date: item.postDate,
				title: item.name,
				count: item.cnEntityCount,
				unit: "家中国实体", // 接口未返回单位，暂时固定
				summary: item.summary, // 保留额外信息备用
				techDomainList: item.techDomainList // 保留额外信息备用
			}));

			// 默认选中第一条
			if (sanctionList.value.length > 0) {
				currentSanctionId.value = sanctionList.value[0].id;
				// getFishboneData(); // 这里不需要调用，因为getIndustryList会调用
			}
		} else {
			sanctionList.value = [];
		}
	} catch (error) {
		console.error("获取选择制裁数据失败:", error);
		sanctionList.value = [];
	} finally {
		loading.value = false;
	}
};

// 日期选择变化
const handleDateChange = () => {
	currentPage.value = 1;
	getDeepMiningSelectData();
};

// 翻页
const handlePageChange = page => {
	if (page < 1 || page > totalPage.value) return;
	currentPage.value = page;
	getDeepMiningSelectData();
};

// 列表项点击事件
const handleSanctionSelect = id => {
	currentSanctionId.value = id;
	getFishboneData();
	getCnEntityOnChainData();
};

const activeTab = ref(["制裁时序分析"]);
const activeIndex = ref(0);

const dateRange = ref(["2025-01-01", "2025-12-31"]);
const sanctionList = ref([
	{ id: 1, date: "2025年2月8日", title: "实体清单更新", count: 2, unit: "家中国实体" },
	{ id: 2, date: "2025年4月10日", title: "实体清单更新", count: 5, unit: "家中国实体" },
	{ id: 3, date: "2025年6月29日", title: "实体清单更新", count: 6, unit: "家中国实体" },
	{ id: 4, date: "2025年8月12日", title: "实体清单更新", count: 24, unit: "家中国实体" },
	{ id: 5, date: "2025年8月19日", title: "实体清单更新", count: 11, unit: "家中国实体" },
	{ id: 6, date: "2025年9月12日", title: "实体清单更新", count: 3, unit: "家中国实体" },
	{ id: 7, date: "2025年9月26日", title: "实体清单更新", count: 6, unit: "家中国实体" },
	{ id: 8, date: "2025年10月12日", title: "实体清单更新", count: 18, unit: "家中国实体" }
]);
const currentSanctionId = ref(5);

const cnEntityOnChainData = ref({});

const mainLineLabels = ref(["关键原材料", "电池材料", "电子元器件", "动力电池", "电子控制系统", "动力电池"]);

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

// 获取偶数索引的数据组（放在下方）
const getEvenGroups = data => {
	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 formatRate = rate => {
	if (rate === undefined || rate === null) return "0.00";
	return (rate * 100).toFixed(2);
};

const sanTypeId = ref("");
onMounted(() => {
	// 获取路由参数中的sanTypeId
	sanTypeId.value = route.query.sanTypeId || "";
	// 获取选择制裁
	getDeepMiningSelectData();
	// 获取产业链信息
	getIndustryList();
});
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}

.deep-mining {
	width: 1601px;
	margin: 0 auto;
	position: relative;

	// min-height: 800px;
	.side-nav {
		position: absolute;
		top: 27px;
		right: 100%;
		margin-right: 12px;
		display: flex;
		flex-direction: column;
		gap: 16px;

		.tab-item {
			cursor: pointer;
			padding: 4px 20px;
			border-radius: 22px;
			font-size: 16px;
			font-weight: 400;
			font-family: "Microsoft YaHei";
			line-height: 24px;
			color: rgb(95, 101, 108);
			white-space: nowrap;
			display: flex;
			align-items: center;

			&.active {
				background-color: rgb(5, 95, 194);
				color: #fff;

				.arrow {
					display: inline-block;
					width: 0;
					height: 0;
					border-top: 5px solid transparent;
					border-bottom: 5px solid transparent;
					border-left: 6px solid #fff;
					margin-left: 8px;
				}
			}
		}
	}

	.main {
		width: 100%;
		padding-top: 16px;
		padding-bottom: 50px;
		display: flex;
		justify-content: space-between;

		.left {
			width: 480px;
			height: 828px;

			.left-main {
				margin-top: 11px;
				padding: 0 22px 0 23px;
				display: flex;
				flex-direction: column;
				height: calc(100% - 56px);

				.date-picker-box {
					margin-bottom: 16px;
				}

				.list-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 16px;
					font-size: 14px;
					color: #666;

					.count {
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						color: rgb(95, 101, 108);
					}

					.pagination {
						display: flex;
						gap: 12px;

						.page-btn {
							width: 28px;
							height: 28px;
							background: rgba(231, 243, 255, 1);
							border-radius: 4px;
							display: flex;
							align-items: center;
							justify-content: center;
							cursor: pointer;
							color: rgb(5, 95, 194);
							font-size: 16px;

							&.disabled {
								cursor: not-allowed;
								background: #f5f7fa;
								color: #c0c4cc;
							}

							&:not(.disabled):hover {
								background: #e1eeff;
							}
						}
					}
				}

				.list-content {
					flex: 1;
					overflow-y: auto;
					padding-bottom: 20px;

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

					&::-webkit-scrollbar-thumb {
						background: #ccc;
						border-radius: 3px;
					}

					.list-item {
						// height: 60px;
						border: 1px solid rgb(234, 236, 238);
						border-radius: 4px;
						margin-bottom: 8px;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 15px 16px;
						cursor: pointer;
						transition: all 0.3s;
						position: relative;
						background: #fff;

						.item-left {
							width: 260px;
							font-weight: 700;
							color: rgb(59, 65, 75);
							font-size: 16px;
							font-family: "Microsoft YaHei";
						}

						.item-right {
							color: rgb(132, 136, 142);
							font-size: 16px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
						}

						&:hover {
							border-color: #055fc2;
						}

						&.active {
							border-color: rgb(5, 95, 194);
							background-color: rgba(246, 250, 255, 1);

							.item-left,
							.item-right {
								color: rgb(5, 95, 194);
							}

							&::after {
								content: "";
								position: absolute;
								right: 0;
								top: 10px;
								bottom: 10px;
								width: 4px;
								background-color: rgb(5, 95, 194);
								// border-radius: 4px 0 0 4px;
							}
						}
					}
				}
			}
		}

		.right {
			width: 1105px;
			height: 828px;

			.right-main {
				margin-top: 11px;
				height: calc(100% - 56px);
				padding: 0 16px 16px 16px;

				.right-main-content {
					height: 100%;
					display: flex;
					flex-direction: column;

					.hintWrap {
						display: flex;
						align-items: center;
						padding: 7px 12px;
						border: 1px solid rgba(231, 243, 255, 1);
						border-radius: 4px;
						background: rgba(246, 250, 255, 1);
						margin-bottom: 9px;

						.icon1 {
							width: 19px;
							height: 20px;
							background-image: url("./assets/ai.png");
							background-size: 100% 100%;
							flex-shrink: 0;
						}

						.title {
							color: rgb(5, 95, 194);
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							margin-left: 13px;
							flex: 1;
						}

						.icon2Wrap {
							width: 24px;
							height: 24px;
							background-color: rgba(231, 243, 255, 1);
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 12px;
							margin-left: 20px;
							flex-shrink: 0;

							.icon2 {
								width: 24px;
								height: 24px;
								background-image: url("./assets/right.png");
								background-size: 100% 100%;
							}
						}
					}

					.right-main-content-main {
						flex: 1;
						// border: 1px solid #eaecee;
						// border-radius: 4px;
						// background: #f7f8f9;
						position: relative;
						overflow: hidden;

						.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;
							margin-left: 40px;

							.main-line {
								margin-top: 280px;
								width: 1888px;
								height: 3px;
								background: rgb(230, 231, 232);
								display: flex;
								justify-content: space-between;
								align-items: center;
								padding: 0 100px;

								// 虚线
								&::after {
									content: "";
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: 100%;
									// background: repeating-linear-gradient(to right, rgba(174, 208, 255, 1) 0, rgba(174, 208, 255, 1) 10px, transparent 10px, transparent 20px);
								}

								// 添加中间的文字块
								.main-line-text {
									position: absolute;
									// top: -14px;
									font-size: 16px;
									color: #055fc2;
									font-weight: bold;
									background-color: #f7f8f9;
									padding: 0 10px;
									z-index: 2;

									// 箭头背景
									height: 32px;
									line-height: 32px;
									width: 160px;
									text-align: center;
									background: rgba(231, 243, 255, 1);
									clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%);

									&.blue-theme {
										background: rgba(231, 243, 255, 1);
										color: rgba(22, 119, 255, 1);
									}

									&.green-theme {
										background: rgba(225, 255, 251, 1);
										color: rgba(19, 168, 168, 1);
									}

									&.purple-theme {
										background: rgba(246, 235, 255, 1);
										color: rgba(146, 84, 222, 1);
									}
								}
							}
						}

						.company-icon {
							width: 16px;
							height: 16px;
							margin: 0 4px;
							object-fit: contain;
						}

						.top-bone {
							position: absolute;
							top: 20px;
							right: 200px;
							width: 3px;
							height: 260px;
							background: rgb(230, 231, 232);
							transform: skew(30deg);
							z-index: 1;

							.left-bone {
								color: #777;
								position: absolute;
								top: 0;
								left: -150px;
								width: 150px;
								height: 50px;

								// overflow: hidden;
								.left-bone-item {
									transform: skew(-30deg);
									height: 45px;
									margin-bottom: 2px;
									margin-top: 2px;
									display: flex;
									justify-content: flex-end;
									align-items: center;

									.text {
										margin-left: 4px;
										height: 25px;
										line-height: 25px;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}

									.line {
										margin-left: 7px;
										width: 40px;
										height: 2px;
										background: rgb(230, 231, 232);
									}
								}
							}

							.right-bone {
								color: #777;
								position: absolute;
								top: 0;
								right: -150px;
								width: 150px;
								height: 210px;
								overflow: hidden;

								.right-bone-item {
									transform: skew(-30deg);
									height: 39px;
									margin-bottom: 2px;
									margin-top: 2px;
									display: flex;
									justify-content: flex-start;
									align-items: center;

									.line {
										margin-right: 7px;
										width: 30px;
										height: 2px;
										background: rgb(230, 231, 232);
									}

									.text {
										max-width: 100px;
										margin-right: 4px;
										height: 25px;
										line-height: 25px;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}
							}
						}

						.top-bone1 {
							@extend .top-bone;
							right: 500px;
						}

						.top-bone2 {
							@extend .top-bone;
							right: 800px;
						}

						.bottom-bone {
							position: absolute;
							top: 280px;
							right: 360px;
							width: 3px;
							height: 260px;
							background: rgb(230, 231, 232);
							transform: skew(-30deg);
							z-index: 1;

							.left-bone {
								color: #777;
								position: absolute;
								top: 50px;
								left: -150px;
								width: 150px;
								height: 260px;

								.left-bone-item {
									transform: skew(30deg);
									height: 39px;
									margin-bottom: 2px;
									margin-top: 2px;
									display: flex;
									justify-content: flex-end;
									align-items: center;

									.text {
										margin-left: 4px;
										height: 25px;
										max-width: 130px;
										line-height: 25px;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}

									.line {
										margin-left: 7px;
										width: 40px;
										height: 2px;
										background: rgb(230, 231, 232);
									}
								}
							}

							.right-bone {
								color: #777;
								position: absolute;
								top: 50px;
								right: -150px;
								width: 150px;
								height: 260px;

								.right-bone-item {
									transform: skew(30deg);
									height: 35px;
									margin-bottom: 2px;
									margin-top: 2px;
									display: flex;
									justify-content: flex-start;
									align-items: center;

									.line {
										margin-right: 7px;
										width: 30px;
										height: 2px;
										background: rgb(230, 231, 232);
									}

									.text {
										max-width: 100px;
										margin-right: 4px;
										height: 25px;
										line-height: 25px;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}
							}
						}

						.bottom-bone1 {
							@extend .bottom-bone;
							right: 660px;
						}

						.bottom-bone2 {
							@extend .bottom-bone;
							right: 960px;
						}
					}

					.right-main-content-footer {
						height: 84px;
						margin-top: 16px;
						display: flex;
						justify-content: space-between;

						.footer-item1,
						.footer-item2,
						.footer-item3 {
							flex: 1;
							display: flex;
							flex-direction: column;
							justify-content: flex-end;
						}

						.footer-item1 {
							.footer-item1-top {
								height: 28px;
								text-align: center;
								line-height: 28px;
								background: url("../../../assets/images/bg3.png");
								background-size: 100% 100%;
								color: rgba(22, 119, 255, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								margin-top: 15px;
								margin-right: -10px; // Negative margin to overlap/connect
								position: relative; // Ensure z-index works if needed
								z-index: 1;
							}

							.footer-item1-bottom {
								display: flex;
								justify-content: center;

								.icon {
									margin-top: 9px;
									width: 16px;
									height: 16px;

									img {
										width: 100%;
										height: 100%;
									}
								}

								.text {
									margin-top: 7px;
									margin-left: 8px;
									height: 22px;
									color: rgba(206, 79, 81, 1);
									font-size: 14px;
								}
							}
						}

						.footer-item2 {
							.footer-item2-top {
								height: 28px;
								text-align: center;
								line-height: 28px;
								background: url("../../../assets/images/bg2.png");
								background-size: 100% 100%;
								color: rgba(19, 168, 168, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								margin-top: 15px;
								margin-right: -10px; // Negative margin to connect with next item
								margin-left: -10px; // Negative margin to connect with prev item
								position: relative;
								z-index: 1;
							}

							.footer-item2-bottom {
								display: flex;
								justify-content: center;

								.icon {
									margin-top: 9px;
									width: 16px;
									height: 16px;

									img {
										width: 100%;
										height: 100%;
									}
								}

								.text {
									margin-top: 7px;
									margin-left: 8px;
									height: 22px;
									color: rgba(206, 79, 81, 1);
									font-size: 14px;
								}
							}
						}

						.footer-item3 {
							.footer-item3-top {
								height: 28px;
								text-align: center;
								line-height: 28px;
								background: url("../../../assets/images/bg1.png");
								background-size: 100% 100%;
								color: rgba(146, 84, 222, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								margin-top: 15px;
								margin-left: -10px; // Negative margin to connect
								position: relative;
								z-index: 1;
							}

							.footer-item3-bottom {
								display: flex;
								justify-content: center;

								.icon {
									margin-top: 9px;
									width: 16px;
									height: 16px;

									img {
										width: 100%;
										height: 100%;
									}
								}

								.text {
									margin-top: 7px;
									margin-left: 8px;
									height: 22px;
									color: rgba(206, 79, 81, 1);
									font-size: 14px;
								}
							}
						}
					}
				}
			}
		}
	}
}

.title-com {
	width: 100%;
	height: 56px;
	display: flex;
	align-items: center;
	padding: 14px 12px 16px 0;

	.box {
		width: 8px;
		height: 20px;
		background-color: rgb(5, 95, 194);
		border-bottom-right-radius: 4px;
		border-top-right-radius: 4px;
		margin-right: 14px;
	}

	.text {
		font-size: 20px;
		font-weight: 700;
		font-family: "Microsoft YaHei";
		line-height: 26px;
		color: rgb(5, 95, 194);
	}

	.right-group {
		margin-left: auto;
		display: flex;
		align-items: center;

		.toggle-btns {
			display: flex;
			gap: 8px;
			margin-right: 20px;

			.t-btn {
				height: 28px;
				padding: 1px 8px;
				border: 1px solid transparent;
				border-radius: 4px;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				font-family: "Microsoft YaHei";
				color: rgb(59, 65, 75);
				cursor: pointer;
				box-sizing: border-box;
				border: 1px solid rgb(230, 231, 232);

				&.active {
					color: rgb(5, 95, 194);
					background-color: rgba(246, 250, 255, 1);
					border-color: rgb(5, 95, 194);
				}
			}
		}

		.btn {
			margin-left: 0;
		}

		.industry-select {
			width: 160px;
			height: 28px;
			margin-right: 12px;

			:deep(.el-input__wrapper) {
				height: 28px;
				min-height: 28px;
				padding: 0 8px;
				box-shadow: 0 0 0 1px #dcdfe6 inset;
			}

			:deep(.el-input__inner) {
				height: 28px;
				line-height: 28px;
				font-size: 14px;
			}
		}

		.time-select {
			width: 120px;
			height: 28px;
			margin-right: 14px;

			:deep(.el-input__wrapper) {
				height: 28px;
				min-height: 28px;
				padding: 0 8px;
				box-shadow: 0 0 0 1px #dcdfe6 inset;
			}

			:deep(.el-input__inner) {
				height: 28px;
				line-height: 28px;
				font-size: 14px;
			}
		}
	}

	.btn {
		width: 92px;
		height: 28px;
		margin-left: auto;

		img {
			width: 28px;
			height: 28px;
			cursor: pointer;
		}

		img:first-child {
			margin-right: 4px;
		}
	}
}

.industry-select {
	width: 160px;
	height: 28px;
	margin-right: 12px;

	:deep(.el-input__wrapper) {
		height: 28px;
		min-height: 28px;
		padding: 0 8px;
		box-shadow: 0 0 0 1px #dcdfe6 inset;
	}

	:deep(.el-input__inner) {
		height: 28px;
		line-height: 28px;
		font-size: 14px;
	}
}
</style>
