<template>
	<div class="wrap">
		<el-row>
			<CardCustom
				@more-click="moreClick"
				title="风险信号"
				:style="{ width: '986px', height: '540px' }"
				title-background-color="rgba(206, 79, 81, 1)"
			>
				<template #icon>
					<div class="icon icon1"></div>
				</template>
			</CardCustom>
			<CardCustom
				@more-click="moreClick"
				title="安全速递"
				:style="{ width: '600px', height: '540px', marginLeft: '14px' }"
				title-background-color="rgba(206, 79, 81, 1)"
			>
				<template #icon>
					<div class="icon icon1"></div>
				</template>
				<div class="item" v-for="(item, index) in securityExpressList" :key="index">
					<span class="itemLevel" :class="levelMap[item.level].class">
						{{ levelMap[item.level].text }}
					</span>
					<div class="itemText">{{ item.title }}</div>
					<span class="itemTime">{{ item.time }}</span>
					<span class="itemFlag" :style="{ backgroundImage: 'url(' + item.flag + ')' }"></span>
				</div>
			</CardCustom>
		</el-row>
		<el-card class="gap">
			<el-row>
				<PieProgress v-for="item in List" :data="item" />
			</el-row>
		</el-card>
		<el-row class="gap">
			<CardCustom
				@more-click="moreClick"
				title="科技动态"
				:style="{ width: '792px', height: '360px' }"
				title-background-color="rgba(10, 87, 166, 1)"
				line-color="rgba(10, 87, 166, 1)"
			>
				<template #icon>
					<div class="icon icon2"></div>
				</template>
				<div class="itemTrends" v-for="(item, index) in trendsList" :key="index">
					<span class="itemTrendsIcon"> </span>
					<div class="itemTrendsText">{{ item.title }}</div>
					<span class="itemTrendsTime">{{ item.time }}</span>
				</div>
			</CardCustom>
			<CardCustom
				@more-click="moreClick"
				title="科技政策"
				:style="{ width: '792px', height: '360px', marginLeft: '16px' }"
				title-background-color="rgba(10, 87, 166, 1)"
				line-color="rgba(10, 87, 166, 1)"
			>
				<template #icon>
					<div class="icon icon3"></div>
				</template>
				<div class="itemTrends" v-for="(item, index) in policyList" :key="index">
					<span class="itemTrendsIcon"> </span>
					<div class="itemTrendsText">{{ item.title }}</div>
					<span class="itemTrendsTime">{{ item.time }}</span>
				</div>
			</CardCustom>
		</el-row>
		<div class="gap">
			<el-row class="cardContainer">
				<div class="itemCard">
					<span class="itemCardIcon itemCardIcon1"></span>
					<div class="itemCardTitle">业务协同</div>
				</div>
				<div class="itemCard">
					<span class="itemCardIcon itemCardIcon2"></span>
					<div class="itemCardTitle">专题研判</div>
				</div>
				<div class="itemCard">
					<span class="itemCardIcon itemCardIcon3"></span>
					<div class="itemCardTitle">数据直报</div>
				</div>
				<div class="itemCard">
					<span class="itemCardIcon itemCardIcon4"></span>
					<div class="itemCardTitle">专家库</div>
				</div>
			</el-row>
		</div>
		<el-row class="gap">
			<CardCustom
				@more-click="moreClick"
				title="最新报告"
				:style="{ width: '1600px', height: '360px' }"
				title-background-color="rgba(10, 87, 166, 1)"
				line-color="rgba(10, 87, 166, 1)"
			>
				<template #icon>
					<div class="icon icon4"></div>
				</template>
				<template #right>
					<div class="moreWrap">
						<el-button text @click="moreClick" :style="{ marginLeft: '515px' }">
							<span class="moreText">更多</span>
							<el-icon :size="14"> <Plus /> </el-icon>
						</el-button>
						<el-button text @click="moreClick">
							<span class="moreText">换一批</span>
							<span class="shuaxinIcon"></span>
						</el-button>
					</div>
				</template>
				<el-row>
					<div :style="{ width: '750px' }">
						<div class="itemTrends" v-for="(item, index) in policyList" :key="index">
							<span class="itemTrendsIcon"> </span>
							<div class="itemTrendsText">{{ item.title }}</div>
							<span class="itemTrendsTime">{{ item.time }}</span>
						</div>
					</div>
					<div class="CardCustomRight">
						<div class="itemCard1" v-for="item in 3">
							<div class="itemCard1Img">
								<div class="itemCard1Footer">国内外技术创新合作模式探索与实践</div>
							</div>
						</div>
					</div>
				</el-row>
			</CardCustom>
		</el-row>
		<el-row class="gap spaceBetween">
			<el-card v-for="(item, index) in catdList" class="itemCard2" :key="index">
				<div class="itemCard2Line" :style="{ backgroundColor: item.bgColor }"></div>
				<div class="itemCard2Container">
					<div class="itemCard2BigTextWrap" :style="{ color: item.bgColor }">
						{{ item.title }}
					</div>
					<div class="itemCard2TextWrap" v-for="(itemText, inde) in item.list" :key="index">
						<div class="temCard2Title">{{ itemText.title }}</div>
						<div class="temCard2Text">{{ itemText.text }}</div>
					</div>
				</div>
			</el-card>
		</el-row>
	</div>
</template>

<script setup>
import CardCustom from "../components/CardCustom.vue";
import PieProgress from "../components/PieProgress.vue";
import flag1 from "../assets/img/flag1.png";
import flag2 from "../assets/img/flag2.png";
import flag3 from "../assets/img/flag3.png";

import { ref } from "vue";
const levelMap = {
	L1: { text: "特别重大", class: "level1" },
	L2: { text: "重大风险", class: "level2" },
	L3: { text: "一般风险", class: "level3" }
};
const securityExpressList = ref([
	{
		title: "美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实",
		level: "L1",
		time: "一天前",
		flag: flag1
	},
	{
		title: "美国加强对华AI芯片出口限制，考虑制...",
		level: "L1",
		time: "一天前",
		flag: flag1
	},
	{
		title: "日本出台《半导体材料出口管制令》...",
		level: "L1",
		time: "一天前",
		flag: flag2
	},
	{
		title: "日本对GAAFET技术、EUV光刻设备等...",
		level: "L1",
		time: "一天前",
		flag: flag2
	},
	{
		title: "欧盟签署协议限制高端AI芯片对华出口",
		level: "L2",
		time: "一天前",
		flag: flag3
	},
	{
		title: "欧盟第18轮制裁中首次将3家中资企业...",
		level: "L2",
		time: "一天前",
		flag: flag3
	},
	{
		title: "美国发布《保障信息和通信技术与服务...",
		level: "L2",
		time: "一天前",
		flag: flag1
	},
	{
		title: "日本将42家中国实体列入出口管制“...",
		level: "L3",
		time: "一天前",
		flag: flag2
	},
	{
		title: "美国政府放慢向英伟达和超威等芯片...",
		level: "L3",
		time: "一天前",
		flag: flag1
	},
	{
		title: "七国集团成员国就人工智能发表了以...",
		level: "L3",
		time: "一天前",
		flag: flag3
	}
]);

const trendsList = ref([
	{
		title: "韩研制用于存内计算的小型低功耗神经形态模块",
		time: "08-16"
	},
	{
		title: "中国科学院大学等在有机太阳能电池领域取得重要突破",
		time: "08-16"
	},
	{
		title: "德国于利希研究中心成功制造并实验验证全球首个二维半金属材料",
		time: "08-16"
	},
	{
		title: "浙江大学开发“女娲”AI模型，精准预测基因组调控序列",
		time: "08-16"
	},
	{
		title: "我国基于碳量子点材料制备出高效低成本有机太阳能电池",
		time: "08-16"
	},
	{
		title: "谷歌Gemini 2.5系列模型更新，实现高速推理与极致性价比",
		time: "08-16"
	},
	{
		title: "上海理工大学联合杜克大学在AI赋能仿生视觉技术领域实现突破",
		time: "08-16"
	}
]);
const policyList = ref([
	{
		title: "美国发布《2025财年国防授权法案》，拨款替换华为、中兴设备；禁止国防...",
		time: "08-16"
	},
	{
		title: "美国发布对华投资限制新规，限制美资在半导体、AI、量子技术等领域的对...",
		time: "08-16"
	},
	{
		title: "欧盟发布《网络弹性法案》（CRA），要求数字产品全生命周期安全合规，...",
		time: "08-16"
	},
	{
		title: "欧盟发布对外投资审查建议，要求成员国审查在半导体、AI、量子技术等领...",
		time: "08-16"
	},
	{
		title: "日本出台《半导体出口管制修正》加强对十余种半导体相关物项的出口管制...",
		time: "08-16"
	},
	{
		title: "日本拟出台“许可制”，限制外国留学生（特别提及中国）学习半导体、机...",
		time: "08-16"
	},
	{
		title: "日本通过并实施《经济安全保障推进法案》相关措施",
		time: "08-16"
	}
]);
const List = ref([
	{
		title: "当月/总数",
		titleSub: "较上月+4",
		progress: 90,
		slope: "add",
		total: 8,
		current: 7
	},
	{
		title: "人工智能",
		titleSub: "较上月+4",
		progress: 50,
		slope: "add",
		total: 26,
		current: 3
	},
	{
		title: "生物技术",
		titleSub: "较上月+4",
		progress: 60,
		slope: "add",
		total: 13,
		current: 3
	},
	{
		title: "航空航天",
		titleSub: "较上月+4",
		progress: 40,
		slope: "add",
		total: 15,
		current: 3
	},
	{
		title: "新一代信息技术",
		titleSub: "较上月+4",
		progress: 50,
		slope: "add",
		total: 12,
		current: 3
	},
	{
		title: "量子科技",
		titleSub: "较上月+4",
		progress: 20,
		slope: "add",
		total: 8,
		current: 3
	},
	{
		title: "新能源",
		titleSub: "较上月+4",
		progress: 90,
		slope: "add",
		total: 18,
		current: 3
	},
	{
		title: "集成电路",
		titleSub: "较上月+4",
		progress: 20,
		slope: "add",
		total: 16,
		current: 3
	},
	{
		title: "海洋",
		titleSub: "较上月+4",
		progress: 50,
		slope: "add",
		total: 8,
		current: 3
	},
	{
		title: "先进制造",
		titleSub: "较上月+4",
		progress: 50,
		slope: "add",
		total: 15,
		current: 3
	},
	{
		title: "新材料",
		titleSub: "较上月+4",
		progress: 50,
		slope: "add",
		total: 8,
		current: 3
	}
]);
const catdList = ref([
	{
		title: "数据资源管理",
		bgColor: "rgba(206, 79, 81, 1)",
		list: [
			{
				title: "数据资源目录",
				text: "平台各类数据资源汇总导航"
			},
			{
				title: "数据统计分析",
				text: "查看资源发布量、各部门资源注册情况"
			},
			{
				title: "信息空间",
				text: "对数据资源的全生命周期进行管理"
			}
		]
	},
	{
		title: "信息发布与管理",
		bgColor: "rgba(19, 168, 168, 1)",
		list: [
			{
				title: "信息编辑",
				text: "信息的内容导入、格式编辑"
			},
			{
				title: "信息审核",
				text: "发布前内容自动审核、词库屏蔽"
			},
			{
				title: "信息发布",
				text: "提供点到点以及点到面的消息发送"
			}
		]
	},
	{
		title: "应用支撑平台",
		bgColor: "rgba(250, 140, 22, 1)",
		list: [
			{
				title: "应用功能目录",
				text: "快速访问和使用系统功能"
			},
			{
				title: "应用工具目录",
				text: "各项应用工具的使用方法和应用场景"
			},
			{
				title: "应用功能与工具管理",
				text: "实现功能及工具快捷访问配置入口"
			}
		]
	},
	{
		title: "后台服务管理",
		bgColor: "rgba(10, 87, 166, 1)",
		list: [
			{
				title: "界面配置管理",
				text: "支持界面布局、样式定制化修改"
			},
			{
				title: "数据接口管理",
				text: "实现数据接口的访问调用、权限控制等"
			},
			{
				title: "系统配置管理",
				text: "支持各分系统配置的定制与调整"
			}
		]
	}
]);
function moreClick(n) {
	alert(n);
}
</script>

<style lang="scss" scoped>
.wrap {
	width: 1600px;
	margin: 30px auto;
}
.gap {
	margin-top: 24px;
}
.icon {
	width: 24px;
	height: 22px;
	background-size: contain;
	background-repeat: no-repeat;
}
.icon1 {
	background-image: url("../assets/img/icon1.png");
}
.icon2 {
	background-image: url("../assets/img/icon2.png");
}
.icon3 {
	background-image: url("../assets/img/icon3.png");
}
.icon4 {
	background-image: url("../assets/img/icon4.png");
}
.item {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 7px;
}
.itemLevel {
	width: 40px;
	height: 40px;
	border-radius: 20px;
	font-family: Microsoft YaHei;
	font-size: 12px;
	font-weight: 400;
	line-height: 14px;
	padding: 6px 4px;
	text-align: center;
	margin-right: 5px;
}
.itemTime {
	color: rgba(132, 136, 142, 1);
}
.itemFlag {
	width: 20px;
	height: 20px;
	background-size: cover;
	background-repeat: no-repeat;
	margin-left: 10px;
}
.itemTrends {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 20px;
}
.itemTrendsIcon {
	width: 4px;
	height: 4px;
	background-color: rgba(206, 79, 81, 1);
	border-radius: 50%;
	margin-right: 14px;
	margin-left: 20px;
}
.itemTrendsText {
	flex: 1;
}
.itemTrendsTime {
	margin-right: 6px;
}
.level1 {
	background: rgb(255, 241, 240);
	color: rgb(245, 34, 45);
}
.level2 {
	color: rgb(250, 140, 22);
	background: rgb(255, 247, 230);
}
.level3 {
	color: rgb(82, 196, 26);
	background: rgb(246, 255, 237);
}
.itemText {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cardContainer {
	justify-content: space-between;
}
.itemCardWrap {
	width: 400px;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.itemCard {
	width: 388px;
	height: 80px;
	border-radius: 4px;
	background-image: url("../assets/img/cardBg.png");
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	.itemCardIcon {
		width: 30px;
		height: 30px;
		background-size: contain;
		margin-right: 7px;
	}
	.itemCardIcon1 {
		background-image: url("../assets/img/cardIcon1.png");
	}
	.itemCardIcon2 {
		background-image: url("../assets/img/cardIcon2.png");
	}
	.itemCardIcon3 {
		background-image: url("../assets/img/cardIcon3.png");
	}
	.itemCardIcon4 {
		background-image: url("../assets/img/cardIcon4.png");
	}
	.itemCardTitle {
		font-size: 24px;
		font-weight: 700;
		color: #ffffff;
	}
}
.moreWrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 16px;
	height: 100%;
	padding-left: 10px;
	padding-right: 10px;
	flex: 1;
	.moreText {
		margin-right: 3px;
	}
	.shuaxinIcon {
		width: 16px;
		height: 16px;
		background-image: url("../assets/img/shuaxin.png");
		background-size: contain;
	}
}
.CardCustomRight {
	flex: 1;
	padding-left: 50px;
	padding-right: 50px;
	margin-left: 30px;
	display: flex;
	justify-content: space-between;
}
.itemCard1 {
	.itemCard1Img {
		position: relative;
		width: 204px;
		height: 266px;
		background-image: url("../assets/img/book.png");
		background-size: contain;
		.itemCard1Footer {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 204px;
			height: 64px;
			padding: 10px;
			background-color: #000;
			color: #fff;
		}
	}
}
.spaceBetween {
	justify-content: space-between;
}
.itemCard2 {
	width: 388px;
	height: 360px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	:deep(.el-card__body) {
		padding-top: 0;
	}
	.itemCard2Line {
		/* 矩形 214 */
		width: 320px;
		height: 4px;
		background-color: rgba(206, 79, 81, 1);
		position: absolute;
		top: 0;
		left: 34px;
	}
	.itemCard2Container {
		width: 320px;
		height: 360px;
		.itemCard2BigTextWrap {
			color: rgba(206, 79, 81, 1);
			font-size: 24px;
			font-weight: 700;
			height: 83px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			border-bottom: 1px solid #ddd;
		}
		.itemCard2TextWrap {
			height: 83px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			border-bottom: 1px solid #ddd;
		}
		.temCard2Title {
			color: rgba(59, 65, 75, 1);
			font-size: 20px;
			font-weight: 700;
		}
		.temCard2Text {
			color: rgba(95, 101, 108, 1);
			font-size: 16px;
			font-weight: 400;
		}
	}
}
</style>
