<template>
	<BillPageShell>
		<div class="wrap">
			<div class="left">
				<div class="box1">
				<AnalysisBox title="典型阶段耗时分析">
					<div class="analysis-ai-wrapper analysis-ai-wrapper--box1">
						<div class="box1-main" :class="{ 'box1-main--full': !timeFooterText }">
							<div class="box1-main-center" id="chart1"></div>
							<div v-if="timeFooterText" class="box1-main-footer">
								<div class="box-footer-left">
									<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
								</div>
								<div class="box-footer-center">
									{{ timeFooterText }}
								</div>
								<div class="box-footer-right">
									<img src="../assets/icons/arrow-right.png" alt="" />
								</div>
							</div>
						</div>
						<div v-if="!aiPaneVisible.box1" class="analysis-ai-tip-row">
							<TipTab class="analysis-ai-tip" :text="'与历史同类法案的典型阶段耗时对比分析,数据来源：美国国会官网'" />
							<AiButton class="analysis-ai-tip-action" @mouseenter="handleShowAiPane('box1')" />
						</div>
						<div v-if="aiPaneVisible.box1" class="analysis-ai-pane" @mouseleave="handleHideAiPane('box1')">
							<AiPane :aiContent="overviewAiContent.box1" />
						</div>
					</div>
				</AnalysisBox>
			</div>
			<div class="box2">
				<AnalysisBox title="修正案次数分析">
					<div class="analysis-ai-wrapper analysis-ai-wrapper--box2">
						<div class="box2-main" :class="{ 'box2-main--full': !amendFooterText }">
							<div class="box2-main-center" id="chart2"></div>
							<div v-if="amendFooterText" class="box2-main-footer">
								<div class="box-footer-left">
									<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
								</div>
								<div class="box-footer-center">
									{{ amendFooterText }}
								</div>
								<div class="box-footer-right">
									<img src="../assets/icons/arrow-right.png" alt="" />
								</div>
							</div>
						</div>
						<div v-if="!aiPaneVisible.box2" class="analysis-ai-tip-row">
							<TipTab class="analysis-ai-tip" :text="'与历史同类法案的修正案次数对比分析,数据来源：美国国会官网'" />
							<AiButton class="analysis-ai-tip-action" @mouseenter="handleShowAiPane('box2')" />
						</div>
						<div v-if="aiPaneVisible.box2" class="analysis-ai-pane" @mouseleave="handleHideAiPane('box2')">
							<AiPane :aiContent="overviewAiContent.box2" />
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>
		<div class="right">
			<div class="box3">
				<AnalysisBox title="投票分析">
					<div class="vote-legend">
						<div class="vote-legend-item">
							<span class="vote-legend-dot agree"></span>
							<span>赞成票</span>
						</div>
						<div class="vote-legend-item">
							<span class="vote-legend-dot against"></span>
							<span>反对票</span>
						</div>
					</div>
					<div class="analysis-ai-wrapper analysis-ai-wrapper--box3">
						<div class="box3-main" :class="{ 'box3-main--full': !voteFooterText }">
							<div class="box3-main-center">
								<div class="box3-main-center-header">
									<div class="box3-main-center-header-box1">立法阶段</div>
									<div class="box3-main-center-header-box2">票数</div>
									<div class="box3-main-center-header-box3">平均区间</div>
									<div class="box3-main-center-header-box4">占比</div>
									<div class="box3-main-center-header-box5">
										倒戈人数<span style="font-weight: normal; display: inline-block">(平均区间)</span>
									</div>
								</div>
								<div class="box3-main-center-content">
									<div class="box3-main-center-content-box" v-for="item in voteAnalysisList"
										:key="item.actionId">
										<div class="item">
											<div class="item-box1">
												<div class="box1-left">
													<div
														style="width: 100%; display: flex; flex-direction: column; align-items: flex-end">
														<div class="name nameBlod" :title="item.actionTitle" style="
														white-space: nowrap;
														overflow: hidden;
														text-overflow: ellipsis;
														max-width: 100%;
													">
															{{ item.actionTitle }}
														</div>
														<div class="time">
															{{ formatDate(item.actionDate) }}
														</div>
													</div>
												</div>
												<div class="box1-right">
													<div class="box1-right-top">
														<el-progress :percentage="Number(item.agreePercent)"
															:show-text="false" color="rgb(33, 129, 57)">
														</el-progress>
													</div>
													<div class="box1-right-bottom">
														<el-progress :percentage="Number(item.againstPercent)"
															:show-text="false" color="rgb(206, 79, 81)">
														</el-progress>
													</div>
												</div>
											</div>
											<div class="item-box2">
												<div class="box2-1" style="color: rgb(33, 129, 57)">{{ item.agreeCount +
													"票" }}</div>
												<div class="box2-2" style="color: rgb(206, 79, 81)">{{ item.againstCount
													+ "票" }}</div>
											</div>
											<div class="item-box3">
												<div class="box3-1"></div>
												<div class="box3-2"></div>
											</div>
											<div class="item-box4">
												<div class="box4-1" style="color: rgb(33, 129, 57)">{{ item.agreePercent
													+ "%" }}</div>
												<div class="box4-2" style="color: rgb(206, 79, 81)">{{
													item.againstPercent + "%" }}</div>
											</div>
											<div class="item-box5"></div>
										</div>
										<div class="item">
											<div class="item-box1">
												<div class="box1-left">
													<div class="icon">
														<img :src="MZD" alt="" />
													</div>
													<div class="name">民主党</div>
												</div>
												<div class="box1-right">
													<div class="box1-right-top">
														<el-progress :percentage="Number(item.dagreePercent)"
															:show-text="false" color="rgb(33, 129, 57)">
														</el-progress>
													</div>
													<div class="box1-right-bottom">
														<el-progress :percentage="Number(item.dagainstPercent)"
															:show-text="false" color="rgb(206, 79, 81)">
														</el-progress>
													</div>
												</div>
											</div>
											<div class="item-box2">
												<div class="box2-1" style="color: rgb(33, 129, 57)">{{ item.dagreeCount
													+ "票" }}</div>
												<div class="box2-2" style="color: rgb(206, 79, 81)">{{
													item.dagainstCount + "票" }}</div>
											</div>
											<div class="item-box3"></div>
											<div class="item-box4">
												<div class="box4-1" style="color: rgb(33, 129, 57)">{{
													item.dagreePercent + "%" }}</div>
												<div class="box4-2" style="color: rgb(206, 79, 81)">{{
													item.dagainstPercent + "%" }}</div>
											</div>
											<div class="item-box5">
												<div class="box5-1" style="color: #ce4f51">{{ item.dreverseCount + "人"
												}}</div>
											</div>
										</div>
										<div class="item">
											<div class="item-box1">
												<div class="box1-left">
													<div class="icon">
														<img :src="GHD" alt="" />
													</div>
													<div class="name">共和党</div>
												</div>
												<div class="box1-right">
													<div class="box1-right-top">
														<el-progress :percentage="Number(item.ragreePercent)"
															:show-text="false" color="rgb(33, 129, 57)">
														</el-progress>
													</div>
													<div class="box1-right-bottom">
														<el-progress :percentage="Number(item.ragainstPercent)"
															:show-text="false" color="rgb(206, 79, 81)">
														</el-progress>
													</div>
												</div>
											</div>
											<div class="item-box2">
												<div class="box2-1" style="color: rgb(33, 129, 57)">{{ item.ragreeCount
													+ "票" }}</div>
												<div class="box2-2" style="color: rgb(206, 79, 81)">{{
													item.ragainstCount + "票" }}</div>
											</div>
											<div class="item-box3"></div>
											<div class="item-box4">
												<div class="box4-1" style="color: rgb(33, 129, 57)">{{
													item.ragreePercent + "%" }}</div>
												<div class="box4-2" style="color: rgb(206, 79, 81)">{{
													item.ragainstPercent + "%" }}</div>
											</div>
											<div class="item-box5">
												<div class="box5-1" style="color: #ce4f51">{{ item.rreverseCount + "人"
												}}</div>
											</div>
										</div>
									</div>
									<!-- <div class="box3-main-center-content-box">
								<div class="item" v-for="(item, index) in voteAnalysisList2" :key="index">
									<div class="item-box1">
										<div class="box1-left">
											<div class="icon" v-if="item.nameIcon">
												<img :src="item.nameIcon" alt="" />
											</div>
											<div>
												<div class="name" :class="{ nameBlod: item.nameBold }">
													{{ item.name }}
												</div>
												<div class="time">
													{{ item.time }}
												</div>
											</div>
										</div>
										<div class="box1-right">
											<div class="box1-right-top">
												<el-progress :percentage="item.supportRate" :show-text="false"> </el-progress>
											</div>
											<div class="box1-right-bottom">
												<el-progress :percentage="item.againistRate" :show-text="false"> </el-progress>
											</div>
										</div>
									</div>
									<div class="item-box2">
										<div class="box2-1">{{ item.support + "票" }}</div>
										<div class="box2-2">{{ item.againist + "票" }}</div>
									</div>
									<div class="item-box3">
										<div class="box3-1">{{ item.supportRank }}</div>
										<div class="box3-2">{{ item.againistRank }}</div>
									</div>
									<div class="item-box4">
										<div class="box4-1">{{ item.supportRate + "%" }}</div>
										<div class="box4-2">{{ item.againistRate + "%" }}</div>
									</div>
									<div class="item-box5">
										<div class="box5-1" v-if="item.people">{{ item.people+' 人' }}</div>
										<div class="box5-2" v-if="item.peopleRank">{{ `( ${item.peopleRank} )` }}</div>
									</div>
									<div class="item-box6">
										<div class="img-box" v-if="item.keyUser">
											<img :src="item.keyUser" alt="" />
										</div>
										<div v-else>
											<el-icon size="20" color="#555"><ArrowDownBold /></el-icon>
										</div>
									</div>
								</div>
							</div> -->
									<!-- <div class="box3-main-center-content-box">
								<div class="item" v-for="(item, index) in voteAnalysisList3" :key="index">
									<div class="item-box1">
										<div class="box1-left">
											<div class="icon" v-if="item.nameIcon">
												<img :src="item.nameIcon" alt="" />
											</div>
											<div>
												<div class="name" :class="{ nameBlod: item.nameBold }">
													{{ item.name }}
												</div>
												<div class="time">
													{{ item.time }}
												</div>
											</div>
										</div>
										<div class="box1-right">
											<div class="box1-right-top">
												<el-progress :percentage="item.supportRate" :show-text="false"> </el-progress>
											</div>
											<div class="box1-right-bottom">
												<el-progress :percentage="item.againistRate" :show-text="false"> </el-progress>
											</div>
										</div>
									</div>
									<div class="item-box2">
										<div class="box2-1">{{ item.support + "票" }}</div>
										<div class="box2-2">{{ item.againist + "票" }}</div>
									</div>
									<div class="item-box3">
										<div class="box3-1">{{ item.supportRank }}</div>
										<div class="box3-2">{{ item.againistRank }}</div>
									</div>
									<div class="item-box4">
										<div class="box4-1">{{ item.supportRate + "%" }}</div>
										<div class="box4-2">{{ item.againistRate + "%" }}</div>
									</div>
									<div class="item-box5">
										<div class="box5-1" v-if="item.people">{{ item.people+' 人' }}</div>
										<div class="box5-2" v-if="item.peopleRank">{{ `( ${item.peopleRank} )` }}</div>
									</div>
									<div class="item-box6">
										<div class="img-box" v-if="item.keyUser">
											<img :src="item.keyUser" alt="" />
										</div>
										<div v-else>
											<el-icon size="20" color="#555"><ArrowDownBold /></el-icon>
										</div>
									</div>
								</div>
							</div>
							<div class="box3-main-center-content-box">
								<div class="item" v-for="(item, index) in voteAnalysisList4" :key="index">
									<div class="item-box1">
										<div class="box1-left">
											<div class="icon" v-if="item.nameIcon">
												<img :src="item.nameIcon" alt="" />
											</div>
											<div>
												<div class="name" :class="{ nameBlod: item.nameBold }">
													{{ item.name }}
												</div>
												<div class="time">
													{{ item.time }}
												</div>
											</div>
										</div>
										<div class="box1-right">
											<div class="box1-right-top">
												<el-progress :percentage="item.supportRate" :show-text="false"> </el-progress>
											</div>
											<div class="box1-right-bottom">
												<el-progress :percentage="item.againistRate" :show-text="false"> </el-progress>
											</div>
										</div>
									</div>
									<div class="item-box2">
										<div class="box2-1">{{ item.support + "票" }}</div>
										<div class="box2-2">{{ item.againist + "票" }}</div>
									</div>
									<div class="item-box3">
										<div class="box3-1">{{ item.supportRank }}</div>
										<div class="box3-2">{{ item.againistRank }}</div>
									</div>
									<div class="item-box4">
										<div class="box4-1">{{ item.supportRate + "%" }}</div>
										<div class="box4-2">{{ item.againistRate + "%" }}</div>
									</div>
									<div class="item-box5">
										<div class="box5-1" v-if="item.people">{{ item.people+' 人' }}</div>
										<div class="box5-2" v-if="item.peopleRank">{{ `( ${item.peopleRank} )` }}</div>
									</div>
									<div class="item-box6">
										<div class="img-box" v-if="item.keyUser">
											<img :src="item.keyUser" alt="" />
										</div>
										<div v-else>
											<el-icon size="20" color="#555"><ArrowDownBold /></el-icon>
										</div>
									</div>
								</div>
							</div> -->
								</div>
							</div>
							<div v-if="voteFooterText" class="box3-main-footer">
								<div class="box-footer-left">
									<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
								</div>
								<div class="box-footer-center">
									{{ voteFooterText }}
								</div>
								<div class="box-footer-right">
									<img src="../assets/icons/arrow-right.png" alt="" />
								</div>
							</div>
							<div v-if="!aiPaneVisible.box3" class="analysis-ai-tip-row">
								<TipTab class="analysis-ai-tip" />
								<AiButton class="analysis-ai-tip-action" @mouseenter="handleShowAiPane('box3')" />
							</div>
							<div v-if="aiPaneVisible.box3" class="analysis-ai-pane"
								@mouseleave="handleHideAiPane('box3')">
								<AiPane :aiContent="overviewAiContent.box3" />
							</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>
	</div>
	</BillPageShell>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getBillTimeAnalyze, getBillAmeAnalyzeCount, getBillTp } from "@/api/deepdig";
import getBoxPlotChcart from "./utils/boxplot";
import * as echarts from "echarts";
import { getChartAnalysis } from "@/api/aiAnalysis/index";
import TipTab from "@/components/base/TipTab/index.vue";
import AiButton from "@/components/base/Ai/AiButton/index.vue";
import AiPane from "@/components/base/Ai/AiPane/index.vue";
import { BillPageShell } from "../../components/layout";

import icon1 from "./assets/images/icon1.png";
import icon2 from "./assets/images/icon2.png";
import icon3 from "./assets/images/icon3.png";
import icon4 from "./assets/images/icon4.png";
import icon5 from "./assets/images/icon5.png";
import icon6 from "./assets/images/icon6.png";
import icon7 from "./assets/images/icon7.png";
import icon8 from "./assets/images/icon8.png";
import keyUser from "./assets/images/keyUser.png";
import iconA from "./assets/images/icon-a.png";
import iconB from "./assets/images/icon-b.png";

import user1 from "./assets/images/user1.png";
import user2 from "./assets/images/user2.png";
import user3 from "./assets/images/user3.png";
import user4 from "./assets/images/user4.png";
import user5 from "./assets/images/user5.png";
import userIcon1 from "./assets/images/user-icon1.png";
import userIcon2 from "./assets/images/user-icon2.png";

import getPieChart from "./utils/pieChart";

import CYY from "@/assets/icons/cyy.png";
import ZYY from "@/assets/icons/zyy.png";
import MZD from "@/assets/icons/mzd.png";
import GHD from "@/assets/icons/ghd.png";

const voteAnalysisList1 = ref([
	{
		nameIcon: null,
		name: "委员会审议",
		time: "2025年5月20日",
		nameBold: true,
		support: 17,
		againist: 16,
		supportRank: "(15-20)",
		againistRank: "(14-19)",
		supportRate: 51.5,
		againistRate: 48.5,
		people: "",
		keyUser: null
	},
	{
		nameIcon: iconA,
		name: "民主党",
		support: 1,
		againist: 15,
		supportRank: "",
		againistRank: "",
		supportRate: 7.3,
		againistRate: 92.7,
		people: 1,
		peopleRank: "0-1",
		keyUser: keyUser
	},
	{
		nameIcon: iconB,
		name: "共和党",
		support: 16,
		againist: 1,
		supportRank: "",
		againistRank: "",
		supportRate: 94.5,
		againistRate: 5.5,
		people: 1,
		peopleRank: "1-2",
		keyUser: keyUser
	}
]);

const voteAnalysisList2 = ref([
	{
		nameIcon: null,
		name: "众议院投票",
		time: "2025年5月20日",
		nameBold: true,
		support: 215,
		againist: 214,
		supportRank: "(210-220)",
		againistRank: "(200-215)",
		supportRate: 50.1,
		againistRate: 49.9,
		people: "",
		keyUser: null
	},
	{
		nameIcon: iconA,
		name: "民主党",
		support: 0,
		againist: 212,
		supportRank: "",
		againistRank: "",
		supportRate: 0,
		againistRate: 92.7,
		people: 0,
		peopleRank: "0-1",
		keyUser: keyUser
	},
	{
		nameIcon: iconB,
		name: "共和党",
		support: 215,
		againist: 3,
		supportRank: "",
		againistRank: "",
		supportRate: 98.7,
		againistRate: 1.3,
		people: 3,
		peopleRank: "1-3",
		keyUser: keyUser
	}
]);

const voteAnalysisList3 = ref([
	{
		nameIcon: null,
		name: "参议院投票",
		time: "2025年5月20日",
		nameBold: true,
		support: 51,
		againist: 50,
		supportRank: "(48-51)",
		againistRank: "(49-50)",
		supportRate: 50.5,
		againistRate: 49.5,
		people: "",
		keyUser: null
	},
	{
		nameIcon: iconA,
		name: "民主党",
		support: 1,
		againist: 15,
		supportRank: "",
		againistRank: "",
		supportRate: 7.3,
		againistRate: 92.7,
		people: 1,
		peopleRank: "0-1",
		keyUser: keyUser
	},
	{
		nameIcon: iconB,
		name: "共和党",
		support: 16,
		againist: 1,
		supportRank: "",
		againistRank: "",
		supportRate: 94.5,
		againistRate: 5.5,
		people: 1,
		peopleRank: "1-2",
		keyUser: keyUser
	}
]);

const voteAnalysisList4 = ref([
	{
		nameIcon: null,
		name: "众议院二次投票",
		time: "2025年5月20日",
		nameBold: true,
		support: 17,
		againist: 16,
		supportRank: "(15-20)",
		againistRank: "(14-19)",
		supportRate: 51.5,
		againistRate: 48.5,
		people: "",
		keyUser: null
	},
	{
		nameIcon: iconA,
		name: "民主党",
		support: 1,
		againist: 15,
		supportRank: "",
		againistRank: "",
		supportRate: 7.3,
		againistRate: 92.7,
		people: 1,
		peopleRank: "0-1",
		keyUser: keyUser
	},
	{
		nameIcon: iconB,
		name: "共和党",
		support: 16,
		againist: 1,
		supportRank: "",
		againistRank: "",
		supportRate: 94.5,
		againistRate: 5.5,
		people: 1,
		peopleRank: "1-2",
		keyUser: keyUser
	}
]);

// 底部说明文案（接口预留，默认不展示）
const timeFooterText = ref("");
const amendFooterText = ref("");
const voteFooterText = ref("");

// AI面板显示状态（box1=典型阶段耗时，box2=修正案次数分析，box3=投票分析）
const aiPaneVisible = ref({
	box1: false,
	box2: false,
	box3: false
});

const overviewAiContent = ref({
	box1: "智能总结生成中...",
	box2: "智能总结生成中...",
	box3: "智能总结生成中..."
});

const aiPaneFetched = ref({
	box1: false,
	box2: false,
	box3: false
});

const aiPaneLoading = ref({
	box1: false,
	box2: false,
	box3: false
});

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

const chartData1 = ref({
	dataX: ["众议院通过", "参议院通过", "两院协商", "总统签署"],
	dataY: [
		[23, 28, 92, 81, 64, 54, 72, 38, 39, 66, 90, 55, 68, 69, 82, 42, 47, 49, 85, 81],
		[31, 35, 67, 37, 80, 92, 110, 28, 55, 46, 81, 35, 46, 47, 49, 85, 84, 89, 55, 43],
		[20, 18, 62, 51, 33, 37, 39, 48, 59, 35, 36, 38, 60, 49, 42, 32, 25, 39, 55, 41],
		[20, 9, 18, 21, 28, 33, 30, 17, 12, 13, 20, 29, 28, 26, 12, 28, 26, 21, 32, 35]
	]
});

const chartData2 = ref({
	dataX: ["委员会审议", "辩论", "表决"],
	dataY: [
		[12, 15, 32, 42, 37, 33, 21, 20, 14, 15, 18, 25, 35, 36, 37, 33, 44],
		[23, 33, 21, 16, 18, 25, 28, 36, 33, 31, 30, 15, 16, 25, 23, 24, 20],
		[20, 18, 33, 21, 20, 18, 19, 18, 29, 30, 27, 22, 21, 20, 22, 13, 17]
	]
});

// 耗时分析
const handleGetBillTimeAnalyze = async () => {
	const params = {
		id: window.sessionStorage.getItem("billId")
	};
	try {
		const res = await getBillTimeAnalyze(params);
		console.log("耗时分析", res);
		chartData1.value.dataX = res.data.map(item => {
			return item.lcmc;
		});
		chartData1.value.dataY = res.data.map(item => {
			return [item.zshs, item.pjx, item.zws, item.pjs, item.zdhs, item.dysc];
		});
	} catch (error) { }
};

// 修正案次数分析
const handleGetBillAmeAnalyzeCount = async () => {
	const params = {
		id: window.sessionStorage.getItem("billId")
	};
	try {
		const res = await getBillAmeAnalyzeCount(params);
		console.log("修正案次数分析", res);
		chartData2.value.dataX = res.data.map(item => {
			return item.lcmc;
		});
		chartData2.value.dataY = res.data.map(item => {
			// 兼容多种字段名，防止字段不存在导致图表消失
			// 顺序：最小(min), Q1(小), 中位数(median), Q3(大), 最大(max), 该法案(current)
			return [
				item.zsCount || item.zscs || item.zshs || 0,
				item.jsx || item.pjx || 0,
				item.zws || item.zwcs || 0,
				item.pjs || item.pjcs || 0,
				item.zdCount || item.zdcs || item.zdhs || 0,
				item.dysc || item.dycs || 0
			];
		});
	} catch (error) {
		console.error("修正案次数分析 error", error);
	}
};

// 获取投票分析
const voteAnalysisList = ref([]);
const formatDate = dateStr => {
	if (!dateStr) return "";
	const date = new Date(dateStr);
	const y = date.getFullYear();
	const m = date.getMonth() + 1;
	const d = date.getDate();
	return `${y}年${m}月${d}日`;
};
const handleGetBillVoteAnalyze = async () => {
	const params = {
		id: window.sessionStorage.getItem("billId")
	};
	try {
		const res = await getBillTp(params);
		console.log("投票分析", res);
		voteAnalysisList.value = res.data;
	} catch (error) {
		console.error("投票分析 error", error);
	}
};

const buildAiChartPayload = key => {
	if (key === "box1") {
		return {
			type: "箱线图",
			name: "典型阶段耗时",
			data: {
				categories: Array.isArray(chartData1.value?.dataX) ? chartData1.value.dataX : [],
				samples: Array.isArray(chartData1.value?.dataY) ? chartData1.value.dataY : []
			}
		};
	}

	if (key === "box2") {
		return {
			type: "箱线图",
			name: "修正案次数分析",
			data: {
				categories: Array.isArray(chartData2.value?.dataX) ? chartData2.value.dataX : [],
				samples: Array.isArray(chartData2.value?.dataY) ? chartData2.value.dataY : []
			}
		};
	}

	if (key === "box3") {
		return {
			type: "投票分析",
			name: "投票分析",
			data: Array.isArray(voteAnalysisList.value) ? voteAnalysisList.value : []
		};
	}

	return { type: "", name: "", data: [] };
};

const requestAiPaneContent = async key => {
	if (!key || aiPaneLoading.value[key] || aiPaneFetched.value[key]) return;

	aiPaneLoading.value = { ...aiPaneLoading.value, [key]: true };
	overviewAiContent.value = { ...overviewAiContent.value, [key]: "智能总结生成中..." };

	try {
		const payload = buildAiChartPayload(key);
		const res = await getChartAnalysis(
			{ text: JSON.stringify(payload) },
			{
				onChunk: chunk => {
					const current = overviewAiContent.value[key];
					const base = current === "智能总结生成中..." ? "" : current;
					overviewAiContent.value = {
						...overviewAiContent.value,
						[key]: base + chunk
					};
				}
			}
		);

		const list = res?.data;
		const first = Array.isArray(list) ? list[0] : null;
		const interpretation = first?.解读 || first?.["解读"];
		if (interpretation) {
			overviewAiContent.value = {
				...overviewAiContent.value,
				[key]: interpretation
			};
		}

		aiPaneFetched.value = { ...aiPaneFetched.value, [key]: true };
	} catch (error) {
		console.error("获取图表解读失败", error);
		overviewAiContent.value = { ...overviewAiContent.value, [key]: "智能总结生成失败" };
	} finally {
		aiPaneLoading.value = { ...aiPaneLoading.value, [key]: false };
	}
};

const handleShowAiPane = key => {
	aiPaneVisible.value = {
		...aiPaneVisible.value,
		[key]: true
	};
	requestAiPaneContent(key);
};

const handleHideAiPane = key => {
	aiPaneVisible.value = {
		...aiPaneVisible.value,
		[key]: false
	};
};

onMounted(async () => {
	await handleGetBillTimeAnalyze();
	await handleGetBillAmeAnalyzeCount();
	await handleGetBillVoteAnalyze();

	let chart1 = getBoxPlotChcart(chartData1.value, "天");
	setChart(chart1, "chart1");

	const countLabels = {
		max: "最大次数",
		q3: "平均次数大",
		median: "次数中位数",
		q1: "平均次数小",
		min: "最小次数",
		current: "该法案修正案数量"
	};
	let chart2 = getBoxPlotChcart(chartData2.value, "项", countLabels);
	setChart(chart2, "chart2");
});
</script>

<style lang="scss" scoped>
.wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	direction: ltr;
	justify-content: flex-start;
	margin-bottom: 30px;


	.box-header {
		height: 56px;
		display: flex;
		position: relative;

		.header-left {
			margin-top: 18px;
			width: 8px;
			height: 20px;
			border-radius: 0 4px 4px 0;
			background: var(--color-main-active);
		}

		.title {
			margin-left: 14px;
			margin-top: 14px;
			height: 26px;
			line-height: 26px;
			color: var(--color-main-active);
			font-family: Microsoft YaHei;
			font-size: 20px;
			font-weight: 700;
		}

		.header-switch-box {
			position: absolute;
			top: 14px;
			right: 349px;
			width: 160px;
			height: 28px;
			background: url("./assets/images/chartActive.png");
			background-size: 100% 100%;
			display: flex;
			cursor: pointer;

			.header-switch-box-left {
				width: 80px;
			}

			.header-switch-box-right {
				width: 80px;
			}
		}

		.headerSwitchBox1 {
			background: url("./assets/images/dataActive.png") !important;
			background-size: 100% 100% !important;
		}

		.header-btn-box {
			position: absolute;
			top: 14px;
			right: 52px;
			display: flex;

			.btn {
				margin-left: 20px;
			}
		}

		.header-right {
			position: absolute;
			top: 14px;
			right: 12px;
			display: flex;
			justify-content: flex-end;
			gap: 4px;

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

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

	.left {
		margin-top: 16px;
		width: 792px;
		flex: 0 0 792px;

		.box1 {
			width: 792px;
			height: 415px;

			.box1-main {
				height: 368px;

				&.box1-main--full {
					.box1-main-center {
						height: 340px;
					}
				}

				.box1-main-center {
					width: 792px;
					height: 300px;
					margin: 0 5px;
					overflow: hidden;

					.box1-main-table {
						display: flex;
						margin-top: 30px;
						width: 758px;
						height: 240px;
						border-radius: 4px;
						border: 1px solid #e7f1ff;

						.table-name {
							flex: 1;
							text-align: center;

							.name-item {
								height: 48px;
								display: flex;
								align-items: center;
								justify-content: center;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
							}

							.name-item:nth-child(2n-1) {
								background: rgba(246, 251, 255, 1);
							}
						}

						.table-item {
							flex: 1;

							.item {
								height: 48px;
								display: flex;
								align-items: center;
								justify-content: center;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
							}

							.item:first-child {
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
							}

							.item:nth-child(3) {
								color: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
							}

							.item:nth-child(5) {
								color: rgba(206, 79, 81, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
							}

							.item:nth-child(2n-1) {
								background: rgba(246, 251, 255, 1);
							}
						}
					}
				}

				.box1-main-footer {
					width: 762px;
					height: 40px;
					display: flex;
					box-sizing: border-box;
					margin: 0 auto;
					margin-top: 6px;
					background: rgba(246, 251, 255, 1);

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

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

					.box-footer-center {
						margin-left: 13px;
						margin-top: 8px;
						width: 669px;
						height: 24px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 24px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.box-footer-right {
						margin-left: 13px;
						margin-top: 8px;
						width: 24px;
						height: 24px;
						background: rgba(231, 241, 255, 1);
						border-radius: 12px;
						background: #e7f1ff;
						box-sizing: border-box;
						padding: 3px;

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

		.box2 {
			margin-top: 17px;
			width: 792px;
			height: 415px;

			.box2-main {
				height: 359px;

				&.box2-main--full {
					.box2-main-center {
						height: 340px;
					}
				}

				.box2-main-center {
					height: 300px;
					margin: 0 5px;
					display: flex;

					.box2-main-center-left {
						width: 480px;
						height: 300px;

						.left-item {
							width: 480px;
							height: 54px;
							box-sizing: border-box;
							border: 1px solid rgba(241, 243, 246, 1);
							border-radius: 4px;
							margin-bottom: 8px;
							display: flex;

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

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

							.left-item-center {
								margin-left: 14px;
								width: 240px;

								.left-item-center-top {
									display: flex;

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

									.icon1 {
										margin-left: 6px;
										margin-top: 9px;
										width: 16px;
										height: 16px;

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

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

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

								.left-item-center-bottom {
									color: rgba(132, 136, 142, 1);
									font-family: Microsoft YaHei;
									font-size: 14px;
									font-weight: 400;
									line-height: 20px;
								}
							}

							.left-item-right {
								width: 150px;
								text-align: right;

								.left-item-right-top {
									height: 24px;
									margin-top: 5px;
									color: rgba(206, 79, 81, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 24px;
								}

								.left-item-right-bottom {
									height: 20px;
									color: rgba(132, 136, 142, 1);
									font-family: Microsoft YaHei;
									font-size: 14px;
									font-weight: 400;
									line-height: 20px;
								}
							}
						}
					}

					.box2-main-center-right {
						width: 330px;
						margin: 0 auto;
						position: relative;

						#chart2 {
							position: relative;
							width: 330px;
							height: 340px;
							z-index: 0;
						}

						.info-box {
							position: absolute;
							z-index: 99;
							left: 90px;
							top: 75px;
							width: 150px;
							height: 150px;
							border-radius: 50px;

							.item {
								margin: 15px 0;

								.item-top {
									display: flex;
									justify-content: center;
									height: 24px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;

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

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

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

								.item-footer1 {
									color: rgb(33, 129, 57);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 24px;
									text-align: center;
								}
							}
						}
					}
				}

				.box2-main-footer {
					width: 762px;
					height: 40px;
					display: flex;
					box-sizing: border-box;
					margin: 0 auto;
					margin-top: 6px;
					background: rgba(246, 251, 255, 1);

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

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

					.box-footer-center {
						margin-left: 13px;
						margin-top: 8px;
						width: 669px;
						height: 24px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 24px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.box-footer-right {
						margin-left: 13px;
						margin-top: 8px;
						width: 24px;
						height: 24px;
						background: rgba(231, 241, 255, 1);
						border-radius: 12px;
						background: #e7f1ff;
						box-sizing: border-box;
						padding: 3px;

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

	.right {
		margin-left: 16px;
		margin-top: 16px;
		width: 792px;
		flex: 0 0 792px;
		height: 847px;

		.box3 {
			width: 100%;
			height: 100%;
			position: relative;

			.vote-legend {
				position: absolute;
				top: 10px;
				left: 50%;
				transform: translateX(-50%);
				display: inline-flex;
				align-items: center;
				gap: 20px;
				z-index: 2;

				.vote-legend-item {
					display: inline-flex;
					align-items: center;
					gap: 8px;
					font-size: 14px;
					color: rgba(95, 101, 108, 1);
					line-height: 22px;
				}

				.vote-legend-dot {
					display: inline-block;
					width: 12px;
					height: 12px;
					border-radius: 50%;

					&.agree {
						background: rgb(33, 129, 57);
					}

					&.against {
						background: rgb(206, 79, 81);
					}
				}
			}

			.box3-main {
				height: 791px;

				&.box3-main--full {
					.box3-main-center {
						height: 772px;
					}
				}

				.box3-main-center {
					height: 732px;
					margin: 0 20px;
					overflow-x: hidden;

					.box3-main-center-header {
						height: 50px;
						display: flex;
						width: 100%;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 600;
						line-height: 22px;
						padding: 0 20px;
						box-sizing: border-box;

						.box3-main-center-header-box1 {
							flex: 370 1 0;
							min-width: 0;
							text-align: center;
						}

						.box3-main-center-header-box2 {
							flex: 60 1 0;
							min-width: 0;
							text-align: center;
						}

						.box3-main-center-header-box3 {
							flex: 75 1 0;
							min-width: 0;
							text-align: center;
						}

						.box3-main-center-header-box4 {
							flex: 70 1 0;
							min-width: 0;
							text-align: center;
						}

						.box3-main-center-header-box5 {
							flex: 100 1 0;
							min-width: 0;
							text-align: center;
						}
					}

					.box3-main-center-content {
						height: 722px;
						overflow-y: auto;
						overflow-x: hidden;

						.box3-main-center-content-box {
							width: 100%;
							box-sizing: border-box;
							height: 160px;
							border: 1px solid rgba(243, 243, 244, 1);
							border-radius: 4px;
							background: rgba(255, 255, 255, 1);
							margin-bottom: 10px;
							padding: 20px;

							.item {
								display: flex;
								align-items: center;
								height: 45px;
								width: 100%;

								.item-box1 {
									flex: 370 1 0;
									min-width: 0;
									display: flex;
									align-items: center;

									.box1-left {
										width: 130px;
										display: flex;
										justify-content: flex-end;
										align-items: center;

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

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

										.name {
											margin-left: 10px;
											height: 22px;
											color: rgba(59, 65, 75, 1);
											font-family: Microsoft YaHei;
											font-size: 16px;
											line-height: 22px;
											text-align: right;
										}

										.nameBlod {
											font-weight: 600;
										}

										.time {
											height: 22px;
											color: rgba(95, 101, 108, 1);
											font-family: Microsoft YaHei;
											font-size: 14px;
											font-weight: 400;
											line-height: 22px;
											text-align: right;
										}
									}

									.box1-right {
										// border-left: 1px solid rgba(243, 243, 244, 1);
										// border-right: 1px solid rgba(243, 243, 244, 1);
										flex: 1;
										min-width: 0;
										display: flex;
										flex-direction: column;
										justify-content: center;
										gap: 5px;

										.box1-right-top {
											height: 14px;
											display: flex;
											align-items: center;
											box-sizing: border-box;

											:deep(.el-progress-bar__outer) {
												height: 6px;
											}

											:deep(.el-progress-bar__inner) {
												background: rgb(33, 129, 57);
												border-radius: 0;
											}

											:deep(.el-progress-bar__outer) {
												background: rgba(33, 129, 57, 0.1);
												border-radius: 0;
											}
										}

										.box1-right-bottom {
											height: 14px;
											display: flex;
											align-items: center;
											box-sizing: border-box;

											:deep(.el-progress-bar__outer) {
												height: 6px;
											}

											:deep(.el-progress-bar__inner) {
												background: rgb(206, 79, 81);
												border-radius: 0;
											}

											:deep(.el-progress-bar__outer) {
												background: rgba(206, 79, 81, 0.1);
												border-radius: 0;
											}
										}
									}
								}

								.item-box2 {
									flex: 60 1 0;
									min-width: 0;
									display: flex;
									flex-direction: column;
									justify-content: center;
									gap: 5px;
									text-align: center;

									.box2-1 {
										height: 14px;
										line-height: 14px;
										color: rgb(33, 129, 57);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										text-align: center;
									}

									.box2-2 {
										height: 14px;
										line-height: 14px;
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										text-align: center;
										color: rgb(206, 79, 81);
									}
								}

								.item-box3 {
									flex: 75 1 0;
									min-width: 0;
									text-align: center;

									.box3-1 {
										height: 14px;
										color: rgb(33, 129, 57);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 14px;
										text-align: center;
									}

									.box3-2 {
										margin-top: 5px;
										height: 14px;
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 14px;
										text-align: center;
										color: rgb(206, 79, 81);
									}
								}

								.item-box4 {
									flex: 70 1 0;
									min-width: 0;
									display: flex;
									flex-direction: column;
									justify-content: center;
									gap: 5px;
									text-align: center;

									.box4-1 {
										height: 14px;
										line-height: 14px;
										color: rgb(33, 129, 57);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										text-align: center;
									}

									.box4-2 {
										height: 14px;
										line-height: 14px;
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										text-align: center;
										color: rgb(206, 79, 81);
									}
								}

								.item-box5 {
									flex: 100 1 0;
									min-width: 0;
									text-align: center;

									.box5-1 {
										height: 14px;
										color: rgba(206, 79, 81, 1);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 600;
										line-height: 14px;
									}

									.box5-2 {
										margin-top: 5px;
										height: 14px;
										color: rgba(206, 79, 81, 1);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 14px;
									}
								}
							}
						}
					}
				}

				.box3-main-footer {
					width: 762px;
					height: 40px;
					display: flex;
					box-sizing: border-box;
					margin: 0 auto;
					margin-top: 6px;
					background: rgba(246, 251, 255, 1);

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

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

					.box-footer-center {
						margin-left: 13px;
						margin-top: 8px;
						width: 669px;
						height: 24px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 24px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.box-footer-right {
						margin-left: 13px;
						margin-top: 8px;
						width: 24px;
						height: 24px;
						background: rgba(231, 241, 255, 1);
						border-radius: 12px;
						background: #e7f1ff;
						box-sizing: border-box;
						padding: 3px;

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

:deep(.el-progress-bar__outer) {
	height: 8px !important;
	margin-bottom: 8px;
	width: 200px;
	margin-left: 10px;
}

.analysis-ai-wrapper {
	position: relative;
	height: 100%;
}

.analysis-ai-tip-row {
	position: absolute;
	left: 0;
	bottom: 15px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.analysis-ai-tip-action {
	position: absolute;
	right: 0px;
}

.analysis-ai-pane {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 5;
	pointer-events: none;

	:deep(.ai-pane-wrapper) {
		pointer-events: auto;
	}
}
</style>
