<!-- 打压遏制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-card-header-time.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: 47.5%; 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: 47.5%;margin-left: 5%;">
        <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>
        <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: 40px;
	text-align: center;
}

.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>
