<template>
	<div class="panel3Wrap">
		<div class="row">
			<CardCustom title="新增实体领域分布情况" :style="{ width: '798px', height: '422px' }">
				<div class="subPanel1">
					<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
						<Echarts :option="pie1Option" height="100%"></Echarts>
					</div>
					<Hint text="美国对中国的制裁领域以半导体等高精尖领域企业。"></Hint>
				</div>
			</CardCustom>
			<CardCustom title="量子科技领域历史制裁情况" :style="{ width: '798px', height: '422px' }">
				<div class="subPanel2">
					<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
						<Echarts :option="line1Option" height="100%"></Echarts>
					</div>
					<Hint text="美国对中国量子科技领域制裁日益增加，对华制裁日益严峻。"></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="美国对中国制裁涉及领域数逐年增加，对华制裁日益严峻。"></Hint>
				</div>
			</CardCustom>
			<CardCustom title="航空航天领域历史制裁情况" :style="{ width: '798px', height: '422px' }">
				<div class="subPanel4">
					<div class="chartsWrap" :style="{ paddingBottom: '10px' }">
						<Echarts :option="line2Option" height="100%"></Echarts>
					</div>
					<Hint text="美国对中国航空领域领域制裁日益增加，对华制裁日益严峻。"></Hint>
				</div>
			</CardCustom>
		</div>
	</div>
</template>

<script setup>
import { ref, shallowRef, onMounted } 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, getPieOption1 } from "../../utils/charts";
import Hint from "./hint.vue";
import {
	getEntitiesAreaCountByYear,
	getEntitiesDomainCount,
	getCountThisDomain,
	getDomainDistribution
} from "@/api/exportControl";
import _ from "lodash";
import { useRoute } from "vue-router";
const route = useRoute();
const pie1Option = shallowRef({});
const bar2Option = shallowRef({});
const line1Option = shallowRef({});
const line2Option = shallowRef({});

// 获取历次制裁涉及领域数数据
const fetchEntitiesDomainCount = async () => {
	try {
		const data = await getEntitiesDomainCount();
		if (data && Array.isArray(data)) {
			// 根据 fishbone-mock.json 的数据结构处理数据
			// 数据结构示例: [{name: "2025-10-09", count: 4}, ...]

			// 按日期排序
			const sortedData = data.sort((a, b) => {
				return new Date(a.name) - new Date(b.name);
			});

			// 提取 x 轴数据（日期）
			const xAxisData = sortedData.map(item => item.name);

			// 提取 y 轴数据（领域数）
			const seriesData = sortedData.map(item => item.count);

			// 更新图表配置，使用指定的颜色
			bar2Option.value = getBarChart(xAxisData, seriesData, ["rgba(19, 188, 196, 1)", "rgba(19, 188, 196, 0)"], "领域数");
		}
	} catch (error) {
		console.error("获取历次制裁涉及领域数数据失败:", error);
	}
};

onMounted(async () => {
	try {
		const [entitiesAreaCountByYearData, countThisDomainData4, countThisDomainData10] = await Promise.all([
			getDomainDistribution(route.query.startTime),
			getCountThisDomain("4"),
			// getEntitiesDomainCount(),
			getCountThisDomain("10")
		]);

		pie1Option.value = getPieOption1(
			entitiesAreaCountByYearData.map(item => ({
				name: item.name,
				value: item.count
			})) ?? []
		);
		const list4 = _.reverse(countThisDomainData4 ?? []);
		line1Option.value = getLineChart({
			xAxisData: _.map(list4, "year"),
			seriesData: _.map(list4, "count"),
			name: "量子科技领域",
			color: "rgba(255, 149, 77, 1)"
		});

		// bar2Option.value = getBarChart(
		// 	_.reverse(entitiesDomainCountData?.xAxis ?? []),
		// 	_.reverse(entitiesDomainCountData?.series ?? []),
		// 	["rgba(19, 188, 196, 1)", "rgba(19, 188, 196, 0)"],
		// 	"领域数"
		// );

		const list10 = _.reverse(countThisDomainData10 ?? []);
		line2Option.value = getLineChart({
			xAxisData: _.map(list10, "year"),
			seriesData: _.map(list10, "count"),
			name: "航空航天领域",
			color: "rgba(146, 84, 222, 1)"
		});
		await fetchEntitiesDomainCount();
	} catch (err) {
		console.log(err);
	}
});
</script>

<style lang="scss" scoped>
.panel3Wrap {
	width: 1600px;
	margin: 0px auto 0 auto;
	padding-bottom: 20px;
}
.row {
	display: flex;
	flex-direction: row;
	gap: 16px;
	margin-top: 15px;
}
.subPanel1,
.subPanel2,
.subPanel3,
.subPanel4 {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 2px 18px 12px 18px;
	.chartsWrap {
		flex: 1;
	}
}
</style>
