<template>
	<div class="influencePanel2">
		<CardCustom title="涉及行业" :style="{ width: '500px', 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" @click="handleEttClick(item)">
						<div class="index" :class="{ isTopTen: index < 10 }">{{ index + 1 }}</div>
						<div class="name">{{ item.name || item.nameEn }}</div>
						<div class="icon" :class="{ iconUp: item.marketChange > 0, iconDown: item.marketChange < 0 }"></div>
					</div>
				</div>
			</div>
		</CardCustom>
		<CardCustom title="产业链分析" :style="{ width: '1240px', height: '860px' }">
			<div class="subPanel2">
				<Hint
					text="法案核心意图在于通过税收优惠吸引制造业回流美国​，并在关键科技领域对中国进行遏制，限制中国获取先进技术、资本和市场渠道，从而延缓中国科技产业的发展速度。给半导体、新能源、人工智能等相关科技行业带来不小的短期压力。"
				></Hint>
				<div class="subPanel2-buttonlist" v-if="chainData.length > 0">
					<ButtonList :list="chainData" :active-id="activeChainId" @click="setActiveChainId"></ButtonList>
				</div>
				<div class="chartsWrap">
					<div class="right-main-content">
						<div class="right-main-content-main">
							<Fishbone :chainId="chainData.length > 0 ? activeChainId : 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">
										{{
											`国内企业数据量${cnEntityOnChainData.upstreamInternalCount}家（${cnEntityOnChainData.upstreamInternalRate}%），受制裁${cnEntityOnChainData.upstreamEntityCount}家（${cnEntityOnChainData.upstreamEntityRate}%）`
										}}
										<!-- {{ "中国企业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">
										{{
											`国内企业数据量${cnEntityOnChainData.midstreamInternalCount}家（${cnEntityOnChainData.midstreamInternalRate}%），受制裁${cnEntityOnChainData.midstreamEntityCount}家（${cnEntityOnChainData.midstreamEntityRate}%）`
										}}
										<!-- {{ "中国企业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">
										{{
											`国内企业数据量${cnEntityOnChainData.downstreamInternalCount}家（${cnEntityOnChainData.downstreamInternalRate}%），受制裁${cnEntityOnChainData.downstreamEntityCount}家（${cnEntityOnChainData.downstreamEntityRate}%）`
										}}
										<!-- {{ "中国企业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, getChainInfoByDomainId, getCnEntityOnChain } from "@/api/exportControl";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
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 handleEttClick = item => {
	const route = router.resolve({
		name: "companyPages",
		params: {
			id: item.id
		}
	});
	window.open(route.href, "_blank");
};
// 处理点击事件
const handleChainClick = async chainId => {};

// 获取产业链信息数据
const chainData = ref([]);
const activeChainId = ref(chainData.value[0]?.id);
const setActiveChainId = id => {
	activeChainId.value = id;
};
const fetchChainInfo = async () => {
	try {
		const data = await getChainInfoByDomainId(activeButtonId.value);
		console.log("getChainInfoByDomainId", data);
		if (data && Array.isArray(data)) {
			// 将获取到的数据赋值给 chainData
			chainData.value = data.map(item => ({
				...item,
				text: item.name
			}));
			console.log("chainData.value", chainData.value);
			setActiveChainId(chainData.value[0].id);
		} else {
			setActiveChainId(null);
			chainData.value = [];
		}
	} catch (error) {
		console.error("获取产业链信息数据失败:", error);
	}
};

const cnEntityOnChainData = ref({
	upstreamInternalCount: 0,
	upstreamInternalRate: 0,
	upstreamEntityCount: 0,
	upstreamEntityRate: 0,
	midstreamInternalCount: 0,
	midstreamInternalRate: 0,
	midstreamEntityCount: 0,
	midstreamEntityRate: 0,
	downstreamInternalCount: 0,
	downstreamInternalRate: 0,
	downstreamEntityCount: 0,
	downstreamEntityRate: 0
});
const fetchCnEntityOnChain = async () => {
	try {
		console.log("getCnEntityOnChain 111111", chainData.value);
		const data = await getCnEntityOnChain(chainData.value.length > 0 ? activeChainId.value : activeButtonId.value);
		console.log("getCnEntityOnChain", data);
		if (!!data && Object.keys(data).length > 0) {
			// 将获取到的数据赋值给 cnEntityOnChainData
			cnEntityOnChainData.value = {
				upstreamInternalCount: data.upstreamInternalCount || 0,
				upstreamInternalRate: Math.floor(data.upstreamInternalRate * 100) || 0,
				upstreamEntityCount: data.upstreamEntityCount || 0,
				upstreamEntityRate: Math.floor(data.upstreamEntityRate * 100) || 0,
				midstreamInternalCount: data.midstreamInternalCount || 0,
				midstreamInternalRate: Math.floor(data.midstreamInternalRate * 100) || 0,
				midstreamEntityCount: data.midstreamEntityCount || 0,
				midstreamEntityRate: Math.floor(data.midstreamEntityRate * 100) || 0,
				downstreamInternalCount: data.downstreamInternalCount || 0,
				downstreamInternalRate: Math.floor(data.downstreamInternalRate * 100) || 0,
				downstreamEntityCount: data.downstreamEntityCount || 0,
				downstreamEntityRate: Math.floor(data.downstreamEntityRate * 100) || 0
			};
			console.log("getCnEntityOnChain 222222", chainData.value);
		}
	} catch (error) {
		console.error("获取产业链信息数据失败:", error);
	}
};

// 获取领域分布数据并更新图表
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 => ({
				...item,
				name: item.orgNameZh,
				nameEn: item.orgName,
				isUp: item.isUp
			}));
		}
	} catch (error) {
		console.error("获取产业链实体数据失败:", error);
	}
};

onMounted(async () => {
	fetchDomainDistribution();

	fetchChainEntities();
	// 获取产业链信息数据
	fetchChainInfo();
	// 获取产业链中国企业实体信息查询
	fetchCnEntityOnChain();
});

watch(
	() => activeButtonId.value,
	async () => {
		await fetchChainEntities();
		// 获取产业链信息数据
		await fetchChainInfo();
		// 获取产业链中国企业实体信息查询
		await fetchCnEntityOnChain();
	}
);

watch(
	() => activeChainId.value,
	async () => {
		await fetchCnEntityOnChain();
	}
);
</script>

<style lang="scss" scoped>
.influencePanel2 {
	display: flex;
	gap: 16px;
}
.subPanel2 {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 17px 18px 12px 18px;
	&-buttonlist {
		padding: 10px;
	}
	.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;
		display: flex;
		// flex: 1;
		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>
