<template>
	<div class="wrapper">
		<div class="left">
			<div class="box1">
				<!-- <div class="box-header">
					<div class="icon"></div>
					<div class="title">{{ "主要议员" }}</div>
					<div class="btn-box">
						<div class="btn" :class="{ btnActive: activeBtnIndex === 0 }" @click="activeBtnIndex = 0">
							{{ "参议院" }}
						</div>
						<div class="btn" :class="{ btnActive: activeBtnIndex === 1 }" @click="activeBtnIndex = 1">
							{{ "众议院" }}
						</div>
					</div>
					<div class="header-right">
						<div class="right-icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="right-icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box1-main">
					<div class="box1-main-top">
						<div class="top-item" v-for="(item, index) in partyContributionList" :key="index">
							<div class="icon">
								<img :src="item.img" alt="" />
							</div>
							<div class="name">{{ item.name }}</div>
							<div class="line" :class="{ line1: index === 0, line2: index === 1 }"></div>
							<div class="num" :class="{ num1: index === 0, num2: index === 1 }">{{ item.num }}</div>
						</div>
					</div>
					<div class="box1-main-main">
						<div class="item" :class="{ itemActive: itemActiveIndex === index }"
							v-for="(item, index) in mainPoliContribution" :key="index" @click="handlePersonClick(item, index)">
							<div class="item-left">
								<img :src="item.image || Img1" alt="" />
							</div>
							<div class="item-center">
								<div class="center-top">
									<div class="name">{{ item.name }}</div>
									<div class="icon1">
										<img :src="item.dp === 'Republican' ? Ghd : Mzd" alt="" />
									</div>
									<div class="icon2">
										<img :src="activeBtnIndex === 0 ? Cyy : Zyy" alt="" />
									</div>
								</div>
								<div class="center-footer">
									{{ item.zw }}
								</div>
							</div>
							<div class="item-right">
								{{ item.formattedTotalJe }}
							</div>
						</div>
					</div>
				</div> -->
				<AnalysisBox title="主要议员" :showAllBtn="false">
					<template #headerBtn>
						<div class="btn-box">
							<div class="btn" :class="{ btnActive: activeBtnIndex === 0 }" @click="activeBtnIndex = 0">
								{{ "参议院" }}
							</div>
							<div class="btn" :class="{ btnActive: activeBtnIndex === 1 }" @click="activeBtnIndex = 1">
								{{ "众议院" }}
							</div>
						</div>
					</template>
					<div class="box1-main">
						<div class="box1-main-top">
							<div class="top-item" v-for="(item, index) in partyContributionList" :key="index">
								<div class="icon">
									<img :src="item.img" alt="" />
								</div>
								<div class="name">{{ item.name }}</div>
								<div class="line" :class="{ line1: index === 0, line2: index === 1 }"></div>
								<div class="num" :class="{ num1: index === 0, num2: index === 1 }">{{ item.num }}</div>
							</div>
						</div>
						<div class="box1-main-main">
							<div class="item" :class="{ itemActive: itemActiveIndex === index }"
								v-for="(item, index) in mainPoliContribution" :key="index" @click="handlePersonClick(item, index)">
								<div class="item-left">
									<img :src="item.image || Img1" alt="" />
								</div>
								<div class="item-center">
									<div class="center-top">
										<div class="name">{{ item.name }}</div>
										<div class="icon1">
											<img :src="item.dp === 'Republican' ? Ghd : Mzd" alt="" />
										</div>
										<div class="icon2">
											<img :src="activeBtnIndex === 0 ? Cyy : Zyy" alt="" />
										</div>
									</div>
									<div class="center-footer">
										{{ item.zw }}
									</div>
								</div>
								<div class="item-right">
									{{ item.formattedTotalJe }}
								</div>
							</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>
		<div class="right">
			<div class="box2">
				<!-- <div class="box-header">
					<div class="icon"></div>
					<div class="title">{{ "政治献金流向" }}</div>
					<div class="header-right">
						<div class="more-btn" v-if="fullSourceList.length > 5" @click="toggleSankeyData">
							{{ showAllSankeyData ? "收起" : "更多+" }}
						</div>
						<div class="right-icon">
							<img src="@/assets/icons/box-header-icon1.png" alt="" />
						</div>
						<div class="right-icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="right-icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>

				<div class="box2-main">
					<el-empty v-if="!fullSourceList.length" description="暂无数据" :image-size="100" />
					<div v-else class="chart-box2" id="chart1"></div>
				</div>
				<div class="box-footer">
					<div class="box-footer-left">
						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
					</div>
					<div class="box-footer-center">
						{{ currentPersonName }}的政治资金主要依赖于一个由亿万富翁、特定行业利益集团及通过​“超级政治行动委员会”​​
						运作的大额捐款网络。
					</div>
					<div class="box-footer-right">
						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
					</div>
				</div> -->
				<AnalysisBox title="政治献金流向">
					<div class="box2-main">
						<el-empty v-if="!fullSourceList.length" description="暂无数据" :image-size="100" />
						<div v-else class="chart-box2" id="chart1"></div>
					</div>
					<div class="box-footer">
						<div class="box-footer-left">
							<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
						</div>
						<div class="box-footer-center">
							{{ currentPersonName }}的政治资金主要依赖于一个由亿万富翁、特定行业利益集团及通过​“超级政治行动委员会”​​
							运作的大额捐款网络。
						</div>
						<div class="box-footer-right">
							<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
						</div>
					</div>
				</AnalysisBox>
			</div>
			<div class="box3">
				<!-- <div class="box-header">
					<div class="icon"></div>
					<div class="title">{{ "政治献金领域分布" }}</div>
					<div class="header-right">
						<div class="right-icon">
							<img src="@/assets/icons/box-header-icon1.png" alt="" />
						</div>
						<div class="right-icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="right-icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box3-main">
					<div class="box3-main-left" id="chart2"></div>
					<div class="box3-main-right">
						<el-empty v-if="!areaList.length" description="暂无数据" :image-size="100" />
						<div class="box3-main-right-item" v-for="(item, index) in areaList" :key="index">
							<div class="id">{{ index + 1 }}</div>
							<div class="name">{{ item.name }}</div>
							<div class="line">
								<div class="inner-line" :style="{ width: (item.num / areaList[0].num) * 100 + '%' }"></div>
							</div>
							<div class="num">{{ item.numtext }}</div>
							<div class="more">{{ `${item.insNum}家机构 >` }}</div>
						</div>
					</div>
				</div>
				<div class="box-footer">
					<div class="box-footer-left">
						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
					</div>
					<div class="box-footer-center">
						{{ currentPersonName }}的政治资金主要依赖于一个由亿万富翁、特定行业利益集团及通过​“超级政治行动委员会”​​
						运作的大额捐款网络。
					</div>
					<div class="box-footer-right">
						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
					</div>
				</div> -->
				<AnalysisBox title="政治献金领域分布">
					<div class="box3-main">
						<div class="box3-main-left" id="chart2"></div>
						<div class="box3-main-right">
							<el-empty v-if="!areaList.length" description="暂无数据" :image-size="100" />
							<div class="box3-main-right-item" v-for="(item, index) in areaList" :key="index">
								<div class="id">{{ index + 1 }}</div>
								<div class="name">{{ item.name }}</div>
								<div class="line">
									<div class="inner-line" :style="{ width: (item.num / areaList[0].num) * 100 + '%' }"></div>
								</div>
								<div class="num">{{ item.numtext }}</div>
								<div class="more">{{ `${item.insNum}家机构 >` }}</div>
							</div>
						</div>
					</div>
					<div class="box-footer">
						<div class="box-footer-left">
							<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
						</div>
						<div class="box-footer-center">
							{{ currentPersonName }}的政治资金主要依赖于一个由亿万富翁、特定行业利益集团及通过​“超级政治行动委员会”​​
							运作的大额捐款网络。
						</div>
						<div class="box-footer-right">
							<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { getBillPoliContribution, getBillMainPoliContribution, getBillPersonPoliContribution } from "@/api/deepdig";

import setChart from "@/utils/setChart";

import getPieChart from "./utils/piechart";
import getSankeyChart from "./utils/sankey";

import Img1 from "./assets/images/1.png";
import Img2 from "./assets/images/2.png";
import Img3 from "./assets/images/3.png";
import Img4 from "./assets/images/4.png";
import Img5 from "./assets/images/5.png";
import Img6 from "./assets/images/6.png";
import Img7 from "./assets/images/7.png";
import Img8 from "./assets/images/8.png";
import Img9 from "./assets/images/9.png";
import Img10 from "./assets/images/10.png";

import Cyy from "@/assets/icons/cyy.png";
import Zyy from "@/assets/icons/zyy.png";
import Ghd from "@/assets/icons/ghd.png";
import Mzd from "@/assets/icons/mzd.png";
import AnalysisBox from "@/components/BoxBackground/analysisBox.vue";

const activeBtnIndex = ref(0);
const itemActiveIndex = ref(0);

const currentPersonName = computed(() => {
	if (mainPoliContribution.value && mainPoliContribution.value[itemActiveIndex.value]) {
		return mainPoliContribution.value[itemActiveIndex.value].name;
	}
	return "";
});

// const majorList = ref([
// 	{
// 		name: "参议院",
// 		data1: [
// 			{
// 				name: "共和党",
// 				img: Ghd,
// 				num: "$1,550,000"
// 			},
// 			{
// 				name: "民主党",
// 				img: Mzd,
// 				num: "$298,000"
// 			}
// 		],
// 		data2: [
// 			{
// 				img: Img1,
// 				name: "马尔科·卢比奥",
// 				dangpai: Ghd,
// 				yuanbie: Cyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$1,550,000"
// 			},
// 			{
// 				img: Img2,
// 				name: "史蒂夫·戴恩斯",
// 				dangpai: Ghd,
// 				yuanbie: Cyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$820,000"
// 			},
// 			{
// 				img: Img3,
// 				name: "伯尼·莫雷诺",
// 				dangpai: Ghd,
// 				yuanbie: Cyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$50,000"
// 			},
// 			{
// 				img: Img4,
// 				name: "戴夫·麦考密克",
// 				dangpai: Ghd,
// 				yuanbie: Cyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$50,000"
// 			},
// 			{
// 				img: Img5,
// 				name: "蒂姆·希伊",
// 				dangpai: Ghd,
// 				yuanbie: Cyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$35,000"
// 			},
// 			{
// 				img: Img6,
// 				name: "史蒂夫·戴恩斯",
// 				dangpai: Ghd,
// 				yuanbie: Cyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$35,000"
// 			},
// 			{
// 				img: Img7,
// 				name: "皮特·赫格塞思",
// 				dangpai: Ghd,
// 				yuanbie: Cyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$35,000"
// 			},
// 			{
// 				img: Img8,
// 				name: "安妮·海瑟薇",
// 				dangpai: Ghd,
// 				yuanbie: Cyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$35,000"
// 			},
// 			{
// 				img: Img9,
// 				name: "贾米森·格里尔",
// 				dangpai: Ghd,
// 				yuanbie: Cyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$35,000"
// 			},
// 			{
// 				img: Img10,
// 				name: "迈克·华尔兹",
// 				dangpai: Ghd,
// 				yuanbie: Cyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$35,000"
// 			}
// 		]
// 	},
// 	{
// 		name: "众议院",
// 		data1: [
// 			{
// 				name: "共和党",
// 				img: Ghd,
// 				num: "$1,550,000"
// 			},
// 			{
// 				name: "民主党",
// 				img: Mzd,
// 				num: "$298,000"
// 			}
// 		],
// 		data2: [
// 			{
// 				img: Img1,
// 				name: "马尔科·卢比奥",
// 				dangpai: Ghd,
// 				yuanbie: Zyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$1,550,000"
// 			},
// 			{
// 				img: Img2,
// 				name: "史蒂夫·戴恩斯",
// 				dangpai: Ghd,
// 				yuanbie: Zyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$820,000"
// 			},
// 			{
// 				img: Img3,
// 				name: "伯尼·莫雷诺",
// 				dangpai: Ghd,
// 				yuanbie: Zyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$50,000"
// 			},
// 			{
// 				img: Img4,
// 				name: "戴夫·麦考密克",
// 				dangpai: Ghd,
// 				yuanbie: Zyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$50,000"
// 			},
// 			{
// 				img: Img5,
// 				name: "蒂姆·希伊",
// 				dangpai: Ghd,
// 				yuanbie: Zyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$35,000"
// 			},
// 			{
// 				img: Img6,
// 				name: "史蒂夫·戴恩斯",
// 				dangpai: Ghd,
// 				yuanbie: Zyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$35,000"
// 			},
// 			{
// 				img: Img7,
// 				name: "皮特·赫格塞思",
// 				dangpai: Ghd,
// 				yuanbie: Zyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$35,000"
// 			},
// 			{
// 				img: Img8,
// 				name: "安妮·海瑟薇",
// 				dangpai: Ghd,
// 				yuanbie: Zyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$35,000"
// 			},
// 			{
// 				img: Img9,
// 				name: "贾米森·格里尔",
// 				dangpai: Ghd,
// 				yuanbie: Zyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$35,000"
// 			},
// 			{
// 				img: Img10,
// 				name: "迈克·华尔兹",
// 				dangpai: Ghd,
// 				yuanbie: Zyy,
// 				zhiwei: "众议院预算委员会主席",
// 				num: "$35,000"
// 			}
// 		]
// 	}
// ]);

const chart1Data = ref();

const areaList = ref([]);

const chart2Data = ref([]);

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

const sankeyColors = [
	"#5470c6",
	"#91cc75",
	"#fac858",
	"#ee6666",
	"#73c0de",
	"#3ba272",
	"#fc8452",
	"#9a60b4",
	"#ea7ccc",
	"#a2c0f1",
	"#f596aa",
	"#e6b422",
	"#4b2c20"
];

const partyContributionList = ref([
	{
		name: "共和党",
		img: Ghd,
		num: "$0"
	},
	{
		name: "民主党",
		img: Mzd,
		num: "$0"
	}
]);

// 获取党派政治献金
const poliContribution = ref();
const getPoliContribution = async () => {
	const currentType = activeBtnIndex.value === 0 ? "参议院" : "众议院";
	const params = {
		id: window.sessionStorage.getItem("billId"),
		personCongress: currentType
	};
	try {
		const res = await getBillPoliContribution(params);
		if (res.code === 200) {
			poliContribution.value = res.data;

			// 重置为默认值
			partyContributionList.value = [
				{ name: "共和党", img: Ghd, num: "$0" },
				{ name: "民主党", img: Mzd, num: "$0" }
			];

			if (res.data && res.data.length > 0) {
				res.data.forEach(item => {
					const totalAmount = item.totalJe || 0;
					if (item.dp === "Republican") {
						partyContributionList.value[0].num = `$${totalAmount.toLocaleString()}`;
					} else {
						partyContributionList.value[1].num = `$${totalAmount.toLocaleString()}`;
					}
				});
			} else {
				partyContributionList.value[0].num = "$0";
				partyContributionList.value[1].num = "$0";
			}
		} else {
			partyContributionList.value = [
				{ name: "共和党", img: Ghd, num: "$0" },
				{ name: "民主党", img: Mzd, num: "$0" }
			];
		}
	} catch (error) {
		partyContributionList.value = [
			{ name: "共和党", img: Ghd, num: "$0" },
			{ name: "民主党", img: Mzd, num: "$0" }
		];
	}
};

watch(activeBtnIndex, () => {
	itemActiveIndex.value = 0;
	getPoliContribution();
	getMainPoliContribution();
});

// 获取主要议员政治献金
const mainPoliContribution = ref();
const clearPersonDetails = () => {
	personPoliContribution.value = null;
	fullSourceList.value = [];
	renderSankeyChart();

	chart2Data.value = [];
	areaList.value = [];
	let chart2 = getPieChart([], chart2ColorList.value);
	setChart(chart2, "chart2");
};

const getMainPoliContribution = async () => {
	const currentType = activeBtnIndex.value === 0 ? "参议院" : "众议院";
	const params = {
		id: window.sessionStorage.getItem("billId"),
		personCongress: currentType
	};
	try {
		const res = await getBillMainPoliContribution(params);
		// 打印主要议员政治献金
		console.log("主要议员政治献金:", res);
		if (res.code === 200) {
			mainPoliContribution.value = res.data.map(item => ({
				...item,
				formattedTotalJe: `$${(item.totalJe || 0).toLocaleString()}`
			}));
			// 默认选中第一个人
			if (mainPoliContribution.value.length > 0) {
				handlePersonClick(mainPoliContribution.value[0], 0);
			} else {
				clearPersonDetails();
			}
		} else {
			mainPoliContribution.value = [];
			clearPersonDetails();
		}
	} catch (error) {
		mainPoliContribution.value = [];
		clearPersonDetails();
	}
};

// Sankey data state
const fullSourceList = ref([]);
const showAllSankeyData = ref(false);

const renderSankeyChart = () => {
	const sourceList = showAllSankeyData.value ? fullSourceList.value : fullSourceList.value.slice(0, 5);

	if (sourceList.length > 0) {
		const currentPerson = mainPoliContribution.value[itemActiveIndex.value];
		const personName = currentPerson ? currentPerson.name : "Person";

		const totalAmount = sourceList.reduce((sum, item) => sum + (item.amount || 0), 0);

		const nodes = [
			{
				name: personName,
				value: totalAmount,
				label: { position: "left" },
				itemStyle: {
					color: "#FF1493"
				}
			},
			...sourceList.map((item, index) => ({
				name: item.orgName,
				value: item.amount,
				itemStyle: {
					color: sankeyColors[index % sankeyColors.length]
				}
			}))
		];

		const links = sourceList.map(item => ({
			source: item.orgName,
			target: personName,
			value: item.amount
		}));

		let chart1 = getSankeyChart(nodes, links);
		setChart(chart1, "chart1");
	} else {
		let chart1 = getSankeyChart([], []);
		setChart(chart1, "chart1");
	}
};

const toggleSankeyData = () => {
	showAllSankeyData.value = !showAllSankeyData.value;
	renderSankeyChart();
};

// 获取人员政治献金来源及行业领域分布
const personPoliContribution = ref();
const getPersonPoliContribution = async personId => {
	if (!personId) return;
	const params = {
		id: window.sessionStorage.getItem("billId"),
		personId: personId
	};
	try {
		const res = await getBillPersonPoliContribution(params);
		// 打印人员政治献金
		console.log("人员政治献金:", res);
		if (res.code === 200 && res.data) {
			personPoliContribution.value = res.data;

			fullSourceList.value = res.data.sourceList || [];
			showAllSankeyData.value = false; // Reset to default (top 5)
			renderSankeyChart();

			// Update Industry List (Chart 2 and List)
			const industries = res.data.industryList || [];

			// Update Chart 2 Data
			chart2Data.value = industries.map(item => ({
				name: item.industryName,
				value: item.amount
			}));

			// Re-render Chart 2
			let chart2 = getPieChart(chart2Data.value, chart2ColorList.value);
			setChart(chart2, "chart2");

			// Update List Data
			// Sort by amount desc to ensure first item is max for progress bar
			const sortedIndustries = [...industries].sort((a, b) => (b.amount || 0) - (a.amount || 0));

			areaList.value = sortedIndustries.map(item => ({
				name: item.industryName,
				num: item.amount,
				numtext: `$${(item.amount || 0).toLocaleString()}`,
				insNum: item.orgNum
			}));
		} else {
			personPoliContribution.value = [];
			fullSourceList.value = [];
			renderSankeyChart();

			chart2Data.value = [];
			areaList.value = [];
			let chart2 = getPieChart([], chart2ColorList.value);
			setChart(chart2, "chart2");
		}
	} catch (error) {
		console.error(error);
		personPoliContribution.value = [];
		fullSourceList.value = [];
		renderSankeyChart();

		chart2Data.value = [];
		areaList.value = [];
		let chart2 = getPieChart([], chart2ColorList.value);
		setChart(chart2, "chart2");
	}
};

const handlePersonClick = (item, index) => {
	itemActiveIndex.value = index;
	if (item && item.personid) {
		getPersonPoliContribution(item.personid);
	}
};

onMounted(() => {
	getPoliContribution();
	getMainPoliContribution();

	let chart1 = getSankeyChart();
	setChart(chart1, "chart1");

	let chart2 = getPieChart(chart2Data.value, chart2ColorList.value);
	setChart(chart2, "chart2");
});
</script>

<style lang="scss" scoped>
.wrapper {
	display: flex;
	gap: 16px;

	.box-header {
		height: 51px;
		width: 100%;
		display: flex;
		position: relative;

		.icon {
			width: 8px;
			height: 20px;
			margin-top: 18px;
			border-radius: 0 4px 4px 0;
			background: rgba(5, 95, 194, 1);
		}

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

		.btn-box {
			display: flex;
			gap: 8px;
			position: absolute;
			right: 84px;
			top: 15px;

			.btn {
				height: 28px;
				padding: 0 8px;
				box-sizing: border-box;
				color: var(--btn-plain-text-color);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 28px;
				border-radius: 4px;
				background: var(--btn-plain-bg-color);
				border: 1px solid var(--btn-plain-border-color);
				cursor: pointer;
			}

			.btnActive {
				color: var(--btn-active-text-color);
				background: var(--btn-active-bg-color);
				border: 1px solid var(--btn-active-border-color);
			}
		}

		.header-right {
			position: absolute;
			right: 12px;
			top: 14px;
			display: flex;
			gap: 16px;

			.more-btn {
				color: rgba(5, 95, 194, 1);
				font-size: 14px;
				cursor: pointer;
				margin-top: 2px;

				&:hover {
					opacity: 0.8;
				}
			}

			.right-icon {
				width: 24px;
				height: 24px;

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

	.btn-box {
		display: flex;
		gap: 8px;

		.btn {
			height: 28px;
			padding: 0 8px;
			box-sizing: border-box;
			color: var(--btn-plain-text-color);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 400;
			line-height: 28px;
			border-radius: 4px;
			background: var(--btn-plain-bg-color);
			border: 1px solid var(--btn-plain-border-color);
			cursor: pointer;
		}

		.btnActive {
			color: var(--btn-active-text-color);
			background: var(--btn-active-bg-color);
			border: 1px solid var(--btn-active-border-color);
		}
	}

	.box-footer {
		margin: 0 auto;
		display: flex;
		width: 1034px;
		height: 40px;
		box-sizing: border-box;
		border: 1px solid rgba(231, 243, 255, 1);
		border-radius: 4px;
		background: rgba(246, 250, 255, 1);

		.box-footer-left {
			width: 19px;
			height: 20px;
			margin-top: 10px;
			margin-left: 12px;

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

		.box-footer-center {
			margin-left: 13px;
			width: 941px;
			height: 40px;
			line-height: 40px;
			color: rgba(5, 95, 194, 1);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 400;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.box-footer-right {
			margin-left: 13px;
			margin-top: 8px;
			width: 24px;
			height: 24px;

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

	.left {
		margin-top: 16px;
		width: 520px;
		height: 846px;

		.box1 {
			width: 520px;
			height: 846px;
			.box1-main {
				.box1-main-top {
					width: 486px;
					height: 110px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 4px;
					background: rgba(247, 248, 249, 1);
					margin: 8px auto;

					.top-item {
						display: flex;
						align-items: center;
						width: 450px;
						height: 30px;
						margin: 15px auto;

						.icon {
							width: 30px;
							height: 30px;

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

						.name {
							height: 30px;
							margin-left: 10px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 18px;
							font-weight: 700;
							line-height: 30px;
						}

						.line {
							margin-left: 10px;
							width: 202px;
							height: 8px;
							border-radius: 0px 4px 4px 0px;
						}

						.line1 {
							background: linear-gradient(270deg, rgba(206, 79, 81, 1), rgba(206, 79, 81, 0) 100%);
						}

						.line2 {
							background: linear-gradient(270deg, rgba(5, 95, 194, 1), rgba(5, 95, 194, 0) 100%);
						}

						.num {
							margin-left: 10px;
							width: 120px;
							height: 24px;
							text-align: right;
							font-family: Microsoft YaHei;
							font-size: 18px;
							font-weight: 700;
							line-height: 24px;
						}

						.num1 {
							color: rgba(206, 79, 81, 1);
						}

						.num2 {
							color: rgba(5, 95, 194, 1);
						}
					}
				}

				.box1-main-main {
					margin: 0 auto;
					margin-top: 6px;
					width: 498px;
					height: 640px;
					overflow: auto;

					.item {
						display: flex;
						position: relative;
						height: 64px;
						box-sizing: border-box;
						border-radius: 4px;
						border: 1px soild transparent;
						border-bottom: 1px solid rgba(234, 236, 238, 1);

						.item-left {
							width: 40px;
							height: 40px;
							margin-top: 11px;
							margin-left: 14px;

							img {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.item-center {
							margin-left: 11px;

							.center-top {
								display: flex;

								.name {
									height: 24px;
									margin-top: 7px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 24px;
								}

								.icon1 {
									width: 16px;
									height: 16px;
									margin-left: 7px;
									margin-top: 11px;

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

								.icon2 {
									width: 16px;
									height: 16px;
									margin-left: 2px;
									margin-top: 11px;

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

							.center-footer {
								height: 24px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 24px;
							}
						}

						.item-right {
							position: absolute;
							right: 16px;
							top: 19px;
							height: 24px;
							text-align: right;
							color: rgba(206, 79, 81, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
						}
					}

					.itemActive {
						background: rgba(246, 250, 255, 1);
						border: 1px solid rgba(174, 214, 255, 1);
					}
				}
			}
		}
	}

	.right {
		margin-top: 16px;
		width: 1064px;
		height: 846px;

		.box2 {
			width: 1064px;
			height: 415px;
			.box2-main {
				width: 1020px;
				height: 302px;
				margin: 0 auto;
				margin-bottom: 9px;

				.chart-box2 {
					width: 1020px;
					height: 302px;
				}
			}
		}

		.box3 {
			margin-top: 16px;
			width: 1064px;
			height: 415px;
			// 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);

			.box3-main {
				width: 1020px;
				height: 300px;
				margin: 0 auto;
				margin-top: 3px;
				margin-bottom: 9px;
				display: flex;

				.box3-main-left {
					width: 492px;
				}

				.box3-main-right {
					width: 518px;
					margin-left: 10px;
					overflow: auto;

					.box3-main-right-item {
						height: 60px;
						width: 518px;
						box-sizing: border-box;
						display: flex;
						align-items: center;

						.id {
							margin-left: 15px;
							width: 24px;
							height: 24px;
							background: #e7f3ff;
							border-radius: 12px;
							color: rgba(5, 95, 194, 1);
							font-family: Microsoft YaHei;
							font-size: 12px;
							font-weight: 400;
							line-height: 24px;
							text-align: center;
						}

						.name {
							margin-left: 13px;
							width: 80px;
							height: 24px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
						}

						.line {
							margin-left: 25px;
							width: 166px;
							height: 8px;

							.inner-line {
								height: 8px;
								border-radius: 0px 4px 4px 0px;
								background: linear-gradient(270deg, rgba(5, 95, 194, 1), rgba(5, 95, 194, 0) 100%);
							}
						}

						.num {
							margin-left: 17px;
							width: 75px;
							height: 30px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 30px;
						}

						.more {
							margin-left: 25px;
							width: 80px;
							height: 30px;
							color: rgba(5, 95, 194, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 30px;
						}

						&:nth-child(2n-1) {
							border-top: 1px solid rgba(234, 236, 238, 1);
							border-radius: 4px;
							background: rgba(247, 248, 249, 1);
						}
					}
				}
			}
		}
	}
}
</style>
