<template>
	<div class="panel2Wrap">
		<div class="row">
			<CardCustom title="上市企业制裁强度" :style="{ width: '798px', height: '422px' }">
				<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="最近 10 年中国上市企业融资情况呈现出先波动上升，在 2022 年达到峰值后，2023-2024 年又快速下滑的趋势。"
					></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' }">
				<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" @click="handleOrgClick(item)">{{ item.name }}</div>
							<div class="infoWrap">
								<div class="shizhi">{{ item.shizhi }}</div>
								<div class="address">{{ item.address }}</div>
								<div class="hangye">{{ item.hangye }}</div>
								<div class="type">{{ item.type }}</div>
								<div class="detail" @click="handleOrgClick(item)">查看详情</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 _ from "lodash";
import Hint from "./hint.vue";
import { getEntityFinancing, getEntityMarketValue, getKeyListedEntityList, getSanStrength } from "@/api/exportControl";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const value3 = ref("");
const bar1Option = shallowRef({});
const bar2Option = shallowRef({});
const line1Option = shallowRef({});
const subPanel4 = ref([
	{
		name: "中科星图有限公司",
		shizhi: "278.47亿",
		address: "北京",
		hangye: "半导体",
		type: "上市企业"
	},
	{
		name: "中国科学院长春光学精密机械与物理研究所",
		shizhi: "278.47亿",
		address: "北京",
		hangye: "半导体",
		type: "研究院"
	},
	{
		name: "中芯国际集成电路制造有限公司",
		shizhi: "278.47亿",
		address: "北京",
		hangye: "半导体",
		type: "上市企业"
	}
]);

// 获取重点上市企业列表数据
const fetchKeyListedEntityList = async (keyword = "") => {
	try {
		console.log("获取重点上市企业列表数据", route.query.startTime);
		const data = await getKeyListedEntityList(route.query.startTime, keyword);
		if (data && Array.isArray(data)) {
			// 根据 fishbone-mock.json 的数据结构处理数据
			// 数据结构示例:
			// [{
			//   orgName: "Hua Ke Logistics (HK) Limited",
			//   orgNameZh: "华科物流（香港）有限公司",
			//   marketValue: 214.34982757457735,
			//   address: "广州",
			//   industryList: ["经济", "军事", "安全"]
			// }]

			subPanel4.value = data.map(item => {
				// 优先使用中文名称，否则使用英文名称
				const name = item.orgNameZh || item.orgName || "未知企业";

				// 市值处理，保留两位小数并添加单位
				const marketValue = item.marketValue ? `${item.marketValue.toFixed(2)}亿` : "未知";

				// 地址信息
				const address = item.address || "未知";

				// 行业信息，取第一个行业或者默认值
				const hangye = item.industryList && item.industryList.length > 0 ? item.industryList[0] : "未知行业";

				// 类型信息，默认为"企业"
				const type = item.orgType || "企业";

				return {
					...item,
					name,
					shizhi: `市值：${marketValue}`,
					address: `地址：${address}`,
					hangye: `行业：${hangye}`,
					type: `类型：${type}`
				};
			});
		}
	} catch (error) {
		console.error("获取重点上市企业列表数据失败:", error);
		// 出错时使用默认数据
		subPanel4.value = [
			{
				name: "中科星图有限公司",
				shizhi: "278.47亿",
				address: "北京",
				hangye: "半导体",
				type: "上市企业"
			},
			{
				name: "中国科学院长春光学精密机械与物理研究所",
				shizhi: "278.47亿",
				address: "北京",
				hangye: "半导体",
				type: "研究院"
			},
			{
				name: "中芯国际集成电路制造有限公司",
				shizhi: "278.47亿",
				address: "北京",
				hangye: "半导体",
				type: "上市企业"
			}
		];
	}
};

// 获取上市企业融资变化数据
const fetchEntityFinancing = async () => {
	try {
		const data = await getEntityFinancing();
		if (data && Array.isArray(data)) {
			// 根据 fishbone-mock.json 的数据结构处理数据
			// 数据结构示例: [{name: "2025-10-09", count: 41}, ...]

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

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

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

			// 更新图表配置
			line1Option.value = getLineChart({
				xAxisData,
				seriesData,
				name: "融资变化",
				color: "rgba(146, 84, 222, 1)"
			});
		}
	} catch (error) {
		console.error("获取上市企业融资变化数据失败:", error);
	}
};

// 获取上市企业市值变化数据
const fetchEntityMarketValue = async () => {
	try {
		const data = await getEntityMarketValue();
		if (data && Array.isArray(data)) {
			// 根据 fishbone-mock.json 的数据结构处理数据
			// 数据结构示例: [{name: "2025-10-09", count: 220}, ...]

			// 按日期排序
			const sortedData = data
				.sort((a, b) => {
					return new Date(a.year) - new Date(b.year);
				})
				.filter((item, idx) => idx % 3 === 0);

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

			// 提取 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);
	}
};

//
const fetchSanStrength = async () => {
	try {
		const data = await getSanStrength();
		if (data && Array.isArray(data)) {
			// 根据 fishbone-mock.json 的数据结构处理数据
			// 数据结构示例: [{name: "2025-10-09", count: 220}, ...]

			// 按日期排序
			const sortedData = data
				.sort((a, b) => {
					return new Date(a.year) - new Date(b.year);
				})
				.filter((item, idx) => idx % 3 === 0);

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

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

			// 更新图表配置，使用指定的颜色
			bar1Option.value = getBarChart(xAxisData, seriesData, ["rgba(22, 119, 255, 1)", "rgba(22, 119, 255, 0)"], "制裁强度");
		}
	} catch (error) {
		console.error("获取上市企业市值变化数据失败:", error);
	}
};

onMounted(() => {
	// bar1Option.value = getBarChart(
	// 	["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
	// 	[219, 228, 129, 159, 152, 157, 78, 34, 56, 78],
	// 	["rgba(22, 119, 255, 1)", "rgba(22, 119, 255, 0)"],
	// 	"制裁强度"
	// );
	// bar2Option.value = getBarChart(
	// 	["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
	// 	[39, 28, 49, 19, 22, 25, 78, 34, 56, 28],
	// 	["rgba(19, 188, 196, 1)", "rgba(19, 188, 196, 0)"],
	// 	"市值变化"
	// );
	// line1Option.value = getLineChart({
	// 	xAxisData: [2013, 2023, 2024, 2015],
	// 	seriesData: [434, 24, 453, 322],
	// 	name: "融资变化",
	// 	color: "rgba(146, 84, 222, 1)"
	// });
	// 获取上市企业融资变化数据
	fetchEntityFinancing();
	fetchEntityMarketValue();
	fetchKeyListedEntityList();
	fetchSanStrength();
});

// 监听搜索关键词变化，重新获取数据
watch(
	value3,
	_.debounce(async newVal => {
		console.log("关键词变化:", newVal);
		await fetchKeyListedEntityList(newVal);
	}, 300)
);

const handleOrgClick = item => {
	console.log(item);
	const route = router.resolve({
		path: "/companyPages",
		query: {
			id: item.id
		}
	});
	window.open(route.href, "_blank");
};
</script>

<style lang="scss" scoped>
.panel2Wrap {
	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: 2px 20px 12px 20px;
	.listWrap {
		flex: 1;
		min-height: 0;
		overflow: auto;
		display: flex;
		flex-direction: column;
		gap: 8px;
		.item {
			display: flex;
			flex-direction: column;
			border: 1px solid rgba(234, 236, 238, 1);
			gap: 10px;
			padding: 11px 20px;
			flex-shrink: 0;
			.name {
				color: rgba(10, 18, 30, 1);
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				cursor: pointer;
			}
			.infoWrap {
				display: flex;
				color: rgba(132, 136, 142, 1);
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				.shizhi {
					width: 180px;
					flex-shrink: 0;
				}
				.address {
					width: 130px;
					flex-shrink: 0;
					margin-right: 20px;
				}
				.hangye {
					width: 130px;
					flex-shrink: 0;
				}
				.type {
					width: 130px;
					flex-shrink: 0;
				}
				.detail {
					margin-left: auto;
					flex-shrink: 0;
					color: rgba(5, 95, 194, 1);
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					cursor: pointer;
				}
			}
		}
	}
}
.searchIcon {
	width: 16px;
	height: 16px;
	background-image: url("../../assets/images/search.png");
	background-size: 100% 100%;
}
</style>
