<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">
				<div class="title-com">
					<div class="box"></div>
					<div class="text">选择制裁</div>
					<div class="right-group">
						<div class="btn">
							<img src="../../assets/数据库按钮.png" alt="" />
							<img src="../../assets/下载按钮.png" alt="" />
							<img src="../../assets/收藏按钮.png" alt="" />
						</div>
					</div>
				</div>
				<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>
			</div>
			<div class="right">
				<div class="title-com">
					<div class="box"></div>
					<div class="text">制裁产业链时序图</div>
					<div class="right-group">
						<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>
						<div class="btn">
							<img src="../../assets/数据库按钮.png" alt="" />
							<img src="../../assets/下载按钮.png" alt="" />
							<img src="../../assets/收藏按钮.png" alt="" />
						</div>
					</div>
				</div>
				<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>
			</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";

// 实体清单-深度挖掘-产业链中国企业实体信息查询
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(10000);
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
    };
    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);
};

onMounted(() => {
	// 获取选择制裁
	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;
			background-color: #fff;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			border-radius: 10px;
			.left-main {
				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;
			background-color: #fff;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			border-radius: 10px;
			.right-main {
				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;
		}
	}
}
</style>
