<!-- 打压遏制ts分析 -->
<template>
	<div class="thematic-box">
		<div class="title-text">中美博弈专题分析</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);">
				<div class="thematic-btn-left" @click="changeBtn('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 distributionColor" class="cup-item-box" :style="{
						color: `hsla(${item.color[0]}, ${item.color[1]}%, ${item.color[2]}%, ${1})`
					}" @click="handleClickItem(item)">
						<div class="cup-title">
							{{ item.titlle }}
						</div>
						<WaveBall :percent="item.value" :data="item" :color="item.color" :size="128" />
						<div style="margin-top: 20px;">
							{{ item.change }}
						</div>
					</div>
				</div>
				<div class="thematic-btn-right" @click="changeBtn('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;">
					<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>
				<el-select v-model="areaSelect" placeholder="" style="width: 100px;float: right;" size="small">
					<el-option v-for="item in areaTimeList" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
				<div style="display: flex;height: calc(100% - 60px);" id="char2">
				</div>
			</div>

		</div>
	</div>

</template>

<script setup>
import { onMounted, ref, computed } 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 distribution = ref([
	{
		titlle: "法案",
		value: 80,
		text: "1626",
		unit: "个",
		change: "较上个月+3",
		path: '/billHome'
	},
	{
		titlle: "行政令",
		value: 20,
		text: "1626",
		unit: "个",
		change: "较上个月+1",
		path: '/decree'
	},
	{
		titlle: "科技智库",
		value: 10,
		text: "66",
		unit: "次",
		change: "较上个月+2",
		path: '/thinkTank'
	},
	{
		titlle: "出口管制",
		value: 33,
		text: "66",
		unit: "次",
		change: "较上个月+1",
		path: '/exportControl'
	},
	{
		titlle: "投融资限制",
		value: 80,
		text: "119",
		unit: "次",
		change: "较上个月+1",
		path: '/finance'
	},
	{
		titlle: "市场准入",
		value: 50,
		text: "223",
		unit: "次",
		change: "较上个月+1",
		path: '/marketAccessRestrictions'
	}
]);

//随机生成颜色
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
	})
}

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

	setChart(char1, "chart1");

	let char2 = radarChart();
	setChart(char2, "char2");
});
</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 {
	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: var(---, 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;
	}

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

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