<template>
	<BillPageShell>
		<div class="wrap">
			<div class="left">
				<AnalysisBox title="涉及行业" :showAllBtn="false" width="100%" height="100%">
					<div class="left-main">
						<div class="left-center">
							<el-select
								v-model="curHylyId"
								placeholder="请选择领域"
								class="left-center-select"
								@change="handleIndustryChange"
							>
								<el-option
									v-for="item in industryList"
									:key="item.id"
									:label="item.name || item.hylymc"
									:value="item.id"
								/>
							</el-select>
							<el-input
								v-model="companySearchKeyword"
								placeholder="搜索实体"
								class="left-center-search"
								:suffix-icon="Search"
								clearable
							/>
						</div>
						<div class="left-list">
							<div class="left-list-title">实体名称</div>
							<div class="left-list-content">
								<el-empty
									v-if="!curCompanyList?.length"
									style="padding: 60px 0;"
									description="暂无数据"
									:image-size="100"
								/>
								<el-scrollbar v-else height="100%" always>
									<div class="item-box">
										<div
											v-for="(val, idx) in curCompanyList"
											:key="val.id"
											class="item"
											:class="{ itemActive: companyActiveIndex === ((currentPage - 1) * pageSize + idx) }"
											@click="handleClickCompany(val, idx)"
										>
											<div class="item-icon">
												<img :src="defaultIcon2" alt="" class="item-img" />
											</div>
											<div
												class="title"
												:class="{ titleActive: companyActiveIndex === ((currentPage - 1) * pageSize + idx) }"
											>
												{{ val.name }}
											</div>
											<div class="icon">
												<img v-if="val.status === 'up'" :src="upIcon" alt="" />
												<img v-if="val.status === 'down'" :src="downIcon" alt="" />
											</div>
										</div>
									</div>
								</el-scrollbar>
							</div>
						</div>
						<div class="left-pagination">
							<div class="left-pagination-left">{{ `共 ${filteredCompanyList.length} 项` }}</div>
							<div class="left-pagination-right">
								<el-pagination
									@current-change="handleCurrentChange"
									:pageSize="pageSize"
									:current-page="currentPage"
									size="small"
									background
									layout="prev, pager, next"
									:total="filteredCompanyList.length"
								/>
							</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
			<div class="right">
				<AnalysisBox :showAllBtn="false">
					<template #custom-title>
						<div class="custom-title">
							<div class="title-left">
								<div :class="['title-item', { 'title-active': contentType==1 }]" @click="headerContentType(1)">
									<div class="title-icon">
										<img :src="contentType==1 ? icon1620 : icon1621" alt="" />
									</div>
									<div>产业链</div>
								</div>
								<div :class="['title-item', { 'title-active': contentType==2 }]" @click="headerContentType(2)">
									<div class="title-icon">
										<img :src="contentType==2 ? icon422 : icon423" alt="" />
									</div>
									<div>实体关系</div>
								</div>
							</div>
							<div class="title-right" v-if="contentType==1">
								<el-select v-model="industryChain.id" style="width: 100%" @change="onDecreeChainNodes">
									<el-option v-for="item in industryChain.list" :key="item.id" :label="item.name" :value="item.id" />
								</el-select>
							</div>
						</div>
					</template>
					<div class="box2-main">
						<AiTips :tips="tips" />
						<div class="graph-box" v-if="contentType==1">
							<ChartChain :listData="fishbone.list" :baseData="fishbone.base" />
						</div>
						<div class="graph-box" v-if="contentType==2 && graphInfo.nodes.length">
							<GraphChart :nodes="graphInfo.nodes" :links="graphInfo.links" layoutType="force" />
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>
	</BillPageShell>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, computed, watch, reactive } from "vue";
import { useRoute } from "vue-router";
import * as echarts from "echarts";

import BillPageShell from "@/views/bill/components/layout/BillPageShell.vue";

const route = useRoute();
import { getCompanyList, getHylyList, getCompanyDetail } from "@/api/influence";
import getLineChart from "./utils/lineChart";
import getBarChart1 from "./utils/barChart1";
import getGraph from "./utils/graph";
import getGraphChart from "./utils/graphChart";
import getTreeChart from "./utils/treeChart";

import downIcon from "./assets/images/down.png";
import upIcon from "./assets/images/up.png";
import defaultIcon2 from "@/assets/icons/default-icon2.png";
import CompanyLogo from "./assets/images/company-logo.png";
import icon1 from "./assets/images/icon1.png";
import icon2 from "./assets/images/icon2.png";
import icon3 from "./assets/images/icon3.png";
import uncheckIcon from "./assets/images/uncheck.png";
import checkedIcon from "./assets/images/checked.png";
import closeIcon from "./assets/images/close.png";

import { Search } from "@element-plus/icons-vue";
import Fishbone from "./components/fishbone.vue";
import CommonPrompt from "../../commonPrompt/index.vue";
import AnalysisBox from "@/components/base/boxBackground/analysisBox.vue";

import ChartChain from "@/views/decree/decreeLayout/influence/com/ChartChain.vue";
import AiTips from "@/views/decree/decreeLayout/influence/com/AiTips.vue";
import GraphChart from "@/components/base/GraphChart/index.vue";

import {
	getDecreeRelatedChain,
	getDecreeChainNodes,
	getDecreeRelatedEntitie,
} from "@/api/decree/influence";

import icon422 from "@/views/decree/decreeLayout/influence/assets/images/icon422.png";
import icon423 from "@/views/decree/decreeLayout/influence/assets/images/icon423.png";
import icon1620 from "@/views/decree/decreeLayout/influence/assets/images/icon1620.png";
import icon1621 from "@/views/decree/decreeLayout/influence/assets/images/icon1621.png";
import company from "@/views/decree/decreeLayout/influence/assets/images/company.png";

import CompanyImg from "./assets/images/symbol.png";

const ALL_INDUSTRY_VALUE = "__all_industry__";
const isShowCompanyDialog = ref(false);

const handleIndustryChange = () => {
	handleGetCompanyListById();
};

// 绘制echarts图表
const setChart = (option, chartId) => {
	let chartDom = document.getElementById(chartId);
	if (!chartDom) return;
	chartDom.removeAttribute("_echarts_instance_");
	let chart = echarts.init(chartDom);
	chart.setOption(option);
	return chart;
};

const industryActiveIndex = ref(0);
const companyActiveIndex = ref(0);
const curCompanyId = ref("");

const handleClickCompany = (val, index) => {
	companyActiveIndex.value = (currentPage.value - 1) * pageSize.value + index;
	if (val) {
		// 右侧鱼骨图查询：当前优先使用 chainCompanyId，后续可平滑切换到 id
		curCompanyId.value = val.chainCompanyId || val.id;
		// handleGetCompanyDetail();
		companyInfo.value.name = val.name;
		companyInfo.value.status = val.status || companyInfo.value.status;
		headerChartData(val);
	}
	// isShowCompanyDialog.value = true;
};

const tips =
	"这项政令标志着中美AI竞争进入一个新阶段，其核心特征是 “精准封锁”与“体系输出”相结合。它短期内无疑会给中国AI产业链带来压力，但长期看，这场竞争更可能是一场围绕技术路线、生态系统和治理规则的持久战。";

const contentType = ref(1);
const entityInfo = reactive({
	id: "",
	node: { id: "", companyName: "" },
});

// 产业链
const industryChain = reactive({
	list: [],
	id: "",
});

// 产业链鱼骨图
const fishbone = reactive({
	list: [],
	base: [],
});

// 实体关系
const graphInfo = reactive({
	nodes: [],
	links: [],
});

const onDecreeRelatedChain = async (id) => {
	try {
		const res = await getDecreeRelatedChain({ id });
		if (res.code === 200) {
			industryChain.list = res.data || [];
			if (industryChain.list.length) onDecreeChainNodes(industryChain.list[0].id);
		}
	} catch (error) {
		console.log("获取产业链失败", error);
	}
};

const onDecreeChainNodes = async (id) => {
	industryChain.id = id;
	try {
		const res = await getDecreeChainNodes({ id });
		if (res.code === 200) {
			let obj = res.data.chains.reduce((result, item) => {
				result["chain-" + item.id] = { ...item, children: [] };
				return result;
			}, {});

			res.data.children.forEach((item) => {
				if (item.companyId == entityInfo.id) {
					obj["chain-" + item.chainId].children.push({ ...item, back: true });
				} else if (obj["chain-" + item.chainId]?.children?.length < 10) {
					obj["chain-" + item.chainId].children.push(item);
				}
			});

			fishbone.list = Object.values(obj);
			fishbone.base = (res.data.levelInfos || []).map((item, index) => {
				return { ...item, name: ["上游", "中游", "下游"][index] };
			});
		}
	} catch (error) {
		console.log("获取产业链鱼骨图失败", error);
	}
};

const onFormatLink = (item, index) => {
	return {
		id: `link-${index + 1}`,
		source: item.id + "",
		target: entityInfo.id + "",
		label: {
			show: true,
			color: "#055fc2",
			backgroundColor: "#eef7ff",
			borderWidth: 0,
			offset: [0, 15],
			formatter: item.relation,
		},
		lineStyle: { color: "#B9DCFF", type: "solid", opacity: 1 },
	};
};

const onWordWrap = (word, num) => {
	const list = (word || "").split("");
	let label = "";
	for (let i = 0; i < list.length; i++) {
		if (i % num === 0 && i !== 0) {
			label += "\n";
		}
		label += list[i];
	}
	return label;
};

const onFormatNode = (item) => {
	let leader = item.id == entityInfo.id;
	return {
		id: item.id + "",
		name: onWordWrap(item.companyName || item.name || "", 7),
		label: {
			show: true,
			color: "#3b414b",
			fontSize: leader ? 18 : 14,
			fontWeight: leader ? 700 : 400,
			fontFamily: "Source Han Sans CN",
		},
		symbolSize: 40,
		symbol: `image://${company}`,
	};
};

const onDecreeRelatedEntitie = async (id) => {
	try {
		const res = await getDecreeRelatedEntitie({
			orgId: id,
			rule: false,
			withSanInfo: false,
		});
		if (res.code === 200) {
			const data = res.data || {};
			const parentList = Array.isArray(data.parentOrgList) ? data.parentOrgList : [];
			const childrenList = Array.isArray(data.childrenOrgList) ? data.childrenOrgList : [];
			const relationList = [...parentList, ...childrenList].map((item) => ({
				...item,
				relation: item.description || "",
				companyName: item.companyName || item.name || "",
			}));
			graphInfo.links = relationList.map(onFormatLink);
			graphInfo.nodes = relationList.map(onFormatNode);
			if (entityInfo.node?.id) graphInfo.nodes.unshift(onFormatNode(entityInfo.node));
		}
	} catch (error) {
		console.log("获取实体关系失败", error);
	}
};

const headerChartData = (row) => {
	entityInfo.id = row.id;
	entityInfo.node = row;

	industryChain.id = "";
	fishbone.list = [];
	fishbone.base = [];

	graphInfo.nodes = [];
	graphInfo.links = [];

	switch (contentType.value) {
		case 1:
			onDecreeRelatedChain(row.chainCompanyId)
		break;
		case 2:
			onDecreeRelatedEntitie(row.chainCompanyId)
		break;
	}
};

const headerContentType = (type) => {
	contentType.value = type;
	headerChartData(entityInfo.node);
};

const pageSize = ref(10);
const currentPage = ref(1);

const companyList = ref([]); // 企业列表
const companySearchKeyword = ref(""); // 企业搜索关键词
let companySearchTimer = null;

// 根据关键词筛选后的企业列表
const filteredCompanyList = computed(() => {
	const keyword = companySearchKeyword.value?.trim().toLowerCase() || "";
	if (!keyword) return companyList.value;
	return companyList.value.filter((item) =>
		(item.name || "").toLowerCase().includes(keyword)
	);
});

// 当前页企业列表（分页 + 筛选）
const curCompanyList = computed(() => {
	const startIndex = (currentPage.value - 1) * pageSize.value;
	const endIndex = startIndex + pageSize.value;
	return filteredCompanyList.value.slice(startIndex, endIndex);
});

// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
};

// 搜索关键词变化时重置到第一页，并通过接口重新拉取列表
watch(companySearchKeyword, () => {
	currentPage.value = 1;
	if (companySearchTimer) {
		clearTimeout(companySearchTimer);
	}
	companySearchTimer = setTimeout(() => {
		handleGetCompanyListById();
	}, 300);
});

onBeforeUnmount(() => {
	if (companySearchTimer) {
		clearTimeout(companySearchTimer);
	}
});

const industryList = ref([
	//  {
	//     "id": 1,
	//     "hylyid": "0100",
	//     "hylymc": "风电"
	//   }
]);

const companyInfo = ref({
	// logo: CompanyLogo,
	// name: "宁德时代新能源科技股份有限公司",
	// status: "down",
	// changeRate: 0.16,
	// data1: {
	// 	icon: icon1,
	// 	title: "影响条款",
	// 	list: [
	// 		"严格限制外国敏感实体（FEOC）参与补贴",
	// 		"取消电动汽车补贴（2025年底生效）",
	// 		"任何实体若与被禁止外国实体签订超100万美元的关键技术许可协议，则不得向其提供联邦补贴"
	// 	]
	// },
	// data2: {
	// 	icon: icon2,
	// 	title: "融资情况",
	// 	data: {
	// 		time: ["2025-06", "2025-07", "2025-08"],
	// 		value: [1.12, 1.42, 1.5]
	// 	}
	// },
	// data3: {
	// 	icon: icon3,
	// 	title: "研发投入",
	// 	data: {
	// 		time: ["2023Q3", "2023Q4", "2024Q1", "2024Q2", "2024Q3", "2024Q4", "2025Q1", "2025Q2"],
	// 		value: [50, 53, 52, 54, 58, 60, 51, 56, 64]
	// 	}
	// }
});

// 获取行业领域列表
const handleGetHylyList = async () => {
	try {
		const res = await getHylyList();
		if (res.code === 200 && Array.isArray(res.data)) {
			industryList.value = [{ id: ALL_INDUSTRY_VALUE, name: "全部领域" }, ...res.data];
			curHylyId.value = ALL_INDUSTRY_VALUE;
			return;
		}
		industryList.value = [];
		curHylyId.value = "";
	} catch (error) {
		industryList.value = [];
		curHylyId.value = "";
	}
};

const curHylyId = ref("");

// 根据行业领域id获取公司列表
const handleGetCompanyListById = async () => {
	const params = {};
	const trimmedCompanyName = companySearchKeyword.value.trim();
	if (curHylyId.value && curHylyId.value !== ALL_INDUSTRY_VALUE) {
		params.id = curHylyId.value;
	}
	if (trimmedCompanyName) {
		params.companyName = trimmedCompanyName;
	}
	try {
		const res = await getCompanyList(params);
		// console.log('根据行业id获取公司里列表', res);
		if (res.code === 200 && Array.isArray(res.data) && res.data.length) {
			companyList.value = res.data;
			currentPage.value = 1;
			nextTick(() => {
				handleClickCompany(companyList.value[0], 0);
			});
		} else {
			companyList.value = [];
		}
	} catch (error) {
		companyList.value = [];
	}
};

// 根据法案id，公司id，行业领域id获取公司的详情
const handleGetCompanyDetail = async () => {
	const params = {
		billId: window.sessionStorage.getItem("billId"),
		companyId: curCompanyId.value,
		id: curHylyId.value === ALL_INDUSTRY_VALUE ? "" : curHylyId.value
	};
	try {
		const res = await getCompanyDetail(params);
		console.log('根据法案id，公司id，行业领域id获取公司的详情', res);
		if (res.code === 200 && res.data) {
			const data = res.data;
			companyInfo.value = {
				logo: data.imageUrl || CompanyLogo,
				name: data.name || "",
				status: "", // 接口未返回，暂时留空或保留默认
				changeRate: 0, // 接口未返回，暂时留空
				data1: {
					icon: icon1,
					title: "影响条款",
					list: (data.tkContentList || []).filter(item => item) // 过滤掉 null
				},
				data2: {
					icon: icon2,
					title: "融资情况",
					data: {
						time: (data.marketCapList || []).map(item => item.time),
						value: (data.marketCapList || []).map(item => item.marketCap)
					}
				},
				data3: {
					icon: icon3,
					title: "研发投入",
					data: {
						time: (data.investmentList || []).map(item => item.time),
						value: (data.investmentList || []).map(item => item.investment)
					}
				}
			};

			// 更新左侧关系图表数据
			const relationList = data.relationNameList || [];

			// 更新树形图数据
			const treeChildren = relationList.map((name, index) => ({
				id: index,
				name: name,
				symbolSize: 30,
				value: 5,
				symbol: `image://${CompanyImg}`
			}));

			treeData.value = [{
				id: relationList.length,
				name: data.name,
				symbolSize: 50,
				value: 10,
				symbol: `image://${CompanyImg}`,
				children: treeChildren
			}];

			if (relationList.length > 0) {
				const centerNode = {
					id: relationList.length, // 中心节点 ID
					name: data.name,
					symbolSize: 50,
					value: 10, // 权重
					symbol: `image://${CompanyImg}`,
					x: 400, // 假设容器宽度800，中心点x坐标
					y: 300, // 假设容器高度600，中心点y坐标
					fixed: true // 固定中心点位置
				};

				const radius = 200; // 圆的半径
				const newNodes = relationList.map((name, index) => {
					const angle = (index / relationList.length) * 2 * Math.PI; // 计算每个节点的角度
					return {
						id: index,
						name: name,
						symbolSize: 30,
						value: 5,
						symbol: `image://${CompanyImg}`,
						x: 400 + radius * Math.cos(angle), // 计算x坐标
						y: 300 + radius * Math.sin(angle), // 计算y坐标
						fixed: true // 固定位置，形成圆形布局
					};
				});
				newNodes.push(centerNode);

				const newLinks = relationList.map((_, index) => ({
					source: index,
					target: relationList.length // 指向中心节点
				}));

				nodes.value = newNodes;
				links.value = newLinks;
			} else {
				// 列表为空，只展示中心节点
				nodes.value = [{
					id: 0,
					name: data.name,
					symbolSize: 50,
					value: 10,
					symbol: `image://${CompanyImg}`,
					x: 400,
					y: 300,
					fixed: true
				}];
				links.value = [];
			}

			// 重新渲染图表
			nextTick(() => {
				const chart2Data = companyInfo.value.data2.data;
				if (chart2Data.time && chart2Data.time.length > 0) {
					let chart2 = getLineChart(chart2Data.time, chart2Data.value);
					setChart(chart2, "chart2");
				} else {
					let chartDom = document.getElementById("chart2");
					if (chartDom) {
						echarts.dispose(chartDom);
						chartDom.innerHTML = ""; // 清空容器内容
					}
				}

				const chart3Data = companyInfo.value.data3.data;
				if (chart3Data.time && chart3Data.time.length > 0) {
					let chart3 = getBarChart1(chart3Data.time, chart3Data.value);
					setChart(chart3, "chart3");
				} else {
					let chartDom = document.getElementById("chart3");
					if (chartDom) {
						echarts.dispose(chartDom);
						chartDom.innerHTML = ""; // 清空容器内容
					}
				}

				let graphChart = getGraphChart(nodes.value, links.value);
				setChart(graphChart, "graphChart");
			});

		} else {
			companyInfo.value = {};
		}
	} catch (error) { }
};



const nodes = ref([
	// {
	// 	id: 0,
	// 	name: "泰丰先行",
	// 	// category: 0,
	// 	symbolSize: 30,
	// 	value: 8,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 1,
	// 	name: "国轩高科",
	// 	// category: 0,
	// 	symbolSize: 30,
	// 	value: 9,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 2,
	// 	name: "智方纳米",
	// 	// category: 2,
	// 	symbolSize: 30,
	// 	value: 7,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 3,
	// 	name: "香百科技",
	// 	// category: 1,
	// 	symbolSize: 30,
	// 	value: 6,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 4,
	// 	name: "格林滨",
	// 	// category: 2,
	// 	symbolSize: 30,
	// 	value: 6,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 5,
	// 	name: "江西紫宸",
	// 	// category: 2,
	// 	symbolSize: 30,
	// 	value: 7,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 6,
	// 	name: "紫江企业",
	// 	// category: 4,
	// 	symbolSize: 30,
	// 	value: 6,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 7,
	// 	name: "大而美法案",
	// 	// category: 4,
	// 	symbolSize: 50,
	// 	value: 5,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 8,
	// 	name: "比亚迪",
	// 	// category: 0,
	// 	symbolSize: 30,
	// 	value: 10,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 9,
	// 	name: "铜陵有色",
	// 	// category: 3,
	// 	symbolSize: 30,
	// 	value: 8,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 10,
	// 	name: "长盛精密",
	// 	// category: 1,
	// 	symbolSize: 30,
	// 	value: 7,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 11,
	// 	name: "天合光能",
	// 	// category: 0,
	// 	symbolSize: 30,
	// 	value: 8,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 12,
	// 	name: "昆仑化学",
	// 	// category: 2,
	// 	symbolSize: 30,
	// 	value: 6,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 13,
	// 	name: "嘉源科技",
	// 	// category: 1,
	// 	symbolSize: 30,
	// 	value: 6,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 14,
	// 	name: "华阳集团",
	// 	// category: 4,
	// 	symbolSize: 30,
	// 	value: 7,
	// 	symbol: `image://${CompanyImg}`
	// },
	// {
	// 	id: 15,
	// 	name: "海辰智能",
	// 	// category: 1,
	// 	symbolSize: 30,
	// 	value: 7,
	// 	symbol: `image://${CompanyImg}`
	// }
]);

const links = ref([
	// { source: 0, target: 7 },
	// { source: 1, target: 7 },
	// { source: 1, target: 7 },
	// { source: 8, target: 7 },
	// { source: 8, target: 7 },
	// { source: 2, target: 7 },
	// { source: 2, target: 7 },
	// { source: 3, target: 7 },
	// { source: 3, target: 7 },
	// { source: 3, target: 7 },
	// { source: 4, target: 7 },
	// { source: 4, target: 7 },
	// { source: 5, target: 7 },
	// { source: 6, target: 7 },
	// { source: 9, target: 7 },
	// { source: 10, target: 7 },
	// { source: 11, target: 7 },
	// { source: 12, target: 7 },
	// { source: 13, target: 7 },
	// { source: 14, target: 7 },
	// { source: 15, target: 7 }
	// { source: 0, target: 1, value: 1 },
	// { source: 1, target: 8, value: 2 },
	// { source: 1, target: 2, value: 1 },
	// { source: 8, target: 11, value: 1 },
	// { source: 8, target: 9, value: 1 },
	// { source: 2, target: 5, value: 1 },
	// { source: 2, target: 12, value: 1 },
	// { source: 3, target: 10, value: 1 },
	// { source: 3, target: 15, value: 1 },
	// { source: 3, target: 13, value: 1 },
	// { source: 4, target: 5, value: 1 },
	// { source: 4, target: 12, value: 1 },
	// { source: 5, target: 6, value: 1 },
	// { source: 6, target: 14, value: 1 },
	// { source: 7, target: 14, value: 1 },
	// { source: 9, target: 10, value: 1 },
	// { source: 10, target: 15, value: 1 },
	// { source: 11, target: 13, value: 1 },
	// { source: 12, target: 14, value: 1 },
]);

const treeData = ref([]);

const handleChangeChart = index => {
	if (index === 0) {
		let graphChart = getGraphChart(nodes.value, links.value);
		setChart(graphChart, "graphChart");
	} else if (index === 1) {
		let treeChart = getTreeChart(treeData.value);
		setChart(treeChart, "graphChart");
	}
};

onMounted(async () => {
	let graphChart = getGraphChart(nodes.value, links.value);
	setChart(graphChart, "graphChart");
	await handleGetHylyList();
	handleGetCompanyListById();
});
</script>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	height: 100%;
	display: flex;

	.left {
		margin-top: 16px;
		width: 480px;
		height: 848px;

		.left-main {
			display: flex;
			flex-direction: column;
			height: 100%;
			overflow: hidden;
			padding: 10px 16px;
		}

		.left-center {
			flex-shrink: 0;
			height: 32px;
			min-height: 32px;
			display: flex;
			align-items: center;
			gap: 16px;
			margin-bottom: 10px;

			:deep(.el-input__wrapper),
			:deep(.el-select__wrapper) {
				height: 32px;
			}

			:deep(.el-input__inner),
			:deep(.el-select__selection) {
				height: 32px;
				line-height: 32px;
			}

			.left-center-select {
				width: 150px;
				flex-shrink: 0;
			}

			.left-center-search {
				flex: 1;
				min-width: 0;

				:deep(.el-input__wrapper) {
					background-color: var(--el-fill-color-blank);
					border-radius: var(--el-border-radius-base);
					box-shadow: 0 0 0 1px var(--el-border-color) inset;
					border: none;
					box-sizing: border-box;
				}
			}
		}

		.left-list {
			flex: 1;
			min-height: 0;
			overflow: hidden;
			display: flex;
			flex-direction: column;

			.left-list-title {
				width: 100%;
				text-align: left;
				color: var(--text-primary-80-color);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 700;
				border-top: 1px solid rgba(240, 242, 244, 1);
				padding: 12px 0;
			}

			.left-list-content {
				flex: 1;
				min-height: 0;
			}

			.item-box {
				width: 446px;
				margin: 0 auto;

				.item {
					width: 100%;
					height: 48px;
					border-radius: 4px;
					border-bottom: 1px solid rgba(240, 242, 244, 1);
					border-top: 1px solid transparent;
					display: flex;
					cursor: pointer;

					&:hover {
						background-color: #f7f8fa;
					}

					&:first-child {
						border-top-color: rgba(240, 242, 244, 1);
					}

					.item-icon {
						margin-left: 12px;
						margin-top: 8px;
						width: 24px;
						height: 24px;
						border-radius: 12px;
						background: rgba(231, 241, 255);
						display: flex;
						align-items: center;
						justify-content: center;
						overflow: hidden;

						.item-img {
							width: 100%;
							height: 100%;
							object-fit: contain;
						}
					}

					.title {
						margin-top: 9px;
						margin-left: 10px;
						height: 22px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 600;
						line-height: 22px;
						text-align: left;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.icon {
						margin-left: 7px;
						margin-top: 6px;
						width: 8px;
						height: 6px;

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

				.itemActive {
					background-color: rgba(5, 95, 194, 0.05);
					border-top-color: rgba(174, 214, 255, 1);
					border-bottom-color: rgba(174, 214, 255, 1);

					.item-icon {
						background: rgba(5, 95, 194, 0.1);
					}
				}

				.titleActive {
					color: rgba(22, 119, 255, 1) !important;
				}
			}
		}

		.left-pagination {
			flex-shrink: 0;
			margin: 0 auto;
			width: 446px;
			height: 65px;
			overflow: hidden;
			display: flex;
			align-items: flex-start;

			justify-content: space-between;
			width: 100%;
			box-sizing: border-box;

			.left-pagination-left {
				width: 100px;
				height: 18px;
				margin-top: 25px;
				color: rgba(95, 101, 108, 1);
				font-family: Microsoft YaHei;
				font-size: 14px;
				font-weight: 400;
				line-height: 18px;
				overflow: hidden;
				white-space: nowrap;
			}

			.left-pagination-right {
				flex: 1;
				min-width: 0;
				display: flex;
				justify-content: flex-end;
				margin-top: 23px;
			}
		}
	}

	.right {
		margin-top: 16px;
		margin-left: 16px;
		width: 1104px;
		height: 847px;
		position: relative;

		.graph-dialog {
			width: 740px;
			height: 723px;
			position: absolute;
			right: 500px;
			top: 55px;
			z-index: 99999;
			background: #fff;

			.tool-box {
				position: absolute;
				left: 11px;
				top: 10px;
				width: 96px;
				height: 28px;
				box-sizing: border-box;
				border: 1px solid rgba(234, 236, 238, 1);
				border-radius: 4px;
				background: rgba(255, 255, 255, 1);
				z-index: 9999;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.tool {
					width: 14px;
					height: 14px;
					cursor: pointer;

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

				.tool1 {
					width: 16px;
					height: 16px;
					cursor: pointer;

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

			.chart-box {
				width: 640px;
				height: 640px;
				margin: 50px auto;
			}
		}

		.company-dialog {
			position: absolute;
			z-index: 999999;
			right: 33px;
			top: 55px;
			width: 480px;
			height: 723px;
			box-sizing: border-box;
			border: 1px solid rgba(230, 231, 232, 1);
			border-radius: 4px;
			background: rgba(255, 255, 255, 1);

			.dialog-header {
				height: 54px;
				box-sizing: border-box;
				border-bottom: 1px solid rgba(243, 243, 244, 1);
				display: flex;
				position: relative;

				.logo {
					width: 48px;
					height: 48px;
					margin-left: 18px;
					margin-top: 3px;

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

				.company-title {
					margin-left: 16px;
					margin-top: 16px;
					height: 22px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 600;
					line-height: 22px;
				}

				.status-icon {
					margin-left: 12px;
					margin-top: 12px;
					width: 8px;
					height: 6px;

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

				.status-rate {
					width: 41px;
					margin-left: 4px;
					margin-top: 16px;
					height: 22px;
					color: rgba(92, 181, 48, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 22px;
				}

				.close {
					position: absolute;
					right: 15px;
					top: 19px;
					width: 16px;
					height: 16px;

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

			.dialog-main {
				margin-top: 13px;

				.dialog-box1 {
					.dialog-box1-header {
						margin-top: 10px;
						display: flex;

						.icon {
							margin-left: 16px;
							width: 18px;
							height: 18px;

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

						.dialog-box1-title {
							margin-top: 2px;
							margin-left: 6px;
							height: 14px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 600;
							line-height: 14px;
							text-align: left;
						}
					}

					.dialog-box1-main {
						margin-top: 4px;
						margin-left: 18px;
						max-height: 120px;
						overflow-y: auto;

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

						&::-webkit-scrollbar-thumb {
							border-radius: 10px;
							background: rgba(0, 0, 0, 0.2);
						}

						&::-webkit-scrollbar-track {
							border-radius: 0;
							background: rgba(0, 0, 0, 0.1);
						}

						.item {
							display: flex;

							.item-left {
								margin-top: 13px;
								width: 14px;
								height: 14px;
								border-radius: 4px;

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

							.item-right {
								margin-top: 8px;
								margin-left: 9px;
								width: 400px;
								height: 22px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 22px;
							}
						}
					}
				}

				.dialog-box2 {
					margin-left: 16px;
					margin-top: 50px;

					.dialog-box2-header {
						margin-top: 10px;
						display: flex;

						.icon {
							margin-left: 16px;
							width: 18px;
							height: 18px;

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

						.dialog-box2-title {
							margin-top: 2px;
							margin-left: 6px;
							height: 14px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 600;
							line-height: 14px;
							text-align: left;
						}
					}

					.dialog-box2-main {
						margin-top: 16px;
						width: 446px;
						height: 180px;
						box-sizing: border-box;
						border: 1px solid rgba(231, 241, 255, 1);
						border-radius: 4px;
						background: linear-gradient(180deg, rgba(246, 251, 255, 1), rgba(246, 251, 255, 0) 100%);
					}
				}

				.dialog-box3 {
					margin-top: 16px;
					margin-left: 16px;

					.dialog-box3-header {
						margin-top: 10px;
						display: flex;

						.icon {
							margin-left: 16px;
							width: 18px;
							height: 18px;

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

						.dialog-box3-title {
							margin-top: 2px;
							margin-left: 6px;
							height: 14px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 600;
							line-height: 14px;
							text-align: left;
						}
					}

					.dialog-box3-main {
						margin-top: 16px;
						width: 446px;
						height: 180px;
						box-sizing: border-box;
						border: 1px solid rgba(231, 241, 255, 1);
						border-radius: 4px;
						background: linear-gradient(180deg, rgba(246, 251, 255, 1), rgba(255, 255, 255, 0) 100%);
					}
				}
			}
		}

		.right-main {
			width: 1218px;
			height: 784px;
			margin: 5px auto;

			.right-main-content {
				width: 1150px;
				height: 720px;
				margin: 4px 0 10px;

				.right-main-content-header {
					height: 84px;
					margin-left: 14px;
					margin-top: 16px;
					// background: orange;
					display: flex;

					.header-item1 {
						width: 408px;

						.header-item1-top {
							position: relative;
							z-index: 3;
							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;
							line-height: 28px;
						}

						.header-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-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 22px;
							}
						}
					}

					.header-item2 {
						margin-left: -8px;
						width: 408px;

						.header-item2-top {
							position: relative;
							z-index: 2;
							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;
							line-height: 28px;
						}

						.header-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-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 22px;
							}
						}
					}

					.header-item3 {
						margin-left: -8px;
						width: 408px;

						.header-item3-top {
							position: relative;
							z-index: 1;
							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;
							line-height: 28px;
						}

						.header-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-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 22px;
							}
						}
					}
				}

				.right-main-content-main {
					height: 600px;
					margin-top: 20px;
				}

				// background: orange;
			}

			.box-footer {
		width: 100%;
				height: 40px;
				display: flex;
				box-sizing: border-box;
				margin: 0 auto;
				margin-top: 6px;
				background: rgba(246, 251, 255, 1);

				.box-footer-left {
					margin-top: 10px;
					margin-left: 12px;
					width: 19px;
					height: 20px;

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

				.box-footer-center {
					margin-left: 13px;
					margin-top: 8px;
			flex: 1;
			min-width: 0;
					height: 24px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 24px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
				}

				.box-footer-right {
					margin-left: 13px;
					margin-top: 8px;
					width: 24px;
					height: 24px;
					background: rgba(231, 241, 255, 1);
					border-radius: 12px;
					background: #e7f1ff;
					box-sizing: border-box;
					padding: 3px;

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

	.right {
		margin-top: 16px;
		margin-left: 16px;
		width: 1104px;
		height: 847px;
		position: relative;

		.custom-title {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			width: 100%;
			height: 100%;
			padding: 0 20px;

			.title-left {
				display: flex;
				border: 1px solid rgb(5, 95, 194);
				color: rgb(5, 95, 194);
				border-radius: 16px;
				width: 240px;
				height: 32px;
				overflow: hidden;
				cursor: pointer;

				.title-item {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 6px;
					width: 50%;
					font-size: 16px;
					line-height: 16px;
					font-family: "Microsoft YaHei";

					.title-icon {
						width: 14px;
						height: 14px;
						font-size: 0;

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

				.title-active {
					background-color: rgb(5, 95, 194);
					color: white;
				}
			}

			.title-right {
				width: 180px;
			}
		}

		.box2-main {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			padding: 16px 20px;

			.graph-box {
				height: 20px;
				flex: auto;
				margin-top: 16px;
			}
		}
	}
}
</style>
