<template>
	<div class="content-wrapper">
		<div class="header">
			<!-- <div class="header-arrow-left" @click="prev">
				<img src="../../assets/left-btn.png" alt="" />
			</div>
			<div class="header-arrow-right" @click="next">
				<img src="../../assets/right-btn.png" alt="" />
			</div> -->
			<div class="cards-mask">
				<!-- <div class="item-box" :style="{ transform: `translateX(-${currentIndex * (307 + 16)}px)` }"> -->
				<div class="item-box">
					<div
						class="header-item"
						:class="{
							headerItem1: index % 5 === 0,
							headerItem2: index % 5 === 1,
							headerItem3: index % 5 === 2,
							headerItem4: index % 5 === 3,
							headerItem5: index % 5 === 4
						}"
						v-for="(item, index) in headerList"
						:key="index"
					>
						<div class="name">{{ item.elementName }}</div>
						<div class="num">{{ item.num }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="left">
				<div class="box box1">
					<div class="box1-header">
						<div class="icon">
							<img src="./assets/images/box-header-icon1.png" alt="" />
						</div>
						<div class="title">{{ "最新动态" }}</div>
					</div>
					<div class="box1-main">
						<div
							class="box1-item"
							v-for="(item, index) in box1DataList"
							:key="index"
							@click="handleToDecreeDetail(item)"
						>
							<div class="box1-item-left">{{ index + 1 }}</div>
							<div class="box1-item-right">
								<div class="title">{{ item.name }}</div>
								<div class="content">{{ item.describe }}</div>
								<div class="tag-box">
									<div class="tag" v-for="(val, idx) in item.elemetList" :key="idx">{{ val }}</div>
								</div>
								<div class="box1-item-right-footer">
									<div class="time">{{ item.postDate }}</div>
									<div class="area-box">
										<div
											class="area"
											:class="{
												area1: vall.status === '1',
												area2: vall.status === '2',
												area3: vall.status === '3',
												area4: vall.status === '4',
												area5: vall.status === '5'
											}"
											v-for="(vall, idxx) in item.areaList"
											:key="idxx"
										>
											{{ vall.industryName }}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="right">
				<container
					:title="'美对华科技要素打压遏制数量趋势'"
					:header-bg-color="headerBgColor"
					:headerBorderBottom="false"
					:title-icon="trendIcon"
					height="500px"
				>
					<template #header-right>
						<el-select
							v-model="selectField"
							@change="handleFieldChange"
							placeholder="全部领域"
							:style="{ width: '160px' }"
						>
							<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
						<!-- <el-select
							v-model="selectSandMethod"
							@change="handleSandMethodChange"
							placeholder="全部制裁手段"
							:style="{ width: '160px' }"
						>
							<el-option v-for="item in sanTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select> -->
					</template>
					<el-empty
						v-if="usChinaSanctionTrendData.length == 0"
						style="padding-top: 120px"
						description="暂无数据"
						:image-size="100"
					/>
					<Echarts v-else :option="usChinaSanctionTrendOptions" height="410px"></Echarts>
				</container>
				<div class="box box2">
					<div class="box2-header">
						<div class="box2-header-left">
							<img src="./assets/images/box-header-icon2.png" alt="" />
							<div class="title">{{ "美对华要素打压情况" }}</div>
						</div>
						<div class="box2-header-right">
							<el-select
								v-model="selectSuppressElement"
								@change="handleElementSuppressChange"
								placeholder="全部科技要素"
								class="field-select"
							>
								<el-option
									v-for="item in elementOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</el-select>
						</div>
					</div>
					<div class="box2-main">
						<div class="inner-box1">
							<div class="left">
								<div class="left-main">
									<el-empty
										v-if="box2DataList.length === 0"
										style="padding-top: 140px"
										description="暂无数据"
										:image-size="100"
									/>
									<div
										class="left-item"
										:class="{ leftItemActive: box2LeftActiveIndex === index }"
										v-for="(item, index) in box2DataList"
										:key="index"
										@click="handleClickBox2Item(index)"
									>
										<div class="id">{{ (box2CurrentPage - 1) * box2PageSize + index + 1 }}</div>
										<div class="left-item-content">
											<div class="content-header">
												<div class="text">{{ item.name }}</div>
												<div class="date">{{ item.postDate }}</div>
											</div>
											<div class="describe">{{ item.describe || item.name }}</div>
											<div class="content-footer">
												<div class="element-box">
													<AreaTag v-for="(ele, idxx) in item.elementList" :key="idxx" :tagName="ele" />
												</div>
												<div class="tag-box">
													<AreaTag
														v-for="(ele, idxx) in item.domainList"
														:key="idxx"
														:tagName="ele.industryName"
													/>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="left-footer" v-if="box2AllDataList.length !== 0">
									<!-- <el-pagination
										background
										layout="prev, pager, next"
										:total="box2Total"
										:page-size="box2PageSize"
										v-model:current-page="box2CurrentPage"
										@current-change="handleGetBox2DataList"
										size="small"
										:pager-count="4"
									/> -->
									<simple-pagination
										v-model:current-page="box2CurrentPage"
										:page-size="box2PageSize"
										:total="box2AllDataList.length"
										@page-change="handleBox2PageChange"
									/>
								</div>
							</div>
							<div class="right" @click="handleToDecreeDetail(box2DetailInfo)">
								<el-empty
									v-if="box2DataList.length === 0 || !isShowBox2Info"
									style="padding-top: 140px"
									description="暂无数据"
									:image-size="100"
								/>
								<div v-else>
									<div class="title">{{ box2DetailInfo?.name }}</div>
									<div class="tag-box">
										<div class="tag" v-for="(item, index) in box2DetailInfo.elemetList" :key="index">
											{{ item }}
										</div>
									</div>
									<div class="content">{{ box2DetailInfo?.describe }}</div>
									<div class="area-box">
										<div
											class="area"
											:class="{
												area1: item.status === '1',
												area2: item.status === '2',
												area3: item.status === '3',
												area4: item.status === '4',
												area5: item.status === '5'
											}"
											v-for="(item, index) in box2DetailInfo.areaList"
											:key="index"
										>
											{{ item.industryName }}
										</div>
									</div>
									<div class="footer" v-show="box2DetailInfo?.postDate || box2DetailInfo?.orgNameList">
										{{ `${box2DetailInfo?.postDate} · ${box2DetailInfo?.orgNameList?.toString()} · 行政令` }}
									</div>
								</div>
							</div>
						</div>
						<div class="inner-box2">
							<el-empty
								v-if="box2ChartData.length === 0"
								style="padding-top: 140px"
								description="暂无数据"
								:image-size="100"
							/>
							<div class="chart-header">{{ "关键词云" }}</div>
							<div class="box2Chart" id="box2Chart"></div>
						</div>
					</div>
				</div>
				<div class="box box3">
					<div class="box3-header">
						<div class="box3-header-left">
							<img src="./assets/images/box-header-icon2.png" alt="" />
							<div class="title">{{ "美自身要素发展情况" }}</div>
						</div>
						<div class="box3-header-right">
							<el-select
								v-model="selectDevElement"
								@change="handleElementDevChange"
								placeholder="全部科技要素"
								class="field-select"
							>
								<el-option
									v-for="item in elementOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</el-select>
						</div>
					</div>
					<div class="box3-main">
						<div class="inner-box1">
							<div class="left">
								<div class="left-main">
									<el-empty
										v-if="box3DataList.length === 0"
										style="padding-top: 140px"
										description="暂无数据"
										:image-size="100"
									/>
									<div
										class="left-item"
										:class="{ leftItemActive: box3LeftActiveIndex === index }"
										v-for="(item, index) in box3DataList"
										:key="index"
										@click="handleClickBox3Item(index)"
									>
										<div class="id">{{ (box3CurrentPage - 1) * box3PageSize + index + 1 }}</div>
										<div class="left-item-content">
											<div class="content-header">
												<div class="text">{{ item.name }}</div>
												<div class="date">{{ item.postDate }}</div>
											</div>
											<div class="describe">{{ item.describe || item.name }}</div>
											<div class="content-footer">
												<div class="element-box">
													<AreaTag v-for="(ele, idxx) in item.elementList" :key="idxx" :tagName="ele" />
												</div>
												<div class="tag-box">
													<AreaTag
														v-for="(ele, idxx) in item.domainList"
														:key="idxx"
														:tagName="ele.industryName"
													/>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="left-footer" v-if="box3AllDataList.length !== 0">
									<!-- <el-pagination
										background
										layout="prev, pager, next"
										:total="box3Total"
										:page-size="box3PageSize"
										v-model:current-page="box3CurrentPage"
										@current-change="handleGetBox3DataList"
										size="small"
										:pager-count="4"
									/> -->
									<simple-pagination
										v-model:current-page="box3CurrentPage"
										:page-size="box3PageSize"
										:total="box3AllDataList.length"
										@page-change="handleBox3PageChange"
									/>
								</div>
							</div>
							<div class="right" @click="handleToDecreeDetail(box3DetailInfo)">
								<el-empty
									v-if="box3DataList.length === 0 || !isShowBox3Info"
									style="padding-top: 140px"
									description="暂无数据"
									:image-size="100"
								/>
								<div v-else>
									<div class="title">{{ box3DetailInfo?.name }}</div>
									<div class="tag-box">
										<div class="tag" v-for="(item, index) in box3DetailInfo?.elemetList" :key="index">
											{{ item }}
										</div>
									</div>
									<div class="content">{{ box3DetailInfo?.describe }}</div>
									<div class="area-box">
										<div
											class="area"
											:class="{
												area1: item.status === '1',
												area2: item.status === '2',
												area3: item.status === '3',
												area4: item.status === '4',
												area5: item.status === '5'
											}"
											v-for="(item, index) in box3DetailInfo?.areaList"
											:key="index"
										>
											{{ item.industryName }}
										</div>
									</div>
									<div class="footer" v-if="box3DetailInfo?.postDate || box3DetailInfo?.orgNameList">
										{{ `${box3DetailInfo?.postDate} · ${box3DetailInfo?.orgNameList?.toString()} · 行政令` }}
									</div>
								</div>
							</div>
						</div>
						<div class="inner-box2">
							<el-empty
								v-if="box3ChartData.length === 0"
								style="padding-top: 140px"
								description="暂无数据"
								:image-size="100"
							/>
							<div class="chart-header">{{ "关键词云" }}</div>
							<div class="box3Chart" id="box3Chart"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref, computed, inject, watch, onUnmounted, nextTick } from "vue";
import router from "@/router";
import setChart from "@/utils/setChart";
import getWordCloudChart from "./uitls/worldCloudChart";
import "echarts-wordcloud";
import {
	getElementCount,
	getNewDynamics,
	getElementSuppress,
	getKeyWordUp,
	getElementDevelop,
	getKeyWordDown,
	getOrderInfo,
	getElementSuppressTrend
} from "@/api/zmOverview/allElement";
import Echarts from "@/components/Chart/index.vue";
import { elementOptions, sanTypeOptions, fieldOptions } from "@/views/ZMOverView/public.js";
import SimplePagination from "@/components/SimplePagination.vue";
import container from "@/views/ZMOverView/components/fourSuppress/components/container/index.vue";

import trendIcon from "./assets/images/icon-trend.png";
import { Legend } from "@antv/g6";

const headerBgColor = ref("linear-gradient(180deg, rgba(231, 243, 255, 0.5), rgba(231, 243, 255, 0) 100%)");

const activeDate = inject("activeDate");

const isShowBox2Info = ref(true);
const isShowBox3Info = ref(true);

const getCalculatedDate = type => {
	const now = new Date();
	const endDate = new Date();
	const start = new Date();

	switch (type) {
		case "week": // 近一个月
			start.setMonth(now.getMonth() - 1);
			break;
		case "three_month": // 近三个月
			start.setMonth(now.getMonth() - 3);
			break;
		case "six_month": // 近半年
			start.setMonth(now.getMonth() - 6);
			break;
		case "year": // 近一年
			start.setFullYear(now.getFullYear() - 1);
			break;
		default:
			start.setMonth(now.getMonth() - 1); // 默认近一个月
	}

	const formatDate = date => {
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, "0");
		const day = String(date.getDate()).padStart(2, "0");
		return `${year}-${month}-${day}`;
	};

	return {
		startDate: formatDate(start),
		endDate: formatDate(endDate)
	};
};

// 全要素统计
const headerList = ref([]);
const handleGetHeaderList = async () => {
	const { startDate, endDate } = getCalculatedDate(activeDate.value);
	const params = {
		date: startDate
	};
	try {
		const res = await getElementCount(params);
		console.log("全要素统计", res);
		if (res.code === 200 && res.data) {
			headerList.value = res.data;
		}
	} catch (error) {}
};

// 数量趋势
const selectField = ref("");
const selectSandMethod = ref("");
const handleFieldChange = val => {
	getUsChinaSanctionTrendData();
};
const handleSandMethodChange = val => {};

const getChartOption = (xAxisData = [], seriesData = []) => {
	const option = {
		tooltip: {
			trigger: "axis",
			backgroundColor: "rgba(255, 255, 255, 0.9)",
			borderColor: "#2f79c4",
			textStyle: {
				color: "#666"
			},
			formatter: function (params) {
				console.log("图形数据的详情", params);
				if (!params || params.length === 0) return "";

				let result = `<div style="padding: 6px 10px;">
					<div style="font-weight: bold; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #eee;">${params[0].name}</div>`;

				params.forEach(param => {
					const color = param.borderColor || "#2f79c4";
					result += `
						<div style="display: flex; align-items: center; margin-top: 4px;">
							<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${color}; margin-right: 8px;"></span>
							<span style="color: #666;">${param.seriesName}:</span>
							<span style="color: ${color}; font-weight: bold; margin-left: 8px;">${param.value}</span>
						</div>`;
				});

				result += `</div>`;
				return result;
			}
		},
		legend: {
			show: true,
			top: "10px",
			// left: "center",
			itemWidth: 15,
			itemHeight: 10,
			itemGap: 20,
			textStyle: {
				color: "#666",
				fontSize: 14
			}
		},
		grid: {
			top: "10%",
			left: "1%",
			right: "2%",
			bottom: "5%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			boundaryGap: false,
			data: xAxisData,
			axisLine: {
				lineStyle: {
					color: "#f0f0f0"
				}
			},
			axisLabel: {
				color: "#999",
				fontSize: 12
			},
			axisTick: {
				show: false
			}
		},
		yAxis: {
			name: "次数",
			fontSize: 18,
			type: "value",
			min: 0,
			minInterval: 1, // 保证最小间隔为1，避免小数
			axisLine: {
				show: false
			},
			axisLabel: {
				color: "#999",
				fontSize: 12
			},
			splitLine: {
				lineStyle: {
					type: "dashed",
					color: "#f0f0f0"
				}
			}
		},
		series: seriesData.map(item => {
			return {
				name: item.name,
				data: item.data,
				type: "line",
				// smooth: true,
				symbol: "circle",
				symbolSize: 8,
				itemStyle: {
					color: item.color || "#fff",
					borderColor: item.borderColor || "#2f79c4",
					borderWidth: 2
				},
				lineStyle: {
					color: item.borderColor || "#2f79c4",
					width: 2
				}
			};
		})
	};
	return option;
};
const usChinaSanctionTrendOptions = ref(getChartOption([], []));
const usChinaSanctionTrendData = ref([]);

// 获取打压遏制趋势数据
const getUsChinaSanctionTrendData = async () => {
	const { startDate, endDate } = getCalculatedDate(activeDate.value);
	const params = {
		date: startDate,
		domainId: selectField.value
		// sanTypeId: selectSandMethod.value
	};

	try {
		const res = await getElementSuppressTrend(params);
		console.log("美对华科技要素打压遏制数量趋势", res);

		if (res.code === 200 && res.data) {
			// 按 elementName 分组整理数据
			const dataMap = new Map();
			const dateSet = new Set();
			usChinaSanctionTrendData.value = res.data;
			res.data.forEach(item => {
				const { elementName, elementDate, elementNum } = item;
				dateSet.add(elementDate);

				if (!dataMap.has(elementName)) {
					dataMap.set(elementName, []);
				}
				dataMap.get(elementName).push({
					date: elementDate,
					value: elementNum
				});
			});

			// 排序日期
			const sortedDates = Array.from(dateSet).sort();

			// 为每个 elementName 生成完整的数据系列（补齐缺失的日期）
			const seriesData = [];
			const colors = ["#2f79c4", "#e74c3c", "#2ecc71", "#f39c12", "#9b59b6", "#1abc9c"];

			dataMap.forEach((values, elementName) => {
				// 创建日期到值的映射
				const valueMap = new Map(values.map(v => [v.date, v.value]));

				// 补齐所有日期的数据
				const seriesValues = sortedDates.map(date => valueMap.get(date) || 0);

				seriesData.push({
					name: elementName,
					data: seriesValues,
					borderColor: colors[seriesData.length % colors.length]
				});
			});

			usChinaSanctionTrendOptions.value = getChartOption(sortedDates, seriesData);
			console.log("美对华科技要素打压遏制数量趋势 options", usChinaSanctionTrendOptions.value);
		}
	} catch (error) {
		console.error("获取打压遏制趋势数据失败:", error);
		usChinaSanctionTrendOptions.value = getChartOption([], []);
		usChinaSanctionTrendData.value = [];
	}
};

// 最新动态
const box1DataList = ref([]);
const handleGetBox1Data = async () => {
	try {
		const res = await getNewDynamics();
		console.log("最新动态", res);
		if (res.code === 200 && res.data) {
			box1DataList.value = res.data;
		}
	} catch (error) {}
};

const selectSuppressElement = ref("");
const handleElementSuppressChange = val => {
	selectSuppressElement.value = val;
	box2CurrentPage.value = 1;
	handleGetBox2DataList();
	handleBox2Chart();
};

const box2DataList = ref([]);
const box2AllDataList = ref([]);
const box2Total = ref(0);
const box2CurrentPage = ref(1);
const box2PageSize = ref(5);
const box2LeftActiveIndex = ref(0);
const box2DetailInfo = ref({});

// 根据id 获取政令详细信息
const handleGetOrderInfo = async id => {
	const params = {
		id: id
	};
	try {
		const res = await getOrderInfo(params);
		console.log("根据id获取政令详细信息1", res);
		if (res.code === 200 && res.data) {
			box2DetailInfo.value = res.data;
		} else {
			isShowBox2Info.value = false;
		}
	} catch (error) {
		isShowBox2Info.value = false;
	}
};

const handleGetBox2DataList = async () => {
	const { startDate, endDate } = getCalculatedDate(activeDate.value);
	const params = {
		currentPage: box2CurrentPage.value,
		pageSize: 100,
		date: startDate,
		elementId: selectSuppressElement.value
	};
	try {
		const res = await getElementSuppress(params);
		console.log("美对我要素打压情况", res);
		if (res.code === 200 && res.data) {
			box2AllDataList.value = res.data.content;
			box2Total.value = res.data.totalElements;
			// handleGetOrderInfo(box2DataList.value[box2LeftActiveIndex.value].id);
		}
		updateBox2DataList();
	} catch (error) {}
};

const updateBox2DataList = () => {
	const start = (box2CurrentPage.value - 1) * box2PageSize.value;
	const end = start + box2PageSize.value;
	box2DataList.value = box2AllDataList.value.slice(start, end);
};

const handleBox2PageChange = page => {
	updateBox2DataList();
};

const handleClickBox2Item = index => {
	box2LeftActiveIndex.value = index;
	handleGetOrderInfo(box2DataList.value[index].id);
};

const box2ChartData = ref([]);
const handleGetBox2ChartData = async () => {
	const { startDate, endDate } = getCalculatedDate(activeDate.value);
	const params = {
		date: startDate,
		elementId: selectSuppressElement.value
	};
	try {
		const res = await getKeyWordUp(params);
		console.log("关键词云-上", res);
		console.log("关键词云-上 参数", params);
		if (res.code === 200 && res.data) {
			box2ChartData.value = res.data.map(item => {
				return {
					name: item.name,
					value: item.count
				};
			});
		}
	} catch (error) {}
};
const handleBox2Chart = async () => {
	await handleGetBox2ChartData();
	let box2Chart = getWordCloudChart(box2ChartData.value);
	console.log("关键词云-上 options =>", box2Chart);
	console.log("关键词云-上 box2ChartData =>", box2ChartData.value);
	setChart(box2Chart, "box2Chart");
};

const selectDevElement = ref("");
const handleElementDevChange = val => {
	selectDevElement.value = val;
	box3CurrentPage.value = 1;
	handleGetBox3DataList();
	handleBox3Chart();
};

const box3DataList = ref([]);
const box3AllDataList = ref([]);
const box3Total = ref(0);
const box3CurrentPage = ref(1);
const box3PageSize = ref(5);
const box3LeftActiveIndex = ref(0);
const box3DetailInfo = ref({});

const handleBox3PageChange = page => {
	updateBox3DataList();
};

// 根据id 获取政令详细信息
const handleGetOrderInfo1 = async id => {
	const params = {
		id: id
	};
	try {
		const res = await getOrderInfo(params);
		console.log("根据id获取政令详细信息1", res);
		if (res.code === 200 && res.data) {
			box3DetailInfo.value = res.data;
		} else {
			isShowBox3Info.value = false;
		}
	} catch (error) {
		isShowBox3Info.value = false;
	}
};

const handleGetBox3DataList = async () => {
	const { startDate, endDate } = getCalculatedDate(activeDate.value);

	const params = {
		currentPage: box3CurrentPage.value,
		pageSize: 100,
		date: startDate,
		elementId: selectDevElement.value
	};
	try {
		const res = await getElementDevelop(params);
		console.log("美自身要素发展情况", res);
		if (res.code === 200 && res.data) {
			box3AllDataList.value = res.data.content;
			box3Total.value = res.data.totalElements;
			// if (res.data.content.length) {
			// 	handleGetOrderInfo1(box3DataList.value[box3LeftActiveIndex.value].id);
			// } else {
			// 	box3DetailInfo.value = {};
			// }
		} else {
			box3DetailInfo.value = {};
		}
		updateBox3DataList();
	} catch (error) {}
};

const updateBox3DataList = async () => {
	const start = (box3CurrentPage.value - 1) * box3PageSize.value;
	const end = start + box3PageSize.value;
	box3DataList.value = box3AllDataList.value.slice(start, end);
};

const handleClickBox3Item = index => {
	box3LeftActiveIndex.value = index;
	handleGetOrderInfo1(box3DataList.value[index].id);
};

const box3ChartData = ref([]);

const handleGetBox3ChartData = async () => {
	const { startDate, endDate } = getCalculatedDate(activeDate.value);
	const params = {
		date: startDate,
		elementId: selectDevElement.value
	};
	try {
		const res = await getKeyWordDown(params);
		console.log("关键词云-下", res);
		if (res.code === 200 && res.data) {
			box3ChartData.value = res.data.map(item => {
				return {
					name: item.name,
					value: item.count
				};
			});
		}
	} catch (error) {}
};
const handleBox3Chart = async () => {
	await handleGetBox3ChartData();
	let box3Chart = getWordCloudChart(box3ChartData.value);
	console.log("关键词云-下", box3Chart);
	setChart(box3Chart, "box3Chart");
};

const currentIndex = ref(0);
let autoTimer = null;

const startAutoPlay = isContiune => {
	if (!isContiune) {
		currentIndex.value = 0;
	}
	stopAutoPlay();
	if (headerList.value.length >= 5) {
		autoTimer = setInterval(() => {
			next();
		}, 3000);
	}
};

const stopAutoPlay = () => {
	if (autoTimer) {
		clearInterval(autoTimer);
		autoTimer = null;
	}
};

const next = () => {
	let arr = [...headerList.value];
	if (currentIndex.value < headerList.value.length - 5) {
		currentIndex.value++;
	} else {
		// currentIndex.value = 0;
		headerList.value = [...headerList.value, ...arr];
		currentIndex.value++;
	}
};

const prev = () => {
	if (currentIndex.value > 0) {
		currentIndex.value--;
	} else {
		currentIndex.value = Math.max(0, headerList.value.length - 5);
	}
};

const handleToDecreeDetail = item => {
	window.sessionStorage.setItem("curTabName", item.name);
	const route = router.resolve({
		path: "/decreeLayout",
		query: {
			id: item.id
		}
	});
	window.open(route.href, "_blank");
};

watch(activeDate, async () => {
	box2CurrentPage.value = 1;
	box3CurrentPage.value = 1;
	handleGetBox2DataList(); // 美对我要素打压情况
	handleGetBox3DataList(); // 美自身要素发展情况
	handleBox2Chart(); // 关键词云-上
	handleBox3Chart(); // 关键词云-下
	getUsChinaSanctionTrendData();
	await handleGetHeaderList(); // 全要素统计
	// startAutoPlay();
});

onMounted(async () => {
	handleGetBox1Data(); // 最新动态
	handleGetBox2DataList(); // 美对我要素打压情况
	handleGetBox3DataList(); // 美自身要素发展情况
	handleBox2Chart(); // 关键词云-上
	handleBox3Chart(); // 关键词云-下
	getUsChinaSanctionTrendData();
	await handleGetHeaderList(); // 全要素统计
	// startAutoPlay();
});

onUnmounted(() => {
	stopAutoPlay();
});
</script>

<style lang="scss" scoped>
.content-wrapper {
	width: 1600px;

	// height: 2132px;
	.header {
		width: 1600px;
		height: 176px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		gap: 16px;
		margin: 0 auto;
		position: relative;

		.header-arrow-left {
			position: absolute;
			left: -33px;
			top: 64px;
			width: 24px;
			height: 48px;
			cursor: pointer;

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

		.header-arrow-right {
			position: absolute;
			right: -33px;
			top: 64px;
			width: 24px;
			height: 48px;
			cursor: pointer;

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

		.cards-mask {
			width: 100%;
			overflow: hidden; // 仅在这里隐藏超出部分，不影响外层的按钮
		}

		.item-box {
			width: 100%;
			width: max-content;
			height: 178px;
			overflow: hidden;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: stretch;
			gap: 16px;
			padding: 0;
			transition: transform 0.5s ease; // 平滑过渡动画

			.header-item {
				width: 307px;
				height: 178px;
				border-radius: 10px;

				.name {
					margin-top: 53px;
					margin-left: 112px;
					width: 174px;
					height: 39px;
					color: rgba(255, 255, 255, 1);
					font-family: YouSheBiaoTiHei;
					font-style: Regular;
					font-size: 30px;
					font-weight: 400;
					line-height: 39px;
					letter-spacing: 0px;
					text-align: left;
				}

				.num {
					margin-top: -8px;
					margin-left: 112px;
					width: 174px;
					height: 39px;
					color: rgba(255, 255, 255, 1);
					font-family: YouSheBiaoTiHei;
					font-style: Regular;
					font-size: 30px;
					font-weight: 400;
					line-height: 39px;
					letter-spacing: 0px;
					text-align: left;
				}
			}

			.headerItem1 {
				background: url("./assets/images/bg1.png");
			}

			.headerItem2 {
				background: url("./assets/images/bg2.png");
			}

			.headerItem3 {
				background: url("./assets/images/bg3.png");
			}

			.headerItem4 {
				background: url("./assets/images/bg4.png");
			}

			.headerItem5 {
				background: url("./assets/images/bg5.png");
			}
		}
	}

	.main {
		width: 1598px;
		// height: 884px;
		margin: 0 auto;
		margin-top: 14px;
		display: flex;
		justify-content: space-between;

		.box {
			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);
		}

		& > .left {
			width: 472px;
			display: none;
			.box1 {
				width: 472px;
				height: 884px;
				overflow: hidden;

				.box1-header {
					height: 48px;
					display: flex;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(255, 255, 255, 1);
					background: linear-gradient(180deg, rgba(231, 243, 255, 0.5), rgba(231, 243, 255, 0) 100%);

					.icon {
						width: 22px;
						height: 18px;
						margin-top: 15px;
						margin-left: 16px;

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

					.title {
						width: 89px;
						height: 31px;
						margin-top: 8px;
						margin-left: 11px;
						color: var(--color-main-active);
						font-family: YouSheBiaoTiHei;
						font-style: Regular;
						font-size: 24px;
						font-weight: 400;
						line-height: 31px;
						letter-spacing: 0px;
						text-align: left;
					}
				}

				.box1-main {
					height: 836px;
					overflow: hidden;
					background: rgba(255, 255, 255, 0.65);

					.box1-item {
						width: 430px;
						height: 167px;
						padding: 12px 0;
						box-sizing: border-box;
						border-bottom: 1px solid rgba(234, 236, 238, 1);

						margin: 0 auto;
						display: flex;
						cursor: pointer;

						.box1-item-left {
							width: 30px;
							height: 30px;
							border-radius: 50px;
							background: rgba(246, 250, 255, 1);
							line-height: 30px;
							text-align: center;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-style: Bold;
							font-size: 16px;
							font-weight: 700;
							line-height: 30px;
							letter-spacing: 0px;
						}

						.box1-item-right {
							width: 388px;
							margin-left: 12px;

							.title {
								height: 30px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-style: Bold;
								font-size: 16px;
								font-weight: 700;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: left;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.content {
								height: 48px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-style: Regular;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: justify;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
							}

							.tag-box {
								margin-top: 4px;
								height: 28px;
								display: flex;
								flex-wrap: wrap;
								gap: 8px;

								.tag {
									width: 80px;
									height: 28px;
									border-radius: 4px;
									background: rgba(231, 243, 255, 1);
									text-align: center;
									line-height: 28px;
									color: var(--color-main-active);
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 16px;
									font-weight: 400;
									letter-spacing: 0px;
								}
							}

							.box1-item-right-footer {
								height: 30px;
								margin-top: 4px;
								display: flex;
								justify-content: space-between;
								align-items: center;

								.time {
									width: 124px;
									height: 30px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 16px;
									font-weight: 400;
									line-height: 30px;
									letter-spacing: 0px;
									text-align: left;
								}

								.area-box {
									height: 24px;
									display: flex;
									gap: 8px;
									justify-content: flex-end;

									.area {
										height: 24px;
										padding: 0 8px;
										line-height: 24px;
										text-align: center;
										font-family: Microsoft YaHei;
										font-style: Regular;
										font-size: 14px;
										font-weight: 400;
										box-sizing: border-box;
										border-radius: 4px;

										border: 1px solid rgba(255, 163, 158, 1);
										background: rgba(255, 241, 240, 1);
										color: rgba(245, 34, 45, 1);

										// border: 1px solid rgba(135, 232, 222, 1);
										// background: rgba(230, 255, 251, 1);
										// color: rgba(19, 168, 168, 1);
									}
								}
							}
						}
					}
				}
			}
		}

		.right {
			width: 100%;

			.box2 {
				width: 100%;
				// height: 434px;
				height: 700px;

				.box2-header {
					height: 48px;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(255, 255, 255, 1);
					background: linear-gradient(180deg, rgba(231, 243, 255, 0.5), rgba(231, 243, 255, 0) 100%);
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 10px 16px;
					.box2-header-left {
						display: flex;
						align-items: center;

						img {
							width: 17px;
							height: 17px;
							margin-right: 8px;
						}

						.title {
							font-family: YouSheBiaoTiHei;
							font-size: 24px;
							font-weight: 400;
							line-height: 31px;
							letter-spacing: 0px;
							text-align: left;
							color: rgba(5, 95, 194, 1);
						}
					}
					.field-select {
						width: 160px;
					}
					.icon {
						width: 17px;
						height: 16.5px;
						margin-left: 19px;
						margin-top: 16px;

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

					.title {
						// margin-top: 8px;
						// margin-left: 13px;
						width: 199px;
						height: 31px;
						color: var(--color-main-active);
						font-family: YouSheBiaoTiHei;
						font-style: Regular;
						font-size: 24px;
						font-weight: 400;
						line-height: 31px;
						letter-spacing: 0px;
						text-align: left;
					}
				}

				.box2-main {
					// height: 386px;
					height: 646px;
					background: rgba(255, 255, 255, 0.65);
					display: flex;
					justify-content: center;
					gap: 16px;

					.inner-box1 {
						width: 50%;
						// height: 368px;
						height: 100%;
						overflow: hidden;
						box-sizing: border-box;
						// border: 1px solid rgba(234, 236, 238, 1);
						// border-radius: 10px;
						display: flex;

						.left {
							// width: 320px;
							width: 100%;
							// border-right: 1px solid rgba(234, 236, 238, 1);

							.left-main {
								// margin-top: 9px;
								height: 600px;

								.left-item {
									width: 100%;
									height: 120px;
									border: 1px solid transparent;
									display: flex;
									padding: 10px;
									box-sizing: border-box;
									border-bottom: 1px solid #eee;
									// align-items: center;
									.left-item-content {
										display: flex;

										flex-direction: column;
										justify-content: space-between;
										gap: 5px;
										width: 100%;
										.content-header {
											display: flex;
											justify-content: space-between;
											.text {
												max-width: 80%;
												height: 30px;
												margin-left: 12px;
												color: rgba(59, 65, 75, 1);
												font-family: Microsoft YaHei;
												font-style: Regular;
												font-size: 16px;
												font-weight: 700;
												line-height: 30px;
												letter-spacing: 0px;
												text-align: left;
												overflow: hidden;
												text-overflow: ellipsis;
												white-space: nowrap;
											}
											.date {
												font-family: Source Han Sans CN;
												font-size: 16px;
												font-weight: 400;
											}
										}
										.describe {
											max-width: 80%;
											height: 30px;
											margin-left: 12px;
											color: rgba(59, 65, 75, 1);
											font-family: Microsoft YaHei;
											font-style: Regular;
											font-size: 16px;
											font-weight: 400;
											line-height: 30px;
											letter-spacing: 0px;
											text-align: left;
											overflow: hidden;
											text-overflow: ellipsis;
											white-space: nowrap;
										}
										.content-footer {
											display: flex;
											justify-content: space-between;
											align-items: center;
											.element-box {
												display: flex;
												flex-direction: row;
												gap: 5px;
											}
											.tag-box {
												min-width: 75px;
												height: 24px;
												gap: 5px;
												/* 自动布局 */
												display: flex;
												flex-direction: row;
												justify-content: right;
												align-items: center;
											}
										}
									}
									&:hover {
										background: rgba(246, 250, 255, 1);
									}

									cursor: pointer;

									.id {
										// margin-left: 16px;
										margin-top: 3px;
										width: 24px;
										height: 24px;
										border-radius: 50px;
										background: rgba(231, 243, 255, 1);
										color: var(--color-main-active);
										font-family: Microsoft YaHei;
										font-style: Regular;
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
										letter-spacing: 0px;
										text-align: center;
									}

									.text {
										width: 95%;
										height: 30px;
										margin-left: 12px;
										color: rgba(59, 65, 75, 1);
										font-family: Microsoft YaHei;
										font-style: Regular;
										font-size: 16px;
										font-weight: 400;
										line-height: 30px;
										letter-spacing: 0px;
										text-align: left;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}

								.leftItemActive {
									box-sizing: border-box;
									border: 1px solid rgba(231, 243, 255, 1);
									border-radius: 4px;
									background: rgba(246, 250, 255, 1);
								}
							}

							.left-footer {
								// margin-top: 30px;
								height: 60px;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}

						.right {
							width: 320px;
							height: 368px;
							overflow: hidden;
							overflow-y: auto;
							cursor: pointer;
							display: none;
							.title {
								width: 283px;
								min-height: 24px;
								max-height: 48px;
								overflow: hidden;
								margin: 16px auto 18px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-style: Bold;
								font-size: 18px;
								font-weight: 700;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: justify;
							}

							.tag-box {
								width: 283px;
								margin: 0 auto;
								// height: 28px;
								display: flex;
								flex-wrap: wrap;
								gap: 8px;

								.tag {
									height: 28px;
									padding: 0 8px;
									border-radius: 4px;
									background: rgba(231, 243, 255, 1);
									line-height: 28px;
									text-align: center;
									color: var(--color-main-active);
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									letter-spacing: 0px;
								}
							}

							.content {
								margin: 0 auto;
								margin-top: 8px;
								width: 283px;
								height: 150px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-style: Regular;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: justify;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 5;
							}

							.area-box {
								width: 283px;
								margin: 0 auto;
								margin-top: 28px;
								// height: 24px;
								display: flex;
								flex-wrap: wrap;
								justify-content: flex-start;
								gap: 8px;

								.area {
									height: 24px;
									padding: 0 8px;
									line-height: 24px;
									text-align: center;
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 14px;
									font-weight: 400;
									box-sizing: border-box;
									border-radius: 4px;

									border: 1px solid rgba(255, 163, 158, 1);
									background: rgba(255, 241, 240, 1);
									color: rgba(245, 34, 45, 1);
								}
							}

							.footer {
								width: 283px;
								margin: 0 auto;
								margin-top: 8px;
								height: 30px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-style: Regular;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}

					.inner-box2 {
						// width: 412px;
						width: 760px;
						// height: 368px;
						height: 617px;
						box-sizing: border-box;
						border: 1px solid rgba(234, 236, 238, 1);
						border-radius: 10px;
						overflow: hidden;
						position: relative;

						.chart-header {
							position: absolute;
							top: 14px;
							left: 20px;
							width: 90px;
							height: 26px;
							border-radius: 20px;
							background: var(--color-main-active);
							text-align: center;
							line-height: 26px;
							color: #fff;
							font-family: YouSheBiaoTiHei;
							font-style: Regular;
							font-size: 20px;
							font-weight: 400;
							line-height: 26px;
							letter-spacing: 0px;
						}

						.box2Chart {
							width: 760px;
							height: 617px;
						}
					}
				}
			}

			.box3 {
				margin-top: 16px;
				width: 100%;
				// height: 434px;
				height: 700px;

				.box3-header {
					height: 48px;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(255, 255, 255, 1);
					background: linear-gradient(180deg, rgba(231, 243, 255, 0.5), rgba(231, 243, 255, 0) 100%);
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 10px 16px;
					.box3-header-left {
						display: flex;
						align-items: center;

						img {
							width: 17px;
							height: 17px;
							margin-right: 8px;
						}

						.title {
							font-family: YouSheBiaoTiHei;
							font-size: 24px;
							font-weight: 400;
							line-height: 31px;
							letter-spacing: 0px;
							text-align: left;
							color: rgba(5, 95, 194, 1);
						}
					}
					.field-select {
						width: 160px;
					}
					.icon {
						width: 17px;
						height: 16.5px;
						margin-left: 19px;
						margin-top: 16px;

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

					.title {
						// margin-top: 8px;
						margin-left: 13px;
						width: 199px;
						height: 31px;
						color: var(--color-main-active);
						font-family: YouSheBiaoTiHei;
						font-style: Regular;
						font-size: 24px;
						font-weight: 400;
						line-height: 31px;
						letter-spacing: 0px;
						text-align: left;
					}
				}

				.box3-main {
					height: 646px;
					background: rgba(255, 255, 255, 0.65);
					display: flex;
					justify-content: center;
					gap: 16px;

					.inner-box1 {
						width: 50%;
						// height: 368px;
						height: 100%;
						overflow: hidden;
						box-sizing: border-box;
						// border: 1px solid rgba(234, 236, 238, 1);
						// border-radius: 10px;
						display: flex;

						.left {
							width: 100%;
							// border-right: 1px solid rgba(234, 236, 238, 1);

							.left-main {
								// margin-top: 9px;
								height: 600px;

								.left-item {
									width: 100%;
									height: 120px;
									border: 1px solid transparent;
									display: flex;
									border-bottom: 1px solid #eee;
									padding: 10px;
									.left-item-content {
										display: flex;

										flex-direction: column;
										justify-content: space-between;
										gap: 5px;
										width: 100%;
										.content-header {
											display: flex;
											justify-content: space-between;
											.text {
												max-width: 80%;
												height: 30px;
												margin-left: 12px;
												color: rgba(59, 65, 75, 1);
												font-family: Microsoft YaHei;
												font-style: Regular;
												font-size: 16px;
												font-weight: 700;
												line-height: 30px;
												letter-spacing: 0px;
												text-align: left;
												overflow: hidden;
												text-overflow: ellipsis;
												white-space: nowrap;
											}
											.date {
												font-family: Source Han Sans CN;
												font-size: 16px;
												font-weight: 400;
											}
										}
										.describe {
											max-width: 80%;
											height: 30px;
											margin-left: 12px;
											color: rgba(59, 65, 75, 1);
											font-family: Microsoft YaHei;
											font-style: Regular;
											font-size: 16px;
											font-weight: 400;
											line-height: 30px;
											letter-spacing: 0px;
											text-align: left;
											overflow: hidden;
											text-overflow: ellipsis;
											white-space: nowrap;
										}
										.content-footer {
											display: flex;
											justify-content: space-between;
											align-items: center;
											.element-box {
												display: flex;
												flex-direction: row;
												gap: 5px;
											}
											.tag-box {
												min-width: 75px;
												height: 24px;
												gap: 5px;
												/* 自动布局 */
												display: flex;
												flex-direction: row;
												justify-content: right;
												align-items: center;
											}
										}
									}

									&:hover {
										background: rgba(246, 250, 255, 1);
									}

									cursor: pointer;

									.id {
										// margin-left: 16px;

										margin-top: 3px;
										width: 24px;
										height: 24px;
										border-radius: 50px;
										background: rgba(231, 243, 255, 1);
										color: var(--color-main-active);
										font-family: Microsoft YaHei;
										font-style: Regular;
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
										letter-spacing: 0px;
										text-align: center;
									}

									.text {
										width: 95%;
										height: 30px;
										margin-left: 12px;
										color: rgba(59, 65, 75, 1);
										font-family: Microsoft YaHei;
										font-style: Regular;
										font-size: 16px;
										font-weight: 400;
										line-height: 30px;
										letter-spacing: 0px;
										text-align: left;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}

								.leftItemActive {
									box-sizing: border-box;
									border: 1px solid rgba(231, 243, 255, 1);
									border-radius: 4px;
									background: rgba(246, 250, 255, 1);
								}
							}

							.left-footer {
								// margin-top: 30px;
								height: 60px;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}

						.right {
							width: 320px;
							height: 368px;
							overflow: hidden;
							overflow-y: auto;
							cursor: pointer;
							display: none;
							.title {
								width: 283px;
								min-height: 24px;
								max-height: 48px;
								overflow: hidden;
								margin: 16px auto 18px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-style: Bold;
								font-size: 18px;
								font-weight: 700;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: justify;
							}

							.tag-box {
								width: 283px;
								margin: 0 auto;
								// height: 28px;
								display: flex;
								flex-wrap: wrap;
								gap: 8px;

								.tag {
									height: 28px;
									padding: 0 8px;
									border-radius: 4px;
									background: rgba(231, 243, 255, 1);
									line-height: 28px;
									text-align: center;
									color: var(--color-main-active);
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									letter-spacing: 0px;
								}
							}

							.content {
								margin: 0 auto;
								margin-top: 8px;
								width: 283px;
								height: 150px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-style: Regular;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: justify;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 5;
							}

							.area-box {
								width: 283px;
								margin: 0 auto;
								margin-top: 28px;
								// height: 24px;
								display: flex;
								flex-wrap: wrap;
								justify-content: flex-start;
								gap: 8px;

								.area {
									height: 24px;
									padding: 0 8px;
									line-height: 24px;
									text-align: center;
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 14px;
									font-weight: 400;
									box-sizing: border-box;
									border-radius: 4px;

									border: 1px solid rgba(255, 163, 158, 1);
									background: rgba(255, 241, 240, 1);
									color: rgba(245, 34, 45, 1);
								}
							}

							.footer {
								width: 283px;
								margin: 0 auto;
								margin-top: 8px;
								height: 30px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-style: Regular;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}

					.inner-box2 {
						width: 760px;
						height: 617px;
						box-sizing: border-box;
						border: 1px solid rgba(234, 236, 238, 1);
						border-radius: 10px;
						overflow: hidden;
						position: relative;

						.chart-header {
							position: absolute;
							top: 14px;
							left: 20px;
							width: 90px;
							height: 26px;
							border-radius: 20px;
							background: var(--color-main-active);
							text-align: center;
							line-height: 26px;
							color: #fff;
							font-family: YouSheBiaoTiHei;
							font-style: Regular;
							font-size: 20px;
							font-weight: 400;
							line-height: 26px;
							letter-spacing: 0px;
						}

						.box3Chart {
							width: 760px;
							height: 617px;
						}
					}
				}
			}
		}
	}
}

.area1 {
	border: 1px solid rgba(217, 247, 190, 1) !important;
	background: rgba(246, 255, 237, 1) !important;
	color: rgba(56, 158, 13, 1) !important;
}

.area2 {
	border: 1px solid rgba(135, 232, 222, 1) !important;
	background: rgba(230, 255, 251, 1) !important;
	color: rgba(19, 168, 168, 1) !important;
}

.area3 {
	border: 1px solid rgba(145, 202, 255, 1) !important;
	background: rgba(230, 244, 255, 1) !important;
	color: rgba(22, 119, 255, 1) !important;
}

.area4 {
	border: 1px solid rgba(173, 198, 255, 1) !important;
	background: rgba(240, 245, 255, 1) !important;
	color: rgba(47, 84, 235, 1) !important;
}

.area5 {
	border: 1px solid rgba(211, 173, 247, 1) !important;
	background: rgba(249, 240, 255, 1) !important;
	color: rgba(114, 46, 209, 1) !important;
}
</style>
