<!--创新主体主页-->
<template>
	<div class="home-wrapper">

		<div class="home-main" ref="containerRef">
			<div class="home-top-bg"></div>
			<div class="home-main-header">
				<!-- <div class="home-main-header-top" v-show="!isShow">
					<div class="header-left">
						<HeaderMenu></HeaderMenu>
					</div>
					<div class="header-right">
						<headerInfo curTitleName="主要创新主体"></headerInfo>
					</div>
				</div> -->
				<div class="home-main-header-center">
					<SearchContainer style="margin-bottom: 0;margin-top: 48px; " v-if="containerRef" placeholder="搜索创新主体"
						:containerRef="containerRef" areaName="" />
					<!-- <el-input v-model="input" style="width: 838px; 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" v-show="!isShow">
					<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">328</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 class="home-main-header-footer-item">
						<div class="item-top">156</div>
						<div class="item-footer">高被引论文数量</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">84</div>
						<div class="item-footer">重要技术进展数量</div>
					</div>
				</div> -->
				<!-- <div class="home-main-header-btn-box" v-show="!isShow">
					<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>
			<DivideHeader id="position1" class="divide" :titleText="'最新动态'" style="margin-top: 50px"></DivideHeader>
			<div class="home-main-center">
				<div class="center-top">
					<div class="box1">
						<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">
								{{ "查看详情 >" }}
							</div>
						</div>
						<div class="box1-main">
							<div class="box1-main-left">
								<div class="box1-main-left-top">
									<div class="box1-main-left-top-item" v-for="item in distributionList" :key="item.name"
										:style="{ backgroundColor: item.color, color: item.textcolor }">
										<div class="box1-main-left-top-item-text1">{{ item.name }}</div>
										<div class="box1-main-left-top-item-text2">{{ item.num }}</div>
									</div>
								</div>
								<div class="box1-main-left-down">
									<div class="box1-main-left-down-item" v-for="(item, index) in zhouList" :key="index" :style="{
										backgroundColor: index % 2 !== 0 ? 'rgba(248, 249, 250, 1)' : 'rgba(255, 255, 255, 1)'
									}">
										<div class="box1-main-left-down-item-index">{{ index + 1 }}</div>
										<div class="box1-main-left-down-item-text">{{ item.countName }}</div>
										<div class="box1-main-left-down-item-num">{{ item.countNum }}</div>
									</div>
								</div>
							</div>
							<div class="box1-main-right">
								<img src="./assets/images/usa.png" alt="" />
							</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.signalLevel === '一般风险',
									itemLeftStatus2: item.signalLevel === '重大风险'
								}">
									{{ item.signalLevel }}
								</div>
								<div class="item-right">
									<div class="text">
										{{ item.signalTitle }}
									</div>
									<div class="time">{{ item.signalTime }}</div>
								</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> -->
					<RiskSignal :list="warningList" @more-click="handleToMoreRiskSignal" riskLevel="signalLevel"
						postDate="signalTime" name="signalTitle" />
				</div>
				<DivideHeader id="position2" 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" @click="handleToMoreNews">{{ "更多 +" }}</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.newsImage" alt="" />
								</div>
								<div class="right">
									<div class="right-top">
										<div class="title">{{ news.newsTitle }}</div>
										<div class="time">{{ news.newsDate + "." + news.newsOrg }}</div>
									</div>
									<div class="right-footer">{{ news.newsContent }}</div>
								</div>
							</div>
						</div>
					</div> -->
					<NewsList style="margin-right:16px" :newsList="newsList" @item-click="handleNewsInfoClick" @more-click="handleToMoreNews"
						img="newsImage" title="newsTitle" content="newsContent" />
					<div class="social-media-wrapper">
    <!-- 翻页按钮 - 绝对定位到右上角 -->
    <div class="pagination-btns">
      <button 
        class="page-btn" 
        :class="{ disabled: currentPage <= 1 }"
        :disabled="currentPage <= 1"
        @click="prevPage"
      >
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      <button 
        class="page-btn" 
        :class="{ disabled: currentPage >= totalPages }"
        :disabled="currentPage >= totalPages"
        @click="nextPage"
      >
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
    </div>

    <!-- MessageBubble 组件 -->
    <MessageBubble
      :messageList="paginatedList"
      imageUrl="personImage"
      @more-click="handleToSocialDetail"
      name="personName"
      content="remarks"
      source="orgName"
    />
  </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>
						<div class="box4-main">
							<div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
								<div class="left">
									<img :src="item.personImage" alt="" />
								</div>
								<div class="right">
									<div class="right-top">
										<div class="name">{{ item.personName }}</div>
										<div class="time">{{ item.time + "." + item.orgName }}</div>
									</div>
									<div class="content">{{ item.remarks }}</div>
								</div>
							</div>
						</div>
					</div> -->
				</div>
				<DivideHeader id="position3" class="divide3" :titleText="'数据总览'"></DivideHeader>
				<InnovationAnalysis :active-cate1="activeCate1" />
				<!-- <div v-if="activeCate === '创新主体排名'">
					<div class="center-footer">
						<div class="home-main-footer-header">
							<div class="btn-box">
								<div class="btn" :class="{ btnActive: activeCate === cate }" v-for="(cate, index) in categoryList"
									:key="index" @click="handleClickCate(cate)">
									{{ cate }}
								</div>
							</div>
							<div class="select-box">
								<el-select v-model="releaseTime" pl aceholder="2022" style="width: 120px"
									@change="handleGetOverallRanking">
									<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</div>
						</div>
					</div>

					<div class="center-footer-elx">
						<div class="content-header">
							<div class="icon">
								<img src="./assets/images/icon4.png" alt="" />
							</div>
							<div class="title">{{ "创新主体综合排名" }}</div>
						</div>
						<el-table :data="innoItemList.datalist" class="sanction-table" stripe empty-text="暂无数据"
							header-row-class-name="table-header" row-class-name="table-row">
							<el-table-column :prop="item.columnName" :label="item.columnLabel"
								v-for="item in innoItemList.headerlist"><template #default="scope">
									{{ scope.row.columnValues[item.columnName] }}
								</template>
							</el-table-column>
							 
						</el-table>
						<div class="center-footer-elx-footer">
							<img src="./assets/images/ai.png" alt="" />
							<div class="center-footer-elx-footer-text">
								研究型大学在综合排名中占据主导地位，特别是在论文和影响力指标上表现突出；科技企业在专利指数上领先，但在论文产出方面相对较弱；国家实验室和国防承包商在特定领域(如国家安全、能源)有显著优势，但在综合排名中相对靠后。
							</div>
							<img src="./assets/images/icon-right.png" alt="" />
						</div>
					</div>
				</div>
				<div v-if="activeCate === '研究布局'">
					<div class="center-footer">
						<div class="home-main-footer-header">
							<div class="btn-box">
								<div class="btn" :class="{ btnActive: activeCate === cate }" v-for="(cate, index) in categoryList"
									:key="index" @click="handleClickCate(cate)">
									{{ cate }}
								</div>
							</div>
							<div class="select-box">
								<el-select v-model="releaseTime" placeholder="2022" style="width: 120px"
									@change="handleGetResearchField(), handleGetResearchFieldSubjectType()">
									<el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</div>
						</div>
					</div>
					<div class="center-footer-layout">
						<div class="content-header">
							<div class="icon">
								<img src="./assets/images/icon4.png" alt="" />
							</div>
							<div class="title">{{ "研究领域布局情况" }}</div>
						</div>
						<div class="center-footer-layout-content">
							<div class="center-footer-layout-content-item">
								<EChart :option="pieOption(barOptionData)" autoresize :style="{ height: '370px', width: '750px' }" />
								<div class="center-footer-elx-footer">
									<img src="./assets/images/ai.png" alt="" />
									<div class="center-footer-elx-footer-text">
										人工智能与信息技术占据最大份额，反映了数字经济的核心地位;生物医学与健康是第二大研发领域，特别是在疫情后投入显著增加;能源与环境技术和先进制造与材料作为基础支撑领域保持稳定投入;国家安全与国防和航空航天作为战略领域保持专项投入。
									</div>
									<img src="./assets/images/icon-right.png" alt="" />
								</div>
							</div>
							<div style="width: 1px; height: 432px; background: rgba(234, 236, 238, 1)"></div>
							<div class="center-footer-layout-content-item">
								<EChart :option="raderOption(raderOptionData)" autoresize
									:style="{ height: '370px', width: '750px' }" />
								<div class="center-footer-elx-footer">
									<img src="./assets/images/ai.png" alt="" />
									<div class="center-footer-elx-footer-text">
										研究型大学在基础科学领域(生物医学、材料科学)占据主导地位；科技企业高度集中于人工智能和信息技术领域；国家实验室在能源技术和国家安全相关领域有显著优势；国防承包商的研究高度集中于航空航天和国家安全领域。
									</div>
									<img src="./assets/images/icon-right.png" alt="" />
								</div>
							</div>
						</div>
					</div>
				</div> -->
			</div>
			<div class="home-main-footer">
				<DivideHeader id="position4" class="divide4" :titleText="'资源库'"></DivideHeader>
				<ResourceLibrary :initial-tab="'university'" />
				 
			</div>
		</div>
	</div>
</template>

<script setup>

import RiskSignal from "@/components/base/riskSignal/index.vue";
import NewsList from "@/components/base/newsList/index.vue";
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import router from "@/router";  
import DivideHeader from "@/components/DivideHeader.vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
import getPieChart from "./utils/piechart";
import EChart from "@/components/Chart/index.vue";
import { pieOption, raderOption } from "./utils/charts";
import {
	getAreaType,
	getNews,
	getSocialMediaInfo,
	getBillRiskSignal,
	getCountGeography,
	getCountSubjectType,
	getSubjectTypeList,
	findListBySubjectTypeId,
	getOverallRanking,
	getResearchField,
	getResearchFieldSubjectType
} from "@/api/innovationSubject/overview.js";
import setChart from "@/utils/setChart";
import InnovationAnalysis from './InnovationAnalysis/InnovationAnalysis.vue'
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 ResourceLibrary from './ResourceLibrary/ResourceLibrary.vue'
import Message1 from "./assets/images/iconp9.png";
import Message2 from "./assets/images/iconp8.png";
import Message3 from "./assets/images/iconp5.png";

const containerRef = ref(null);
const { isShow } = useContainerScroll(containerRef);
const currentPage = ref(1);
const total = ref(0);
const pageSize = ref(16);
// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
	handleFindListBySubjectTypeId();
};
// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(messageList.value.length / pageSize.value) || 1;
});

// 当前页的数据
const paginatedList = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return messageList.value.slice(start, end);
});

// 上一页
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

// 下一页
const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};
// 地理分布
const distributionList = ref([
	{
		name: "研究型大学",
		num: 142,
		color: "rgba(231, 243, 255, 1)",
		textcolor: "rgba(22, 119, 255, 1)",
		id:1
	},
	{
		name: "国家实验室",
		num: 28,
		color: "rgba(255, 247, 230, 1)",
		textcolor: "rgba(255, 169, 64, 1)",
		id:2
	},
	{
		name: "科技企业",
		num: 326,
		color: "rgba(230, 255, 251, 1)",
		textcolor: "rgba(19, 168, 168, 1)",
		id:3
	},
	{
		name: "国防承包商",
		num: 38,
		color: "rgba(249, 240, 255, 1)",
		textcolor: "rgba(114, 46, 209, 1)",
		id:4
	}
]);
const distributionColorList = ref([
	{
		color: "rgba(231, 243, 255, 1)",
		textcolor: "rgba(22, 119, 255, 1)"
	},
	{
		color: "rgba(255, 247, 230, 1)",
		textcolor: "rgba(255, 169, 64, 1)"
	},
	{
		color: "rgba(230, 255, 251, 1)",
		textcolor: "rgba(19, 168, 168, 1)"
	},
	{
		color: "rgba(249, 240, 255, 1)",
		textcolor: "rgba(114, 46, 209, 1)"
	}
]);
//统计不同创新主体类型对应的主体数量
const handleGetCountSubjectType = async () => {
	try {
		const res = await getCountSubjectType();
		console.log("统计不同创新主体类型对应的主体数量", res);
		if (res.code === 200 && res.data) {
			distributionList.value = res.data;
			let data = [];
			res.data.map((item, index) => {
				data.push({
					name: item.countName,
					num: item.countNum,
					color: distributionColorList.value[index].color,
					textcolor: distributionColorList.value[index].textcolor
				});
			});
			distributionList.value = data;
		}
	} catch (error) {
		console.error("获取统计不同创新主体类型对应的主体数量error", error);
	}
};
const zhouList = ref([
	// {
	// 	index: 1,
	// 	name: "马萨诸塞州",
	// 	num: "85"
	// },
 
]);

//统计不同地理对应的主体数量
const handleGetCountGeography = async () => {
	try {
		const res = await getCountGeography();
		console.log("统计不同地理对应的主体数量", res);
		if (res.code === 200 && res.data) {
			zhouList.value = res.data;
		}
	} catch (error) {
		console.error("获取统计不同地理对应的主体数量error", error);
	}
};
// 点击查看详情
const handleClickToDetail = university => {
	const curRoute = router.resolve({ name: "InnovativeInstitutions", params: { id: university } });
	window.open(curRoute.href, "_blank");
	// const route = router.resolve("/InnovativeInstitutions");
	// 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 warningList = ref([
	{
		title: "美国国防部基于Pentagon资助的敏感技术领域...",
		time: "一天前",
		status: "特别重大"
	},
	{
		title: "佛罗里达大学研制高能效光学AI芯片可能对我...",
		time: "一天前",
		status: "一般风险"
	},
	{
		title: "美国国防高级研究计划局启动稳定量子传感器...",
		time: "一天前",
		status: "特别重大"
	},
	{
		title: "美国联邦通信委员会撤销中国检测实验室FCC认...",
		time: "一天前",
		status: "重大风险"
	},
	{
		title: "美国劳伦斯伯克利国家实验室研发伽马射线能...",
		time: "一天前",
		status: "重大风险"
	},
	{
		title: "美国能源部下属国家实验室使用被禁中国超算...",
		time: "一天前",
		status: "特别重大"
	},
	{
		title: "美国情报机构针对中国军工企业发起网络攻击...",
		time: "一天前",
		status: "重大风险"
	}
]);
const handleGetBillRiskSignal = async () => {
	try {
		const res = await getBillRiskSignal();
		console.log("风险信号", res);
		if (res.code === 200 && res.data) {
			warningList.value = res.data;
		}
	} catch (error) {
		console.error("获取风险信号error", error);
	}
};
// 新闻资讯
const newsList = ref([
	{
		img: News1,
		title: "美国智库激辩人工智能监管路径",
		content: `各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析...`,
		from: "11-4 · 华盛顿邮报"
	},
	{
		img: News2,
		title: "布鲁金斯学会称美国低估中国在“印太”战略",
		content: `分析认为，当美国注意力被其他地区分散时，中国通过外交、发展和防务多管齐下，系统性...`,
		from: "11-4 · 纽约时报"
	},
	{
		img: News3,
		title: "五角大楼指令引发智库与国防部“脱钩”震荡",
		content: `美国国防部长下令全面暂停部内人员参与所有智库活动，标志着传统的“旋转门”关系发生...`,
		from: "11-3 · 洛杉矶时报"
	},
	{
		img: News4,
		title: "卡内基基金会警告冲突中AI宣传战的风险",
		content: `分析指出，在伊朗与以色列的冲突中，人工智能生成的虚假信息泛滥，深度破坏了信息生态...`,
		from: "11-3 · 今日美国"
	},
	{
		img: News5,
		title: "CSIS建议美国建立跨机构AI基准测试体系",
		content: `指出美国《人工智能行动计划》忽视了基准测试这一关键环节，建议由国家标准与技术研究...`,
		from: "11-2 ·  ​福克斯新闻网"
	}
]);
const handleGetNews = async () => {
	try {
		const res = await getNews();
		console.log("新闻资讯", res);
		if (res.code === 200 && res.data) {
			newsList.value = res.data.map(item => ({
				...item,
				from: `${item.newsDate} · ${item.newsOrg || ""}`
			}));
		}
	} catch (error) {
		console.error("获取新闻资讯error", error);
	}
};

// 社交媒体
const messageList = ref([
 
]);
const handleGetSocialMediaInfo = async () => {
  try {
    const res = await getSocialMediaInfo();
    console.log("社交媒体", res);
    if (res.code === 200 && res.data) {
      messageList.value = res.data.map(item => ({
        ...item,
        time: item.time.replace(/T/, " "),
      }));
      currentPage.value = 1;
    }
  } catch (error) {
    console.error("获取社交媒体error", error);
  }
};

// 政令涉及领域
const chart1Data = ref([
	{
		name: "人工智能与信息技术",
		value: 27
	},
	{
		name: "生物医学与健康",
		value: 22
	},
	{
		name: "能源与环境技术",
		value: 18
	},
	{
		name: "先进制造与材料",
		value: 15
	},
	{
		name: "国家安全与国防",
		value: 12
	},
	{
		name: "航空航天",
		value: 8
	}
]);
const colorList = ["#69B1FF", "#FFC069", "#87E8DE", "#85A5FF", "#FF7875", "#B37FEB"];

const innoItemList = ref({});
// [
// 	{
// 		rank: "1",
// 		name: "麻省理工学院（MIT）",
// 		type: ["研究型大学"],
// 		research: "64",
// 		people: "72",
// 		patent: "87",
// 		paper: "22",
// 		score: "92",
// 		trend: "up"
// 	},
// 	{
// 		rank: "2",
// 		name: "麻省理工学院",
// 		type: ["国家实验室"],
// 		research: "66",
// 		people: "60",
// 		patent: "68",
// 		paper: "69",
// 		score: "85",
// 		trend: "up"
// 	},
// 	{
// 		rank: "3",
// 		name: "斯坦福大学",
// 		type: ["科技企业"],
// 		research: "76",
// 		people: "11",
// 		patent: "93",
// 		paper: "51",
// 		score: "81",
// 		trend: "up"
// 	},
// 	{
// 		rank: "4",
// 		name: "谷歌（Alphabet）",
// 		type: ["科技企业"],
// 		research: "07",
// 		people: "02",
// 		patent: "21",
// 		paper: "04",
// 		score: "76",
// 		trend: "down"
// 	},
// 	{
// 		rank: "5",
// 		name: "耶鲁大学",
// 		type: ["国防承包商"],
// 		research: "12",
// 		people: "04",
// 		patent: "63",
// 		paper: "38",
// 		score: "71",
// 		trend: "down"
// 	}
// ];
//综合排名
const handleGetOverallRanking = async () => {
	try {
		let params = {
			subjectTypeId: activeCate1.value,
			// arealist:
			year: releaseTime.value
		};
		const res = await getOverallRanking(params);
		console.log("综合排名", res);
		if (res.code === 200 && res.data) {
			innoItemList.value = res.data;
		}
	} catch (error) {
		console.error("获取综合排名error", error);
	}
};
// 资源库
const universityList = ref({});
// 	[
// 	{
// 		pic: "src/views/innovationSubject/assets/images/u1.png",
// 		name: "哈佛大学",
// 		adder: "美国 · 马萨诸塞州",
// 		area: "医学、法学、经济学、生物化学、公共卫生、自然科学等多个学科",
// 		tag: ["人工智能"]
// 	},
// 	{
// 		pic: "src/views/innovationSubject/assets/images/u10.png",
// 		name: "斯坦福大学",
// 		adder: "美国 · 加利福尼亚州",
// 		area: "计算机科学、电子工程、生物医学工程、经济学、环境科学等学科",
// 		tag: ["人工智能", "生物科技"]
// 	},
// 	{
// 		pic: "src/views/innovationSubject/assets/images/u3.png",
// 		name: "麻省理工学院",
// 		adder: "美国 · 加利福尼亚州",
// 		area: "工程、计算机、物理、数学、航空航天",
// 		tag: ["人工智能"]
// 	},
// 	{
// 		pic: "src/views/innovationSubject/assets/images/u4.png",
// 		name: "普林斯顿大学",
// 		adder: "美国 · 加利福尼亚州",
// 		area: "数学、物理、政治学、经济学、哲学",
// 		tag: ["人工智能"]
// 	},
// 	{
// 		pic: "src/views/innovationSubject/assets/images/u5.png",
// 		name: "加州理工学院",
// 		adder: "美国 · 加利福尼亚州",
// 		area: "物理、化学、天文、地球科学、工程",
// 		tag: ["量子科技"]
// 	},
// 	{
// 		pic: "src/views/innovationSubject/assets/images/u6.png",
// 		name: "哥伦比亚大学 ",
// 		adder: "美国 · 科罗拉多州",
// 		area: "法学、商学、新闻、经济学、国际关系",
// 		tag: ["新能源"]
// 	},
// 	{
// 		pic: "src/views/innovationSubject/assets/images/u7.png",
// 		name: "芝加哥大学",
// 		adder: "美国 · 加利福尼亚州",
// 		area: "经济学、社会学、物理、哲学、统计学",
// 		tag: ["人工智能", "集成电路"]
// 	},
// 	{
// 		pic: "src/views/innovationSubject/assets/images/u8.png",
// 		name: "耶鲁大学",
// 		adder: "美国 · 宾夕法尼亚州",
// 		area: "法学、 医学、 戏剧、 政治学、 历史 ",
// 		tag: ["新能源"]
// 	},
// 	{
// 		pic: "src/views/innovationSubject/assets/images/u9.png",
// 		name: "康奈尔大学",
// 		adder: "美国 · 新墨西哥州",
// 		area: "农业与生命科学、工程、酒店管理、兽医学",
// 		tag: ["生物科技", "量子科技"]
// 	},
// 	{
// 		pic: "src/views/innovationSubject/assets/images/u10.png",
// 		name: "加州大学伯克利分校",
// 		adder: "美国 · 加利福尼亚州",
// 		area: "计算机科学、化学、物理学、经济学、环境科学、工程学等学科",
// 		tag: ["人工智能", "集成电路"]
// 	},
// 	{
// 		pic: "src/views/innovationSubject/assets/images/u11.png",
// 		name: "宾夕法尼亚大学",
// 		adder: "美国 · 马萨诸塞州",
// 		area: "商学、法学、 医学、 工程、 传播学 ",
// 		tag: ["人工智能", "生物科技"]
// 	},
// 	{
// 		pic: "src/views/innovationSubject/assets/images/u12.png",
// 		name: "华盛顿大学",
// 		adder: "美国 · 新墨西哥州",
// 		area: "医学、生命科学、计算机、公共卫生、工程",
// 		tag: ["生物科技", "量子科技"]
// 	}
// ]

const releaseTime = ref("2022");
const releaseTimeList = ref([
	{
		label: "2022",
		value: "2022"
	},
	{
		label: "2023",
		value: "2023"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2025",
		value: "2025"
	}
]);
const categoryList = ref(["创新主体排名", "研究布局"]);
const activeCate = ref("创新主体排名");
//研究领域布局情况
const barOptionData = ref([]);
const handleGetResearchField = async () => {
	try {
		let params = {
			year: releaseTime.value
		};
		const res = await getResearchField(params);
		console.log("研究领域布局情况", res);
		if (res.code === 200 && res.data) {
			// 提取 names 和 values
			const names = res.data.map(item => item.areaName);
			const values = res.data.map(item => item.amount); // 或者使用 item.percent，根据需求选择
			const total = res.data.reduce((sum, item) => sum + item.amount, 0);
			barOptionData.value = {
				names,
				values,
				total
			};
		}
	} catch (error) {
		console.error("获取研究领域布局情况error", error);
	}
};
const raderOptionData = ref([]);
const handleGetResearchFieldSubjectType = async () => {
	try {
		let params = {
			year: releaseTime.value
		};
		const res = await getResearchFieldSubjectType(params);
		console.log("研究领域布局情况", res);
		if (res.code === 200 && res.data) {
			raderOptionData.value = res.data;
		}
	} catch (error) {
		console.error("获取研究领域布局情况error", error);
	}
};

const areaList = ref([
	{
		label: "全部领域",
		value: "全部领域"
	}
]);
const areaSelect = ref([]);
//获取行业领域列表
const handleGetAreaType = async () => {
	try {
		const res = await getAreaType();
		console.log("行业领域列表 ", res);
		if (res.code === 200 && res.data) {
			areaList.value = res.data;
		}
	} catch (error) {
		console.error("获取行业领域列表 error", error);
	}
};

const categoryList1 = ref(["研究型大学", "国家实验室", "科技企业", "国防承包商"]);
const activeCate1 = ref("");
//类型列表
const handleGetSubjectTypeList = async () => {
	try {
		const res = await getSubjectTypeList();
		console.log("类型列表", res);
		if (res.code === 200 && res.data) {
			categoryList1.value = res.data;

			activeCate1.value = res.data[0].id;
		}
	} catch (error) {
		console.error("获取类型列表error", error);
	}
};
const handleClickCate = cate => {
	activeCate.value = cate;
	handleGetOverallRanking();
};

const handleClickCate1 = cate => {
	activeCate1.value = cate;
	handleFindListBySubjectTypeId();
};

//资源库
const handleFindListBySubjectTypeId = async () => {
	try {
		let params = {
			subjectTypeId: activeCate1.value,
			arealist: areaSelect.value,
			currentPage: currentPage.value,
			pageSize: 16
		};
		const res = await findListBySubjectTypeId(params);
		console.log("资源库", res);
		if (res.code === 200 && res.data) {
			universityList.value = res.data.content;
			total.value = res.data.totalElements;
		}
	} catch (error) {
		console.error("获取资源库error", error);
	}
};

const handleToPosi = id => {
	// 0 618 1240 2350
	switch (id) {
		case "position2":
			// containerRef.value.scrollTop = isShow.value ? 744 : 1090;
			containerRef.value.scrollTop = isShow.value ? 844 : 1190;
			break;
		case "position3":
			containerRef.value.scrollTop = isShow.value ? 1480 : 1826;
			break;
		case "position4":
			containerRef.value.scrollTop = isShow.value ? 2554 : 2900;
			break;
		default:
			containerRef.value.scrollTop = 0;
	}
};
// 查看社交媒体详情
const handleToSocialDetail = item => {
	const route = router.resolve({
		path: "/characterPage",
		query: {
			personId: item.id
		}
	});
	window.open(route.href, "_blank");
};

onMounted(async () => {
	handleGetAreaType();
	handleGetNews();
	handleGetSocialMediaInfo();
	handleGetBillRiskSignal();
	await handleGetSubjectTypeList();
	handleGetCountGeography();
	handleGetCountSubjectType();
	handleGetOverallRanking();

	handleFindListBySubjectTypeId();
	handleGetResearchField();
	handleGetResearchFieldSubjectType();
	let chart1 = getPieChart(chart1Data.value, colorList);
	setChart(chart1, "chart1");
});
</script>

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

.home-wrapper {
	width: 100%;
	height: 100%;
	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;
			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-btn-box {
			margin-top: 20px;
			margin-left: 200px;
			display: flex;
			gap: 16px;

			.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%;
					}
				}
			}
		}
	}

	.scrollHomeMain {
		width: 100%;
		height: calc(100% - 144px);
		overflow-y: auto;
	}

	.home-main {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		// background: url("./assets/images/background.png");
		// background-size: 100% 100%;
		position: relative;

		.home-top-bg {
			background:
				url("./assets/images/background.png"),
				linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
			background-size: 100% 100%;
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: -100;
			top: -64px;
		}

		.home-main-header {
			display: flex;
			flex-direction: column;
			align-items: center;

			.home-main-header-top {
				width: 100%;
				height: 64px;
				background: url("./assets/images/header-bg.png");
				box-sizing: border-box;
				padding: 0 160px;
				display: flex;
				justify-content: space-between;
			}



			.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 {
				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-header-item-box {
				margin-top: 48px;
				margin-bottom: 64px;
				width: 1600px;
				display: flex;
				flex-wrap: wrap;

				.item {
					width: 254px;
					height: 72px;
					display: flex;
					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);
					align-items: center;
					margin: 0 6px 16px 6px;
					cursor: pointer;
					transition: transform 0.3s ease, box-shadow 0.3s ease;

					&:hover {
						transform: translateY(-3px);
						box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
					}

					.item-left {
						width: 48px;
						height: 48px;
						margin-left: 24px;
						margin-top: 12px;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.item-right {
						margin-left: 17px;
						width: 140px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 700;
						line-height: 24px;
					}
				}
			}
		}

		.home-main-center {
			margin-top: 34px;

			.center-top {
				height: 450px;
				display: flex;
				justify-content: center;
				gap: 20px;

				.box1 {
					width: 1064px;
					height: 460px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: #fff;
					box-sizing: border-box;
					position: relative;

					.box1-header {
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						justify-content: space-between;

						.box1-header-left {
							display: flex;
							margin-left: 18px;

							.icon {
								width: 20px;
								height: 20px;
								margin-top: 15px;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.title {
								width: 112px;
								height: 48px;
								margin-left: 18px;
								color: #fff;
								background: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 46px;
								text-align: center;
							}
						}

						.box1-header-right {
							margin-top: 16px;
							height: 16px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 16px;
							cursor: pointer;
							margin-right: 39px;
						}
					}

					.box1-main {
						display: flex;
						margin-top: 33px;
						padding-left: 36px;
						padding-right: 27px;
						box-sizing: border-box;

						.box1-main-left {
							display: flex;
							width: 458px;
							height: 353px;
							flex-direction: column;
							gap: 20px;

							.box1-main-left-top {
								/* 容器 546 */
								width: 456px;
								height: 80px;
								/* 自动布局 */
								display: flex;
								flex-direction: row;
								justify-content: flex-start;
								align-items: flex-start;
								gap: 8px;

								.box1-main-left-top-item {
									display: flex;
									align-items: center;
									flex-direction: column;
									justify-content: center;
									width: 108px;
									height: 80px;
									border-radius: 4px;
									background: rgba(231, 243, 255, 1);
									color: rgba(22, 119, 255, 1);

									.box1-main-left-top-item-text1 {
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
										letter-spacing: 0px;
										text-align: center;
									}

									.box1-main-left-top-item-text2 {
										font-family: Microsoft YaHei;
										font-size: 24px;
										font-weight: 700;
										line-height: 32px;
										letter-spacing: 0px;
										text-align: center;
									}
								}
							}

							.box1-main-left-down {
								display: flex;
								flex-direction: column;
								width: 456px;

								.box1-main-left-down-item {
									height: 48px;
									display: flex;
									align-items: center;
									justify-content: space-between;

									.box1-main-left-down-item-index {
										margin-left: 42px;
										width: 24px;
										height: 24px;
										background-color: rgba(231, 243, 255, 1);
										border-radius: 12px;
										color: rgba(5, 95, 194, 1);
										font-family: Microsoft YaHei;
										font-size: 12px;
										font-weight: 400;
										line-height: 20px;
										letter-spacing: 0px;
										text-align: center;
									}

									.box1-main-left-down-item-text {
										color: rgba(59, 65, 75, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										line-height: 30px;
										letter-spacing: 0px;
										text-align: justify;
									}

									.box1-main-left-down-item-num {
										margin-right: 42px;
										color: rgba(5, 95, 194, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 700;
										line-height: 30px;
										letter-spacing: 0px;
										text-align: justify;
									}
								}
							}
						}

						.box1-main-right {
							margin-left: 10px;
							flex: 1;
						}
					}
				}

				.box2 {
					width: 520px;
					height: 460px;
					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;
						border-bottom: 1px solid rgba(240, 242, 244, 1);

						.icon {
							width: 24px;
							height: 22px;
							margin-left: 33px;
							margin-top: 18px;

							img {
								width: 100%;
								height: 100%;
							}
						}

						.title {
							display: flex;
							width: 148px;
							background: rgba(206, 79, 81, 1);
							margin-left: 25px;

							.text {
								margin-left: 15px;
								margin-top: 16px;
								height: 22px;
								color: #fff;
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 22px;
							}

							.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: 15px;
								margin-top: 18px;
								border-radius: 100px;
								background: rgba(255, 255, 255, 0.3);
							}
						}

						.more {
							margin-top: 19px;
							margin-left: 200px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 16px;
							cursor: pointer;
						}
					}

					.box2-main {
						box-sizing: border-box;
						padding-right: 20px;
						height: 330px;
						overflow-y: auto;

						.box2-main-item {
							margin-left: 23px;
							height: 47px;
							width: 464px;
							display: flex;
							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 {
								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: 310px;
									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: 45px;
						bottom: 21px;
						width: 430px;
						height: 42px;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						border-radius: 6px;
						background: var(--color-main-active);
						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 {
				width: 1600px;
				margin: 0 auto;
				margin-top: 68px;
				margin-bottom: 36px;
			}

			.center-center {
				width: 1600px;
				margin: 0 auto;
				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: 13px;
								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: 12px;
							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 {
				width: 1600px;
				margin: 0 auto;
				margin-top: 68px;
				margin-bottom: 36px;
			}

			.center-footer {
				display: flex;
				justify-content: center;

				.home-main-footer-header {
					width: 1600px;
					height: 42px;
					display: flex;
					justify-content: space-between;

					.btn-box {
						width: 1000px;
						display: flex;

						.btn {
							height: 42px;
							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);
							margin-right: 20px;
							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 {
						margin-top: 10px;
						height: 42px;
						box-sizing: border-box;
						padding: 5px 0;
					}
				}
			}

			.center-footer-elx {
				width: 1600px;
				height: 528px;
				box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
				background: rgba(255, 255, 255, 1);
				margin: 30px auto;
				box-sizing: border-box;
				border-radius: 10px;

				.content-header {
					height: 48px;
					display: flex;
					border-bottom: 1px solid rgba(234, 236, 238, 1);

					.icon {
						width: 20px;
						height: 20px;
						margin-top: 14px;
						margin-left: 19px;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.title {
						height: 48px;
						margin-left: 21px;
						color: rgba(5, 95, 194, 1);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 700;
						line-height: 48px;
					}
				}

				.sanction-table {
					margin-top: 16px;
					margin-left: 20px;
					margin-right: 20px;
					width: 1552px;

					.up {
						width: 32px;
						height: 32px;
						background-image: url("src/views/innovationSubject/assets/images/icon-up.png");
					}

					.down {
						width: 32px;
						height: 32px;
						background-image: url("src/views/innovationSubject/assets/images/icon-down.png");
					}
				}

				.center-footer-elx-footer {
					margin: 16px;
					width: 1568px;
					height: 64px;
					/* 自动布局 */
					display: flex;
					flex-direction: row;
					justify-content: start;
					align-items: center;
					gap: 10px;
					padding: 6px 12px 6px 12px;
					box-sizing: border-box;
					border: 1px solid rgba(231, 243, 255, 1);
					border-radius: 4px;
					background: rgba(246, 250, 255, 1);

					.center-footer-elx-footer-text {
						color: rgba(5, 95, 194, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: justify;
						width: 1475px;
						height: 48px;
					}
				}
			}

			.center-footer-layout {
				width: 1600px;
				height: 528px;
				box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
				background: rgba(255, 255, 255, 1);
				margin: 30px auto;
				box-sizing: border-box;
				border-radius: 10px;

				.content-header {
					height: 48px;
					display: flex;
					border-bottom: 1px solid rgba(234, 236, 238, 1);

					.icon {
						width: 20px;
						height: 20px;
						margin-top: 14px;
						margin-left: 19px;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.title {
						height: 48px;
						margin-left: 21px;
						color: rgba(5, 95, 194, 1);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 700;
						line-height: 48px;
					}
				}

				.center-footer-layout-content {
					display: flex;
					flex-direction: row;

					.center-footer-layout-content-item {
						height: 480px;
						width: 800px;
						display: flex;
						flex-direction: column;
						margin-left: 24px;

						.center-footer-elx-footer {
							width: 750px;
							height: 88px;
							/* 自动布局 */
							display: flex;
							flex-direction: row;
							justify-content: start;
							align-items: center;
							gap: 10px;
							padding: 6px 12px 6px 12px;
							box-sizing: border-box;
							border: 1px solid rgba(231, 243, 255, 1);
							border-radius: 4px;
							background: rgba(246, 250, 255, 1);

							.center-footer-elx-footer-text {
								color: rgba(5, 95, 194, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: justify;
								width: 726px;
								height: 76px;
							}
						}
					}
				}
			}
		}

		.home-main-footer {
			margin-top: 34px;
			height: 1350px;
			background: rgb(255 255 255);
			overflow: hidden;

			.divide4 {
				margin: 0 auto;
				margin-top: 52px;
				margin-bottom: 36px;
			}

			.home-main-footer-header {
				width: 1600px;
				height: 42px;
				margin: 36px auto;
				// background: orange;
				display: flex;
				justify-content: space-between;

				.btn-box {
					margin-top: 10px;
					width: 1000px;
					display: flex;

					.btn {
						height: 42px;
						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);
						margin-right: 20px;
						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 {
					margin-top: 10px;
					height: 42px;
					box-sizing: border-box;
					padding: 5px 0;
				}
			}

			.home-main-footer-main {
				width: 1600px;
				display: flex;
				flex-wrap: wrap;
				margin: 0 auto;
				gap: 16px;

				.footer-main-item {
					width: 253px;
					height: 216px;
					gap: 8px;
					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);
					padding: 16px;
					display: flex;
					flex-direction: column;
					cursor: pointer;

					.item-text {
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 18px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: left;
					}

					.item-text2 {
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 22px;
						letter-spacing: 0px;
						text-align: justify;
					}

					.taglist {
						display: flex;
						flex-direction: row;
						gap: 8px;
					}
				}

				.footer-box {
					margin: 0 auto;
					height: 32px;
					margin-top: 30px;
					display: flex;
					justify-content: center;

					.footer-left {
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 32px;
					}
				}
			}
		}
	}
}

.tag1 {
	height: 22px;
	/* 自动布局 */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 8;
	padding: 1px 8px 1px 8px;
	box-sizing: border-box;
	border: 1px solid rgba(135, 232, 222, 1);
	border-radius: 4px;
	background: rgba(230, 255, 251, 1);
	color: rgba(19, 168, 168, 1);
	font-family: Microsoft YaHei;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0px;
	text-align: center;
}

.tag2 {
	height: 22px;
	/* 自动布局 */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 8;
	padding: 1px 8px 1px 8px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 213, 145, 1);
	border-radius: 4px;
	background: rgba(255, 247, 230, 1);
	color: rgba(250, 140, 22, 1);
	font-family: Microsoft YaHei;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0px;
	text-align: center;
}

.tag3 {
	height: 22px;
	/* 自动布局 */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 8;
	padding: 1px 8px 1px 8px;
	box-sizing: border-box;
	border: 1px solid rgba(211, 173, 247, 1);
	border-radius: 4px;
	background: rgba(249, 240, 255, 1);
	color: rgba(114, 46, 209, 1);
	font-family: Microsoft YaHei;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0px;
	text-align: center;
}

.tag4 {
	height: 22px;
	/* 自动布局 */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 8;
	padding: 1px 8px 1px 8px;
	box-sizing: border-box;
	border: 1px solid rgba(145, 202, 255, 1);
	border-radius: 4px;
	background: rgba(230, 244, 255, 1);
	color: rgba(5, 95, 194, 1);
	font-family: Microsoft YaHei;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0px;
	text-align: center;
}

.tag5 {
	height: 22px;
	/* 自动布局 */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 8;
	padding: 1px 8px 1px 8px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 163, 158, 1);
	border-radius: 4px;
	background: rgba(255, 241, 240, 1);
	color: rgba(206, 79, 81, 1);
	font-family: Microsoft YaHei;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0px;
	text-align: center;
}

.divide {
	margin: 0 auto;
}

:deep(.el-input__wrapper) {
	box-shadow: none;
	border-radius: 10px;
}

:deep(.el-input__wrapper:hover) {
	box-shadow: none !important;
}

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

:deep(.table-header) {
	font-size: 16px;
	font-weight: 700;

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

:deep(.table-row) {
	height: 64px;
}
.social-media-wrapper {
  position: relative;
  display: inline-block;
}

.pagination-btns {
  position: absolute;
  top: 10px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
}

.page-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #055fc2;
  border-radius: 4px;
  background: #fff;
  color: #055fc2;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 0;

  &:hover:not(.disabled) {
    background: #055fc2;
    color: #fff;
  }

  &.disabled {
    cursor: not-allowed;
    opacity: 0.4;
    border-color: #c0c4cc;
    color: #c0c4cc;
  }
}
</style>