<!-- 打压遏制ts分析 -->
<template>
	<div class="thematic-box">
		<div style="width: 100%;display: flex;
  justify-content: center;  ">
			<div class="title-text">中美博弈专题分析</div>
		</div>



		<DivideHeader class="divide" titleText="打压遏制态势分析"></DivideHeader>
		<div class="thematic-content">
			<div class="item-header">
				<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
				<div class="item-header-text">对华打压历程</div>
				<div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
					数据来源：美国某某局</div>
			</div>
			<div class="item-header-divider"></div>
			<div style="display: flex;height: calc(100% - 60px);">
				<Timeline :data="course" text-key="title" id-key="seq" />
			</div>
		</div>
		<div class="thematic-content" style="margin-top: 20px;height: 350px;">
			<div class="item-header">
				<img class="item-header-icon" src="@/assets/images/icon/thematic-icon-2.png"></img>
				<div class="item-header-text">打压遏制手段分布</div>
			</div>
			<div class="item-header-divider"></div>
			<div style="display: flex; justify-content: space-between; width: 100%; height: calc(100% - 60px);" @mouseenter="handleChangeSwiper(false)" @mouseleave="handleChangeSwiper(true)">
				<div class="thematic-btn-left" @click="handleSwitch('left')">
					<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-left.png"></img>
				</div>

				<div class="cup-box" style="display: flex;">
					<div v-for="item in distribution" class="cup-item-box" :style="{
						color: `${item.color[3]}`
					}" @click="handleClickItem(item)">
						<div class="cup-title">
							{{ item.titlle }}
						</div>
						<WaveBall :percent="item.value" :data="item" :color="item.color" :size="128" />
						<div>
							{{ item.change }}
						</div>
					</div>
				</div>
				<div class="thematic-btn-right" @click="handleSwitch('right')">
					<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-right.png"></img>
				</div>
			</div>
		</div>
		<div style="margin-top: 20px;height: 450px;display: flex;">
			<div class="thematic-content" style="width: 49.25%;; display: block;">
				<div class="item-header">
					<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
					<div class="item-header-text">打压遏制强度变化</div>
					<div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
						数据来源：美国某某局</div>
				</div>
				<div class="item-header-divider"></div>
				<div style="display: flex;margin: 10px 20px; justify-content: space-between;">
					<el-radio-group v-model="strengthBtn" size="small" @change="handleStrengthBtn">
						<el-radio-button value="all" border>全部领域
						</el-radio-button>
						<el-radio-button value="integratedCircuits" border>集成电路</el-radio-button>
						<el-radio-button value="energy" border>能源
						</el-radio-button>
						<el-radio-button value="biotechnology" border>生物科技</el-radio-button>
						<el-radio-button value="quantum" border>量子科技</el-radio-button>
						<el-radio-button value="ai" border>人工智能</el-radio-button>
						<el-radio-button value="network" border>通信网络</el-radio-button>
					</el-radio-group>
					<el-select v-model="strengthSelect" placeholder="" style="width: 100px;" size="small">
						<el-option v-for="item in strengthTimeList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
				<div style="display: flex;height: calc(100% - 60px);" id="chart1">
				</div>
			</div>
			<div class="thematic-content" style="width: 49.25%;margin-left: 1.5%;">
				<div class="item-header">
					<img class="item-header-icon" src="@/assets/images/icon/thematic-icon-3.png"></img>
					<div class="item-header-text">打压遏制领域分布</div>
					<div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
						数据来源：美国某某局</div>
				</div>
				<div class="item-header-divider"></div>

				<div style="display: flex;height: 400px;">
					<div style=" width:60%;height: 100%;" id="char2">
					</div>

					<div style="width: 35%;margin: 10px;">
						<el-select v-model="areaSelect" placeholder="" style="width: 120px;margin: 10px; margin-left: 140px;" size="small">
							<el-option v-for="item in areaTimeList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
						<div style="width: 80%; margin: 60px auto 0;">
							<div style="display: flex;align-items: center;height: 30px;justify-content: space-between;">
								<div class="legend-icon" style="background-color:#CE4F51 ;">
								</div>
								<div>
									法案
								</div>
								<div>
									19个
								</div>
							</div>
							<div style="display: flex;align-items: center;height: 30px;justify-content: space-between ;">
								<div class="legend-icon" style="background-color:#14A8A8 ;">
								</div>
								<div>
									行政令
								</div>
								<div>
									14个
								</div>
							</div>
							<div style="display: flex;align-items: center;height: 30px;justify-content: space-between ">
								<div class="legend-icon" style="background-color:#722FD1 ;">
								</div>
								<div>
									科技智库
								</div>
								<div>
									24篇
								</div>
							</div>
							<div style="display: flex;align-items: center;height: 30px;justify-content: space-between ">
								<div class="legend-icon" style="background-color:#FA8C15 ;">
								</div>
								<div>
									出口管制
								</div>
								<div>
									6项
								</div>
							</div>
							<div style="display: flex;align-items: center;height: 30px;justify-content: space-between ">
								<div class="legend-icon" style="background-color:#69B2FF ;">
								</div>
								<div>
									投融资限制
								</div>
								<div>
									7项
								</div>
							</div>
							<div style="display: flex;align-items: center;height: 30px;justify-content: space-between ">
								<div class="legend-icon" style="background-color:#CF4F51 ;">
								</div>
								<div>
									市场准入
								</div>
								<div>
									2项
								</div>
							</div>
						</div>
					</div>
				</div>


			</div>

		</div>
	</div>

</template>

<script setup>
import { onMounted, ref, computed, onUnmounted } from "vue";
import router from "@/router/index";
import * as echarts from "echarts";
import DivideHeader from "@/components/DivideHeader.vue";
import Timeline from "../component/Timeline.vue";
import WaveBall from "../component/WaveBall.vue";
import getBarChart from "../js/barChart.js";
import radarChart from "../js/radarChart.js";

//对华打压历程
const course = ref([
	{
		time: "2025年1月",
		title: "《AI扩散暂行最终规则》发布",
		content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。"
	},
	{
		time: "2025年1月",
		title: "特朗普宣布撤销拜登AI规则",
		content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。"
	},
	{
		time: "2025年1月",
		title: "特朗普签署EO 143202",
		content: "特朗普政府宣布撤销拜登AI规则，计划"
	},
	{
		time: "2025年1月",
		title: "中国网信办约谈英伟达",
		content: "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。"
	},
	{
		time: "2025年7月23日",
		title: "英伟达H20发放出口许可证",
		content: "美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。"
	},
	{
		time: "2025年1月",
		title: "《AI扩散暂行最终规则》发布",
		content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。"
	},
	{
		time: "2025年1月",
		title: "特朗普宣布撤销拜登AI规则",
		content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。"
	},
	{
		time: "2025年1月",
		title: "特朗普签署EO 143202",
		content: "特朗普政府宣布撤销拜登AI规则，计划"
	},
	{
		time: "2025年1月",
		title: "中国网信办约谈英伟达",
		content: "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。"
	},
	{
		time: "2025年7月23日",
		title: "英伟达H20发放出口许可证",
		content: "美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。"
	}
]);

const totalDistribution = ref([
	{
		titlle: "法案",
		value: 80,
		text: "1626",
		unit: "个",
		change: "较上月+3",
		path: "/billHome",
		color: ["#9AC8FF", "#BCDCFF", "#E7F4FF", "#0F5EDB"]
	},
	{
		titlle: "行政令",
		value: 20,
		text: "1626",
		unit: "个",
		change: "较上月+1",
		path: "/decree",
		color: ["#FDE19A", "#FEECBD", "#FFFBE6", "#D68E16"]
	},
	{
		titlle: "科技智库",
		value: 10,
		text: "66",
		unit: "次",
		change: "较上月+2",
		path: "/thinkTank",
		color: ["#C9AAF0", "#DFCAF6", "#FAF1FF", "#531DAC"]
	},
	{
		titlle: "出口管制",
		value: 33,
		text: "66",
		unit: "次",
		change: "较上月+1",
		path: "/exportControl",
		color: ["#96DFDD", "#BCEFEC", "#E7FFFB", "#006E75"]
	},
	{
		titlle: "投融资限制",
		value: 80,
		text: "119",
		unit: "次",
		change: "较上月+1",
		path: "/finance",
		color: ["#F5BEBC", "#F7D3D0", "#FEF1F0", "#C64C4E"]
	},
	{
		titlle: "市场准入",
		value: 50,
		text: "223",
		unit: "次",
		change: "较上个月+1",
		path: "/marketAccessRestrictions",
		color: ["#FFE3B9", "#FFEDCE", "#FFF7E6", "#D46B08"]
	},
	{
		titlle: "合作限制",
		value: 41,
		text: "127",
		unit: "次",
		change: "较上个月+3",
		path: "/cooperationRestrictions",
		color: ["rgba(139,69,19,0.4)", "rgba(139,69,19,0.5)", "rgba(139,69,19,0.3)", "rgba(139,69,19,1)"]
	},
	{
		titlle: "规则限制",
		value: 24,
		text: "724",
		unit: "个",
		change: "较上月+5",
		path: "/ruleRestrictions",
		color: ["#9AC8FF", "#BCDCFF", "#E7F4FF", "#0F5EDB"]
	},
	{
		titlle: "科研资助体系",
		value: 64,
		text: "128",
		unit: "个",
		change: "较上月+8",
		path: "/scientificFunding",
		color: ["#FDE19A", "#FEECBD", "#FFFBE6", "#D68E16"]
	},
]);

const startIndex = ref(0);

const handleSwitch = flag => {
	if (flag == "left") {
		if (startIndex.value === 0) {
			startIndex.value = totalDistribution.value.length - 6;
		} else {
			startIndex.value--;
		}
	} else {
		if (startIndex.value === totalDistribution.value.length - 6) {
			startIndex.value = 0;
		} else {
			startIndex.value++;
		}
	}
};

//打压遏制手段分布
const distribution = computed(() => {
	return totalDistribution.value.slice(startIndex.value, startIndex.value + 6);
});

//打压遏制手段分布
// const distribution = ref([
// 	{
// 		titlle: "法案",
// 		value: 80,
// 		text: "1626",
// 		unit: "个",
// 		change: "较上月+3",
// 		path: "/billHome",
// 		color: ["#9AC8FF", "#BCDCFF", "#E7F4FF", "#0F5EDB"]
// 	},
// 	{
// 		titlle: "行政令",
// 		value: 20,
// 		text: "1626",
// 		unit: "个",
// 		change: "较上月+1",
// 		path: "/decree",
// 		color: ["#FDE19A", "#FEECBD", "#FFFBE6", "#D68E16"]
// 	},
// 	{
// 		titlle: "科技智库",
// 		value: 10,
// 		text: "66",
// 		unit: "次",
// 		change: "较上月+2",
// 		path: "/thinkTank",
// 		color: ["#C9AAF0", "#DFCAF6", "#FAF1FF", "#531DAC"]
// 	},
// 	{
// 		titlle: "出口管制",
// 		value: 33,
// 		text: "66",
// 		unit: "次",
// 		change: "较上月+1",
// 		path: "/exportControl",
// 		color: ["#96DFDD", "#BCEFEC", "#E7FFFB", "#006E75"]
// 	},
// 	{
// 		titlle: "投融资限制",
// 		value: 80,
// 		text: "119",
// 		unit: "次",
// 		change: "较上月+1",
// 		path: "/finance",
// 		color: ["#F5BEBC", "#F7D3D0", "#FEF1F0", "#C64C4E"]
// 	},
// 	{
// 		titlle: "市场准入",
// 		value: 50,
// 		text: "223",
// 		unit: "次",
// 		change: "较上个月+1",
// 		path: "/marketAccessRestrictions",
// 		color: ["#FFE3B9", "#FFEDCE", "#FFF7E6", "#D46B08"]
// 	},
// 	{
// 		titlle: "合作限制",
// 		value: 41,
// 		text: "127",
// 		unit: "次",
// 		change: "较上个月+3",
// 		path: "/cooperationRestrictions",
// 		color: ["rgba(139,69,19,0.4)", "rgba(139,69,19,0.5)", "rgba(139,69,19,0.3)", "rgba(139,69,19,1)"]
// 	}
// ]);

//随机生成颜色
const makeColors = () => {
	let A = Math.floor(Math.random() * 360); // 随机色相
	let B = 70; // 固定饱和度
	let C = 50; // 固定亮度
	return [A, B, C];
};
// 计算属性
const distributionColor = computed(() => {
	for (let item in distribution.value) {
		distribution.value[item].color = makeColors();
	}
	return distribution.value;
});
const timeIndex = ref(0);
//遏制手段分布按钮
function changeBtn(type) {
	if (type === "left") {
		timeIndex.value === 0 ? "" : (timeIndex.value = timeIndex.value - 1);
	} else {
		timeIndex.value.length - timeIndex.value <= 4 ? "" : (timeIndex.value = timeIndex.value + 1);
	}
}

//打压遏制强度变化
const chart1Data = ref({
	name: ["2024-12", "2025-1", "2025-2", "2025-3", "2025-4", "2025-5", "2025-6", "2025-7"],
	value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79]
});

const strengthBtn = ref("all");
function handleStrengthBtn() {}
//打压遏制强度变化时间选择器
const strengthSelect = ref("近一年");
const strengthTimeList = ref([
	{
		label: "近半年",
		value: "近半年"
	},
	{
		label: "近一年",
		value: "近一年"
	},
	{
		label: "近两年",
		value: "近两年"
	},
	{
		label: "近三年",
		value: "近三年"
	},
	{
		label: "近五年",
		value: "近五年"
	}
]);

//打压遏制领域分布
const areaSelect = ref("2025");
const areaTimeList = ref([
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	}
]);
// 绘制echarts图表
const setChart = (option, chartId) => {
	let chartDom = document.getElementById(chartId);
	console.log(chartDom, "chartDomchartDomchartDom");
	chartDom.removeAttribute("_echarts_instance_");
	let chart = echarts.init(chartDom);
	chart.setOption(option);
	return chart;
};

// 点击打压遏制手段分布 跳转到各个页面
const handleClickItem = item => {
	router.push({
		path: item.path
	});
};

const swiper = ref(null);
const isOnSwiper = ref(true)

const handleChangeSwiper = (val) => {
	isOnSwiper.value = val
}

onMounted(() => {
	swiper.value = setInterval(() => {
		if (isOnSwiper.value) {
			handleSwitch("right");
		}
	}, 3600);

	let char1 = getBarChart(chart1Data.value.name, chart1Data.value.value, true);

	setChart(char1, "chart1");

	let char2 = radarChart();
	setChart(char2, "char2");
});

onUnmounted(() => {
	clearInterval(swiper.value);
});
</script>

<style lang="scss" scoped>
.cup-box {
	overflow-x: auto;
	.cup-item-box {
		width: 240px;
		text-align: center;
		box-sizing: border-box;
		border: 1px solid rgba(234, 236, 238, 1);
		border-radius: 10px;
		margin: 20px;
		padding: 20px;

		.cup-title {
			font-family: Microsoft YaHei;
			font-size: 20px;
			font-weight: 700;
			line-height: 26px;
			letter-spacing: 0px;
			text-align: center;
			margin-bottom: 20px;
		}
	}
}

/* 百分比文字 */
.txt {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font: 24px/1 sans-serif;
	color: #0d47a1;
	z-index: 2;
}

.thematic-box {
	// margin: 0 auto;
	// width: 1600px;

	height: 1500px;

	.divide {
		width: 100%;
		margin: 0 auto;
		margin-top: 52px;
		margin-bottom: 36px;
	}
}

.title-text {
	width: 280px;
	font-size: 32px;
	font-weight: 700;
	line-height: 42px;
	margin: 0 270px;
	margin-top: 100px;
	text-align: center;
	// display: inline-block;
	/* 让边框只撑满文字宽度 */
	padding-bottom: 4px;
	/* 文字与边框间距 */
	border-bottom: 4px solid;
	border-image: linear-gradient(to right, #dc2626 0% 50%, #2563eb 50% 100%) 1;
}

.title-img {
	width: 100%;
	height: 42px;
}

.thematic-content {
	/* 容器 480 */
	width: 100%;
	height: 450px;
	box-sizing: border-box;
	border: 1px solid rgba(234, 236, 238, 1);
	border-radius: 10px;
	/* 业务系统/模块阴影 */
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	background: rgba(255, 255, 255, 1);

	.item-header {
		height: 48px;
		width: 100%;
		display: flex;

		.item-header-icon {
			width: 20px;
			height: 20px;
			margin: 15px;
		}

		.item-header-text {
			width: 250px;
			font-size: 20px;
			font-weight: 700;
			line-height: 26px;
			background: rgba(255, 255, 255, 0.65);
			color: #055fc2;
			font-family: Microsoft YaHei;
			font-size: 20px;
			line-height: 48px;
			text-align: left;
		}

		.item-header-right {
			color: rgba(59, 65, 75, 1);
			font-family: Microsoft YaHei;
			font-size: 16px;
			line-height: 48px;
			text-align: right;

			width: calc(100% - 350px);

			.item-header-right-icon {
				/* 容器 704 */
				width: 14px;
				height: 16px;
			}
		}
	}

	.timeLine-box {
		height: 100%;
		width: calc(100% - 50px);

		.time-item-box {
			width: 30%;
			height: 165px;
		}
	}

	.item-header-divider {
		/* 矩形 249 */
		width: 100%;
		height: 1px;
		background: #eaecee;
	}

	.thematic-btn-left {
		height: 100%;
		width: 24px;
		padding-top: 130px;
		cursor: pointer;
	}

	.thematic-btn-right {
		height: 100%;
		width: 24px;
		padding-top: 130px;
		cursor: pointer;
	}

	.thematic-btn-icon {
		height: 48px;
		width: 100%;
		margin-top: calc(50% - 24px);
	}
}

.legend-icon {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	margin: 0 10px;
}
</style>
