<template>
	<div class="industrial-impact">
		<div class="main">
			<div class="left">
				<AnalysisBox title="制裁科研机构列表" :showAllBtn="false">
					<template #header-btn>
						<el-select v-model="searchDomain" class="dependency-select" placeholder="全部领域">
							<el-option v-for="item in domainOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</template>
					<div class="left-main">
						<div class="company-list-container">
							<div class="list-header">科研机构名称</div>
							<div class="company-list">
								<el-empty
									v-if="entityList.length === 0"
									description="暂无数据"
									style="padding-top: 200px"
									:image-size="100"
								/>
								<div
									class="company-item"
									:class="{ active: selectedCompanyId === item.id }"
									v-for="item in entityList"
									:key="item.id"
									@click="selectedCompanyId = item.id"
								>
									<div class="icon-wrapper">
										<img :src="defaultTitle" alt="" />
									</div>
									<div class="company-name">{{ item.name }}</div>
								</div>
							</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
			<div class="right">
				<div class="right-item">
					<AnalysisBox title="科研仪器对美依赖情况">
						<div class="right-main">
							<el-empty
								v-if="rdInstrumentDependency.length === 0"
								description="暂无数据"
								style="padding-top: 100px"
								:image-size="100"
							/>
							<!-- <div v-if="rdInstrumentDependency.length !== 0" class="echarts" ref="chartRef"></div>
							<div v-if="rdInstrumentDependency.length !== 0" class="bottom">
								<img :src="ai" class="ai-icon" alt="" />
								<span class="text">受制裁实体中，电子测量仪器对美依赖程度最高，此外，电子策略仪器、物理性能测试仪器等也有较高的对美依赖度。</span>
								<img :src="right" class="right-icon" alt="" />
							</div> -->
							<EChart :option="rdInstrumentDependencyOption" autoresize :style="{ height: '300px' }" />
							<div class="data-origin-box">
								<div class="data-origin-icon">
									<img :src="tipsIcon" alt="" />
								</div>
								<div class="data-origin-text">科研仪器对美依赖情况，数据来源：美国各行政机构官网</div>
							</div>
							<div class="ai-pane">
								<AiButton />
								<AiPane :aiContent="rdInstrumentDependencyChart.interpretation" />
							</div>
						</div>
					</AnalysisBox>
				</div>
				<div class="right-item">
					<AnalysisBox title="科研仪器进口国分布">
						<div class="right-main">
							<el-empty
								v-if="rdInstrumentImportCountry.length === 0"
								description="暂无数据"
								style="padding-top: 100px"
								:image-size="100"
							/>
							<!-- <div v-if="rdInstrumentImportCountry.length !== 0" class="echarts" ref="marketChartRef"></div>
							<div v-if="rdInstrumentImportCountry.length !== 0" class="bottom">
								<img :src="ai" class="ai-icon" alt="" />
								<span class="text"
									>电子测量仪器来源国主要为美国,但是德国、日本等国也占有较大比重,后续可考虑将上述国家作为仪器进口来源替代国。</span
								>
								<img :src="right" class="right-icon" alt="" />
							</div> -->
							<EChart
								v-if="rdInstrumentImportCountry.length !== 0"
								:option="rdInstrumentImportCountryOption"
								autoresize
								:style="{ height: '300px' }"
							/>
							<div v-if="rdInstrumentImportCountry.length !== 0" class="data-origin-box">
								<div class="data-origin-icon">
									<img :src="tipsIcon" alt="" />
								</div>
								<div class="data-origin-text">科研仪器进口国分布，数据来源：美国各行政机构官网</div>
							</div>
							<div class="ai-pane">
								<AiButton />
								<AiPane :aiContent="rdInstrumentImportCountryChart.interpretation" />
							</div>
						</div>
					</AnalysisBox>
				</div>
				<div class="right-item">
					<!-- <div class="title-com">
						<div class="box"></div>
						<div class="text">新增国际合作项目</div>
						<div class="right-group">
							<el-select v-model="activeProjectDomain" class="project-domain-select" placeholder="全部领域">
								<el-option v-for="item in projectDomainOptions" :key="item.value" :label="item.label"
									:value="item.value" />
							</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">
						<el-empty v-if="internationalCooperation.length === 0" description="暂无数据" style="padding-top: 100px"
							:image-size="100" />
						<div v-if="internationalCooperation.length !== 0" class="echarts" ref="rdChartRef"></div>
						<div v-if="internationalCooperation.length !== 0" class="bottom">
							<img :src="ai" class="ai-icon" alt="" />
							<span class="text">列入实体清单后新增国际项目数量明显减少。</span>
							<img :src="right" class="right-icon" alt="" />
						</div>
					</div> -->
					<AnalysisBox title="新增国际合作项目">
						<template #header-btn>
							<el-select v-model="activeProjectDomain" class="project-domain-select" placeholder="全部领域">
								<el-option
									v-for="item in projectDomainOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</el-select>
						</template>
						<div class="right-main">
							<el-empty
								v-if="internationalCooperation.length === 0"
								description="暂无数据"
								style="padding-top: 100px"
								:image-size="100"
							/>
							<!-- <div v-if="internationalCooperation.length !== 0" class="echarts" ref="rdChartRef"></div>
							<div v-if="internationalCooperation.length !== 0" class="bottom">
								<img :src="ai" class="ai-icon" alt="" />
								<span class="text">列入实体清单后新增国际项目数量明显减少。</span>
								<img :src="right" class="right-icon" alt="" />
							</div> -->
							<EChart
								v-if="internationalCooperation.length !== 0"
								:option="internationalCooperationOption"
								autoresize
								:style="{ height: '300px' }"
							/>
							<div v-if="internationalCooperation.length !== 0" class="data-origin-box">
								<div class="data-origin-icon">
									<img :src="tipsIcon" alt="" />
								</div>
								<div class="data-origin-text">新增国际合作项目，数据来源：美国各行政机构官网</div>
							</div>
							<div class="ai-pane">
								<AiButton />
								<AiPane :aiContent="internationalCooperationChart.interpretation" />
							</div>
						</div>
					</AnalysisBox>
				</div>
				<div class="right-item">
					<!-- <div class="title-com">
						<div class="box"></div>
						<div class="text">新增国际合著论文</div>
						<div class="right-group">
							<el-select v-model="activePaperDomain" class="paper-domain-select" placeholder="全部领域">
								<el-option v-for="item in paperDomainOptions" :key="item.value" :label="item.label"
									:value="item.value" />
							</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">
						<el-empty v-if="internationalPaper.length === 0" description="暂无数据" style="padding-top: 100px"
							:image-size="100" />
						<div v-if="internationalPaper.length !== 0" class="echarts" ref="shareChartRef"></div>
						<div v-if="internationalPaper.length !== 0" class="bottom">
							<img :src="ai" class="ai-icon" alt="" />
							<span class="text">总量下降，特别是在人工智能、高端通信等敏感技术领域。</span>
							<img :src="right" class="right-icon" alt="" />
						</div>
					</div> -->
					<AnalysisBox title="新增国际合著论文">
						<template #header-btn>
							<el-select v-model="activePaperDomain" class="paper-domain-select" placeholder="全部领域">
								<el-option
									v-for="item in paperDomainOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</el-select>
						</template>
						<div class="right-main">
							<el-empty
								v-if="internationalPaper.length === 0"
								description="暂无数据"
								style="padding-top: 100px"
								:image-size="100"
							/>
							<!-- <div v-if="internationalPaper.length !== 0" class="echarts" ref="shareChartRef"></div>
							<div v-if="internationalPaper.length !== 0" class="bottom">
								<img :src="ai" class="ai-icon" alt="" />
								<span class="text">总量下降，特别是在人工智能、高端通信等敏感技术领域。</span>
								<img :src="right" class="right-icon" alt="" />
							</div> -->
							<EChart
								v-if="internationalPaper.length !== 0"
								:option="internationalPaperOption"
								autoresize
								:style="{ height: '300px' }"
							/>
							<div v-if="internationalPaper.length !== 0" class="data-origin-box">
								<div class="data-origin-icon">
									<img :src="tipsIcon" alt="" />
								</div>
								<div class="data-origin-text">新增国际合著论文，数据来源：美国各行政机构官网</div>
							</div>
							<div class="ai-pane">
								<AiButton />
								<AiPane :aiContent="internationalPaperChart.interpretation" />
							</div>
						</div>
					</AnalysisBox>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import defaultTitle from "../../../../assets/default-icon2.png";
import ai from "../../assets/ai.png";
import right from "../../assets/right.png";
import {
	getSingleSanctionEntityList,
	getSingleSanctionEntityRDInstrumentDependency,
	getSingleSanctionEntityRDInstrumentImportCountry,
	getSingleSanctionEntityInternationalCooperation,
	getSingleSanctionEntityInternationalPaper
} from "@/api/exportControlV2.0";
import tipsIcon from "../../../../../assets/icons/info-icon.png";
import AiButton from "@/components/base/Ai/AiButton/index.vue";
import AiPane from "@/components/base/Ai/AiPane/index.vue";
import EChart from "@/components/Chart/index.vue";
import { useChartInterpretation } from "@/views/exportControl/utils/common";
const rdInstrumentDependencyChart = useChartInterpretation();
const rdInstrumentImportCountryChart = useChartInterpretation();
const internationalCooperationChart = useChartInterpretation();
const internationalPaperChart = useChartInterpretation();

const domainOptions = [
	{ label: "全部领域", value: "" },
	{ label: "人工智能", value: "1" },
	{ label: "生物科技", value: "2" },
	{ label: "新一代信息技术", value: "3" },
	{ label: "量子科技", value: "4" },
	{ label: "新能源", value: "5" },
	{ label: "集成电路", value: "6" },
	{ label: "海洋", value: "7" },
	{ label: "先进制造", value: "8" },
	{ label: "新材料", value: "9" },
	{ label: "航空航天", value: "10" },
	{ label: "深海", value: "11" },
	{ label: "极地", value: "12" },
	{ label: "太空", value: "13" },
	{ label: "核", value: "14" }
];

const activeInstrument = ref("电子测量仪器");
const instrumentOptions = ["电子测量仪器"];

const activeProjectDomain = ref("");
const projectDomainOptions = domainOptions;

const activePaperDomain = ref("");
const paperDomainOptions = domainOptions;

const searchDomain = ref("");
const selectedCompanyId = ref(null);
const sanRecordId = ref("");
const entityList = ref([]);
const internationalCooperation = ref([]);
const rdInstrumentImportCountry = ref([]);
const rdInstrumentDependency = ref([]);

// 单次制裁-影响分析-新增国际合著论文
const internationalPaper = ref([]);
const getInternationalPaper = async () => {
	if (!selectedCompanyId.value) return;
	try {
		const params = {
			id: selectedCompanyId.value
		};
		if (activePaperDomain.value) {
			params.domainId = activePaperDomain.value;
		}
		const res = await getSingleSanctionEntityInternationalPaper(params);
		if (res.code === 200) {
			internationalPaper.value = res.data || [];
			nextTick(() => {
				initShareChart();
			});
			internationalPaperChart.interpret({ type: "折线图", name: "新增国际合著论文", data: res.data });
		}
	} catch (error) {
		console.log(error);
	}
};

// 单次制裁-影响分析-新增国际合作项目
const getInternationalCooperation = async () => {
	if (!selectedCompanyId.value) return;
	try {
		const params = {
			id: selectedCompanyId.value
		};
		if (activeProjectDomain.value) {
			params.domainId = activeProjectDomain.value;
		}
		const res = await getSingleSanctionEntityInternationalCooperation(params);
		if (res.code === 200) {
			internationalCooperation.value = res.data || [];
			nextTick(() => {
				initRdChart();
			});
			internationalCooperationChart.interpret({ type: "折线图", name: "新增国际合作项目", data: res.data });
		}
	} catch (error) {
		console.log(error);
	}
};

// 单次制裁-影响分析-科研仪器进口国分布
const getRDInstrumentImportCountry = async () => {
	try {
		const res = await getSingleSanctionEntityRDInstrumentImportCountry({
			id: selectedCompanyId.value
		});
		if (res.code === 200) {
			rdInstrumentImportCountry.value = res.data || [];
			nextTick(() => {
				initMarketChart();
			});
			rdInstrumentImportCountryChart.interpret({ type: "饼图", name: "科研仪器进口国分布", data: res.data });
		}
	} catch (error) {
		console.log(error);
	}
};

// 单次制裁-影响分析-科研仪器对美依赖情况
const getRDInstrumentDependency = async () => {
	try {
		const res = await getSingleSanctionEntityRDInstrumentDependency({
			id: selectedCompanyId.value
		});
		if (res.code === 200) {
			rdInstrumentDependency.value = res.data || [];
			nextTick(() => {
				initChart();
			});
			rdInstrumentDependencyChart.interpret({ type: "柱状图", name: "科研仪器对美依赖情况", data: res.data });
		}
	} catch (error) {
		console.log(error);
	}
};

// 单次制裁-影响分析-科研机构列表-查询
const getEntityList = async () => {
	try {
		const res = await getSingleSanctionEntityList({
			sanRecordId: sanRecordId.value,
			isOnlyCn: false,
			domainId: searchDomain.value || undefined
		});
		if (res.code === 200) {
			entityList.value = (res.data || []).reduce((acc, group) => {
				if (group.orgType === "科研机构" && group.orgInfoList) {
					acc.push(
						...group.orgInfoList.map(org => ({
							id: org.id,
							name: org.orgNameZh
						}))
					);
				}
				return acc;
			}, []);

			// 默认选中第一个
			if (entityList.value.length > 0 && !selectedCompanyId.value) {
				selectedCompanyId.value = entityList.value[0].id;
			}
		}
	} catch (error) {
		console.log(error);
	}
};

watch(selectedCompanyId, val => {
	if (val) {
		getRDInstrumentDependency();
		getRDInstrumentImportCountry();
		getInternationalCooperation();
		getInternationalPaper();
	}
});

watch(activeProjectDomain, () => {
	getInternationalCooperation();
});

watch(activePaperDomain, () => {
	getInternationalPaper();
});

watch(searchDomain, () => {
	getEntityList();
});

const getUrlParams = () => {
	const urlParams = new URLSearchParams(window.location.search);
	sanRecordId.value = urlParams.get("id") || "";
};

const chartRef = ref(null);
const marketChartRef = ref(null);
const rdChartRef = ref(null);
const shareChartRef = ref(null);

const rdInstrumentDependencyOption = ref({
	grid: {
		top: "5%",
		left: "0%",
		right: "5%",
		bottom: "0%",
		containLabel: true
	},
	dataZoom: [
		{
			type: "inside",
			orient: "vertical",
			start: 0,
			end: 100,
			zoomLock: true
		}
	],
	xAxis: {
		show: false,
		type: "value"
	},
	yAxis: [
		{
			type: "category",
			data: [],
			axisLine: { show: false },
			axisTick: { show: false },
			axisLabel: {
				color: "rgb(59, 65, 75)",
				fontSize: 16,
				fontWeight: 400,
				fontFamily: "Microsoft YaHei",
				margin: 20,
				interval: 0
			},
			inverse: true
		},
		{
			type: "category",
			data: [],
			axisLine: { show: false },
			axisTick: { show: false },
			axisLabel: {
				margin: 20,
				interval: 0,
				fontSize: 16,
				fontFamily: "Microsoft YaHei",
				color: (value, index) => {
					return index < 3 ? "rgba(209, 90, 90, 1)" : "rgba(59, 139, 245, 1)";
				}
			},
			inverse: true
		}
	],
	series: [
		{
			type: "bar",
			data: [],
			barWidth: 10,
			showBackground: false
		}
	]
});
const initChart = () => {
	// if (!chartRef.value || rdInstrumentDependency.value.length === 0) return;
	// const myChart = echarts.getInstanceByDom(chartRef.value) || echarts.init(chartRef.value);

	// 处理接口数据，映射为图表所需的 name 和 value
	const chartData = rdInstrumentDependency.value.map(item => ({
		name: item.name,
		value: item.count
	}));

	// const option = {
	// 	grid: {
	// 		top: "5%",
	// 		left: "0%",
	// 		right: "5%",
	// 		bottom: "0%",
	// 		containLabel: true
	// 	},
	// 	dataZoom: [
	// 		{
	// 			type: "inside",
	// 			orient: "vertical",
	// 			start: 0,
	// 			end: chartData.length > 7 ? (7 / chartData.length) * 100 : 100,
	// 			zoomLock: true
	// 		}
	// 	],
	// 	xAxis: {
	// 		show: false,
	// 		type: "value"
	// 	},
	// 	yAxis: [
	// 		{
	// 			type: "category",
	// 			data: chartData.map(item => item.name),
	// 			axisLine: { show: false },
	// 			axisTick: { show: false },
	// 			axisLabel: {
	// 				color: "rgb(59, 65, 75)",
	// 				fontSize: 16,
	// 				fontWeight: 400,
	// 				fontFamily: "Microsoft YaHei",
	// 				margin: 20,
	// 				interval: 0
	// 			},
	// 			inverse: true
	// 		},
	// 		{
	// 			type: "category",
	// 			data: chartData.map(item => item.value),
	// 			axisLine: { show: false },
	// 			axisTick: { show: false },
	// 			axisLabel: {
	// 				margin: 20,
	// 				interval: 0,
	// 				fontSize: 16,
	// 				fontFamily: "Microsoft YaHei",
	// 				color: (value, index) => {
	// 					return index < 3 ? "rgba(209, 90, 90, 1)" : "rgba(59, 139, 245, 1)";
	// 				}
	// 			},
	// 			inverse: true
	// 		}
	// 	],
	// 	series: [
	// 		{
	// 			type: "bar",
	// 			data: chartData.map((item, index) => {
	// 				return {
	// 					value: item.value,
	// 					itemStyle: {
	// 						color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
	// 							{
	// 								offset: 0,
	// 								color: index < 3 ? "rgba(209, 90, 90, 0.05)" : "rgba(59, 139, 245, 0.05)"
	// 							},
	// 							{
	// 								offset: 1,
	// 								color: index < 3 ? "rgba(209, 90, 90, 1)" : "rgba(59, 139, 245, 1)"
	// 							}
	// 						]),
	// 						borderRadius: [0, 10, 10, 0]
	// 					},
	// 					label: {
	// 						show: false
	// 					}
	// 				};
	// 			}),
	// 			barWidth: 10,
	// 			showBackground: false
	// 		}
	// 	]
	// };
	// myChart.setOption(option);
	// rdInstrumentDependencyOption.value = option;
	rdInstrumentDependencyOption.value.dataZoom[0].end = chartData.length > 7 ? (7 / chartData.length) * 100 : 100;
	rdInstrumentDependencyOption.value.yAxis[0].data = chartData.map(item => item.name);
	rdInstrumentDependencyOption.value.yAxis[1].data = chartData.map(item => item.value);
	rdInstrumentDependencyOption.value.series[0].data = chartData.map((item, index) => {
		return {
			value: item.value,
			itemStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
					{
						offset: 0,
						color: index < 3 ? "rgba(209, 90, 90, 0.05)" : "rgba(59, 139, 245, 0.05)"
					},
					{
						offset: 1,
						color: index < 3 ? "rgba(209, 90, 90, 1)" : "rgba(59, 139, 245, 1)"
					}
				]),
				borderRadius: [0, 10, 10, 0]
			},
			label: {
				show: false
			}
		};
	});
};

const colors = ["#66b1ff", "#ffba63", "#7ce3d3", "#8a9dff", "#ff7c7c", "#b386f2", "#4080ff"];
const rdInstrumentImportCountryOption = ref({
	color: colors,
	tooltip: {
		trigger: "item",
		formatter: "{b}: {c}%"
	},
	legend: {
		type: "scroll",
		orient: "vertical",
		right: "5%",
		top: "middle",
		bottom: "20",
		itemGap: 20,
		icon: "circle",
		// formatter: function (name) {
		// 	const item = chartData.find(i => i.name === name);
		// 	const total = chartData.reduce((sum, i) => sum + i.value, 0);
		// 	const percent = total > 0 ? ((item.value / total) * 100).toFixed(0) : 0;
		// 	return `{name|${name}}  {value|${percent}%}`;
		// },
		textStyle: {
			rich: {
				name: {
					fontSize: 16,
					color: "#333",
					width: 60,
					padding: [0, 0, 0, 5],
					fontFamily: "Microsoft YaHei"
				},
				value: {
					fontSize: 16,
					color: "#333",
					fontFamily: "Microsoft YaHei"
				}
			}
		}
	},
	series: [
		{
			name: "科研仪器进口国分布",
			type: "pie",
			radius: ["80px", "98px"],
			center: ["30%", "50%"],
			avoidLabelOverlap: false,
			label: {
				show: false,
				position: "center"
			},
			emphasis: {
				label: {
					show: false
				}
			},
			labelLine: {
				show: false
			},
			data: []
		}
	]
});
const initMarketChart = () => {
	// if (!marketChartRef.value || rdInstrumentImportCountry.value.length === 0) return;
	// const myChart = echarts.getInstanceByDom(marketChartRef.value) || echarts.init(marketChartRef.value);

	const chartData = rdInstrumentImportCountry.value.map(item => ({
		name: item.name,
		value: item.count
	}));

	const colors = ["#66b1ff", "#ffba63", "#7ce3d3", "#8a9dff", "#ff7c7c", "#b386f2", "#4080ff"];

	const option = {
		color: colors,
		tooltip: {
			trigger: "item",
			formatter: "{b}: {c}%"
		},
		legend: {
			type: "scroll",
			orient: "vertical",
			right: "5%",
			top: "middle",
			bottom: "20",
			itemGap: 20,
			icon: "circle",
			formatter: function (name) {
				const item = chartData.find(i => i.name === name);
				const total = chartData.reduce((sum, i) => sum + i.value, 0);
				const percent = total > 0 ? ((item.value / total) * 100).toFixed(0) : 0;
				return `{name|${name}}  {value|${percent}%}`;
			},
			textStyle: {
				rich: {
					name: {
						fontSize: 16,
						color: "#333",
						width: 60,
						padding: [0, 0, 0, 5],
						fontFamily: "Microsoft YaHei"
					},
					value: {
						fontSize: 16,
						color: "#333",
						fontFamily: "Microsoft YaHei"
					}
				}
			}
		},
		series: [
			{
				name: "科研仪器进口国分布",
				type: "pie",
				radius: ["80px", "98px"],
				center: ["30%", "50%"],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: "center"
				},
				emphasis: {
					label: {
						show: false
					}
				},
				labelLine: {
					show: false
				},
				data: chartData
			}
		]
	};
	// myChart.setOption(option);
	rdInstrumentImportCountryOption.value = option;
};
const internationalCooperationOption = ref({
	tooltip: {
		trigger: "axis"
	},
	grid: {
		top: "15%",
		left: "3%",
		right: "4%",
		bottom: "3%",
		containLabel: true
	},
	xAxis: {
		type: "category",
		boundaryGap: false,
		data: [],
		axisLine: {
			lineStyle: {
				color: "#E6EBF5"
			}
		},
		axisLabel: {
			color: "#606266",
			fontSize: 12,
			lineHeight: 18,
			fontFamily: "Microsoft YaHei"
		},
		axisTick: {
			show: false
		}
	},
	yAxis: {
		type: "value",
		min: 0,
		max: 5,
		interval: 10 / 5,
		axisLabel: {
			color: "#606266",
			fontSize: 12,
			fontFamily: "Microsoft YaHei"
		},
		splitLine: {
			lineStyle: {
				type: "dashed",
				color: "rgba(231, 243, 255, 1)"
			}
		}
	},
	series: [
		{
			data: [],
			type: "line",
			symbol: "none",
			smooth: false,
			lineStyle: {
				color: "#055FC2",
				width: 2
			},
			areaStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: "rgba(5, 95, 194, 0.2)"
					},
					{
						offset: 1,
						color: "rgba(5, 95, 194, 0)"
					}
				])
			}
		}
	]
});
const initRdChart = () => {
	// if (!rdChartRef.value) return;
	// const myChart = echarts.getInstanceByDom(rdChartRef.value) || echarts.init(rdChartRef.value);

	// 处理接口返回的数据，按年份升序排序
	const chartData = [...internationalCooperation.value].sort((a, b) => a.year - b.year);
	const years = chartData.map(item => item.year.toString());
	const data = chartData.map(item => item.count);

	// 动态计算 Y 轴最大值和间隔
	const maxVal = Math.max(...data, 10);
	const yMax = Math.ceil(maxVal / 5) * 5;

	// const option = {
	// 	tooltip: {
	// 		trigger: "axis"
	// 	},
	// 	grid: {
	// 		top: "15%",
	// 		left: "3%",
	// 		right: "4%",
	// 		bottom: "3%",
	// 		containLabel: true
	// 	},
	// 	xAxis: {
	// 		type: "category",
	// 		boundaryGap: false,
	// 		data: years,
	// 		axisLine: {
	// 			lineStyle: {
	// 				color: "#E6EBF5"
	// 			}
	// 		},
	// 		axisLabel: {
	// 			color: "#606266",
	// 			fontSize: 12,
	// 			lineHeight: 18,
	// 			fontFamily: "Microsoft YaHei"
	// 		},
	// 		axisTick: {
	// 			show: false
	// 		}
	// 	},
	// 	yAxis: {
	// 		type: "value",
	// 		min: 0,
	// 		max: yMax,
	// 		interval: yMax / 5,
	// 		axisLabel: {
	// 			color: "#606266",
	// 			fontSize: 12,
	// 			fontFamily: "Microsoft YaHei"
	// 		},
	// 		splitLine: {
	// 			lineStyle: {
	// 				type: "dashed",
	// 				color: "rgba(231, 243, 255, 1)"
	// 			}
	// 		}
	// 	},
	// 	series: [
	// 		{
	// 			data: data,
	// 			type: "line",
	// 			symbol: "none",
	// 			smooth: false,
	// 			lineStyle: {
	// 				color: "#055FC2",
	// 				width: 2
	// 			},
	// 			areaStyle: {
	// 				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	// 					{
	// 						offset: 0,
	// 						color: "rgba(5, 95, 194, 0.2)"
	// 					},
	// 					{
	// 						offset: 1,
	// 						color: "rgba(5, 95, 194, 0)"
	// 					}
	// 				])
	// 			}
	// 		}
	// 	]
	// };
	// myChart.setOption(option);
	internationalCooperationOption.value.xAxis.data = years;
	internationalCooperationOption.value.yAxis.max = yMax;
	internationalCooperationOption.value.yAxis.interval = yMax / 5;
	internationalCooperationOption.value.series[0].data = data;
};
const internationalPaperOption = ref({
	tooltip: {
		trigger: "axis"
	},
	grid: {
		top: "15%",
		left: "3%",
		right: "4%",
		bottom: "3%",
		containLabel: true
	},
	xAxis: {
		type: "category",
		boundaryGap: false,
		data: [],
		axisLine: {
			lineStyle: {
				color: "#E6EBF5"
			}
		},
		axisLabel: {
			color: "#606266",
			fontSize: 12,
			lineHeight: 18,
			fontFamily: "Microsoft YaHei"
		},
		axisTick: {
			show: false
		}
	},
	yAxis: {
		type: "value",
		min: 0,
		max: 5,
		interval: 10 / 5,
		axisLabel: {
			color: "#606266",
			fontSize: 12,
			fontFamily: "Microsoft YaHei"
		},
		splitLine: {
			lineStyle: {
				type: "dashed",
				color: "rgba(231, 243, 255, 1)"
			}
		}
	},
	series: [
		{
			data: [],
			type: "line",
			symbol: "none",
			smooth: false,
			lineStyle: {
				color: "#055FC2",
				width: 2
			},
			areaStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: "rgba(5, 95, 194, 0.2)"
					},
					{
						offset: 1,
						color: "rgba(5, 95, 194, 0)"
					}
				])
			}
		}
	]
});
const initShareChart = () => {
	// if (!shareChartRef.value) return;
	// const myChart = echarts.getInstanceByDom(shareChartRef.value) || echarts.init(shareChartRef.value);

	// 处理接口返回的数据，按年份升序排序
	const chartData = [...internationalPaper.value].sort((a, b) => a.year - b.year);
	const years = chartData.map(item => item.year.toString());
	const data = chartData.map(item => item.count);

	// 动态计算 Y 轴最大值和间隔
	const maxVal = Math.max(...data, 10);
	const yMax = Math.ceil(maxVal / 5) * 5;

	// const option = {
	// 	tooltip: {
	// 		trigger: "axis"
	// 	},
	// 	grid: {
	// 		top: "15%",
	// 		left: "3%",
	// 		right: "4%",
	// 		bottom: "3%",
	// 		containLabel: true
	// 	},
	// 	xAxis: {
	// 		type: "category",
	// 		boundaryGap: false,
	// 		data: years,
	// 		axisLine: {
	// 			lineStyle: {
	// 				color: "#E6EBF5"
	// 			}
	// 		},
	// 		axisLabel: {
	// 			color: "#606266",
	// 			fontSize: 12,
	// 			lineHeight: 18,
	// 			fontFamily: "Microsoft YaHei"
	// 		},
	// 		axisTick: {
	// 			show: false
	// 		}
	// 	},
	// 	yAxis: {
	// 		type: "value",
	// 		min: 0,
	// 		max: yMax,
	// 		interval: yMax / 5,
	// 		axisLabel: {
	// 			color: "#606266",
	// 			fontSize: 12,
	// 			fontFamily: "Microsoft YaHei"
	// 		},
	// 		splitLine: {
	// 			lineStyle: {
	// 				type: "dashed",
	// 				color: "rgba(231, 243, 255, 1)"
	// 			}
	// 		}
	// 	},
	// 	series: [
	// 		{
	// 			data: data,
	// 			type: "line",
	// 			symbol: "none",
	// 			smooth: false,
	// 			lineStyle: {
	// 				color: "#055FC2",
	// 				width: 2
	// 			},
	// 			areaStyle: {
	// 				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	// 					{
	// 						offset: 0,
	// 						color: "rgba(5, 95, 194, 0.2)"
	// 					},
	// 					{
	// 						offset: 1,
	// 						color: "rgba(5, 95, 194, 0)"
	// 					}
	// 				])
	// 			}
	// 		}
	// 	]
	// };
	// myChart.setOption(option);
	internationalPaperOption.value.xAxis.data = years;
	internationalPaperOption.value.yAxis.max = yMax;
	internationalPaperOption.value.yAxis.interval = yMax / 5;
	internationalPaperOption.value.series[0].data = data;
};

const handleResize = () => {
	[chartRef, marketChartRef, rdChartRef, shareChartRef].forEach(refItem => {
		if (refItem.value) {
			const myChart = echarts.getInstanceByDom(refItem.value);
			if (myChart) {
				myChart.resize();
			}
		}
	});
};

onMounted(async () => {
	getUrlParams();
	// 单次制裁-影响分析-科研机构列表-查询 (等待获取到默认的 selectedCompanyId 后会触发 watch 加载其他数据)
	await getEntityList();

	window.addEventListener("resize", handleResize);
});

onBeforeUnmount(() => {
	window.removeEventListener("resize", handleResize);
});
</script>

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

.industrial-impact {
	width: 100%;
	padding-top: 16px;
	padding-bottom: 50px;

	.main {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.left {
			width: 480px;
			height: 860px;
			.left-main {
				margin-top: 11px;
				padding: 0 16px;

				.top-bar {
					display: flex;
					gap: 12px;
					margin-bottom: 8px;

					.domain-select {
						width: 150px;

						:deep(.el-input__wrapper) {
							height: 32px;
							border-radius: 4px;
						}
					}

					.search-input {
						width: 288px;

						:deep(.el-input__wrapper) {
							height: 32px;
							border-radius: 4px;
						}
					}
				}

				.company-list-container {
					.list-header {
						width: 446px;
						height: 48px;
						padding: 12px 16px;
						font-size: 16px;
						font-weight: 700;
						color: rgb(59, 65, 75);
						border-top: 1px solid rgb(234, 236, 238);
						border-bottom: 1px solid rgb(234, 236, 238);
					}

					.company-list {
						height: 700px;
						overflow-y: auto;

						.company-item {
							display: flex;
							align-items: center;
							height: 48px;
							padding: 0 16px;
							cursor: pointer;
							border-bottom: 1px solid #f0f2f5;
							box-sizing: border-box;

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

							&.active {
								background-color: rgba(246, 250, 255, 1);
								border: 1px solid rgba(174, 214, 255, 1);

								.company-name {
									color: rgb(5, 95, 194);
									font-weight: 700;
								}

								.icon-wrapper {
									background-color: transparent;
								}
							}

							.icon-wrapper {
								width: 24px;
								height: 24px;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-right: 12px;
								border-radius: 50%;

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

							.company-name {
								font-size: 16px;
								color: rgb(59, 65, 75);
								font-weight: 400;
								line-height: 24px;
								font-family: "Microsoft YaHei";
							}
						}
					}
				}
			}
		}

		.right {
			width: 1104px;
			height: 860px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-content: space-between;

			.right-item {
				width: 544px;
				height: 422px;
			}

			.right-main {
				width: 100%;
				height: calc(100% - 56px);
				padding: 0px 14px 15px 14px;

				.echarts {
					width: 516px;
					height: 300px;
					margin-bottom: 5px;
				}

				.bottom {
					width: 516px;
					// height: 40px;
					border-radius: 4px;
					background-color: rgba(246, 250, 255, 1);
					border: 1px solid rgba(231, 243, 255, 1);
					display: flex;
					align-items: center;
					padding: 6px 12px;
					box-sizing: border-box;

					.ai-icon {
						width: 20px;
						height: 20px;
						margin-right: 12px;
					}

					.text {
						flex: 1;
						font-size: 16px;
						font-family: "Microsoft YaHei";
						font-weight: 400;
						color: rgb(5, 95, 194);
						line-height: 24px;
					}

					.right-icon {
						width: 24px;
						height: 24px;
						cursor: pointer;
					}
				}
			}
		}
	}
}

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

		.rule-checkbox {
			margin-right: 20px;

			:deep(.el-checkbox__label) {
				font-size: 16px;
				color: #5f656c;
				font-family: "Microsoft YaHei";
			}

			:deep(.el-checkbox__inner) {
				border-color: #c9cdd4;
			}

			:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
				background-color: #055fc2;
				border-color: #055fc2;
			}

			:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
				color: #5f656c;
			}
		}

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

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

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

		.btn {
			margin-left: 0;
		}

		.dependency-select {
			width: 121px;
			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;
			}
		}

		.instrument-select {
			width: 180px;
			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;
			}
		}

		.project-domain-select {
			width: 150px;
			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;
			}
		}

		.paper-domain-select {
			width: 150px;
			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;
		}
	}

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

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

.dependency-select {
	width: 121px;
	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;
	}
}

.project-domain-select {
	width: 150px;
	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;
	}
}

.paper-domain-select {
	width: 150px;
	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;
	}
}

.data-origin-box {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 35px 0;
	.data-origin-icon {
		width: 16px;
		height: 16px;
		font-size: 0px;
		margin-right: 8px;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.data-origin-text {
		font-family: Source Han Sans CN;
		font-size: 14px;
		color: var(--text-primary-50-color);
	}
}

.ai-pane {
	position: absolute;
	right: 0px;
	bottom: 15px;
	z-index: 2;
	:deep(.ai-pane-wrapper) {
		display: none;
	}
	:deep(.ai-button-wrapper) {
		display: flex;
	}
	&:hover {
		width: 100%;
		bottom: 0px;
		:deep(.ai-pane-wrapper) {
			display: block;
		}
		:deep(.ai-button-wrapper) {
			display: none;
		}
	}
}
</style>
