<template>
	<div class="home-wrapper">
		<div class="home-header">
			<div class="header-item">国家科技安全</div>
			<div class="header-item">></div>
			<div class="header-item back-item" @click="handleBackHome">中美博弈概览</div>
			<div class="header-item">></div>
			<div class="header-item">投融资限制</div>
		</div>
		<div class="home-main">
			<div class="home-main-header">
				<div class="home-main-header-center">
					<!-- <el-input
						v-model="searchKey"
						style="width: 100%; height: 48px"
						size="large"
						placeholder="搜索出口管制调查"
						:suffix-icon="Search"
					/> -->
					<el-input v-model="searchKey" style="width: 800px; height: 100%" placeholder="搜索出口管制政策" />
					<div class="search">
						<div class="search-icon">
							<img src="@/assets/icons/search-icon.png" alt="" />
						</div>
						<div class="search-text">搜索</div>
					</div>
				</div>
				<!-- <div class="home-main-header-footer">
					<div class="home-main-header-footer-item">
						<div class="item-top">142</div>
						<div class="item-footer">实体清单</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">28</div>
						<div class="item-footer">商业管制清单</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">326</div>
						<div class="item-footer">关键和新型技术清单</div>
					</div>
				</div> -->
				<div class="home-main-header-btn-box">
					<div class="btn" @click="scrollToTop('position1')">
						<div class="btn-text">{{ "最新动态" }}</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
					<div class="btn" @click="scrollToTop('position2')">
						<div class="btn-text">{{ "资讯要闻" }}</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
					<div class="btn" @click="scrollToTop('position3')">
						<div class="btn-text">{{ "统计概览" }}</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
					<div class="btn" @click="scrollToTop('position4')">
						<div class="btn-text">{{ "资源库" }}</div>
						<div class="btn-icon">
							<img src="@/assets/icons/arrow-right-icon.png" alt="" />
						</div>
					</div>
				</div>
				<!-- <div class="home-main-header-footer-link">
					<ClickableCard text="最新动态" @click="scrollToTop('position1')" target="_blank" />
					<ClickableCard text="资讯要闻" @click="scrollToTop('position2')" target="_blank" />
					<ClickableCard text="数据总览" @click="scrollToTop('position3')" target="_blank" />
					<ClickableCard text="资源库" @click="scrollToTop('position4')" target="_blank" />
				</div> -->
				<div class="home-main-header-footer-info">
					<div class="card" v-for="(item, index) in infoList" :key="index">
						<div class="icon" :style="{ background: item.color }"></div>
						<div class="title">{{ item.title }}</div>
						<div class="content">{{ item.des }}</div>
						<div class="num" :style="{ color: item.color }">{{ item.num + "项" }}</div>
					</div>
				</div>
			</div>

			<el-row :gutter="20" style="width: 1600px; margin: 0 auto">
				<CustomTitle id="position1" title="最新动态" style="margin-top: 24px" />
				<el-col :span="16">
					<custom-container titleType="primary" title="最新投融资限制政策" :titleIcon="houseIcon" height="450px">
						<template #header-right>
							<el-button type="primary" link @click="handleToDetail">
								{{ "查看详情 >" }}
							</el-button>
						</template>

						<template #default>
							<div class="box1">
								<div class="box1-top">
									<div class="box1-top-title">2025年9月12日——BIS《实体清单增列与修订条目》</div>
									<div class="box1-top-content">
										<div class="box1-top-content-item">
											<span class="box1-top-content-item-title">· 发布机构：</span>
											<span class="box1-top-content-item-content">美国商务部工业与安全局</span>
										</div>
										<div class="box1-top-content-item">
											<span class="box1-top-content-item-title">· 生效日期：</span>
											<span class="box1-top-content-item-content">2025年9月12日</span>
										</div>
										<div class="box1-top-content-item">
											<span class="box1-top-content-item-title">· 涉及领域：</span>
											<div
												class="box1-top-content-item-tags"
												v-for="item in ['航空航天', '人工智能', '集成电路']"
												:key="item"
											>
												<el-tag
													:type="
														item === '航空航天' ? 'primary' : item === '人工智能' ? 'danger' : 'info'
													"
													>{{ item }}</el-tag
												>
											</div>
										</div>
									</div>
								</div>
								<div class="box1-bottom">
									<div class="box1-bottom-title">· 涉及主要实体：</div>
									<div class="box1-bottom-content">
										<div class="box1-bottom-content-item" v-for="(item, index) in entityList" :key="index">
											<el-image class="box1-bottom-content-item-img" :src="item.img" alt=""></el-image>
											<div class="box1-bottom-content-item-txt">{{ item.name }}</div>
										</div>
									</div>
								</div>
								<div class="box1-absolute">
									<div class="box1-absolute-des">
										<el-icon><Warning color="rgba(206, 79, 81, 1)" /></el-icon>
										<span>新增中国实体</span>
									</div>
									<div class="box1-absolute-num">23家</div>
								</div>
							</div>
						</template>
					</custom-container>
				</el-col>
				<el-col :span="8">
					<custom-container titleType="danger" title="风险信号" :titleIcon="dangerIcon" height="450px">
						<template #default>
							<div class="box2-main">
								<div
									class="box2-main-item"
									v-for="(item, index) in warningList"
									:key="index"
									@click="handleToDetail"
								>
									<div
										class="item-left"
										:class="{
											itemLeftStatus1: item.status === '一般风险',
											itemLeftStatus2: item.status === '重大风险'
										}"
									>
										{{ item.status }}
									</div>
									<div class="item-right">
										<div class="text">
											{{ item.title }}
										</div>
										<div class="time">{{ item.time }}</div>
									</div>
								</div>
								<div class="box2-footer" @click="handleToMoreRiskSignal">
									<div class="icon">
										<img src="./assets/images/box2-footer-icon.png" alt="" />
									</div>
									<div class="text">{{ "查看更多" }}</div>
								</div>
							</div>
						</template>
					</custom-container>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="width: 1600px; margin: 0 auto">
				<CustomTitle id="position2" title="资讯要闻" style="margin-top: 64px" />
				<el-col :span="12">
					<custom-container title="新闻资讯" :titleIcon="newsIcon" height="450px">
						<template #header-right>
							<el-button type="primary" link @click="handleToMoreNews">
								{{ "更多 +" }}
							</el-button>
						</template>

						<template #default>
							<div class="news-list">
								<NewsList :list-data="customNewsData" />
							</div>
						</template>
					</custom-container>
				</el-col>
				<el-col :span="12">
					<custom-container title="社交媒体" :titleIcon="dialogIcon" height="450px">
						<template #default>
							<div class="dialog-list">
								<!-- <MessageBubble
									:avatar="customMessage.avatar"
									:name="customMessage.name"
									:time="customMessage.time"
									:source="customMessage.source"
									:content="customMessage.content"
								/> -->
								<MessageBubble
									:avatar="trumpAvatar"
									name="唐纳德·特朗普"
									time="16:02"
									source="发布于真实社交"
									content="埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。"
								/>

								<MessageBubble
									:avatar="elongAvatar"
									name="埃隆·马斯克"
									time="16:02"
									source="发布于真实社交"
									content="如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。"
								/>

								<MessageBubble
									:avatar="elongAvatar"
									name="埃隆·马斯克"
									time="16:02"
									source="发布于真实社交"
									content="提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。"
								/>
							</div>
						</template>
					</custom-container>
				</el-col>
			</el-row>

			<el-row :gutter="20" style="width: 1600px; margin: 0 auto">
				<CustomTitle id="position3" title="数据总览" style="margin-top: 64px" />
				<el-col :span="24">
					<custom-container title="发布频度" :titleIcon="box3Icon" height="450px">
						<template #default>
							<div class="box3">
								<div class="box3-content">
									<div class="box3-content-title">实体清单发布频度</div>
									<el-table :data="tableData1" stripe style="width: 100%">
										<el-table-column prop="year" label="年份" width="100" />
										<el-table-column label="发布次数" width="180">
											<template #default="scope">
												<div style="display: flex; align-items: center">
													<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
													<el-progress
														:percentage="scope.row.percent * 100"
														:show-text="false"
														:status="getStatus(scope.row.percent)"
													/>
												</div>
											</template>
										</el-table-column>
										<el-table-column label="重点领域" width="180">
											<template #default="scope">
												<div style="display: flex; align-items: center; gap: 5px">
													<el-tag
														v-for="tag in scope.row.tags"
														:key="tag"
														:type="
															tag === '通信网络'
																? 'primary'
																: TAGTYPE[Math.floor(Math.random() * 5)]
														"
														>{{ tag }}</el-tag
													>
												</div>
											</template>
										</el-table-column>
									</el-table>
								</div>
								<div class="box3-content">
									<div class="box3-content-title">商业管制清单(CCL)更新频度</div>
									<el-table :data="tableData1" stripe style="width: 100%">
										<el-table-column prop="year" label="年份" width="100" />
										<el-table-column label="发布次数" width="180">
											<template #default="scope">
												<div style="display: flex; align-items: center">
													<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
													<el-progress
														:percentage="scope.row.percent * 100"
														:show-text="false"
														:status="getStatus(scope.row.percent)"
													/>
												</div>
											</template>
										</el-table-column>
										<el-table-column label="重点领域" width="180">
											<template #default="scope">
												<div style="display: flex; align-items: center; gap: 5px">
													<el-tag
														v-for="tag in scope.row.tags"
														:key="tag"
														:type="
															tag === '通信网络'
																? 'primary'
																: TAGTYPE[Math.floor(Math.random() * 5)]
														"
														>{{ tag }}</el-tag
													>
												</div>
											</template>
										</el-table-column>
									</el-table>
								</div>
								<div class="box3-content">
									<div class="box3-content-title">关键与新兴技术清单(CETs)</div>
									<el-table :data="tableData1" stripe style="width: 100%">
										<el-table-column prop="year" label="年份" width="100" />
										<el-table-column label="发布次数" width="180">
											<template #default="scope">
												<div style="display: flex; align-items: center">
													<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
													<el-progress
														:percentage="scope.row.percent * 100"
														:show-text="false"
														:status="getStatus(scope.row.percent)"
													/>
												</div>
											</template>
										</el-table-column>
										<el-table-column label="重点领域" width="180">
											<template #default="scope">
												<div style="display: flex; align-items: center; gap: 5px">
													<el-tag
														v-for="tag in scope.row.tags"
														:key="tag"
														:type="
															tag === '通信网络'
																? 'primary'
																: TAGTYPE[Math.floor(Math.random() * 5)]
														"
														>{{ tag }}</el-tag
													>
												</div>
											</template>
										</el-table-column>
									</el-table>
								</div>
							</div>
						</template>
					</custom-container>
				</el-col>
			</el-row>

			<el-row gutter="20" style="width: 1600px; margin: 0 auto">
				<el-col :span="8">
					<custom-container title="制裁领域分析" :titleIcon="radarIcon" height="450px">
						<template #header-right>
							<el-checkbox v-model="checked" label="50%规则" size="large" />
						</template>
						<template #default>
							<EChart :option="radarOption" autoresize :style="{ height: '400px' }" />
						</template>
					</custom-container>
				</el-col>
				<el-col :span="16">
					<custom-container title="制裁清单数量增长趋势" :titleIcon="qushiIcon" height="450px">
						<template #header-right>
							<el-checkbox v-model="checked" label="50%规则" size="large" />
						</template>
						<template #default>
							<EChart :option="trendOption" autoresize :style="{ height: '400px' }" />
						</template>
					</custom-container>
				</el-col>
			</el-row>

			<el-row :gutter="20" style="width: 1600px; margin: 0 auto">
				<CustomTitle id="position4" title="资源库" style="margin-top: 54px" />
				<el-col :span="8">
					<custom-container title="制裁历程" :titleIcon="listIcon" height="845px">
						<template #default>
							<div class="box4">
								<div class="box4-item" v-for="(item, idx) in sanctionProcessList" :key="item.title">
									<div class="box4-item-left">
										<el-image :src="dotIcon" alt="图片" class="box4-item-left-icon" />
										<div class="box4-item-left-line" v-if="idx + 1 != sanctionProcessList.length"></div>
									</div>
									<div class="box4-item-right">
										<div class="box4-item-right-header">
											<span class="box4-item-right-header-title">{{ item.title }}</span>
											<span class="box4-item-right-header-desc">{{ item.desc }}</span>
										</div>
										<div class="box4-item-right-content">
											{{ item.content }}
										</div>
									</div>
								</div>
								<div class="box4-footer">
									<el-button type="primary" link :icon="DownRight"
										>查看更多
										<el-icon><DArrowRight /></el-icon>
									</el-button>
								</div>
							</div>
						</template>
					</custom-container>
				</el-col>
				<el-col :span="16">
					<custom-container title="制裁实体清单" :titleIcon="entityIcon" height="845px">
						<template #header-right>
							<div class="box5-header-right">共1329家实体</div>
						</template>
						<template #default>
							<div class="box5">
								<el-table
									:data="paginatedData"
									class="sanction-table"
									stripe
									empty-text="暂无数据"
									height="700px"
									header-row-class-name="table-header"
									row-class-name="table-row"
								>
									<!-- <el-table-column prop="index" label="序号" width="80" align="center">
										<template #default="scope">
											{{ scope.$index + 1 + (currentPage - 1) * pageSize }}
										</template>
									</el-table-column> -->

									<el-table-column prop="name" label="实体名称" min-width="200">
										<template #default="scope">
											<div
												style="
													font-weight: 700;
													font-size: 16px;
													color: rgba(59, 65, 75, 1);
													font-family: Microsoft YaHei;
												"
											>
												{{ scope.row.name }}
											</div>
										</template>
									</el-table-column>

									<el-table-column prop="domains" label="涉及领域" min-width="180">
										<template #default="scope">
											<div class="domain-tags">
												<el-tag
													v-for="tag in scope.row.domains"
													:key="tag"
													:type="tag === '通信网络' ? 'primary' : 'danger'"
													>{{ tag }}</el-tag
												>
											</div>
										</template>
									</el-table-column>
									<el-table-column prop="sanctionDate" label="上市地点" width="120" align="center">
										<template #default="scope">
											{{ scope.row.listingLocation ? scope.row.listingLocation : "--" }}
										</template>
									</el-table-column>
									<el-table-column prop="sanctionDate" label="制裁时间" width="120" align="center">
										<template #default="scope">
											{{ scope.row.sanctionDate }}
										</template>
									</el-table-column>

									<el-table-column prop="strength" label="制裁强度" width="120" align="center">
										<template #default="scope">
											<div class="sanction-strength">
												<div :class="['strength-bar', `strength-${scope.row.strength}`]"></div>
												<span>{{ strengthLabels[scope.row.strength] }}</span>
											</div>
										</template>
									</el-table-column>

									<!-- <el-table-column prop="revenue" label="营收（亿元）" width="140" align="right">
										<template #default="scope">
											<span
												:class="['revenue-cell', scope.row.revenue === '无营收数据' ? 'no-revenue' : '']"
											>
												{{ scope.row.revenue }}
											</span>
										</template>
									</el-table-column> -->

									<el-table-column prop="revenue" label="50%规则子企业" width="140" align="right">
										<template #default="scope">
											<span
												:class="['revenue-cell', scope.row.revenue === '无营收数据' ? 'no-revenue' : '']"
											>
												{{ scope.row.revenue }}
											</span>
										</template>
									</el-table-column>
								</el-table>

								<div class="table-footer">
									<!-- <div class="pagination-info">
                    第{{ currentPage }}页，共{{ totalPages }}页
                  </div> -->
									<el-pagination
										v-model:current-page="currentPage"
										:page-size="pageSize"
										:total="total"
										:pager-count="5"
										layout="prev, pager, next"
										background
									/>
								</div>
							</div>
						</template>
					</custom-container>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import scrollToTop from "@/utils/scrollToTop";
import * as echarts from "echarts";
import { DArrowRight, Warning, Search } from "@element-plus/icons-vue";
import EChart from "@/components/Chart/index.vue";
import { TAGTYPE } from "@/public/constant";

import { useRouter } from "vue-router";

const router = useRouter();

import CustomContainer from "@/components/Container/index.vue";
import ClickableCard from "./components/link.vue";
import InfoCard from "./components/info.vue";
import CustomTitle from "./components/title.vue";
import NewsList from "./components/news.vue";
import MessageBubble from "./components/dialog.vue";

import trumpAvatar from "@/assets/images/icon-trump.png";
import elongAvatar from "@/assets/images/icon-elong.png";
import newsIcon from "@/assets/images/icon-news.png";
import dialogIcon from "@/assets/images/icon-duihua.png";
import houseIcon from "@/assets/images/icon-house.png";
import dangerIcon from "./assets/images/box2-header-icon.png";
import box1Image from "./assets/images/box1-image.png";
import box3Icon from "./assets/images/box1-header-icon.png";
import radarIcon from "./assets/images/icon-radar.png";
import qushiIcon from "./assets/images/icon-qushi.png";
import listIcon from "./assets/images/icon-list.png";
import dotIcon from "./assets/images/info2-icon.png";
import entityIcon from "./assets/images/icon-entity.png";

import newsImg from "@/assets/images/news-img.png";

import { getHotBills, getBillsByType, getHylyList } from "@/api/home";

import headerIcon1 from "./assets/icons/header-icon1.png";
import headerIcon2 from "./assets/icons/header-icon2.png";
import headerIcon3 from "./assets/icons/header-icon3.png";
import headerIcon4 from "./assets/icons/header-icon4.png";
import headerIcon5 from "./assets/icons/header-icon5.png";

import getMultiLineChart from "./utils/multiLineChart";

import bill1 from "./assets/images/bill1.png";
import bill2 from "./assets/images/bill2.png";
import bill3 from "./assets/images/bill3.png";
import bill4 from "./assets/images/bill4.png";
import bill5 from "./assets/images/bill5.png";
import bill6 from "./assets/images/bill6.png";
import bill7 from "./assets/images/bill7.png";
import bill8 from "./assets/images/bill8.png";
import bill9 from "./assets/images/bill9.png";
import bill10 from "./assets/images/bill10.png";
import bill11 from "./assets/images/bill11.png";
import bill12 from "./assets/images/bill12.png";

import fudanIcon from "./assets/images/fudan.png";
import fukongIcon from "./assets/images/fukong.png";
import hualingIcon from "./assets/images/hualing.png";
import jimuxiIcon from "./assets/images/jimuxi.png";
import shenggongIcon from "./assets/images/shenggong.png";
import shoushiIcon from "./assets/images/shoushi.png";
import tianyiIcon from "./assets/images/tianyi.png";
import aircasIcon from "./assets/images/aircas.png";

// 返回首页
const handleBackHome = () => {
	router.push({
		path: "/overview"
	});
};

const handleToDetail = () => {
	// const route = router.resolve("/exportControl/analysis");
	// window.open(route.href, "_blank");
};

// 查看更多风险信号
const handleToMoreRiskSignal = () => {
	const route = router.resolve("/riskSignal");
	window.open(route.href, "_blank");
};

// 查看更多新闻资讯
const handleToMoreNews = () => {
	const route = router.resolve("/newsBrief");
	window.open(route.href, "_blank");
};

const billList = ref([]);
const curBillListIndex = ref(0);

const searchKey = ref("");

const infoList = ref([
	{
		title: "SDN清单",
		des: "由美国财政部海外资产控制办公室（OFAC）管理，通过切断目标实体或个人与美国金融体系的联系，以实现美国的外交政策和国家安全目标。",
		num: 87,
		color: "rgba(5, 95, 194, 1)"
	},
	{
		title: "CMIC清单",
		des: "由美国财政部海外资产控制办公室（OFAC）管理，通过切断目标实体或个人与美国金融体系的联系，以实现美国的外交政策和国家安全目标。",
		num: 3,
		color: "rgba(114, 46, 209, 1)"
	}
]);

const entityList = ref([
	{
		name: "北京复旦微电子技术有限公司",
		img: fudanIcon
	},
	{
		name: "北京福康微电子技术有限公司",
		img: fukongIcon
	},
	{
		name: "北京华岭微电子技术有限公司",
		img: hualingIcon
	},
	{
		name: "北京吉姆微芯科技有限公司",
		img: jimuxiIcon
	},
	{
		name: "北京盛工微电子技术有限公司",
		img: shenggongIcon
	},
	{
		name: "北京首时微电子技术有限公司",
		img: shoushiIcon
	},
	{
		name: "北京天易微电子技术有限公司",
		img: tianyiIcon
	},
	{
		name: "北京航空航天大学微电子技术研究院",
		img: aircasIcon
	}
]);

const customNewsData = ref([
	{
		image: newsImg,
		title: "美国智库激辩人工智能监管路径",
		time: "11-4",
		source: "华盛顿邮报",
		description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
	},
	{
		image: newsImg,
		title: "美国智库激辩人工智能监管路径",
		time: "11-4",
		source: "华盛顿邮报",
		description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
	},
	{
		image: newsImg,
		title: "美国智库激辩人工智能监管路径",
		time: "11-4",
		source: "华盛顿邮报",
		description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
	},
	{
		image: newsImg,
		title: "美国智库激辩人工智能监管路径",
		time: "11-4",
		source: "华盛顿邮报",
		description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
	},
	{
		image: newsImg,
		title: "美国智库激辩人工智能监管路径",
		time: "11-4",
		source: "华盛顿邮报",
		description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
	}
]);

// 发布频度
const tableData1 = ref([
	{
		year: "2025",
		num: 5,
		percent: 0.4,
		tags: ["通信网络"]
	},
	{
		year: "2024",
		num: 12,
		percent: 0.9,
		tags: ["通信网络", "人工智能"]
	},
	{
		year: "2023",
		num: 2,
		percent: 0.4,
		tags: ["通信网络"]
	},
	{
		year: "2022",
		num: 6,
		percent: 0.7,
		tags: ["通信网络", "集成电路"]
	},
	{
		year: "2021",
		num: 7,
		percent: 0.8,
		tags: ["生物科技", "集成电路"]
	}
]);

// 雷达图
const radarOption = ref({
	title: {
		text: ""
	},
	// grid: {
	// 	top: 100
	// },
	legend: {
		top: 0,
		icon: "circle",
		data: ["实体清单", "商业管制清单", "关键和新型技术清单"]
	},
	radar: {
		// shape: 'circle',
		indicator: [
			{ name: "集成电路", max: 6500 },
			{ name: "生物科技", max: 16000 },
			{ name: "人工智能", max: 30000 },
			{ name: "通信网络", max: 38000 },
			{ name: "量子科技", max: 52000 },
			{ name: "能源领域", max: 25000 }
		],
		axisName: {
			formatter: "{value}",
			color: "rgba(59, 65, 75, 1)",
			fontSize: 16,
			fontWeight: 700
		}
	},
	series: [
		{
			name: "Budget vs spending",
			type: "radar",
			data: [
				{
					value: [4200, 3000, 20000, 35000, 50000, 18000],
					name: "实体清单",
					areaStyle: {
						color: "rgba(10, 87, 166, 0.2)"
					}
				},
				{
					value: [5000, 14000, 28000, 26000, 42000, 21000],
					name: "商业管制清单",
					areaStyle: {
						color: "rgba(206, 79, 81, 0.2)"
					}
				},
				{
					value: [4000, 14000, 18000, 21000, 32000, 10000],
					name: "关键和新型技术清单",
					areaStyle: {
						color: "rgba(250, 140, 22, 0.2)"
					}
				}
			]
		}
	]
});

// 趋势图
const trendOption = ref({
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "shadow"
		}
	},
	grid: {
		top: "8%",
		bottom: "5%",
		left: "2%",
		right: "2%",
		containLabel: true
	},
	legend: {
		// type: "scroll",
		// show: true,
		// orient: "horizontal",
		icon: "circle",
		data: ["量子科技", "人工智能", "通信网络", "集成电路", "生物科技", "能源领域"]
	},
	xAxis: {
		type: "category",
		data: ["2021", "2022", "2023", "2024", "2025"]
	},
	yAxis: {
		type: "value"
	},
	series: [
		{
			name: "量子科技",
			data: [120, 200, 150, 80, 70, 110, 130],
			type: "bar",
			barWidth: 12,
			itemStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{ offset: 0, color: "rgba(22, 119, 255, 1)" },
					// { offset: 0.5, color: '#188df0' },
					{ offset: 1, color: "rgba(22, 119, 255, 0)" }
				]),
				borderRadius: [6, 6, 0, 0]
			}
		},
		{
			name: "人工智能",
			data: [20, 230, 100, 100, 30, 210, 180],
			type: "bar",
			barWidth: 12,
			itemStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{ offset: 0, color: "rgba(206, 79, 81, 1)" },
					// { offset: 0.5, color: '#188df0' },
					{ offset: 1, color: "rgba(206, 79, 81, 0)" }
				]),
				borderRadius: [6, 6, 0, 0]
			}
		},
		{
			name: "通信网络",
			data: [150, 100, 200, 130, 50, 190, 330],
			type: "bar",
			barWidth: 12,
			itemStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{ offset: 0, color: "rgba(255, 197, 61, 1)" },
					// { offset: 0.5, color: '#188df0' },
					{ offset: 1, color: "rgba(255, 197, 61, 0)" }
				]),
				borderRadius: [6, 6, 0, 0]
			}
		},
		{
			name: "集成电路",
			data: [220, 100, 250, 180, 170, 100, 80],
			type: "bar",
			barWidth: 12,
			itemStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{ offset: 0, color: "rgba(255, 204, 199, 1)" },
					// { offset: 0.5, color: '#188df0' },
					{ offset: 1, color: "rgba(255, 204, 199, 0)" }
				]),
				borderRadius: [6, 6, 0, 0]
			}
		},
		{
			name: "生物科技",
			data: [220, 300, 50, 180, 170, 210, 400],
			type: "bar",
			barWidth: 12,
			itemStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{ offset: 0, color: "rgba(179, 127, 235, 1)" },
					// { offset: 0.5, color: '#188df0' },
					{ offset: 1, color: "rgba(179, 127, 235, 0)" }
				]),
				borderRadius: [6, 6, 0, 0]
			}
		},
		{
			name: "能源领域",
			data: [120, 200, 150, 80, 70, 110, 130],
			type: "bar",
			barWidth: 12,
			itemStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{ offset: 0, color: "rgba(127, 218, 235, 1)" },
					// { offset: 0.5, color: '#188df0' },
					{ offset: 1, color: "rgba(127, 214, 235, 0)" }
				]),
				borderRadius: [6, 6, 0, 0]
			}
		}
	]
});

// 历次制裁过程
const sanctionProcessList = ref([
	{
		title: "2025年3月—SDN清单",
		desc: "54家中国实体",
		content:
			"2025年3月25日，美国商务部工业与安全局以从事有悖于美国国家安全和外交政策利益的活动为由，宣布将来自中国的54家实体新增至“实体清单”。"
	},
	{
		title: "2025年1月—SDN清单",
		desc: "25家中国实体",
		content:
			"2025年1月15日，美国商务部工业和安全局宣布更新《出口管理条例》（EAR），并发布两项最终规则，将25家中国企业及其相关实体列入实体清单。"
	},
	{
		title: "2025年12月—SDN清单",
		desc: "12家中国实体",
		content:
			"2024年12月20日，美国商务部工业与安全局以从事有悖于美国国家安全和外交政策利益的活动为由，宣布将来自中国的12家实体新增至“商业管制清单”。"
	},
	{
		title: "2024年10月—CMIC清单",
		desc: "6家中国实体",
		content: "2024年10月21日，美国商务部将6个中国实体加入其“实体清单”，同时将 1 个中国实体移出该清单。"
	},
	{
		title: "2024年8月—SDN清单",
		desc: "39家中国实体",
		content: "2024年8月23日，美国商务部工业安全局发布公告，将多个外国实体加入其“实体清单”，其中包括39个中国实体。"
	}
]);

// 进度条状态
const getStatus = _percent => {
	const percent = _percent * 100;
	if (percent >= 90) {
		return "exception";
	} else if (percent >= 50) {
		return "warning";
	} else {
		return "success";
	}
};
// 制裁实体
const currentPage = ref(1); // 默认显示第5页
const pageSize = ref(10);
const searchKeyword = ref("");
const strengthLabels = {
	strong: "强",
	medium: "中",
	weak: "弱",
	none: "无"
};
// 模拟数据
const mockData = [
	{
		name: "科大讯飞股份有限公司",
		domains: ["人工智能"],
		sanctionDate: "2025年9月",
		strength: "strong",
		revenue: "325",
		listingLocation: "深圳"
	},
	{
		name: "华为技术有限公司",
		domains: ["通信网络", "集成电路"],
		sanctionDate: "2025年9月",
		strength: "medium",
		revenue: "290",
		listingLocation: ""
	},
	{
		name: "中国航空工业集团",
		domains: ["航空航天"],
		sanctionDate: "2025年9月",
		strength: "medium",
		revenue: "288",
		listingLocation: ""
	},
	{
		name: "杭州海康威视数字技术股份有限公司",
		domains: ["人工智能"],
		sanctionDate: "2025年9月",
		strength: "weak",
		revenue: "203",
		listingLocation: "深圳"
	},
	{
		name: "浪潮集团有限公司",
		domains: ["人工智能"],
		sanctionDate: "2025年9月",
		strength: "medium",
		revenue: "195",
		listingLocation: "香港"
	},
	{
		name: "中芯国际集成电路制造有限公司",
		domains: ["集成电路"],
		sanctionDate: "2025年9月",
		strength: "medium",
		revenue: "190",
		listingLocation: ""
	},
	{
		name: "北京复旦微电子技术有限公司",
		domains: ["集成电路"],
		sanctionDate: "2025年9月",
		strength: "medium",
		revenue: "184",
		listingLocation: ""
	},
	{
		name: "哈尔滨工业大学",
		domains: ["人工智能", "集成电路"],
		sanctionDate: "2025年9月",
		strength: "medium",
		revenue: "无营收数据",
		listingLocation: ""
	},
	{
		name: "中兴通讯股份有限公司",
		domains: ["通信网络", "集成电路"],
		sanctionDate: "2025年9月",
		strength: "medium",
		revenue: "117",
		listingLocation: "上海"
	},
	{
		name: "大疆创新科技有限公司",
		domains: ["航空航天"],
		sanctionDate: "2025年9月",
		strength: "medium",
		revenue: "1",
		listingLocation: "纽约"
	}
];

// 生成更多数据以模拟1329家实体
const generateMoreData = () => {
	const moreData = [];
	const companySuffixes = ["有限公司", "集团", "股份有限公司", "技术有限公司", "研究所"];
	const domainsList = [
		["人工智能"],
		["通信网络"],
		["航空航天"],
		["集成电路"],
		["人工智能", "集成电路"],
		["通信网络", "集成电路"],
		["航空航天", "人工智能"]
	];
	const strengths = ["strong", "medium", "weak"];

	for (let i = 0; i < 1318; i++) {
		const nameSuffix = companySuffixes[Math.floor(Math.random() * companySuffixes.length)];
		const companyName = `实体${i + 12}${nameSuffix}`;
		const domains = domainsList[Math.floor(Math.random() * domainsList.length)];
		const strength = strengths[Math.floor(Math.random() * strengths.length)];
		const revenue = Math.floor(Math.random() * 400) + 1;

		moreData.push({
			name: companyName,
			domains: domains,
			sanctionDate: "2025年9月",
			strength: strength,
			revenue: revenue.toString()
		});
	}

	return moreData;
};

const allData = [...mockData, ...generateMoreData()];

// 计算属性
const total = computed(() => allData.length);

const totalPages = computed(() => Math.ceil(total.value / pageSize.value));

const filteredData = computed(() => {
	if (!searchKeyword.value) return allData;

	const keyword = searchKeyword.value.toLowerCase();
	return allData.filter(
		item => item.name.toLowerCase().includes(keyword) || item.domains.some(domain => domain.toLowerCase().includes(keyword))
	);
});

const paginatedData = computed(() => {
	const start = (currentPage.value - 1) * pageSize.value;
	const end = start + pageSize.value;
	return filteredData.value.slice(start, end);
});

// 当前法案
const curBill = ref({
	billName: "",
	billId: 0,
	dyqkList: [],
	hylyList: [],
	tarName: "",
	introductionDate: ""
});

const warningList = ref([
	{
		title: "兰德智库发布2025中国年度科技报告",
		time: "一天前",
		status: "特别重大"
	},
	{
		title: "信息技术与创新基金会发布《中国正在迅速成...",
		time: "一天前",
		status: "特别重大"
	},
	{
		title: "首次提出“限制外国敏感实体获取补贴",
		time: "一天前",
		status: "重大风险"
	},
	{
		title: "将中国企业海外子公司、合资公司纳入受...",
		time: "一天前",
		status: "重大风险"
	},
	{
		title: "H.R.8333《生物安全法案》将华大基因等...",
		time: "一天前",
		status: "一般风险"
	}
]);

const curBillList = ref([
	{
		billName: "大而美法案",
		introductionDate: "2025年7月4日",
		img: bill1
	},
	{
		billName: "GENIUS稳定币法案",
		introductionDate: "2025年7月5日",
		img: bill2
	},
	{
		billName: "美越贸易协议",
		introductionDate: "2025年7月6日",
		img: bill3
	},
	{
		billName: "美越贸易协议",
		introductionDate: "2025年7月7日",
		img: bill4
	},
	{
		billName: "汽车零部件25%关税实施规则",
		introductionDate: "2025年7月10日",
		img: bill5
	},
	{
		billName: "汽车零部件25%关税实施规则",
		introductionDate: "2025年7月12日",
		img: bill6
	},
	{
		billName: "小额豁免包裹政策调整",
		introductionDate: "2025年7月14日",
		img: bill7
	},
	{
		billName: "NIH预算否决案",
		introductionDate: "2025年7月15日",
		img: bill8
	},
	{
		billName: "得州国会选区重划法案",
		introductionDate: "2025年7月17日",
		img: bill9
	},
	{
		billName: "美越贸易协议",
		introductionDate: "2025年7月24日",
		img: bill10
	},
	{
		billName: "美越贸易协议",
		introductionDate: "2025年8月4日",
		img: bill11
	},
	{
		billName: "美越贸易协议",
		introductionDate: "2025年8月8日",
		img: bill12
	}
]);

const releaseTime = ref("近一年发布");

const releaseTimeList = ref([
	{
		label: "近半年发布",
		value: "近半年发布"
	},
	{
		label: "近一年发布",
		value: "近一年发布"
	},
	{
		label: "近两年发布",
		value: "近两年发布"
	},
	{
		label: "近三年发布",
		value: "近三年发布"
	},
	{
		label: "近五年发布",
		value: "近五年发布"
	}
]);

const categoryList = ref([
	// "全部分类",
	// "生物科技",
	// "集成电路",
	// "通信网络",
	// "量子科技",
	// "新能源",
	// "新一代信息技术",
	// "海洋",
	// "先进制造",
	// "新材料",
	// "航空航天",
]);

const activeCate = ref("全部分类");
const activeHylyId = ref("");

// 获取领域分类
const handleGetHylyList = async () => {
	try {
		const res = await getHylyList();
		console.log("行业领域列表");
		categoryList.value = res.data;
		const obj = {
			id: 0,
			hylyid: "",
			hylymc: "全部分类"
		};
		categoryList.value = [obj, ...categoryList.value];
	} catch (error) {}
};

const handleClickCate = cate => {
	console.log(cate);

	activeCate.value = cate.hylymc;
	activeHylyId.value = cate.hylyid;
	handleGetBillsByType();
};

const navList = ref([
	{
		icon: headerIcon1,
		activeIcno: headerIcon1,
		name: "首页",
		path: "/home"
	},
	{
		icon: headerIcon2,
		activeIcno: headerIcon2,
		name: "国家",
		path: "/country"
	},
	{
		icon: headerIcon3,
		activeIcno: headerIcon3,
		name: "领域",
		path: "/area"
	},
	{
		icon: headerIcon4,
		activeIcno: headerIcon4,
		name: "要素",
		path: "/home"
	},
	{
		icon: headerIcon5,
		activeIcno: headerIcon5,
		name: "事件",
		path: "/home"
	}
]);

const activeNavIndex = ref(0);

const handleClickNav = (index, item) => {
	activeNavIndex.value = index;
	router.push(item.path);
};

// 绘制echarts图表
const setChart = (option, chartId) => {
	let chartDom = document.getElementById(chartId);
	chartDom.removeAttribute("_echarts_instance_");
	let chart = echarts.init(chartDom);
	chart.setOption(option);
	return chart;
};

const chart1Data = ref({
	title: [
		"2024-09",
		"2024-10",
		"2024-11",
		"2024-12",
		"2025-01",
		"2025-02",
		"2025-03",
		"2025-04",
		"2025-05",
		"2025-06",
		"2025-07",
		"2025-08"
	],
	data: [
		{
			name: "提出法案",
			value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172]
		},
		{
			name: "通过法案",
			value: [6, 3, 4, 6, 11, 5, 2, 14, 16, 27, 28, 44]
		}
	]
});

// 获取热门法案
const handleGetHotBills = async () => {
	try {
		const res = await getHotBills();
		console.log("热门法案", res);
		billList.value = res.data;
	} catch (error) {
		console.error(error);
	}
};

// 根据法案类型获取法案列表
const handleGetBillsByType = async () => {
	const params = {
		type: activeHylyId.value
	};
	try {
		const res = await getBillsByType(params);
		console.log("根据法案类型获取法案列表", res);
		curBillList.value = res.data.map(item => {
			return {
				billId: item.billId,
				billName: item.billName,
				introductionDate: item.introductionDate,
				img: bill1
			};
		});
	} catch (error) {}
};

onMounted(async () => {
	handleGetHylyList();
	await handleGetHotBills();
	curBill.value = billList.value[0];
	handleGetBillsByType();
	let chart1 = getMultiLineChart(chart1Data.value.title, chart1Data.value.data[0].value, chart1Data.value.data[1].value);
	setChart(chart1, "chart1");
});
</script>

<style lang="scss" scoped>
:deep(.el-input__wrapper) {
	box-shadow: none;
}

.home-header {
	height: 64px;
	color: #fff;
	font-family: Microsoft YaHei;
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
	line-height: 64px;
	background: url("@/assets/images/nav-bg.png");
	box-sizing: border-box;
	padding-left: 160px;
	display: flex;
	.header-item {
		margin: 0 3px;
	}
	.back-item {
		cursor: pointer;
		&:hover {
			color: #ccc;
		}
	}
}

.box1 {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: relative;
	.box1-absolute {
		position: absolute;
		width: 240px;
		height: 89px;
		top: 30px;
		right: -24px;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		padding-right: 50px;
		box-sizing: border-box;
		background: linear-gradient(to right, rgba(206, 79, 81, 0), rgba(206, 79, 81, 0.3));
		&-des {
			display: flex;
			gap: 5px;
			align-items: center;
			font-size: 18px;
			font-weight: 700;
			color: rgba(206, 79, 81, 1);
		}
		&-num {
			font-size: 32px;
			font-weight: 700;
			color: rgba(206, 79, 81, 1);
		}
	}
	.box1-top {
		// display: flex;
		// flex-direction: column;
		// gap: 10px;
		padding-left: 30px;
		border-bottom: 1px solid rgba(234, 236, 238, 1);
		&-title {
			font-size: 20px;
			font-weight: 700;
			color: $base-color;
			margin-top: 10px;
			margin-bottom: 15px;
		}
		&-content {
			display: flex;
			flex-direction: column;
			gap: 10px;
			margin-bottom: 20px;
			&-item {
				display: flex;
				gap: 5px;
				&-title {
					font-size: 16px;
					font-weight: 700;
					color: rgba(59, 65, 75, 1);
				}
			}
		}
	}
	.box1-bottom {
		padding-left: 30px;

		&-title {
			font-size: 16px;
			font-weight: 700;
			color: rgba(59, 65, 75, 1);
			margin-bottom: 15px;
		}
		&-content {
			display: flex;
			gap: 15px;
			flex-wrap: wrap;
			justify-content: space-between;
			padding-left: 10px;
			&-item {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				width: 48%; /* 留出2%的间距 */
				// margin-bottom: 6px;
				box-sizing: border-box;
				gap: 10px;
				&-img {
					width: 24px;
					height: 24px;
				}
				&-txt {
					font-size: 16px;
					font-weight: 400;
					color: rgba(95, 101, 108, 1);
				}
			}
		}
	}
	.box1-right {
		display: flex;
		flex-direction: column;
		gap: 10px;
		.box1-right-title {
			font-size: 20px;
			font-weight: 700;
			color: $base-color;
		}
		.box1-right-tags {
			display: flex;
			gap: 10px;
		}
		.box1-right-content {
			color: rgba(59, 65, 75, 1);
			font-size: 16px;
			font-weight: 400;
			line-height: 28px;
		}
		.box1-right-footer {
			margin-top: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.box1-right-footer-time {
				color: rgba(95, 101, 108, 1);
				font-size: 14px;
				font-weight: 400;
			}
		}
	}
}

.box2-main {
	height: 320px;
	overflow-y: auto;
	.box2-main-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 8px;
		box-sizing: border-box;
		padding-right: 3px;
		cursor: pointer;
		&:hover {
			background: var(--color-bg-hover);
		}
		.itemLeftStatus1 {
			color: rgba(82, 196, 26, 1) !important;
			background: rgba(246, 255, 237, 1) !important;
		}
		.itemLeftStatus2 {
			color: rgba(250, 140, 22, 1) !important;
			background: rgba(255, 247, 230, 1) !important;
		}
		.item-left {
			display: flex;
			align-items: center;
			width: 40px;
			height: 40px;
			padding: 5px;
			border-radius: 100%;
			background: rgba(255, 241, 240);
			color: rgba(245, 34, 45, 1);
			font-family: Microsoft YaHei;
			font-size: 12px;
			font-weight: 400;
			line-height: 14px;
			box-sizing: border-box;
			text-align: center;
			flex-shrink: 0;
		}
		.item-right {
			margin-left: 13px;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 8px;
			height: 47px;
			border-bottom: 1px solid rgba(240, 242, 244, 1);
			.text {
				font-family: Microsoft YaHei;
				line-height: 47px;
				width: 80%;
				font-size: 16px;
				font-weight: 400;
				color: rgba(59, 65, 75, 1);
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.time {
				margin-left: 10px;
				line-height: 47px;
				color: rgba(132, 136, 142, 1);
				font-family: Microsoft YaHei;
				font-size: 14px;
				font-weight: 400;
			}
		}
	}
}
.box2-footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	width: 461px;
	height: 42px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
	background: var(--color-main-active);
	margin: 0 auto;
	cursor: pointer;
	.icon {
		width: 16px;
		height: 16px;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.text {
		margin-left: 8px;
		color: rgba(255, 255, 255, 1);
		font-family: Microsoft YaHei;
		font-size: 16px;
		font-weight: 400;
		line-height: 22px;
	}
}

.box3 {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	.box3-content-title {
		font-size: 18px;
		font-weight: 700;
		font-family: Microsoft YaHei;
		width: 470px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(247, 248, 249, 1);
		color: $base-color;
		margin-bottom: 15px;
	}
	.box3-content {
		.el-progress--line {
			width: 82px;
		}
	}
}

.box4 {
	.box4-item {
		display: flex;
		gap: 10px;
		align-items: flex-start;
		padding-bottom: 30px;
		.box4-item-left {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 8px;
			position: relative;
			.box4-item-left-icon {
				width: 10px;
				height: 10px;
			}
			.box4-item-left-line {
				width: 1px;
				height: 145px;
				position: absolute;
				top: 15px;
				border-left: 1px solid rgba(10, 87, 166, 0.3);
			}
		}
		.box4-item-right {
			display: flex;
			flex-direction: column;
			gap: 5px;
			.box4-item-right-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 12px;
				border-bottom: 1px solid rgba(234, 236, 238, 1);
				&-title {
					font-size: 18px;
					color: $base-color;
					font-weight: 700;
				}
				&-desc {
					font-size: 16px;
					font-weight: 700;
					color: rgba(59, 65, 75, 1);
				}
			}
			.box4-item-right-content {
				margin-top: 10px;
				font-size: 16px;
				font-weight: 400;
				color: rgba(95, 101, 108, 1);
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				text-overflow: ellipsis;
				height: 70px;
				line-height: 25px;
			}
		}
	}
	.box4-footer {
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 30px;
		left: 50%;
		margin-left: -20px;
	}
}

.box5 {
	height: 115%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
:deep(.table-header) {
	font-size: 16px;
	font-weight: 700;

	color: rgba(59, 65, 75, 1);
}
:deep(.table-row) {
	height: 64px;
}
.domain-tags {
	display: flex;
	gap: 8px;
}

.box5-header-right {
	font-size: 16px;
	font-weight: 700;
	color: $base-color;
}

.table-footer {
	margin-top: 20px;
}

.home-wrapper {
	.home-main {
		// width: 1400px;
		padding: 0 5%;
		margin: 0 auto;
		background: url("./assets/images/background.png");
		background-size: 100% 100%;
		.home-main-header {
			margin-top: 43px;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 20px;
			.home-main-header-top {
				height: 30px;
				color: rgba(95, 101, 108, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 30px;
				margin-top: 43px;
			}
			.home-main-header-center {
				margin: 0 auto;
				margin-top: 20px;
				width: 800px;
				height: 48px;
				border-radius: 10px;
				box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
				background: rgba(255, 255, 255, 1);
				box-sizing: border-box;
				padding: 1px;
				position: relative;
				border: 1px solid transparent;
				&:hover {
					border: 1px solid var(--color-main-active);
				}
				.search {
					position: absolute;
					right: -1px;
					top: 0px;
					width: 120px;
					height: 46px;
					border-radius: 10px;
					background: var(--color-main-active);
					display: flex;
					justify-content: center;
					align-items: center;
					cursor: pointer;
					.search-icon {
						width: 18px;
						height: 18px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.search-text {
						margin-left: 8px;
						height: 22px;
						color: #fff;
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 22px;
					}
				}
			}
			.home-main-header-footer {
				margin-top: 38px;
				width: 700px;
				height: 64px;
				box-sizing: border-box;
				padding: 0 108px;
				display: flex;
				justify-content: space-between;
				.home-main-header-footer-item {
					padding: 0 10px;
					text-align: center;
					.item-top {
						height: 22px;
						color: rgba(20, 89, 187, 1);
						font-family: Microsoft YaHei;
						font-size: 36px;
						font-weight: 700;
						line-height: 22px;
					}
					.item-footer {
						margin-top: 10px;
						height: 30px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
					}
				}
			}
			.home-main-header-footer-link {
				display: flex;
				justify-content: center;
				padding: 30px 0;
				gap: 16px;
			}
			.home-main-header-footer-info {
				width: 1600px;
				display: flex;
				justify-content: space-between;
				padding: 30px 0;
				.card {
					box-sizing: border-box;
					width: 792px;
					height: 142px;
					box-sizing: border-box;
					border: 1px solid rgba(255, 255, 255, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 0.65);
					position: relative;
					transition: transform 0.3s ease, box-shadow 0.3s ease;
					cursor: pointer;
					&:hover {
						transform: translateY(-3px);
						box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
					}
					.icon {
						position: absolute;
						width: 4px;
						height: 111px;
						top: 15px;
						left: 0;
					}
					.title {
						margin-top: 23px;
						height: 31px;
						margin-left: 30px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 24px;
						font-weight: 700;
						line-height: 32px;
						letter-spacing: 0px;
						text-align: left;
					}
					.content {
						margin-top: 17px;
						margin-left: 30px;
						width: 731px;
						height: 48px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: left;
					}
					.num {
						height: 42px;
						text-align: right;
						position: absolute;
						top: 21px;
						right: 31px;
						font-family: Microsoft YaHei;
						font-size: 32px;
						font-weight: 700;
						line-height: 42px;
						letter-spacing: 0px;
					}
				}
			}
			.home-main-header-btn-box {
				width: 688px;
				margin: 0 auto;
				margin-top: 39px;
				display: flex;
				justify-content: space-between;
				.btn {
					display: flex;
					align-items: center;
					gap: 9px;
					width: 160px;
					height: 48px;
					border: 1px solid #aed6ff;
					box-sizing: border-box;
					border-radius: 24px;
					background: #e7f3ff;
					cursor: pointer;
					position: relative;
					&:hover {
						background: #cae3fc;
					}
					.btn-text {
						width: 80px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 400;
						line-height: 48px;
						margin-left: 36px;
						text-align: center;
					}
					.btn-icon {
						position: absolute;
						top: 16px;
						right: 19px;
						width: 6px;
						height: 12px;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
		.home-main-center {
			margin-top: 34px;
			.center-top {
				height: 450px;
				display: flex;
				gap: 20px;
				.box1 {
					display: flex;

					gap: 10px;
					position: relative;
					// .box1-left {
					//   position: absolute;
					//   left: 0;
					//   top: 200px;
					//   width: 24px;
					//   height: 48px;
					//   background: #e7f1ff;
					//   display: flex;
					//   justify-content: center;
					//   align-items: center;
					//   cursor: pointer;
					//   .icon {
					//     width: 11px;
					//     height: 18px;
					//     img {
					//       width: 100%;
					//       height: 100%;
					//     }
					//   }
					// }
					.box1-right {
						display: flex;
						justify-content: center;
						flex-direction: column;
						align-items: center;
						cursor: pointer;
						.icon {
							width: 11px;
							height: 18px;
							img {
								width: 100%;
								height: 100%;
							}
						}
					}
					.box1-header {
						height: 53px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						justify-content: space-between;
						.box1-header-left {
							display: flex;
							.icon {
								width: 18px;
								height: 18px;
								margin-top: 19px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.title {
								height: 22px;
								margin-left: 18px;
								margin-top: 16px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 22px;
							}
						}
						.box1-header-right {
							margin-top: 19px;
							height: 16px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 16px;
							cursor: pointer;
						}
					}
					.box1-main {
						display: flex;
						height: 354px;
						margin-top: 22px;
						.box1-main-top {
							height: 68px;
							display: flex;
							justify-content: space-between;
							.box1-main-top-left {
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 22px;
								letter-spacing: 0px;
								text-align: left;
							}
							.box1-main-top-right {
								margin-left: 20px;
								display: flex;
								.num {
									padding: 1px 8px;
									height: 24px;
									box-sizing: border-box;
									border: 1px solid rgba(145, 202, 255, 1);
									border-radius: 4px;
									background: rgba(230, 244, 255, 1);
								}
								.tag {
									box-sizing: border-box;
									border: 1px solid rgba(135, 232, 222, 1);
									border-radius: 4px;
									background: rgba(230, 255, 251, 1);
								}
							}
						}
					}
				}
				.box2 {
					flex: 1;
					padding-right: 20px;
					height: 450px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: rgba(255, 255, 255, 1);
					position: relative;
					.box2-header {
						height: 54px;
						display: flex;
						.icon {
							width: 24px;
							height: 22px;
							margin-left: 33px;
							margin-top: 18px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							margin-left: 22px;
							margin-top: 16px;
							height: 22px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 22px;
						}
						.num {
							width: 24px;
							height: 16px;
							text-align: center;
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 12px;
							margin-left: 6px;
							margin-top: 17px;
							border: 1px solid rgba(255, 255, 255, 1);
							border-radius: 100px;
							background: rgba(255, 77, 79, 1);
						}
						.more {
							margin-top: 19px;
							margin-left: 256px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 16px;
						}
					}
					.box2-main {
						height: 282px;
						overflow-y: auto;
						.box2-main-item {
							margin-left: 23px;
							height: 47px;
							width: 464px;
							display: flex;
							.itemLeftStatus1 {
								color: rgba(82, 196, 26, 1) !important;
								background: rgba(246, 255, 237, 1) !important;
							}
							.itemLeftStatus2 {
								color: rgba(250, 140, 22, 1) !important;
								background: rgba(255, 247, 230, 1) !important;
							}
							.item-left {
								margin-top: 4px;
								margin-left: 2px;
								width: 40px;
								height: 40px;
								border-radius: 20px;
								background: rgba(255, 241, 240);
								color: rgba(245, 34, 45, 1);
								font-family: Microsoft YaHei;
								font-size: 12px;
								font-weight: 400;
								line-height: 14px;
								box-sizing: border-box;
								padding: 6px 4px;
								text-align: center;
							}
							.item-right {
								margin-left: 13px;
								width: 408px;
								height: 47px;
								border-top: 1px solid rgba(240, 242, 244, 1);
								border-bottom: 1px solid rgba(240, 242, 244, 1);
								display: flex;
								.text {
									width: 348px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 47px;
								}
								.time {
									margin-left: 10px;
									line-height: 47px;
									color: rgba(132, 136, 142, 1);
									font-family: Microsoft YaHei;
									font-size: 14px;
									font-weight: 400;
								}
							}
						}
					}
					.box2-footer {
						position: absolute;
						left: 26px;
						bottom: 20px;
						width: 430px;
						height: 42px;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						border-radius: 6px;
						background: rgba(22, 119, 255, 1);
						cursor: pointer;
						.icon {
							width: 16px;
							height: 16px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							margin-left: 8px;
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
						}
					}
				}
			}
			.center-footer {
				margin-top: 21px;
				height: 450px;
				display: flex;
				.box3 {
					width: 900px;
					height: 450px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: rgba(255, 255, 255, 1);
					.box3-header {
						height: 53px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						padding: 0 20px;
						.box3-header-left {
							display: flex;
							.box3-header-icon {
								margin-top: 15px;
								width: 13px;
								height: 13px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.box3-header-title {
								margin-top: 16px;
								margin-left: 22px;
								height: 22px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 22px;
							}
						}
						.box3-header-right {
							display: flex;
							justify-content: flex-end;
							width: 178px;
							height: 22px;
							.right-box {
								display: flex;
								margin-top: 16px;
								width: 89px;
								height: 22px;
								justify-content: flex-end;
								.icon1 {
									margin-top: 5px;
									width: 12px;
									height: 12px;
									border-radius: 6px;
									background: rgba(20, 89, 187, 1);
								}
								.icon2 {
									margin-top: 5px;
									width: 12px;
									height: 12px;
									border-radius: 6px;
									background: rgba(250, 140, 22, 1);
								}
								.text {
									margin-left: 5px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-size: 14px;
									font-weight: 400;
									line-height: 22px;
								}
							}
						}
					}
					.box3-main {
						height: 397px;
					}
				}
				.box4 {
					margin-left: 20px;
					width: 521px;
					height: 450px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: rgba(255, 255, 255, 1);
					.box4-header {
						width: 452px;
						margin: 0 auto;
						height: 53px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						.header-icon {
							margin-top: 18px;
							width: 18px;
							height: 18px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.header-title {
							margin-top: 16px;
							margin-left: 26px;
							height: 22px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 22px;
						}
					}
					.box4-main {
						width: 452px;
						margin: 0 auto;
						margin-top: 8px;
						height: 360px;
						overflow-y: auto;
						.box4-main-item {
							margin-top: 6px;
							height: 30px;
							display: flex;
							.leftStatus3 {
								color: rgba(255, 197, 61, 1) !important;
							}
							.leftStatus2 {
								color: rgba(255, 169, 64, 1) !important;
							}
							.left {
								width: 44px;
								text-align: left;
								font-family: Microsoft YaHei;
								font-size: 18px;
								font-weight: 700;
								line-height: 30px;
								color: rgba(206, 79, 81, 1);
							}
							.center {
								width: 300px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
							}
							.right {
								width: 108px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 30px;
								text-align: right;
							}
						}
					}
				}
			}
		}
		.home-main-footer {
			// width: 100%;
			height: 911px;
			background: rgba(248, 249, 250, 1);
			.home-main-footer-header {
				margin-top: 37px;
				margin-bottom: 36px;
				// width: 1600px;
				height: 42px;
				// background: orange;
				display: flex;
				justify-content: space-between;
				.btn-box {
					width: 1300px;
					display: flex;
					justify-content: space-between;
					.btn {
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 42px;
						padding: 0 24px;
						border-radius: 21px;
						background: rgba(20, 89, 187, 0);
						cursor: pointer;
						&:hover {
							background: rgba(20, 89, 187, 0.1);
						}
					}
					.btnActive {
						padding: 0 24px;
						border-radius: 21px;
						background: rgba(20, 89, 187, 1);
						color: #fff;
						&:hover {
							color: #fff;
							background: rgba(20, 89, 187, 1);
						}
					}
				}
				.select-box {
					height: 42px;
					box-sizing: border-box;
					padding: 5px 0;
				}
			}
			.home-main-footer-main {
				width: 100%;
				// background: orange;
				display: flex;
				flex-wrap: wrap;
				// justify-content: space-between;
				// justify-content: center;
				.main-item {
					width: 240px;
					height: 320px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: #fff;
					margin-bottom: 24px;
					margin-right: 25px;
					.main-item-box1 {
						margin-top: 20px;
						margin-left: 45px;
						width: 150px;
						height: 200px;
						box-sizing: border-box;
						border: 1px solid rgba(240, 242, 244, 1);

						img {
							width: 100%;
							height: 100%;
						}
					}
					.main-item-box2 {
						margin-top: 26px;
						text-align: center;
						height: 30px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 30px;
					}
					.main-item-box3 {
						text-align: center;
						height: 30px;
						color: rgba(132, 136, 142, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
					}
				}
			}
		}
	}
}
:deep(.el-input__wrapper) {
	box-shadow: none;
	border-radius: 10px;
}
:deep(.el-input__wrapper) {
	box-shadow: none;
}
:deep(.el-input__wrapper:hover) {
	box-shadow: none !important;
}

:deep(.el-input__wrapper.is-focus) {
	box-shadow: none !important;
}
</style>
