<template>
	<div class="wrapper">
		<div class="left">
			<div class="box1">
				<div class="box-header">
					<div class="icon"></div>
					<div class="title">{{ "企业影响分析" }}</div>
					<div class="header-right1">
						<el-checkbox v-model="isCRelated" label="只看中国企业" size="large" />
					</div>
					<div class="header-right">
						<div class="header-right-icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="header-right-icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box1-top" id="chart1"></div>
				<div class="box1-tab-box">
					<div
						class="tab"
						:class="{ tabActive: box1BtnActiveName === item.name }"
						v-for="(item, index) in box1BtnList"
						:key="index"
						@click="handleClickBox1Btn(item)"
					>
						{{ item.name }}
					</div>
				</div>
				<div class="box1-list-box">
					<div class="box1-item" v-for="(item, index) in showCompanyList" :key="index">
						<div class="id">{{ index + 1 }}</div>
						<div class="title">{{ item.name }}</div>
						<div class="icon">
							<img v-if="item.status === 'up'" src="./assets/images/up.png" alt="" />
							<img v-else src="./assets/images/down.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box1-footer">
					<div class="box1-footer-left">{{ `共${companyTotalNum}家企业` }}</div>
					<div class="box1-footer-right">
						<el-pagination
							@current-change="handleCurrentChange"
							:pageSize="pageSize"
							:current-page="currentPage"
							background
							layout="prev, pager, next"
							size="small"
							:total="companyTotalNum"
						/>
					</div>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="box2">
				<div class="box-header">
					<div class="icon"></div>
					<div class="title">{{ "政令举措落实分析" }}</div>
					<div class="header-right1"></div>
					<div class="header-right">
						<div class="header-right-icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="header-right-icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>

				<div class="box2-main">
					<div class="box2-line-box"></div>
					<div
						class="box2-item"
						:class="{ box2ItemFooter: index % 2 }"
						v-for="(item, index) in timeLineList"
						:key="index"
					>
						<div class="point" :class="{ pointFooter: index % 2 }">
							<img src="./assets/images/point.png" alt="" />
						</div>
						<div class="box2-item-header">
							<div class="title">{{ item.time }}</div>
						</div>
						<div class="box2-item-content">
							{{ item.content }}
						</div>
					</div>
				</div>
				<div class="box2-footer">
					<div class="footer-left">
						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
					</div>
					<div class="footer-center">
						{{
							`政令目前仍处于关键的执行框架搭建期。该政令旨在通过推动“全栈式”美国AI技术出口，巩固其技术霸权并减少国际社会对美国对手国家技术的依赖`
						}}
					</div>
					<div class="footer-right">
						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
					</div>
				</div>
			</div>
			<div class="box3">
				<div class="box-header">
					<div class="icon"></div>
					<div class="title">{{ "历史相似举措及落实情况" }}</div>
					<div class="header-right1"></div>
					<div class="header-right">
						<div class="header-right-icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="header-right-icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box3-main">
					<div class="box3-item" v-for="(item, index) in box3List" :key="index">
						<div class="box3-item-left">
							<div class="text">
								{{ item.type }}
							</div>
						</div>
						<div class="box3-item-right">
							<div class="right-top">
								<div class="title">{{ item.title }}</div>
								<div class="tag">{{ item.tag }}</div>
							</div>
							<div class="right-footer">
								<div class="content">{{ item.content }}</div>
								<div class="time">{{ item.time }}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="box3-footer">
					<div class="footer-left">
						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
					</div>
					<div class="footer-center">
						{{
							`中美经济深度交织，全面脱钩成本高昂且不现实。其核心揭示了三大纽带：生产网络相互依存使强行分离代价巨大；人才双向流动推动创新却成政策博弈焦点；能源领域合作与竞争并存，关乎全球气候治理与经济博弈。报告主张理性竞合，在竞争中找到合作路径。`
						}}
					</div>
					<div class="footer-right">
						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed,watch, onMounted } from "vue";
import { useRoute } from "vue-router";
import setChart from "@/utils/setChart";
import * as echarts from "echarts";
import getBarChart from "./utils/barChart";
import { getDecreeIndustry, getDecreehylyList, getDecreeCompany, getDecreeAction } from "@/api/decree/influence";

const route = useRoute();

// 企业影响分析
const companyTotalNum = ref(0); // 企业数量
const isCRelated = ref(false); // 只看中国企业

const chart1Data = ref({
	// title: ["集成电路", "新能源", "人工智能", "先进制造", "量子科技"],
	// value: [109, 95, 79, 25, 11]
});

const handleGetChart1Data = async () => {
	const params = {
		cRelated: isCRelated.value,
		id: 147
	};

	try {
		const res = await getDecreeIndustry(params);
		console.log("企业影响分析", res);
		if (res.code === 200 && res.data) {
			chart1Data.value.title = res.data.map(item => {
				return item.hylyName;
			});
			chart1Data.value.value = res.data.map(item => {
				return item.companyNum;
			});
		} else {
			chart1Data.value.title = [];
			chart1Data.value.value = [];
		}
	} catch (error) {
		chart1Data.value.title = [];
		chart1Data.value.value = [];
	}
};

const handelBox1 = async () => {
	await handleGetChart1Data();
	let chart1 = getBarChart(chart1Data.value.title, chart1Data.value.value);
	setChart(chart1, "chart1");
};

const box1BtnActiveName = ref("");
const curAreaId = ref(0);
const box1BtnList = ref(["集成电路", "新能源", "人工智能", "先进制造", "量子科技"]);
const handleClickBox1Btn = btn => {
	box1BtnActiveName.value = btn.name;
	curAreaId.value = btn.id;
	handleGetCompanyListByArea();
};

// 获取行业领域列表
const handleGetHylyList = async () => {
	try {
		const res = await getDecreehylyList();
		console.log("行业领域列表", res);
		if (res.code === 200 && res.data) {
			box1BtnList.value = res.data;
			box1BtnActiveName.value = box1BtnList.value[0].name;
			curAreaId.value = box1BtnList.value[0].id;
		}
	} catch (error) {}
};

const companyList = ref([
	{
		name: "宁德时代新能源科技股份有限公司",
		status: "down"
	},
	{
		name: "比亚迪股份有限公司",
		status: "down"
	},
	{
		name: "隆基绿能科技股份有限公司",
		status: "down"
	},
	{
		name: "晶科能源控股有限公司",
		status: "down"
	},
	{
		name: "厦门海辰储能科技股份有限公司",
		status: "down"
	},
	{
		name: "国轩高科股份有限公司",
		status: "up"
	},
	{
		name: "远景科技集团",
		status: "down"
	},
	{
		name: "惠州亿纬锂能股份有限公司",
		status: "down"
	},
	{
		name: "天合光能股份有限公司",
		status: "down"
	},
	{
		name: "晶澳太阳能科技股份有限公司",
		status: "up"
	}
]);
const currentPage = ref(1);
const pageSize = ref(10);
// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
};

const showCompanyList = computed(() => {
	const startIndex = (currentPage.value - 1) * pageSize.value;
	const endIndex = startIndex + pageSize.value;
	return companyList.value.slice(startIndex, endIndex);
});

const handleGetCompanyListByArea = async () => {
	const params = {
		cRelated: isCRelated.value,
		id: curAreaId.value
	};
	try {
		const res = await getDecreeCompany(params);
		console.log("行业领域公司列表", res);
		if (res.code === 200 && res.data) {
			companyList.value = res.data.map(item => {
				return {
					name: item.name,
					id: item.id,
					status: "up"
				};
			});
			companyTotalNum.value = companyList.value.length;
		} else {
			companyList.value = [];
			companyTotalNum.value = 0;
		}
	} catch (error) {
		companyList.value = [];
		companyTotalNum.value = 0;
	}
};

// 政令举措落实分析
const timeLineList = ref([
	{
		time: "2025年7月25日",
		content: "商务部已成立AI出口计划办公室，并开始招募专业人员。"
	},
	{
		time: "2025年7月31日",
		content: "英伟达、微软、谷歌等企业已提交初步技术栈提案。"
	},
	{
		time: "2025年8月5日",
		content: "国务院开始与盟友国家进行初步磋商。"
	},
	{
		time: "2025年8月9日",
		content: "国防部、能源部安全审查流程尚未最终确定。"
	},
	{
		time: "2025年8月12日",
		content: "商务部已成立AI出口计划办公室，并开始招募专业人员。"
	}
]);

const handleGetAction = async () => {
	const params = {
		id: route.query.id
	};
	try {
		const res = await getDecreeAction(params);
		console.log("政令举措落实分析", res);
		if (res.code === 200 && res.data) {
			timeLineList.value = res.data.map(item => {
				return {
					time: item.time,
					content: item.describe
				};
			});
		} else {
			timeLineList.value = [];
		}
	} catch (error) {
		timeLineList.value = [];
	}
};

// 历史相似举措及落实情况
const box3List = ref([
	{
		type: "科技法案",
		title: "瓦森纳安排",
		content: "落实情况：持续有效，但面临技术快速迭代挑战。",
		time: "1996-至今",
		tag: "人工智能"
	},
	{
		type: "科技法案",
		title: "云计算出口管制",
		content: "落实情况：部分有效，但执行难度大。",
		time: "1996-至今",
		tag: "人工智能"
	},
	{
		type: "科技法案",
		title: "芯片与科学法案",
		content: "落实情况：正在实施，效果待观察。",
		time: "2022-至今",
		tag: "人工智能"
	},
	{
		type: "科技法案",
		title: "AI芯片出口管制",
		content: "落实情况：部分有效，但催生中国自主创新。",
		time: "1996-至今",
		tag: "人工智能"
	},
	{
		type: "科技法案",
		title: "瓦森纳安排",
		content: "落实情况：持续有效，但面临技术快速迭代挑战。",
		time: "1996-至今",
		tag: "人工智能"
	},
	{
		type: "科技法案",
		title: "瓦森纳安排",
		content: "落实情况：持续有效，但面临技术快速迭代挑战。",
		time: "1996-至今",
		tag: "人工智能"
	}
]);

watch(
	() => isCRelated.value,
	val => {
		handleGetCompanyListByArea();
		handelBox1();
	}
);

onMounted(() => {
	handleGetCompanyListByArea();
	handleGetChart1Data();
	handleGetHylyList();
	handleGetAction();
	handelBox1();
});
</script>

<style lang="scss" scoped>
.wrapper {
	width: 100%;
	height: 879px;
	display: flex;
	.box-header {
		display: flex;
		height: 48px;
		position: relative;
		.icon {
			margin-top: 18px;
			width: 8px;
			height: 20px;
			border-radius: 0 4px 4px 0;
			background: var(--color-main-active);
		}
		.title {
			height: 26px;
			margin-left: 14px;
			margin-top: 14px;
			color: var(--color-main-active);
			font-family: Microsoft YaHei;
			font-size: 20px;
			font-weight: 700;
			line-height: 26px;
		}
		.header-right {
			position: absolute;
			top: 14px;
			right: 12px;
			display: flex;
			justify-content: flex-end;
			gap: 4px;
			.header-right-icon {
				width: 28px;
				height: 28px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
		.header-right1 {
			position: absolute;
			top: 8px;
			right: 84px;
		}
	}
	.left {
		margin-left: 160px;
		margin-top: 16px;
		.box1 {
			width: 480px;
			height: 845px;
			border-radius: 4px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.box1-top {
				width: 446px;
				height: 188px;
				margin: 7px auto 0;
				box-sizing: border-box;
				border: 1px solid rgba(234, 236, 238, 1);
				border-radius: 4px;
				background: rgba(247, 248, 249, 1);
			}
			.box1-tab-box {
				height: 60px;
				width: 446px;
				margin: 0 auto;
				overflow-x: auto;
				display: flex;
				white-space: nowrap;
				gap: 8px;
				.tab {
					min-width: min-content;
					margin-top: 18px;
					padding: 0 8px;
					height: 28px;
					box-sizing: border-box;
					border: 1px solid rgba(230, 231, 232, 1);
					border-radius: 4px;
					background: rgba(255, 255, 255, 1);
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					cursor: pointer;
					&:hover {
						background: var(--btn-active-bg-color);
						border: 1px solid var(--btn-active-border-color);
					}
				}
				.tabActive {
					color: var(--btn-active-text-color);
					background: var(--btn-active-bg-color);
					border: 1px solid var(--btn-active-border-color);
				}
			}
			.box1-list-box {
				height: 480px;
				width: 446px;
				margin: 0 auto;
				.box1-item {
					width: 446px;
					height: 48px;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					border-radius: 4px;
					display: flex;
					.id {
						width: 24px;
						height: 24px;
						margin-top: 12px;
						margin-left: 12px;
						border-radius: 12px;
						background: #e7f3ff;
						font-size: 14px;
						font-family: Microsoft YaHei;
						text-align: center;
						line-height: 24px;
						color: var(--color-main-active);
					}
					.title {
						margin-left: 10px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 48px;
					}
					.icon {
						width: 8px;
						height: 6px;
						margin-top: 14px;
						margin-left: 6px;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			.box1-footer {
				height: 65px;
				width: 446px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				.box1-footer-left {
					margin-top: 25px;
					height: 18px;
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 18px;
				}
				.box1-footer-right {
					margin-top: 23px;
				}
			}
		}
	}
	.right {
		margin-left: 17px;
		margin-top: 16px;
		.box2 {
			width: 1103px;
			height: 415px;
			border-radius: 4px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.box2-main {
				margin: 0 auto;
				margin-top: 10px;
				height: 260px;
				width: 1054px;
				overflow-x: auto;
				overflow-y: hidden;
				display: flex;
				position: relative;
				padding-left: 120px;
				.box2-line-box {
					position: absolute;
					left: 0;
					top: 114px;
					height: 8px;
					width: 1054px;
					background: url("./assets/images/line-bg.png") repeat;
				}
				.box2-item {
					width: 300px;
					height: 120px;
					position: relative;
					box-sizing: border-box;
					padding-left: 13px;
					margin-left: -100px;
					border-left: 1px solid #0a57a6;
					.box2-item-header {
						display: flex;
						width: 240px;
						.title {
							color: var(--color-main-active);
							height: 26px;
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
						}
					}
					.box2-item-content {
						width: 210px;
						min-height: 48px;
						max-height: 96px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						overflow: hidden;
					}
					.point {
						position: absolute;
						left: -8px;
						bottom: -7px;
						width: 15px;
						height: 15px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.pointFooter {
						position: absolute;
						left: -8px;
						top: -7px;
						width: 15px;
						height: 15px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.time {
						height: 24px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
						position: absolute;
						bottom: -36px;
						left: 0;
					}
				}
				.box2ItemFooter {
					margin-top: 118px;
					margin-left: -120px;
					box-sizing: border-box;
					padding-top: 20px;
					// display: flex;
					// flex-direction: column;
					// justify-content: flex-end;
				}
			}
			.box2-footer {
				margin-top: 6px;
				width: 1057px;
				height: 64px;
				box-sizing: border-box;
				border: 1px rgba(231, 243, 255, 1);
				border-radius: 4px;
				background: rgba(246, 251, 255, 1);
				margin: 14px auto 0;
				padding: 6px 12px 6px 12px;
				display: flex;
				.footer-left {
					width: 19px;
					height: 20px;
					margin-top: 16px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.footer-center {
					margin-left: 13px;
					width: 964px;
					height: 48px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					display: flex;
					align-items: center;
				}
				.footer-right {
					margin-left: 13px;
					width: 24px;
					height: 24px;
					border-radius: 12px;
					margin-top: 14px;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.box3 {
			margin-top: 15px;
			width: 1103px;
			height: 415px;
			border-radius: 4px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.box3-main {
				height: 264px;
				overflow-y: auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-left: 21px;
				margin-right: 26px;
				.box3-item {
					margin-top: 12px;
					width: 520px;
					height: 76px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 4px;
					display: flex;
					.box3-item-left {
						width: 54px;
						height: 54px;
						border-radius: 27px;
						background: #e7f3ff;
						text-align: center;
						margin-top: 11px;
						margin-left: 14px;
						.text {
							width: 33px;
							height: 30px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 700;
							line-height: 18px;
							margin: 11px auto;
						}
					}
					.box3-item-right {
						margin-left: 8px;
						width: 433px;
						.right-top {
							display: flex;
							justify-content: space-between;
							.title {
								margin-top: 13px;
								height: 24px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 18px;
								font-weight: 700;
								line-height: 24px;
							}
							.tag {
								margin-top: 11px;
								width: 72px;
								height: 24px;
								box-sizing: border-box;
								border: 1px solid rgba(255, 163, 158, 1);
								border-radius: 4px;
								background: rgba(255, 241, 240, 1);
								color: rgba(245, 34, 45, 1);
							}
						}
						.right-footer {
							margin-top: 2px;
							display: flex;
							justify-content: space-between;
							.content {
								height: 24px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								width: 353px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							.time {
								height: 24px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								width: 78px;
								line-height: 24px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
				}
			}
			.box3-footer {
				width: 1057px;
				height: 64px;
				box-sizing: border-box;
				border: 1px rgba(231, 243, 255, 1);
				border-radius: 4px;
				background: rgba(246, 251, 255, 1);
				margin: 14px auto 0;
				padding: 6px 12px 6px 12px;
				display: flex;
				.footer-left {
					width: 19px;
					height: 20px;
					margin-top: 16px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.footer-center {
					margin-left: 13px;
					width: 964px;
					height: 48px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					display: flex;
					align-items: center;
				}
				.footer-right {
					margin-left: 13px;
					width: 24px;
					height: 24px;
					border-radius: 12px;
					margin-top: 14px;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}
</style>