<template>
	<div class="home-wrapper">
		<div class="search-header" v-show="isShow">
			<div class="home-main-header-center">
				<el-input v-model="input" style="width: 680px; height: 100%" placeholder="搜索科技法案" />
				<div class="search">
					<div class="search-icon">
						<img src="./assets/images/search-icon.png" alt="" />
					</div>
					<div class="search-text">搜索</div>
				</div>
			</div>
			<div class="home-main-header-btn-box">
				<div class="btn">
					<div class="btn-text">{{ "最新动态" }}</div>
					<div class="btn-icon">{{ ">" }}</div>
				</div>
				<div class="btn">
					<div class="btn-text">{{ "资讯要闻" }}</div>
					<div class="btn-icon">{{ ">" }}</div>
				</div>
				<div class="btn">
					<div class="btn-text">{{ "统计概览" }}</div>
					<div class="btn-icon">{{ ">" }}</div>
				</div>
				<div class="btn">
					<div class="btn-text">{{ "资源库" }}</div>
					<div class="btn-icon">{{ ">" }}</div>
				</div>
			</div>
		</div>
		<div class="home-box" :class="{ scrollHomeBox: isShow }" ref="containerRef">
			<div class="home-header" v-show="!isShow">
				<span>国家科技安全 </span>> <span>中美博弈概览 </span>>
				<span>科技法案 </span>
			</div>
			<div class="home-main">
				<div class="home-main-header" v-show="!isShow">
					<div class="home-main-header-center">
						<el-input v-model="input" style="width: 800px; height: 100%" placeholder="搜索科技法案" />
						<div class="search">
							<div class="search-icon">
								<img src="./assets/images/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">3.8T</div>
							<div class="item-footer">数据量</div>
						</div>
						<div class="home-main-header-footer-item">
							<div class="item-top">14433</div>
							<div class="item-footer">科技动向</div>
						</div>
						<div class="home-main-header-footer-item">
							<div class="item-top">1986</div>
							<div class="item-footer">提出法案</div>
						</div>
						<div class="home-main-header-footer-item">
							<div class="item-top">341</div>
							<div class="item-footer">通过法案</div>
						</div>
						<div class="home-main-header-footer-item">
							<div class="item-top">285</div>
							<div class="item-footer">分析报告</div>
						</div>
					</div>
					<div class="home-main-header-btn-box">
						<div class="btn">
							<div class="btn-text">{{ "最新动态" }}</div>
							<div class="btn-icon">{{ ">" }}</div>
						</div>
						<div class="btn">
							<div class="btn-text">{{ "资讯要闻" }}</div>
							<div class="btn-icon">{{ ">" }}</div>
						</div>
						<div class="btn">
							<div class="btn-text">{{ "统计概览" }}</div>
							<div class="btn-icon">{{ ">" }}</div>
						</div>
						<div class="btn">
							<div class="btn-text">{{ "资源库" }}</div>
							<div class="btn-icon">{{ ">" }}</div>
						</div>
					</div>
				</div>
				<DivideHeader class="divide1" :titleText="'最新动态'"></DivideHeader>
				<div class="home-main-center">
					<div class="center-top">
						<div class="box1">
							<div class="box1-left" @click="handleSwithCurBill('left')">
								<div class="icon">
									<img src="./assets/images/box1-left.png" alt="" />
								</div>
							</div>
							<div class="box1-right" @click="handleSwithCurBill('right')">
								<div class="icon">
									<img src="./assets/images/box1-right.png" alt="" />
								</div>
							</div>
							<div class="box1-header">
								<div class="box1-header-left">
									<div class="icon">
										<img src="./assets/images/box1-header-icon.png" alt="" />
									</div>
									<div class="title">{{ "热门法案" }}</div>
								</div>
								<div class="box1-header-right" @click="handleClickToDetail()">
									{{ "查看详情 >" }}
								</div>
							</div>
							<div class="box1-main">
								<div class="box1-main-left">
									<div class="box1-main-left-title">
										<!-- "H.R.1(119th)-大而美法案" -->
										{{ curBill.billName }}
									</div>
									<div class="box1-main-left-info">
										<div
											class="info-box"
											:class="{
												info1: item.status === 1,
												info2: item.status === 2,
												info3: item.status === 3,
												info4: item.status === 4
											}"
											v-for="(item, index) in curBill.hylyList"
											:key="index"
										>
											{{ item }}
										</div>
									</div>
									<div class="box1-main-left-info1">
										<div class="info1-box">
											<div class="icon"></div>
											<div class="info1-box-left">{{ "提案人：" }}</div>
											<div class="info1-box-right">{{ curBill.tarName }}</div>
										</div>
										<div class="info1-box">
											<div class="icon"></div>
											<div class="info1-box-left">{{ "提出时间：" }}</div>
											<div class="info1-box-right">
												{{ curBill.introductionDate }}
											</div>
										</div>
									</div>
									<div class="box1-main-left-info2">
										<div class="time-line" :style="{ height: 38 * 3 + 'px' }"></div>
										<div class="info2-item" v-for="(item, index) in curBill.dyqkList" :key="index">
											<div class="item-icon">
												<img src="./assets/images/info2-icon.png" alt="" />
											</div>
											<div class="item-time" :class="{ itemTimeActive: item.status === 1 }">
												{{ item.dysj }}
											</div>
											<div class="item-title" :class="{ itemTitleActive: item.status === 1 }">
												{{ item.dyms }}
											</div>
										</div>
									</div>
								</div>
								<div class="box1-main-right">
									<img src="./assets/images/box1-main-right-img.png" alt="" />
									<div class="inner-box">
										<div class="inner-box-header">
											<div class="inner-box-title">
												{{ "大而美法案涉险通过参议院表决，众议院将继续..." }}
											</div>
											<div class="inner-box-time">{{ "1小时前" }}</div>
										</div>
										<div class="inner-box-content">
											{{
												"三名美国共和党众议员(2025年7月21日)致函几家美国科技巨头公司的负责人，询问他们是否已经采取了充分的安全保障措施以有效解..."
											}}
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="box2">
							<div class="box2-header">
								<div class="icon">
									<img src="./assets/images/box2-header-icon.png" alt="" />
								</div>
								<div class="title">
									<div class="text">{{ "风险信号" }}</div>
									<div class="num">{{ warningList.length }}</div>
								</div>
							</div>
							<div class="box2-main">
								<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
									<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>
							<div class="box2-footer">
								<div class="icon">
									<img src="./assets/images/box2-footer-icon.png" alt="" />
								</div>
								<div class="text">{{ "风险处理" }}</div>
							</div>
						</div>
					</div>
					<DivideHeader class="divide2" :titleText="'资讯要闻'"></DivideHeader>
					<div class="center-center">
						<div class="box3">
							<div class="box3-header">
								<div class="box3-header-left">
									<div class="box3-header-icon">
										<img src="./assets/images/box3-header-icon.png" alt="" />
									</div>
									<div class="box3-header-title">{{ "新闻资讯" }}</div>
									<div class="more">{{ "更多 +" }}</div>
								</div>
							</div>
							<div class="box3-main">
								<div class="box3-item" v-for="(news, index) in newsList" :key="index">
									<div class="left">
										<img :src="news.img" alt="" />
									</div>
									<div class="right">
										<div class="right-top">
											<div class="title">{{ news.title }}</div>
											<div class="time">{{ news.from }}</div>
										</div>
										<div class="right-footer">{{ news.content }}</div>
									</div>
								</div>
							</div>
						</div>
						<div class="box4">
							<div class="box4-header">
								<div class="header-icon">
									<img src="./assets/images/box4-header-icon.png" alt="" />
								</div>
								<div class="header-title">{{ "社交媒体" }}</div>
								<div class="more">{{ "更多 +" }}</div>
							</div>
							<div class="box4-main">
								<div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
									<div class="left">
										<img :src="item.img" alt="" />
									</div>
									<div class="right">
										<div class="right-top">
											<div class="name">{{ item.name }}</div>
											<div class="time">{{ item.time }}</div>
										</div>
										<div class="content">{{ item.content }}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<DivideHeader class="divide3" :titleText="'统计概览'"></DivideHeader>
					<div class="center-footer">
						<div class="box5">
							<div class="box5-header">
								<div class="box5-header-left">
									<div class="box5-header-icon">
										<img src="./assets/images/box5-header-icon.png" alt="" />
									</div>
									<div class="box5-header-title">{{ "涉华法案数量" }}</div>
								</div>
								<div class="box5-header-right">
									<div class="header-right-icon">
										<img src="./assets/images/tips-icon.png" alt="" />
									</div>
									<div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div>
								</div>
							</div>
							<div class="box5-main" id="chart1"></div>
						</div>
						<div class="box6">
							<div class="box6-header">
								<div class="header-icon">
									<img src="./assets/images/box6-header-icon.png" alt="" />
								</div>
								<div class="header-title">{{ "关键条款" }}</div>
								<div class="box6-header-right">
									<div class="header-right-icon">
										<img src="./assets/images/tips-icon.png" alt="" />
									</div>
									<div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div>
								</div>
							</div>
							<div class="box6-main" id="wordCloudChart"></div>
						</div>
					</div>
					<div class="center-footer1">
						<div class="box7">
							<div class="box7-header">
								<div class="box7-header-left">
									<div class="box7-header-icon">
										<img src="./assets/images/box7-header-icon.png" alt="" />
									</div>
									<div class="box7-header-title">{{ "法案提出部门" }}</div>
								</div>
								<div class="box7-header-right">
									<div class="header-right-icon">
										<img src="./assets/images/tips-icon.png" alt="" />
									</div>
									<div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div>
								</div>
							</div>
							<div class="box-center">
								<el-select v-model="box7selectetedTime" placeholder="选择时间" style="width: 90px">
									<el-option
										v-for="item in box7YearList"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</el-select>
							</div>
							<div class="box7-main" id="box7Chart"></div>
						</div>
						<div class="box8">
							<div class="box8-header">
								<div class="box8-header-left">
									<div class="box8-header-icon">
										<img src="./assets/images/box7-header-icon.png" alt="" />
									</div>
									<div class="box8-header-title">{{ "关键议员提案" }}</div>
								</div>
								<div class="box8-header-right">
									<div class="header-right-icon">
										<img src="./assets/images/tips-icon.png" alt="" />
									</div>
									<div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div>
								</div>
							</div>
							<div class="box-center">
								<el-select v-model="box8selectetedTime" placeholder="选择时间" style="width: 90px">
									<el-option
										v-for="item in box8YearList"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</el-select>
							</div>
							<div class="box8-main">
								<div class="box8-main-item" v-for="(item, index) in box8Data" :key="index">
									<div class="box8-main-item-left">
										<img :src="item.img" alt="" />
										<div class="left-icon1">
											<img :src="item.dangpai" alt="" />
										</div>
										<div class="left-icon2">
											<img :src="item.yuan" alt="" />
										</div>
									</div>
									<div class="box8-main-item-center">
										<div class="box8-main-item-center-top">{{ item.name }}</div>
										<div class="box8-main-item-center-footer">{{ item.zhiwei }}</div>
									</div>
									<div class="box8-main-item-right">
										{{ `${item.num}项提案 >` }}
									</div>
								</div>
							</div>
						</div>
						<div class="box9">
							<div class="box9-header">
								<div class="box9-header-left">
									<div class="box9-header-icon">
										<img src="./assets/images/box7-header-icon.png" alt="" />
									</div>
									<div class="box9-header-title">{{ "涉华法案领域分布" }}</div>
								</div>
								<div class="box9-header-right">
									<div class="header-right-icon">
										<img src="./assets/images/tips-icon.png" alt="" />
									</div>
									<div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div>
								</div>
							</div>
							<div class="box-center">
								<el-select v-model="box9selectetedTime" placeholder="选择时间" style="width: 90px">
									<el-option
										v-for="item in box9YearList"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</el-select>
							</div>
							<div class="box9-main" id="box9Chart"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="home-main-footer">
				<DivideHeader class="divide4" :titleText="'资源库'"></DivideHeader>
				<div class="home-main-footer-header">
					<div class="btn-wrapper">
						<div class="btn-box">
							<div
								class="btn"
								:class="{ btnActive: activeCate === cate.hylymc }"
								v-for="(cate, index) in categoryList"
								:key="index"
								@click="handleClickCate(cate)"
							>
								{{ cate.hylymc }}
							</div>
						</div>
					</div>

					<div class="select-box">
						<el-select v-model="releaseTime" placeholder="选择发布时间" style="width: 120px">
							<el-option
								v-for="item in releaseTimeList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
						<!-- <el-select
              v-model="releaseTime"
              placeholder="选择发布时间"
              style="width: 120px"
            >
              <el-option
                v-for="item in releaseTimeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select> -->
					</div>
				</div>
				<div class="home-main-footer-main">
					<div class="main-item" v-for="(bill, index) in curBillList" :key="index">
						<div
							class="status-box"
							:class="{
								statusBox1: bill.status === '特别重大风险',
								statusBox2: bill.status === '重大风险',
								statusBox3: bill.status === '一般风险'
							}"
						>
							<div
								class="status-icon"
								:class="{
									statusIcon1: bill.status === '特别重大风险',
									statusIcon2: bill.status === '重大风险',
									statusIcon3: bill.status === '一般风险'
								}"
							></div>
							<div
								class="status-text"
								:class="{
									status1: bill.status === '特别重大风险',
									status2: bill.status === '重大风险',
									status3: bill.status === '一般风险'
								}"
							>
								{{ bill.status }}
							</div>
						</div>
						<div class="main-item-box1">
							<img :src="bill.img" alt="" />
						</div>
						<div class="main-item-box2">
							{{ bill.billName }}
						</div>
						<div class="main-item-box3">{{ bill.introductionDate }}</div>
						<div class="main-item-box4">
							<span>{{ bill.yuan }}</span
							><span>{{ bill.dangpai }}</span>
						</div>
						<div class="main-item-box5">
							<div class="tag" v-for="(tag, idx) in bill.tagList" :key="idx">{{ tag }}</div>
						</div>
					</div>
				</div>
				<div class="home-main-footer-footer">
					<div class="footer-left">
						{{ `共${billList.length}项调查` }}
					</div>
					<div class="footer-right">
						<el-pagination
							@current-change="handleCurrentChange"
							:pageSize="12"
							:current-page="currentPage"
							background
							layout="prev, pager, next"
							:total="billList.length"
						/>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import router from "@/router/index";

import { getHotBills, getBillsByType, getHylyList } from "@/api/home";
import DivideHeader from "@/components/DivideHeader.vue";

import { useContainerScroll } from "@/hooks/useScrollShow";

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 getWordCloudChart from "./utils/worldCloudChart";
import getPieChart from "./utils/piechart";
import getDoublePieChart from "./utils/doublePieChart";

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 News1 from "./assets/images/news1.png";
import News2 from "./assets/images/news2.png";
import News3 from "./assets/images/news3.png";
import News4 from "./assets/images/news4.png";
import News5 from "./assets/images/news5.png";

import Message1 from "./assets/images/message-icon1.png";
import Message2 from "./assets/images/message-icon2.png";
import Message3 from "./assets/images/message-icon3.png";

import Box8Img1 from "./assets/images/box8-icon1.png";
import Box8Img2 from "./assets/images/box8-icon2.png";
import Box8Img3 from "./assets/images/box8-icon3.png";
import Box8Img4 from "./assets/images/box8-icon4.png";
import Box8Img5 from "./assets/images/box8-icon5.png";

import Cyy from "@/assets/icons/cyy.png";
import Zyy from "@/assets/icons/zyy.png";
import Ghd from "@/assets/icons/ghd.png";
import Mzd from "@/assets/icons/mzd.png";

const currentPage = ref(1);
// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
};

const containerRef = ref(null);
const { isShow } = useContainerScroll(containerRef);

const hotBillList = ref([]); // 热门法案列表
const curHotBillListIndex = ref(0); // 当前热门法案索引

// 切换热门法案
const handleSwithCurBill = name => {
	if (name === "left") {
		if (curHotBillListIndex.value === 0) {
			curHotBillListIndex.value = hotBillList.value.length - 1;
		} else {
			curHotBillListIndex.value--;
		}
	} else {
		if (curHotBillListIndex.value === hotBillList.value.length - 1) {
			curHotBillListIndex.value = 0;
		} else {
			curHotBillListIndex.value++;
		}
	}
	curBill.value = hotBillList.value[curHotBillListIndex.value];
};

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

// 查看详情
const handleClickToDetail = () => {
	window.sessionStorage.setItem("billId", curBill.value.billId);
	router.push("/billLayout");
};

// 风险信号
const warningList = ref([
	{
		title: "美国大而美法案落地，总统签署通过",
		time: "一天前",
		status: "特别重大"
	},
	{
		title: "美大而美法案7月1日以51:50的票数通过...",
		time: "一天前",
		status: "特别重大"
	},
	{
		title: "首次提出“限制外国敏感实体获取补贴”",
		time: "一天前",
		status: "重大风险"
	},
	{
		title: "将中国企业海外子公司、合资公司纳入受...",
		time: "一天前",
		status: "重大风险"
	},
	{
		title: "H.R.8333《生物安全法案》将华大基因等...",
		time: "一天前",
		status: "一般风险"
	}
]);

// 资源库 法案列表
const billList = ref([
	{
		billName: "大而美法案",
		introductionDate: "2025年7月4日",
		status: "特别重大风险",
		tagList: ["集成电路", "人工智能"],
		img: bill1,
		yuan: "众议院",
		dangpai: "共和党"
	},
	{
		billName: "GENIUS稳定币法案",
		introductionDate: "2025年7月5日",
		status: "",
		tagList: ["集成电路", "人工智能"],
		img: bill2,
		yuan: "众议院",
		dangpai: "共和党"
	},
	{
		billName: "美越贸易协议",
		introductionDate: "2025年7月6日",
		status: "",
		tagList: ["集成电路", "人工智能"],
		img: bill3,
		yuan: "众议院",
		dangpai: "共和党"
	},
	{
		billName: "美越贸易协议",
		introductionDate: "2025年7月7日",
		status: "特别重大风险",
		tagList: ["集成电路", "人工智能"],
		img: bill4,
		yuan: "众议院",
		dangpai: "共和党"
	},
	{
		billName: "汽车零部件25%关税实施规则",
		introductionDate: "2025年7月10日",
		status: "重大风险",
		tagList: ["集成电路", "人工智能"],
		img: bill5,
		yuan: "众议院",
		dangpai: "共和党"
	},
	{
		billName: "汽车零部件25%关税实施规则",
		introductionDate: "2025年7月12日",
		status: "",
		tagList: ["集成电路", "人工智能"],
		img: bill6,
		yuan: "众议院",
		dangpai: "共和党"
	},
	{
		billName: "小额豁免包裹政策调整",
		introductionDate: "2025年7月14日",
		status: "特别重大风险",
		tagList: ["集成电路", "人工智能"],
		img: bill7,
		yuan: "众议院",
		dangpai: "共和党"
	},
	{
		billName: "NIH预算否决案",
		introductionDate: "2025年7月15日",
		status: "重大风险",
		tagList: ["集成电路", "人工智能"],
		img: bill8,
		yuan: "众议院",
		dangpai: "共和党"
	},
	{
		billName: "得州国会选区重划法案",
		introductionDate: "2025年7月17日",
		status: "一般风险",
		tagList: ["集成电路", "人工智能"],
		img: bill9,
		yuan: "众议院",
		dangpai: "共和党"
	},
	{
		billName: "美越贸易协议",
		introductionDate: "2025年7月24日",
		status: "",
		tagList: ["集成电路", "人工智能"],
		img: bill10,
		yuan: "众议院",
		dangpai: "共和党"
	},
	{
		billName: "美越贸易协议",
		introductionDate: "2025年8月4日",
		status: "",
		tagList: ["集成电路", "人工智能"],
		img: bill11,
		yuan: "众议院",
		dangpai: "共和党"
	},
	{
		billName: "美越贸易协议",
		introductionDate: "2025年8月8日",
		status: "特别重大风险",
		tagList: ["集成电路", "人工智能"],
		img: bill12,
		yuan: "众议院",
		dangpai: "共和党"
	},
	{
		billName: "美越贸易协议",
		introductionDate: "2025年8月8日",
		status: "特别重大风险",
		tagList: ["集成电路", "人工智能"],
		img: bill12,
		yuan: "众议院",
		dangpai: "共和党"
	}
]);

// 当前展示法案列表
const curBillList = computed(() => {
	const startIndex = (currentPage.value - 1) * 12;
	const endIndex = startIndex + 12;
	return billList.value.slice(startIndex, endIndex);
});

const box7selectetedTime = ref("2025");
const box7YearList = ref([
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	},
	{
		label: "2022",
		value: "2022"
	}
]);

const box8selectetedTime = ref("2025");
const box8YearList = ref([
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	},
	{
		label: "2022",
		value: "2022"
	}
]);

const box9selectetedTime = ref("2025");
const box9YearList = ref([
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	},
	{
		label: "2022",
		value: "2022"
	}
]);

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();
};

// 绘制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 newsList = ref([
	{
		img: News1,
		title: "美政府停摆仍持续，拨款法案存缺陷，但两党磋商露曙光",
		content: `美国政府停摆已持续34天，距离历史上最长的停摆纪录仅差一天，参议院已先后13次尝试...`,
		from: "11-4 · 华盛顿邮报"
	},
	{
		img: News2,
		title: "美参议院通过决议，要求终止特朗普全球关税政策",
		content: `参议院以51票赞成、47票反对通过一项决议，旨在终止特朗普实施的全面关税政策，四名......`,
		from: "11-4 · 纽约时报"
	},
	{
		img: News3,
		title: "美众院通过950亿美元对外援助法案，包含对台军援",
		content: `国会众议院在4月通过了大规模对外援助法案，其中包括为“印太安全”提供资金的条款，......`,
		from: "11-3 · 洛杉矶时报"
	},
	{
		img: News4,
		title: "“大而美”法案在激烈争议中通过",
		content: `特朗普力推的大规模税收与支出法案在国会以微弱优势通过。该法案因大幅削减医疗补助和......`,
		from: "11-3 · 今日美国"
	},
	{
		img: News5,
		title: "美政府“停摆”追平历史最长纪录，民生多领域受重创",
		content: `联邦政府“停摆”进入第35天，追平历史纪录。食品救济项目资金中断，数百万低收入民......`,
		from: "11-2 ·  ​福克斯新闻网"
	}
]);

// 社交媒体
const messageList = ref([
	{
		img: Message1,
		name: "唐纳德·特朗普",
		time: "15:23 · 发布于真实社交",
		content: `埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。`
	},
	{
		img: Message2,
		name: "埃隆·马斯克",
		time: "14:49 · 发布于X",
		content: `如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。`
	},
	{
		img: Message3,
		name: "塞巴斯蒂安·马拉比",
		time: "11:05 · 发布于X",
		content: `提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。`
	}
]);

// 获取热门法案
const handleGetHotBills = async () => {
	try {
		const res = await getHotBills();
		console.log("热门法案", res);
		hotBillList.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);
		billList.value = res.data.map(item => {
			return {
				billId: item.billId,
				billName: item.billName,
				introductionDate: item.introductionDate,
				img: bill1
			};
		});
	} catch (error) {}
};

const wordCloudData = ref([
	{ name: "限制中国获取能源技术", value: 100 },
	{ name: "未实现赤字控制目标", value: 66 },
	{ name: "关注核聚变能源研究", value: 77 },
	{ name: "抵制外国人才争夺", value: 35 },
	{ name: "进行可再生能源税收减免", value: 88 },
	{ name: "评估中美现代化技术", value: 57 },
	{ name: "应对中国制造2025战略", value: 72 },
	{ name: "实施能源税收延期", value: 18 },
	{ name: "限制采购中国产电池", value: 34 },
	{ name: "加强美国在核能领域得到领导力", value: 16 },
	{ name: "发展替代燃料", value: 72 },
	{ name: "发展风能", value: 58 },
	{ name: "发展太阳能", value: 24 },
	{ name: "施加额外能源出口限制", value: 33 },
	{ name: "评估中美能源技术", value: 47 },
	{ name: "禁止资助中国能源项目", value: 32 },
	{ name: "不得向中国机构提供援助", value: 62 },
	{ name: "开展先进生物能源计划", value: 51 },
	{ name: "减少燃料对外依赖", value: 81 },
	{ name: "加强供应链风险管理", value: 73 }
]);

const box9ChartData = ref([
	{
		name: "半导体",
		value: 50
	},
	{
		name: "电子设备",
		value: 46
	},
	{
		name: "显示技术",
		value: 40
	},
	{
		name: "新能源",
		value: 32
	},
	{
		name: "通信设备",
		value: 31
	},
	{
		name: "汽车",
		value: 30
	},
	{
		name: "其他",
		value: 24
	}
]);

const box7Data = ref([
	[
		{
			name: '众议院',
			value: 298
		},
		{
			name: '参议院',
			value: 149
		}
		
	],
	[
		{
			name: '拨款委员会',
			value: 50,
			type: '众议院'
		},
		{
			name: '筹款委员会',
			value: 50,
			type: '众议院'
		},
		{
			name: '外交事务委员会',
			value: 46,
			type: '众议院'
		},
		{
			name: '国土安全委员会',
			value: 40,
			type: '众议院'
		},
		{
			name: '司法委员会',
			value: 40,
			type: '众议院'
		},
		{
			name: '军事委员会',
			value: 40,
			type: '众议院'
		},
		{
			name: '能源和商业委员会',
			value: 32,
			type: '众议院'
		},
		{
			name: '拨款委员会1',
			value: 32,
			type: '参议院'
		},
		{
			name: '财政委员会',
			value: 31,
			type: '参议院'
		},
		{
			name: '能源',
			value: 30,
			type: '参议院'
		},
		{
			name: '能源1',
			value: 30,
			type: '参议院'
		},
		{
			name: '其他',
			value: 24,
			type: '参议院'
		}
		
	]
])

const box8Data = ref([
	{
		name: "汤姆·科顿",
		zhiwei: "参议院情报委员会主席",
		img: Message3,
		dangpai: Cyy,
		yuan: Ghd,
		num: 8
	},
	{
		name: "吉姆·里施",
		zhiwei: "参议院外交关系委员会主席",
		img: Message3,
		dangpai: Cyy,
		yuan: Ghd,
		num: 4
	},
	{
		name: "特德·克鲁兹",
		zhiwei: "参议院商务、科学和交通委员会主席",
		img: Message3,
		dangpai: Cyy,
		yuan: Ghd,
		num: 2
	},
	{
		name: "里克·克劳福德",
		zhiwei: "众议院美中战略竞争特设委员会主席",
		img: Message3,
		dangpai: Cyy,
		yuan: Ghd,
		num: 2
	},
	{
		name: "布莱恩·马斯特",
		zhiwei: "众议院情报委员会主席",
		img: Message3,
		dangpai: Cyy,
		yuan: Ghd,
		num: 2
	}
]);

const box9ChartColorList = ref(["#4096FF", "#FFA39E", "#ADC6FF", "#FFC069", "#B5F5EC", "#B37FEB", "#D6E4FF"]);

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

	const wordCloudChart = getWordCloudChart(wordCloudData.value);
	setChart(wordCloudChart, "wordCloudChart");

	const box7Chart = getDoublePieChart(box7Data.value[0], box7Data.value[1])
	setChart(box7Chart, 'box7Chart')

	const box9Chart = getPieChart(box9ChartData.value, box9ChartColorList.value);
	setChart(box9Chart, "box9Chart");
});
</script>

<style lang="scss" scoped>
:deep(.el-input__wrapper) {
	box-shadow: none;
}
.home-wrapper {
	width: 100%;
	height: calc(100vh - 96px);
	position: relative;
	overflow-y: hidden;
	.search-header {
		width: 100%;
		height: 144px;
		background: #fff;
		overflow: hidden;
		.home-main-header-center {
			margin-top: 20px;
			margin-left: 200px;
			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;
			.search {
				position: absolute;
				right: 1px;
				top: 2px;
				width: 120px;
				height: 44px;
				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-btn-box {
			margin-top: 20px;
			margin-left: 200px;
			display: flex;
			gap: 16px;
			.btn {
				display: flex;
				width: 140px;
				height: 36px;
				border: 1px solid #aed6ff;
				box-sizing: border-box;
				border-radius: 18px;
				justify-content: center;
				background: #e7f3ff;
				position: relative;
				cursor: pointer;
				&:hover {
					background: #cae3fc;
				}
				.btn-text {
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 20px;
					font-weight: 400;
					line-height: 36px;
					margin-left: 5px;
				}
				.btn-icon {
					height: 20px;
					line-height: 20px;
					position: absolute;
					top: 6px;
					right: 8px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 20px;
					font-weight: 400;
				}
			}
		}
	}
	.scrollHomeBox {
		width: 100%;
		height: calc(100% - 144px);
		overflow-y: auto;
	}
	.home-box {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		.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/header-bg.png");
			box-sizing: border-box;
			padding-left: 160px;
		}
		.home-main {
			width: 1600px;
			margin: 0 auto;
			margin-top: 48px;
			background: url("./assets/images/background.png");
			background-size: 100% 100%;
			.home-main-header {
				display: flex;
				flex-direction: column;
				align-items: center;
				.home-main-header-center {
					width: 960px;
					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;
					.search {
						position: absolute;
						right: 1px;
						top: 2px;
						width: 120px;
						height: 44px;
						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: 960px;
					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-btn-box {
					margin-top: 36px;
					display: flex;
					.btn {
						display: flex;
						width: 160px;
						height: 48px;
						border: 1px solid #aed6ff;
						box-sizing: border-box;
						border-radius: 24px;
						justify-content: center;
						margin: 0 16px;
						background: #e7f3ff;
						cursor: pointer;
						&:hover {
							background: #cae3fc;
						}
						.btn-text {
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 400;
							line-height: 44px;
							margin-left: 5px;
						}
						.btn-icon {
							margin-left: 20px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 400;
							line-height: 44px;
						}
					}
				}
			}
			.divide1 {
				margin-top: 64px;
				margin-bottom: 36px;
			}
			.home-main-center {
				margin-top: 34px;
				.center-top {
					height: 450px;
					display: flex;
					gap: 20px;
					.box1 {
						width: 1064px;
						height: 450px;
						box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
						background: #fff;
						box-sizing: border-box;
						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 {
							position: absolute;
							right: 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-header {
							height: 48px;
							border-bottom: 1px solid rgba(240, 242, 244, 1);
							display: flex;
							justify-content: space-between;
							box-sizing: border-box;
							padding: 0 40px 0 30px;
							.box1-header-left {
								display: flex;
								.icon {
									width: 18px;
									height: 18px;
									margin-top: 19px;
									img {
										width: 100%;
										height: 100%;
									}
								}
								.title {
									width: 112px;
									height: 48px;
									background: var(--color-main-active);
									margin-left: 18px;
									color: #fff;
									font-family: Microsoft YaHei;
									font-size: 20px;
									font-weight: 700;
									line-height: 48px;
									text-align: center;
								}
							}
							.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;
							box-sizing: border-box;
							padding-left: 31px;
							.box1-main-left {
								margin-left: 39px;
								// flex: 1;
								width: 484px;
								.box1-main-left-title {
									height: 22px;
									color: rgba(20, 89, 187, 1);
									font-family: Microsoft YaHei;
									font-size: 20px;
									font-weight: 700;
									line-height: 22px;
								}
								.box1-main-left-info {
									margin-top: 17px;
									display: flex;
									.info-box {
										height: 30px;
										width: 80px;
										text-align: center;
										overflow: hidden;
										padding: 0 8px;
										box-sizing: border-box;
										border: 1px solid rgba(186, 224, 255, 1);
										border-radius: 4px;
										background: rgba(230, 244, 255, 1);
										color: rgba(22, 119, 255, 1);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 30px;
										margin-right: 8px;
									}
									.info1 {
										border: 1px solid rgba(135, 232, 222, 1);
										background: rgba(230, 255, 251, 1);
										color: rgba(19, 168, 168, 1);
									}
									.info2 {
										border: 1px solid rgba(186, 224, 255, 1);
										background: rgba(230, 244, 255, 1);
										color: rgba(22, 119, 255, 1);
									}
									.info3 {
										border: 1px solid rgba(255, 229, 143, 1);
										background: rgba(255, 251, 230, 1);
										color: rgba(250, 173, 20, 1);
									}
									.info4 {
										border: 1px solid rgba(255, 163, 158, 1);
										background: rgba(255, 241, 240, 1);
										color: rgba(245, 34, 45, 1);
									}
								}
								.box1-main-left-info1 {
									margin-top: 25px;
									margin-left: 4px;
									.info1-box {
										display: flex;
										.icon {
											margin-top: 15px;
											width: 4px;
											height: 4px;
											border-radius: 2px;
											background: rgba(132, 136, 142, 1);
										}
										.info1-box-left {
											margin-left: 18px;
											width: 100px;
											height: 30px;
											color: rgba(95, 101, 108, 1);
											font-family: Microsoft YaHei;
											font-size: 16px;
											font-weight: 400;
											line-height: 30px;
										}
										.info1-box-right {
											margin-left: 64px;
											height: 30px;
											color: rgba(95, 101, 108, 1);
											font-family: Microsoft YaHei;
											font-size: 16px;
											font-weight: 400;
											line-height: 30px;
										}
									}
								}
								.box1-main-left-info2 {
									margin-top: 21px;
									height: 200px;
									width: 400px;
									position: relative;
									.time-line {
										position: absolute;
										z-index: 0;
										top: 15px;
										left: 4px;
										width: 2px;
										background: #e6e7e8;
									}
									.info2-item {
										margin-left: 1px;
										margin-bottom: 8px;
										height: 30px;
										display: flex;
										// background: orange;
										.item-icon {
											margin-top: 2px;
											width: 10px;
											height: 10px;
											position: relative;
											z-index: 1;
											img {
												width: 10px;
												height: 10px;
											}
										}
										.itemTimeActive {
											color: rgba(20, 89, 187, 1) !important;
										}
										.itemTitleActive {
											font-weight: 700 !important;
											color: rgba(20, 89, 187, 1) !important;
										}
										.item-time {
											margin-left: 15px;
											width: 147px;
											height: 30px;
											color: rgba(95, 101, 108, 1);
											font-family: Microsoft YaHei;
											font-size: 16px;
											font-weight: 700;
											line-height: 30px;
										}
										.item-title {
											margin-left: 10px;
											width: 295px;
											height: 30px;
											color: rgba(132, 136, 142, 1);
											font-family: Microsoft YaHei;
											font-size: 16px;
											font-weight: 400;
											line-height: 30px;
										}
									}
								}
							}
							.box1-main-right {
								height: 354px;
								width: 458px;
								border-radius: 4px;
								overflow: hidden;
								position: relative;
								img {
									width: 100%;
									height: 100%;
								}
								.inner-box {
									width: 330px;
									height: 93px;
									background: rgba(10, 18, 30, 0.75);
									position: absolute;
									left: 0;
									bottom: 0;
									box-sizing: border-box;
									padding: 9px 10px 12px 10px;
									.inner-box-header {
										height: 30px;
										display: flex;
										.inner-box-title {
											width: 270px;
											color: rgba(255, 255, 255, 1);
											font-family: Microsoft YaHei;
											font-size: 16px;
											font-weight: 700;
											line-height: 30px;
											overflow: hidden;
											text-overflow: ellipsis;
											white-space: nowrap;
										}
										.inner-box-time {
											width: 60px;
											height: 30px;
											color: rgba(255, 255, 255, 0.65);
											font-family: Microsoft YaHei;
											font-size: 14px;
											font-weight: 400;
											line-height: 30px;
											overflow: hidden;
											text-overflow: ellipsis;
											white-space: nowrap;
										}
									}
									.inner-box-content {
										width: 330px;
										height: 40px;
										overflow: hidden;
										color: rgba(255, 255, 255, 0.8);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 20px;
									}
								}
							}
						}
					}
					.box2 {
						flex: 1;
						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: 48px;
							display: flex;
							box-sizing: border-box;
							padding-right: 20px;
							border-bottom: 1px solid rgba(234, 236, 238, 1);
							.icon {
								width: 24px;
								height: 22px;
								margin-left: 18px;
								margin-top: 18px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.title {
								margin-left: 18px;
								width: 148px;
								height: 48px;
								background: rgba(206, 79, 81, 1);
								display: flex;
								.text {
									margin-left: 16px;
									height: 22px;
									color: #fff;
									font-family: Microsoft YaHei;
									font-size: 20px;
									font-weight: 700;
									line-height: 48px;
								}
								.num {
									width: 24px;
									height: 20px;
									line-height: 20px;
									text-align: center;
									color: rgba(255, 255, 255, 1);
									font-family: Microsoft YaHei;
									font-size: 12px;
									margin-left: 10px;
									margin-top: 15px;
									// border: 1px solid rgba(255, 255, 255, 1);
									border-radius: 100px;
									background: rgba(255, 255, 255, 0.3);
								}
							}
						}
						.box2-main {
							height: 330px;
							overflow-y: auto;
							overflow-x: hidden;
							box-sizing: border-box;
							padding-right: 20px;
							.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-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: 40px;
							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;
							}
						}
					}
				}
				.divide2 {
					margin-top: 68px;
					margin-bottom: 36px;
				}
				.center-center {
					margin-top: 21px;
					height: 450px;
					display: flex;
					.box3 {
						width: 792px;
						height: 450px;
						box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
						background: rgba(255, 255, 255, 1);
						.box3-header {
							height: 48px;
							border-bottom: 1px solid rgba(240, 242, 244, 1);
							margin: 0 auto;
							display: flex;
							justify-content: space-between;
							padding: 0 20px;
							position: relative;
							.box3-header-left {
								display: flex;
								.box3-header-icon {
									margin-top: 16px;
									width: 19px;
									height: 19px;
									img {
										width: 100%;
										height: 100%;
									}
								}
								.box3-header-title {
									margin-top: 16px;
									margin-left: 19px;
									height: 22px;
									color: rgba(20, 89, 187, 1);
									font-family: Microsoft YaHei;
									font-size: 20px;
									font-weight: 700;
									line-height: 22px;
								}
								.more {
									width: 49px;
									height: 24px;
									position: absolute;
									top: 14px;
									right: 27px;
									color: rgba(20, 89, 187, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									cursor: pointer;
								}
							}
						}
						.box3-main {
							height: 402px;
							overflow-y: auto;
							overflow-x: hidden;
							padding-top: 6px;
							.box3-item {
								display: flex;
								height: 77px;
								width: 749px;
								margin-left: 21px;
								border-bottom: 1px solid rgba(240, 242, 244, 1);
								.left {
									width: 72px;
									height: 48px;
									margin-top: 15px;
									img {
										width: 100%;
										height: 100%;
									}
								}
								.right {
									width: 657px;
									margin-left: 20px;
									.right-top {
										width: 657px;
										display: flex;
										justify-content: space-between;
										.title {
											margin-top: 13px;
											width: 520px;
											height: 24px;
											color: rgba(59, 65, 75, 1);
											font-family: Microsoft YaHei;
											font-size: 16px;
											font-weight: 700;
											line-height: 24px;
											overflow: hidden;
											text-overflow: ellipsis;
											white-space: nowrap;
										}
										.time {
											flex: 1;
											text-align: right;
											height: 22px;
											margin-top: 19px;
											color: rgba(95, 101, 108, 1);
											font-family: Microsoft YaHei;
											font-size: 14px;
											font-weight: 400;
											line-height: 22px;
										}
									}
									.right-footer {
										width: 657px;
										height: 24px;
										color: rgba(59, 65, 75, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}
							}
						}
					}
					.box4 {
						margin-left: 20px;
						width: 792px;
						height: 450px;
						box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
						background: rgba(255, 255, 255, 1);
						.box4-header {
							width: 792px;
							height: 48px;
							border-bottom: 1px solid rgba(240, 242, 244, 1);
							display: flex;
							box-sizing: border-box;
							padding-left: 22px;
							position: relative;
							.header-icon {
								margin-top: 15px;
								width: 20px;
								height: 20px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.header-title {
								margin-top: 16px;
								margin-left: 18px;
								height: 22px;
								color: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 22px;
							}
							.more {
								width: 49px;
								height: 24px;
								position: absolute;
								top: 14px;
								right: 27px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								cursor: pointer;
							}
						}
						.box4-main {
							height: 402px;
							overflow-y: auto;
							box-sizing: border-box;
							padding-top: 8px;
							.box4-main-item {
								margin-top: 16px;
								display: flex;
								margin-left: 21px;
								.left {
									margin-top: 5px;
									width: 36px;
									height: 36px;
									img {
										width: 100%;
										height: 100%;
									}
								}
								.right {
									margin-left: 10px;
									width: 690px;
									box-sizing: border-box;
									border: 1px solid rgba(231, 243, 255, 1);
									background: rgba(246, 250, 255, 1);
									padding: 10px 15px;
									.right-top {
										display: flex;
										justify-content: space-between;
										.name {
											height: 24px;
											color: rgba(59, 65, 75, 1);
											font-family: Microsoft YaHei;
											font-size: 16px;
											font-weight: 700;
											line-height: 24px;
										}
										.time {
											height: 30px;
											color: rgba(95, 101, 108, 1);
											font-family: Microsoft YaHei;
											font-size: 16px;
											font-weight: 400;
											line-height: 30px;
										}
									}
									.content {
										color: rgba(59, 65, 75, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
									}
								}
							}
						}
					}
				}
				.divide3 {
					margin-top: 64px;
					margin-bottom: 36px;
				}
				.center-footer {
					margin-top: 21px;
					height: 450px;
					display: flex;
					.box5 {
						width: 1059px;
						height: 450px;
						box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
						background: rgba(255, 255, 255, 1);
						.box5-header {
							height: 53px;
							border-bottom: 1px solid rgba(240, 242, 244, 1);
							margin: 0 auto;
							display: flex;
							justify-content: space-between;
							padding: 0 20px;
							.box5-header-left {
								display: flex;
								.box5-header-icon {
									margin-top: 16px;
									width: 19px;
									height: 19px;
									img {
										width: 100%;
										height: 100%;
									}
								}
								.box5-header-title {
									margin-top: 16px;
									margin-left: 19px;
									height: 22px;
									color: rgba(20, 89, 187, 1);
									font-family: Microsoft YaHei;
									font-size: 20px;
									font-weight: 700;
									line-height: 22px;
								}
							}
							.box5-header-right {
								display: flex;
								justify-content: flex-end;
								gap: 8px;
								height: 24px;
								margin-top: 12px;
								.header-right-icon {
									margin-top: 4px;
									width: 14px;
									height: 16px;
									img {
										width: 100%;
										height: 100%;
									}
								}
								.header-right-text {
									color: rgba(132, 136, 142, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
								}
							}
						}
						.box5-main {
							height: 397px;
						}
					}
					.box6 {
						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);
						.box6-header {
							width: 521px;
							height: 48px;
							border-bottom: 1px solid rgba(240, 242, 244, 1);
							display: flex;
							box-sizing: border-box;
							padding-left: 22px;
							.header-icon {
								margin-top: 15px;
								width: 20px;
								height: 20px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.header-title {
								margin-top: 16px;
								margin-left: 18px;
								height: 22px;
								color: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 22px;
							}
							.box6-header-right {
								margin-left: 130px;
								display: flex;
								justify-content: flex-end;
								gap: 8px;
								height: 24px;
								margin-top: 12px;
								.header-right-icon {
									margin-top: 4px;
									width: 14px;
									height: 16px;
									img {
										width: 100%;
										height: 100%;
									}
								}
								.header-right-text {
									color: rgba(132, 136, 142, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
								}
							}
						}
						.box6-main {
							width: 452px;
							height: 402px;
						}
					}
				}
				.center-footer1 {
					display: flex;
					gap: 16px;
					margin-top: 16px;
					.box7 {
						width: 520px;
						height: 450px;
						box-sizing: border-box;
						border: 1px solid rgba(234, 236, 238, 1);
						border-radius: 10px;
						box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
						background: rgba(255, 255, 255, 1);
						.box7-header {
							height: 53px;
							border-bottom: 1px solid rgba(240, 242, 244, 1);
							margin: 0 auto;
							display: flex;
							justify-content: space-between;
							padding: 0 20px;
							.box7-header-left {
								display: flex;
								.box7-header-icon {
									margin-top: 16px;
									width: 19px;
									height: 19px;
									img {
										width: 100%;
										height: 100%;
									}
								}
								.box7-header-title {
									margin-top: 16px;
									margin-left: 19px;
									height: 22px;
									color: rgba(20, 89, 187, 1);
									font-family: Microsoft YaHei;
									font-size: 20px;
									font-weight: 700;
									line-height: 22px;
								}
							}
							.box7-header-right {
								display: flex;
								justify-content: flex-end;
								gap: 8px;
								height: 24px;
								margin-top: 12px;
								.header-right-icon {
									margin-top: 4px;
									width: 14px;
									height: 16px;
									img {
										width: 100%;
										height: 100%;
									}
								}
								.header-right-text {
									color: rgba(132, 136, 142, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
								}
							}
						}
						.box-center {
							height: 45px;
							padding-right: 20px;
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}
						.box7-main{
							height: 340px;
						}
					}
					.box8 {
						width: 527px;
						height: 450px;
						box-sizing: border-box;
						border: 1px solid rgba(234, 236, 238, 1);
						border-radius: 10px;
						box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
						background: rgba(255, 255, 255, 1);
						.box8-header {
							height: 53px;
							border-bottom: 1px solid rgba(240, 242, 244, 1);
							margin: 0 auto;
							display: flex;
							justify-content: space-between;
							padding: 0 20px;
							.box8-header-left {
								display: flex;
								.box8-header-icon {
									margin-top: 16px;
									width: 19px;
									height: 19px;
									img {
										width: 100%;
										height: 100%;
									}
								}
								.box8-header-title {
									margin-top: 16px;
									margin-left: 19px;
									height: 22px;
									color: rgba(20, 89, 187, 1);
									font-family: Microsoft YaHei;
									font-size: 20px;
									font-weight: 700;
									line-height: 22px;
								}
							}
							.box8-header-right {
								display: flex;
								justify-content: flex-end;
								gap: 8px;
								height: 24px;
								margin-top: 12px;
								.header-right-icon {
									margin-top: 4px;
									width: 14px;
									height: 16px;
									img {
										width: 100%;
										height: 100%;
									}
								}
								.header-right-text {
									color: rgba(132, 136, 142, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
								}
							}
						}
						.box-center {
							height: 45px;
							padding-right: 20px;
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}
						.box8-main {
							height: 340px;
							.box8-main-item {
								margin: 0 auto;
								width: 458px;
								height: 51px;
								margin-bottom: 16px;
								display: flex;
								align-items: center;
								position: relative;
								.box8-main-item-left {
									position: relative;
									width: 42px;
									height: 42px;
									img {
										width: 100%;
										height: 100%;
									}
									.left-icon1 {
										position: absolute;
										left: 2px;
										bottom: -6px;
										width: 20px;
										height: 20px;
										border-radius: 10px;
										background: (255, 255, 255, 0.8);
										box-sizing: border-box;
										padding: 2px;
										img {
											width: 100%;
											height: 100%;
										}
									}
									.left-icon2 {
										position: absolute;
										right: 2px;
										bottom: -6px;
										width: 20px;
										height: 20px;
										border-radius: 10px;
										background: (255, 255, 255, 0.8);
										box-sizing: border-box;
										padding: 2px;
										img {
											width: 100%;
											height: 100%;
										}
									}
								}
								.box8-main-item-center {
									height: 48px;
									margin-left: 12px;
									.box8-main-item-center-top {
										height: 24px;
										color: rgba(59, 65, 75, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 700;
										line-height: 24px;
									}
									.box8-main-item-center-footer {
										height: 24px;
										color: rgba(95, 101, 108, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
									}
								}
								.box8-main-item-right {
									position: absolute;
									top: 0;
									right: 0;
									width: 92px;
									height: 51px;
									text-align: right;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 51px;
								}
							}
						}
					}
					.box9 {
						width: 521px;
						height: 450px;
						box-sizing: border-box;
						border: 1px solid rgba(234, 236, 238, 1);
						border-radius: 10px;
						box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
						background: rgba(255, 255, 255, 1);
						.box9-header {
							height: 53px;
							border-bottom: 1px solid rgba(240, 242, 244, 1);
							margin: 0 auto;
							display: flex;
							justify-content: space-between;
							padding: 0 20px;
							.box9-header-left {
								display: flex;
								.box9-header-icon {
									margin-top: 16px;
									width: 19px;
									height: 19px;
									img {
										width: 100%;
										height: 100%;
									}
								}
								.box9-header-title {
									margin-top: 16px;
									margin-left: 19px;
									height: 22px;
									color: rgba(20, 89, 187, 1);
									font-family: Microsoft YaHei;
									font-size: 20px;
									font-weight: 700;
									line-height: 22px;
								}
							}
							.box9-header-right {
								display: flex;
								justify-content: flex-end;
								gap: 8px;
								height: 24px;
								margin-top: 12px;
								.header-right-icon {
									margin-top: 4px;
									width: 14px;
									height: 16px;
									img {
										width: 100%;
										height: 100%;
									}
								}
								.header-right-text {
									color: rgba(132, 136, 142, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
								}
							}
						}
						.box-center {
							height: 45px;
							padding-right: 20px;
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}
						.box9-main {
							height: 340px;
						}
					}
				}
			}
		}
		.home-main-footer {
			width: 100%;
			height: 1160px;
			background: rgba(248, 249, 250, 1);
			margin-bottom: 20px;
			overflow: hidden;
			margin-top: 36px;
			.divide4 {
				margin: 0 auto;
				margin-top: 52px;
				margin-bottom: 36px;
			}
			.home-main-footer-header {
				width: 1600px;
				margin: 0 auto;
				margin-top: 37px;
				margin-bottom: 36px;
				// width: 1600px;
				height: 62px;
				// background: orange;
				display: flex;
				justify-content: space-between;
				.btn-wrapper {
					width: 1300px;
					overflow-x: auto;
					.btn-box {
						display: flex;
						// justify-content: space-between;
						max-width: 2000px;
						.btn {
							max-width: 100px;
							min-width: 80px;
							height: 42px;
							margin: 0 5px;
							overflow: hidden;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 42px;
							text-align: center;
							border-radius: 21px;
							background: rgba(20, 89, 187, 0);
							padding: 0 16px;
							cursor: pointer;
							&:hover {
								background: rgba(20, 89, 187, 0.1);
							}
						}
						.btnActive {
							border-radius: 21px;
							background: rgba(20, 89, 187, 1);
							color: #fff;
							font-weight: 700;
							&: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: 1600px;
				margin: 0 auto;
				// background: orange;
				display: flex;
				flex-wrap: wrap;
				padding: 5px 0px;
				padding-left: 5px;
				overflow: hidden;
				height: 700px;
				.main-item {
					width: 240px;
					height: 320px;
					border-radius: 10px;
					background: linear-gradient(0deg, rgba(255, 255, 255, 1) 44%, rgba(255, 255, 255, 0) 100%);
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: #fff;
					margin-bottom: 24px;
					margin-right: 25px;
					position: relative;
					.status-box {
						position: absolute;
						top: 15px;
						right: 16px;
						height: 28px;
						padding: 0 8px;
						border-radius: 20px;
						display: flex;
						justify-content: center;
						align-items: center;
						gap: 8px;
						.status-icon {
							width: 4px;
							height: 4px;
							border-radius: 2px;
						}
						.statusIcon1 {
							background: rgba(206, 79, 81, 1);
						}
						.statusIcon2 {
							background: rgba(255, 149, 77, 1);
						}
						.statusIcon3 {
							background: rgba(33, 129, 57, 1);
						}
						.status-text {
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							height: 28px;
							line-height: 28px;
						}
						.status1 {
							color: rgba(206, 79, 81, 1);
						}
						.status2 {
							color: rgba(255, 149, 77, 1);
						}
						.status3 {
							color: rgba(33, 129, 57, 1);
						}
					}
					.statusBox1 {
						background: rgba(206, 79, 81, 0.1);
					}
					.statusBox2 {
						background: rgba(255, 149, 77, 0.1);
					}
					.statusBox3 {
						background: rgba(33, 129, 57, 0.1);
					}
					.main-item-box1 {
						margin-top: 20px;
						margin-left: 45px;
						width: 150px;
						height: 200px;
						box-sizing: border-box;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.main-item-box2 {
						width: 188px;
						height: 50px;
						display: flex;
						align-items: flex-end;
						justify-content: center;
						text-align: center;
						margin: 0 auto;
						margin-top: -45px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 18px;
						font-weight: 700;
						line-height: 25px;
					}
					.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;
					}
					.main-item-box4 {
						text-align: center;
						height: 30px;
						color: rgba(132, 136, 142, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
						gap: 15px;
						display: flex;
						justify-content: center;
					}
					.main-item-box5 {
						display: flex;
						width: 188px;
						height: 24px;
						margin: 0 auto;
						overflow: hidden;
						justify-content: center;
						gap: 8px;
						.tag {
							height: 24px;
							border-radius: 4px;
							background: rgba(231, 243, 255, 1);
							color: rgba(5, 95, 194, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 24px;
							padding: 0 8px;
						}
					}
				}
			}
			.home-main-footer-footer {
				width: 1600px;
				margin: 0 auto;
				height: 32px;
				margin-top: 30px;
				display: flex;
				justify-content: space-between;
				.footer-left {
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 32px;
				}
			}
		}
	}
}
</style>