<!--全领域-->

<template>
	<div class="content-wrapper">
		<div class="btn-box">
			<div v-for="(value, index) in buttonsData" class="btn-item" :style="{ background: value.background }">
				<!-- <div class="btn-left">
					<img class="btn-left-icon" :src="`/public/icon/ZM/btn-icon2-${index}.png`"
						style="width: 22px; height: 19px;" />
					<div class="btn-left-text" >{{ value.text }}</div>
				</div> -->
				<div :style="{
					height: '60px',
					width: '60px',
					backgroundImage: 'url(' + `/public/icon/ZM/btn-icon2-${index}.png` + ')',
					backgroundSize: 'cover'
				}">
					{{ value.text }}
				</div>
				<div class="btn-right">
					{{ value.count + "次" }}
				</div>
			</div>
		</div>
		<div class="main-charts">
			<div class="charts-title">
				<div class="title-left">
					<img src="./icon/icon-1.png" alt="" />
					<span>美对华制裁措施数量趋势</span>
				</div>
				<div class="title-right">
					<el-select v-model="select1" placeholder="按月统计" class="custom-select">
						<el-option label="按月统计" value="" />
					</el-select>
				</div>
			</div>
			<div class="charts-content">
				<div id="chartRef" style=" width: 1453px; height: 354px"></div>
			</div>
		</div>
		<div>
			<div style="width: 792px; height: 700px" class="main-charts">
				<div class="charts-title" style="padding: 8px">
					<div class="title-left">
						<img src="./icon/icon-1.png" alt="" />
						<span>美对华制裁措施数量趋势</span>
					</div>
				</div>
				<div v-for="value in newsList" class="news-item">
					<div class="news-item-title">
						<div style="width: 400px; display: flex; gap: 8px">
							<div v-for="tag in value.tags" :key="tag" class="tag" :style="{
								color: getTagColor(tag).textColor,
								backgroundColor: getTagColor(tag).bgColor,
								border: '1px solid ' + getTagColor(tag).textColor
							}">
								{{ tag }}
							</div>
						</div>

						<div class="date">
							{{ value.date + " · " + value.type }}
						</div>
					</div>
					<div class="content-title">
						{{ value.title }}
					</div>
					<div class="content-text">
						{{ value.content }}
					</div>
				</div>
			</div>
			<div style="width: 792px; height: 700px"></div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getMultiLineChart from "./multiLineChart";
const buttonsData = [
	{
		text: "集成电路",
		count: 101,
		background: "linear-gradient(180.00deg, rgba(255, 102, 102, 1),rgba(255, 102, 102, 0.5) 100%)"
	},
	{
		text: "人工智能",
		count: 132,
		background: "linear-gradient(180.00deg, rgba(51, 153, 255, 1),rgba(51, 153, 255, 0.5) 100%)"
	},
	{
		text: "新一代信息技术",
		count: 105,
		background: "linear-gradient(180.00deg, rgba(255, 187, 51, 1),rgba(255, 187, 51, 0.5) 100%)"
	},
	{
		text: "量子科技",
		count: 97,
		background: "linear-gradient(180.00deg, rgba(117, 73, 255, 1),rgba(117, 73, 255, 0.5) 100%)"
	},
	{
		text: "先进制造",
		count: 84,
		background: "linear-gradient(180.00deg, rgba(102, 102, 102, 1),rgba(102, 102, 102, 0.5) 100%)"
	},
	{
		text: "航空航天",
		count: 77,
		background: "linear-gradient(180.00deg, rgba(51, 102, 255, 1),rgba(51, 102, 255, 0.5) 100%)"
	},
	{
		text: "生物科技",
		count: 62,
		background: "linear-gradient(180.00deg, rgba(102, 204, 204, 1),rgba(102, 204, 204, 0.5) 100%)"
	},
	{
		text: "新能源",
		count: 60,
		background: "linear-gradient(180.00deg, rgba(102, 187, 51, 1),rgba(102, 187, 51, 0.5) 100%)"
	},
	{
		text: "新材料",
		count: 43,
		background: "linear-gradient(180.00deg, rgba(255, 102, 51, 1),rgba(255, 102, 51, 0.5) 100%)"
	},
	{
		text: "海洋",
		count: 25,
		background: "linear-gradient(180.00deg, rgba(153, 204, 255, 1),rgba(153, 204, 255, 0.5) 100%)"
	}
];
const box5Data = ref({
	title: [
		"2024-12",
		"2025-1",
		"2025-2",
		"2025-3",
		"2025-4",
		"2025-5",
		"2025-6",
		"2025-7",
		"2025-8",
		"2025-9",
		"2025-10",
		"2025-11"
	],
	data: [
		{
			name: "集成电路",
			color: "rgba(9, 88, 217, 0.7)", // 定义颜色
			value: [88, 80, 75, 70, 65, 60, 55, 50, 45, 40, 35, 30]
		},
		{
			name: "人工智能",
			color: "rgba(51, 153, 255, 0.7)", // 定义颜色
			value: [20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75]
		},
		{
			name: "新一代信息技术",
			color: "rgba(255, 187, 51, 0.7)", // 定义颜色
			value: [30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85]
		},
		{
			name: "量子科技",
			color: "rgba(117, 73, 255, 0.7)", // 定义颜色
			value: [40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95]
		},
		{
			name: "先进制造",
			color: "rgba(102, 102, 102, 0.7)", // 定义颜色
			value: [50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105]
		}
	]
});

const newsList = ref([
	{
		tags: ["航空航天", "能源"],
		title: "联邦参议院：通过2026年国防授权法案",
		date: "2025年12月18日",
		type: "法案",
		content: "2026年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普签署成为法律，法案..."
	},
	{
		tags: ["新材料", "生物科技"],
		title: "美国FDA：针对两家中国第三方检测机构的数据完整性问题采取行动",
		date: "2025年12月18日",
		type: "法案",
		content: "FDA因数据造假或无效问题，向两家中国第三方检测公司（天津中联科技检测有限公司和苏...）"
	},
	{
		tags: ["人工智能", "集成电路"],
		title: "美国FCC：出台电信设备市场准入认证新规",
		date: "2025年12月18日",
		type: "法案",
		content: "将国家安全部门审查全面嵌入设备授权程序，对实验室资质、测试标准以及供应链设置严格限制。"
	},
	{
		tags: ["人工智能", "集成电路"],
		title: "商务部工业与安全局：对实体清单的修订",
		date: "2025年12月18日",
		type: "法案",
		content: "美国商务部工业与安全局公布对中国半导体出口管制措施新规则，将140家中国半导体公司列入..."
	},
	{
		tags: ["集成电路"],
		title: "国际贸易委员会：外国制造的半导体器件及其下游产品和组件",
		date: "2025年12月18日",
		type: "法案",
		content: "美国国际贸易委员会（ITC）投票决定对特定半导体器件及其下游计算产品和组件（Certain ...）"
	}
]);

const tagColors = [
	{
		text: "航空航天",
		textColor: "#1677FF", // 蓝色文字
		bgColor: "#E6F7FF" // 浅蓝色背景
	},
	{
		text: "能源",
		textColor: "#1677FF",
		bgColor: "#E6F7FF"
	},
	{
		text: "新材料",
		textColor: "#5993EE",
		bgColor: "#E6F7FF"
	},
	{
		text: "生物科技",
		textColor: "#5993EE",
		bgColor: "#E6F7FF"
	},
	{
		text: "人工智能",
		textColor: "#D9001B",
		bgColor: "#FFECEC"
	},
	{
		text: "集成电路",
		textColor: "#1677FF",
		bgColor: "#E6F7FF"
	}
];

const getTagColor = tagName => {
	const foundTag = tagColors.find(tag => tag.text === tagName);
	return foundTag ? { textColor: foundTag.textColor, bgColor: foundTag.bgColor } : { textColor: "#000", bgColor: "#fff" };
};

onMounted(() => {
	let Chart = getMultiLineChart(box5Data.value);
	setChart(Chart, "chartRef");
});
</script>

<style lang="scss" scoped>
.content-wrapper {
	width: 1666px;
	height: 2132px;
}

.btn-box {
	margin-top: 16px;
	width: 1601px;
	height: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: 16px;
	padding: 0;
}

.btn-item {
	/* 全领域-总统计 */
	width: 307px;
	height: 80px;
	border-radius: 10px;
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	display: flex;
	align-items: center;
	justify-content: space-between; // 调整为两端对齐
	padding: 0 10px; // 添加内边距以便文本和图标有空间
	color: rgba(255, 255, 255, 1);
	font-family: Microsoft YaHei;
	font-style: Bold;
	font-size: 16px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: center;
}

.btn-left {
	position: relative;
	display: flex;
	align-items: center;
}

.btn-left-icon {
	margin-right: 8px; // 图标和文本之间的间距
}

.btn-left-text {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 30px; // 根据图标大小调整这个值
}

.main-charts {
	margin-top: 16px;
	width: 1601px;
	height: 500px;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.65);
	box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
	display: flex;
	flex-direction: column;
	margin-bottom: 22px;

	.charts-title {
		width: 100%;
		height: 48px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 17px;
		padding-right: 35px;
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);

		.title-left {
			display: flex;
			align-items: center;

			img {
				width: 18px;
				height: 18px;
				margin-right: 14px;
			}

			span {
				font-family: YouSheBiaoTiHei;
				font-size: 24px;
				font-weight: 400;
				line-height: 24px;
				color: rgb(5, 95, 194);
			}
		}

		.title-right {
			display: flex;
			height: 48px;
			align-items: end;
			gap: 12px;
			padding-right: 17px;

			.custom-select {
				width: 160px;

				:deep(.el-input) {
					height: 32px;

					.el-input__wrapper {
						background-color: #fff;
						box-shadow: 0 0 0 1px #dcdfe6 inset;
						border-radius: 4px;
						padding: 0 12px;
						height: 32px;

						&:hover {
							box-shadow: 0 0 0 1px #c0c4cc inset;
						}

						&.is-focus {
							box-shadow: 0 0 0 1px #409eff inset;
						}
					}

					.el-input__inner {
						font-family: "Microsoft YaHei";
						font-size: 16px;
						font-weight: 400;
						color: rgb(95, 101, 108);
						height: 32px;
						line-height: 24px;

						&::placeholder {
							color: rgb(95, 101, 108);
						}
					}
				}
			}
		}
	}

	.charts-content {
		flex: 1;
		width: 100%;
		padding: 20px 40px 20px 40px;
		box-sizing: border-box;

		.chart-container {
			width: 100%;
			height: 100%;
		}
	}
}

.news-item {
	/* 全政府-动态 (四全-最新动态) */
	width: 737px;
	height: 124px;
	margin: 0 28px;
	/* 自动布局 */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 16px 24px 16px 24px;

	box-sizing: border-box;
	border-bottom: 1px solid rgba(234, 236, 238, 1);
	background: rgba(255, 255, 255, 0.65);

	.news-item-title {
		line-height: 30px;
		display: flex;
		justify-content: space-between;
		width: 689px;

		.tag {
			/* 数据展示/Tag标签/亮色/绿 */

			/* 自动布局 */
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			gap: 8;
			padding: 1px 8px 1px 8px;

			box-sizing: border-box;
			border-radius: 4px;
		}

		.date {
			color: rgba(95, 101, 108, 1);

			font-family: Microsoft YaHei;
			font-style: Regular;
			font-size: 16px;
			font-weight: 400;
			line-height: 30px;
			letter-spacing: 0px;
			text-align: right;
		}
	}

	.content-title {
		/* 容器 1576 */
		width: 689px;
		height: 30px;
		/* 自动布局 */
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: 12;

		color: rgba(59, 65, 75, 1);

		font-family: Microsoft YaHei;
		font-style: Bold;
		font-size: 16px;
		font-weight: 700;
		line-height: 30px;
		letter-spacing: 0px;
		text-align: left;
	}

	.content-text {
		color: rgba(95, 101, 108, 1);

		font-family: Microsoft YaHei;
		font-style: Regular;
		font-size: 16px;
		font-weight: 400;
		line-height: 30px;
		letter-spacing: 0px;
		text-align: justify;
		white-space: nowrap;
		/* 禁止换行 */
		overflow: hidden;
		/* 隐藏溢出内容 */
		text-overflow: ellipsis;
		/* 溢出部分显示省略号 */
	}
}
</style>
