<template>
	<div class="influencePanel2">
		<CardCustom title="涉及行业" :style="{ width: '480px', height: '860px' }">
			<div class="subPanel1">
				<div class="chartsWrap">
					<Echarts :option="horizontalBarOptions" height="100%"></Echarts>
				</div>
				<div class="buttonWrap">
					<ButtonList :list="buttonList" :active-id="activeButtonId" @click="setActiveButtonId"></ButtonList>
				</div>
				<div class="listWrap">
					<div class="item" v-for="(item, index) in listData" :key="index">
						<div class="index" :class="{ isTopTen: index < 10 }">{{ index + 1 }}</div>
						<div class="name">{{ item.name }}</div>
						<div class="icon" :class="{ iconUp: item.isUp, iconDown: !item.isUp }"></div>
					</div>
				</div>
			</div>
		</CardCustom>
		<CardCustom title="产业链分析" :style="{ width: '1240px', height: '860px' }">
			<div class="subPanel2">
				<Hint
					text="法案核心意图在于通过税收优惠吸引制造业回流美国​，并在关键科技领域对中国进行遏制，限制中国获取先进技术、资本和市场渠道，从而延缓中国科技产业的发展速度。给半导体、新能源、人工智能等相关科技行业带来不小的短期压力。"
				></Hint>
				<div class="chartsWrap">
					<div class="right-main-content">
						<div class="right-main-content-main">
							<Fishbone :chainId="activeButtonId" />
						</div>
						<div class="right-main-content-footer">
							<div class="footer-item1">
								<div class="footer-item1-bottom">
									<div class="icon">
										<img src="../../assets/images/warning.png" alt="" />
									</div>
									<div class="text">
										{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
									</div>
								</div>
								<div class="footer-item1-top">{{ "基础支撑" }}</div>
							</div>
							<div class="footer-item2">
								<div class="footer-item2-bottom">
									<div class="icon">
										<img src="../../assets/images/warning.png" alt="" />
									</div>
									<div class="text">
										{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
									</div>
								</div>
								<div class="footer-item2-top">{{ "软件算法" }}</div>
							</div>
							<div class="footer-item3">
								<div class="footer-item3-bottom">
									<div class="icon">
										<img src="../../assets/images/warning.png" alt="" />
									</div>
									<div class="text">
										{{ "中国企业45家（51.00%），受制裁3家（7.00%）" }}
									</div>
								</div>
								<div class="footer-item3-top">{{ "行业应用" }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</CardCustom>
	</div>
</template>

<script setup>
import { ref, onMounted, shallowReactive, shallowRef, watch } from "vue";
import CardCustom from "../../components/CardCustom.vue";
import Echarts from "@/components/Chart/index.vue";
import Hint from "./hint.vue";
import ButtonList from "@/components/buttonList/buttonList.vue";
import Fishbone from "./fishbone.vue";
import { getHorizontalBarChart2 } from "../../utils/charts";
import { getDomainDistribution, getChainEntities } from "@/api/exportControl";
import { useRoute } from "vue-router";
const route = useRoute();
const buttonList = ref([]);
const activeButtonId = ref(buttonList.value[0]?.id || 1);
const setActiveButtonId = id => {
	activeButtonId.value = id;
};
const listData = ref([
	{
		name: "宁德时代新能源科技股份有限公司",
		isUp: false
	},
	{
		name: "比亚迪股份有限公司",
		isUp: false
	},
	{
		name: "隆基绿能科技股份有限公司",
		isUp: false
	},
	{
		name: "晶科能源控股有限公司",
		isUp: false
	},
	{
		name: "厦门海辰储能科技股份有限公司",
		isUp: false
	},
	{
		name: "国轩高科股份有限公司",
		isUp: true
	},
	{
		name: "远景科技集团",
		isUp: false
	},
	{
		name: "惠州亿纬锂能股份有限公司",
		isUp: false
	},
	{
		name: "天合光能股份有限公司",
		isUp: false
	},
	{
		name: "晶澳太阳能科技股份有限公司",
		isUp: true
	},
	{
		name: "通威股份有限公司",
		isUp: true
	},
	{
		name: "北京海博思创科技股份有限公司",
		isUp: true
	},
	{
		name: "上海派能能源科技股份有限公司",
		isUp: false
	}
]);
const horizontalBarOptions = shallowRef({});

// 获取领域分布数据并更新图表
const fetchDomainDistribution = async () => {
	try {
		const data = await getDomainDistribution(route.query.startTime);
		if (data && Array.isArray(data)) {
			console.log("data data11", data);
			// 按照 count 降序排列
			const sortedData = data.sort((a, b) => a.count - b.count);

			// 提取 y 轴数据（领域名称）
			const yAxisData = sortedData.map(item => item.name);

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

			// 更新图表配置
			horizontalBarOptions.value = getHorizontalBarChart2(yAxisData, seriesData, false);

			// 更新buttonList
			buttonList.value = sortedData
				.map(item => ({
					id: item.id,
					text: item.name
				}))
				.sort((a, b) => a.id - b.id);
			console.log("buttonList.value", buttonList.value);
			setActiveButtonId(buttonList.value[0].id);
		}
	} catch (error) {
		console.error("获取领域分布数据失败:", error);
	}
};

const fetchChainEntities = async () => {
	try {
		const data = await getChainEntities(route.query.startTime, activeButtonId.value);
		if (data && Array.isArray(data)) {
			console.log("data data", data);
			// 更新 listData
			listData.value = data.map(item => ({
				name: item.orgNameZh,
				isUp: item.isUp
			}));
		}
	} catch (error) {
		console.error("获取产业链实体数据失败:", error);
	}
};

onMounted(async () => {
	fetchDomainDistribution();
	// horizontalBarOptions.value = getHorizontalBarChart2(
	// 	["贸易", "军工", "金融业", "跨境电商", "半导体", "新能源"],
	// 	[10, 21, 25, 79, 95, 109],
	// 	false
	// );

	fetchChainEntities();
});

watch(() => activeButtonId.value, fetchChainEntities);
</script>

<style lang="scss" scoped>
.influencePanel2 {
	display: flex;
	gap: 16px;
}
.subPanel2 {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 17px 18px 12px 18px;
	.chartsWrap {
		flex: 1;
		.right-main-content {
			height: 100%;
			display: flex;
			flex-direction: column;
			.right-main-content-main {
				flex: 1;
			}
			.right-main-content-footer {
				height: 84px;
				margin-left: 14px;
				margin-top: 16px;
				// background: orange;
				display: flex;
				.footer-item1 {
					width: 408px;
					.footer-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;
						margin-top: 15px;
					}
					.footer-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;
						}
					}
				}
				.footer-item2 {
					margin-left: -8px;
					width: 408px;
					.footer-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;
						margin-top: 15px;
					}
					.footer-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;
						}
					}
				}
				.footer-item3 {
					margin-left: -8px;
					width: 408px;
					.footer-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;
						margin-top: 15px;
					}
					.footer-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;
						}
					}
				}
			}

			// background: orange;
		}
	}
}
.subPanel1 {
	padding: 0 17px;
	height: 100%;
	display: flex;
	flex-direction: column;
	.chartsWrap {
		height: 200px;
		border: 1px solid rgba(234, 236, 238, 1);
		border-radius: 4px;
		background: rgba(247, 248, 249, 1);
	}
	.buttonWrap {
		margin-top: 12px;
		margin-bottom: 8px;
	}
	.listWrap {
		flex: 1;
		height: 42px;
		min-height: 0;
		overflow: auto;
		display: flex;
		flex-direction: column;
		cursor: pointer;
		.item {
			display: flex;
			align-items: center;
			height: 42px;
			border-bottom: 1px solid rgba(234, 236, 238, 1);
			overflow: hidden;
			flex-shrink: 0;
			.index {
				width: 24px;
				height: 24px;
				border-radius: 12px;
				color: rgb(5, 95, 194);
				font-size: 14px;
				font-weight: 400;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 12px;
				margin-right: 10px;
				flex-shrink: 0;
			}
			.isTopTen {
				background-color: rgba(231, 243, 255, 1);
			}
			.name {
				color: rgb(59, 65, 75);
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				height: 24px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.icon {
				width: 8px;
				height: 6px;
				background-size: 100% 100%;
				margin-left: 10px;
				flex-shrink: 0;
			}
			.iconUp {
				background-image: url("../../assets/images/iconUp.png");
			}
			.iconDown {
				background-image: url("../../assets/images/iconDown.png");
			}
		}
	}
}
</style>
