<template>
	<div class="panel1Wrap">
		<div class="row">
			<CardCustom title="实体清单制裁强度" :style="{ width: '798px', height: '422px' }">
				<template #right>
					<el-select
						:style="{ width: '120px', marginRight: '8px' }"
						size="mini"
						v-model="domainValue"
						placeholder="领域选择"
					>
						<el-option v-for="item in domainOptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					<el-select
						:style="{ width: '120px', marginRight: '18px' }"
						size="mini"
						v-model="typeValue"
						placeholder="类型选择"
					>
						<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</template>
				<div class="subPanel1">
					<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
						<Echarts :option="bar1Option" height="100%"></Echarts>
					</div>
					<Hint text="近几次新增受制裁实体中，中国实体占比提高，美方针对中国的出口管制风险显著增加。"></Hint>
				</div>
			</CardCustom>
			<CardCustom title="新增实体数量增长趋势" :style="{ width: '798px', height: '422px' }">
				<div class="subPanel2">
					<div class="chartsWrap">
						<Echarts :option="line1Option" height="100%"></Echarts>
					</div>
					<Hint
						text="近年来美国对中国新增实体数量总体呈上升趋势，2018-2023 年 BIS 针对中国发布 “实体清单”
							的频次逐年攀升，拜登政府时期新增实体数量已超越特朗普政府时期。"
					></Hint>
				</div>
			</CardCustom>
		</div>
		<div class="row">
			<CardCustom title="实体清单更新频率" :style="{ width: '798px', height: '422px' }">
				<div class="subPanel3">
					<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
						<Echarts :option="bar2Option" height="100%"></Echarts>
					</div>
					<Hint text="2024年以来,实体清单更新次数相对于2023年有所降低,但是本年度内呈上升趋势。"></Hint>
				</div>
			</CardCustom>
			<CardCustom title="重点实体列表" :style="{ width: '798px', height: '422px' }">
				<template #right>
					<el-input v-model="value3" placeholder="搜索" size="mini" :style="{ width: '300px', marginRight: '8px' }">
						<template #suffix>
							<i class="searchIcon"></i>
						</template>
					</el-input>
				</template>
				<div class="subPanel4">
					<div class="listWrap">
						<div class="item" v-for="(item, index) in subPanel4" :key="index">
							<div class="name">{{ item.name }}</div>
							<div class="tags">
								<div
									class="tagItem"
									v-for="(item, index) in item.tags"
									:key="index"
									:class="`tagLevel${item.level}`"
								>
									{{ item.name }}
								</div>
							</div>
						</div>
					</div>
					<Hint
						text="本次实体清单更新,科研院所占比相对较高。需要注意的是,中国科学技术大学、中国科学院物理研究所等国内重点科研机构被列入实体清单,此外还有中科星图以及中电科旗下的多家研究所被列入清单,可能会对相关行业产生显著影响。"
					></Hint>
				</div>
			</CardCustom>
		</div>
	</div>
</template>

<script setup>
import { ref, shallowRef, onMounted, watch } from "vue";
import CardCustom from "../../components/CardCustom.vue";
import { Search } from "@element-plus/icons-vue";
import Echarts from "@/components/Chart/index.vue";
import { getBarChart, getLineChart } from "../../utils/charts";
import Hint from "./hint.vue";
import { getEntitiesChangeCount, getEntitiesGrowthTrend, getEntitiesUpdateCount, getKeyEntityList } from "@/api/exportControl";
import _ from "lodash";
import { useRoute } from "vue-router";
const route = useRoute();
const line1Option = shallowRef({});
const bar2Option = shallowRef({});

// 获取重点实体列表数据
const fetchKeyEntityList = async (date = "2025-11-11", keyword = "") => {
	try {
		const data = await getKeyEntityList(date, keyword);
		if (data && Array.isArray(data)) {
			// 根据 fishbone-mock.json 的数据结构处理数据
			// 数据结构示例: [{orgName: "...", orgNameZh: "...", ...}]
			subPanel4.value = data.map(item => {
				// 优先使用中文名称，如果没有则使用英文名称
				const name = item.orgNameZh || item.orgName || "未知实体";

				return {
					name,
					tags: item.domainList || []
				};
			});
		}
	} catch (err) {
		console.error("获取重点实体列表失败:", err);
	}
};

onMounted(async () => {
	try {
		const [entitiesGrowthTrendData, entitiesUpdateCountData] = await Promise.all([
			getEntitiesGrowthTrend(),
			getEntitiesUpdateCount()
		]);

		const list = _.reverse(entitiesGrowthTrendData);
		const xAxisData = _.map(list, "year");
		const seriesData = _.map(list, item => {
			return parseInt(item.percent);
		});
		line1Option.value = getLineChart({ xAxisData, seriesData, name: "增长趋势", color: "rgba(146, 84, 222, 1)" }, true);

		bar2Option.value = getBarChart(
			_.reverse(entitiesUpdateCountData.xAxis),
			_.reverse(entitiesUpdateCountData.series),
			["rgba(22, 119, 255, 1)", "rgba(22, 119, 255, 0)"],
			"更新频率"
		);
		// 获取重点实体列表数据
		await fetchKeyEntityList(route.query.startTime);
	} catch (err) {
		console.log(err);
	}
});
const domainOptions = [
	{
		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",
		label: "核"
	},
	{
		value: "20",
		label: "政治"
	},
	{
		value: "21",
		label: "外交"
	},
	{
		value: "22",
		label: "经济"
	},
	{
		value: "23",
		label: "军事"
	},
	{
		value: "24",
		label: "科技"
	},
	{
		value: "25",
		label: "安全"
	},
	{
		value: "99",
		label: "其他"
	}
];
const typeOptions = [
	{
		value: "1",
		label: "人物"
	},
	{
		value: "2",
		label: "机构"
	},
	{
		value: "7",
		label: "地址"
	}
];
const domainValue = ref(domainOptions[0].value);
const typeValue = ref(typeOptions[0].value);
const bar1Option = shallowRef({});
watch(
	[domainValue, typeValue],
	async ([domain, type]) => {
		let EntitiesChangeCount = await getEntitiesChangeCount(domain, type);
		EntitiesChangeCount = _.reverse(EntitiesChangeCount);
		bar1Option.value = getBarChart(
			_.map(EntitiesChangeCount, "year"),
			_.map(EntitiesChangeCount, "count"),
			["rgba(255, 159, 22, 1)", "rgba(255, 159, 22, 0)"],
			"制裁强度"
		);
	},
	{ immediate: true }
);
// const options = [
// 	{
// 		value: "1",
// 		label: "人工智能"
// 	},
// 	{
// 		value: "2",
// 		label: "航空航天"
// 	}
// ];
const subPanel4 = ref([
	{
		name: "中国科学技术大学",
		tags: [
			{
				name: "双一流",
				level: 1
			},
			{
				name: "985",
				level: 2
			},
			{
				name: "关税政策",
				level: 3
			}
		]
	},
	{
		name: "合肥量子信息科学国家实验室",
		tags: [
			{
				name: "上市企业",
				level: 2
			}
		]
	},
	{
		name: "中国科学院物理研究所",
		tags: [
			{
				name: "科研院所",
				level: 4
			}
		]
	}
]);
const value3 = ref("");
// 监听搜索关键词变化，重新获取数据
watch(
	value3,
	_.debounce(async newVal => {
		await fetchKeyEntityList(route.query.startTime, newVal);
	}, 300)
);
</script>

<style lang="scss" scoped>
.panel1Wrap {
	width: 1600px;
	margin: 0px auto 0 auto;
	padding-bottom: 20px;
}
.row {
	display: flex;
	flex-direction: row;
	gap: 16px;
	margin-top: 15px;
}
.subPanel1,
.subPanel2,
.subPanel3 {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 2px 18px 12px 18px;
	.chartsWrap {
		flex: 1;
	}
}
.subPanel4 {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 4px 20px 12px 20px;
	.listWrap {
		flex: 1;
		min-height: 0;
		overflow: auto;
		.item {
			height: 44px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid rgba(234, 236, 238, 1);
			.name {
				flex: 1;
				min-width: 0;
				color: rgba(10, 18, 30, 1);
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				margin-left: 20px;
				white-space: nowrap;
				overflow: hidden;
				margin-right: 11px;
				text-overflow: ellipsis;
			}
			.tags {
				display: flex;
				align-items: center;
				gap: 8px;
				.tagItem {
					padding: 2px 8px;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
					border: 1px solid transparent;
					border-radius: 4px;
				}
				.tagLevel1 {
					border: 1px solid rgba(255, 163, 158, 1);
					background-color: rgba(255, 241, 240, 1);
					color: rgba(245, 34, 45, 1);
				}
				.tagLevel2 {
					border: 1px solid rgba(135, 232, 222, 1);
					background-color: rgba(230, 255, 251, 1);
					color: rgba(19, 168, 168, 1);
				}
				.tagLevel3 {
					border: 1px solid rgba(255, 229, 143, 1);
					background-color: rgba(255, 251, 230, 1);
					color: rgba(250, 173, 20, 1);
				}
				.tagLevel4 {
					border: 1px solid rgba(33, 129, 57, 1);
					background-color: rgba(33, 129, 57, 0.1);
					color: rgba(33, 129, 57, 1);
				}
			}
		}
	}
}
.searchIcon {
	width: 16px;
	height: 16px;
	background-image: url("../../assets/images/search.png");
	background-size: 100% 100%;
}
</style>
