<template>
	<div :class="config.rootClass">
		<!-- 人物基础 -->
		<div class="header">
			<div class="avatar">
				<el-avatar :size="160" shape="circle" :src="avatarUrl" />
			</div>
			<div class="info">
				<p class="name-cn">{{ characterInfo.name }}</p>
				<p class="name-en">{{ characterInfo.ename }}</p>
				<div class="introduction">
					<p>{{ characterInfo.description }}</p>
				</div>
				<div class="domain">
					<template v-if="config.headerTagType === 'areaTag'">
						<AreaTag v-for="tag in characterInfo.industryList" :key="tag"
							:tag-name="tag.industryName" />
					</template>
					<template v-else>
						<p v-for="item in characterInfo.industryList" :key="item" class="cl1" :class="{
							cl1: item.status === '1',
							cl2: item.status === '2',
							cl3: item.status === '3',
							cl4: item.status === '4',
							cl5: item.status === '5',
							cl6: item.status === '6'
						}">
							{{ item.industryName }}
						</p>
					</template>
				</div>
			</div>
		</div>

		<!-- 信息区分 -->
		<div class="info-divide">
			<div v-for="item in config.tabs" :key="item"
				:class="{ active: infoActive === item }"
				:style="config.tabWidth === '50%' ? { width: '50%' } : {}"
				@click="infoActive = item">
				{{ item }}
			</div>
		</div>

		<!-- 人物详情 -->
		<div class="info-content" v-show="infoActive === '人物详情'">
			<div class="left">
				<!-- 科技观点 / 核心观点 - 统一使用 WordCloudChart -->
				<AnalysisBox :title="config.wordCloudTitle" width="1064px" height="300px" :show-all-btn="false" class="left-top">
					<template #header-btn>
						<el-select v-model="numActive" class="tab-select" :teleported="true" @change="handleChangeYear">
							<el-option v-for="item in yearOptions" :key="item" :label="item" :value="item" />
						</el-select>
					</template>
					<div class="chart-box">
						<WordCloudChart v-if="characterView.length > 0" :key="wordCloudKey" :data="characterView" />
						<el-empty v-else description="暂无数据" :image-size="80" />
					</div>
				</AnalysisBox>

				<!-- 资金来源 (仅国会议员) -->
				<template v-if="config.showFundSource">
					<AnalysisBox title=" 资金来源" width="1064px" :show-all-btn="false" class="left-center auto-height-box">
						<template #header-btn>
							<el-select v-model="selectedOption" placeholder="请选择" class="tab-select" :teleported="true"
								@change="handleChangeYearList">
								<el-option v-for="item in yearList" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</template>
						<div class="fund-table-main">
							<el-table :data="CharacterFundSource" style="width: 100%" :header-cell-style="{
								background: 'transparent',
								color: 'rgba(59, 65, 75, 1)',
								fontWeight: 700,
								fontSize: '16px',
								borderBottom: '1px solid rgba(234, 236, 238, 1)'
							}" :cell-style="{
								fontSize: '16px',
								fontWeight: 400,
								color: 'rgba(59, 65, 75, 1)'
							}" :row-class-name="tableRowClassName" :row-style="{ height: '50px' }" size="large">
								<el-table-column prop="rank" label="排名" width="80" align="center" />
								<el-table-column prop="contributor" label="贡献者" min-width="300" />
								<el-table-column prop="totalAmount" label="总捐款" width="150" align="right" />
								<el-table-column prop="individualAmount" label="个人捐款" width="150" align="right" />
								<el-table-column prop="pacsAmount" label="PACs捐款" width="150" align="right" />
							</el-table>
							<div class="table-pagination">
								<span class="table-pagination-total">共{{ fundTotal }}项</span>
								<el-pagination v-if="fundTotal / fundPageSize >= 2" :current-page="fundCurrentPage"
									:page-size="fundPageSize" :total="fundTotal" :pager-count="4" layout="prev, pager, next"
									background @current-change="handleFundPageChange" />
							</div>
						</div>
					</AnalysisBox>
				</template>

				<!-- 最新动态 -->
				<AnalysisBox title="最新动态" width="1064px" :show-all-btn="false" class="left-bottom auto-height-box">
					<template #header-btn>
						<div class="input">
							<input type="checkbox" v-model="isChecked" @change="handleChange"
								style="padding-top: 2px;" /><span style="margin-left: 8px">只看涉华动态</span>
						</div>
					</template>
					<div class="dynamic-main">
						<template v-if="CharacterLatestDynamic.length === 0">
							<el-empty description="暂无数据" :image-size="80" style="margin-bottom: 125px;" />
						</template>
						<template v-else>
							<div v-for="(item, idx) in CharacterLatestDynamic" :key="item" class="main-item">
							<div class="time">
								<div class="year">{{ item.time.split("-")[0] }}</div>
								<div class="date">{{ item.time.split("-")[1] + "月" + item.time.split("-")[2] + "日" }}</div>
							</div>
							<div class="timeline-col">
								<div class="timeline-line-top" v-if="idx !== 0"></div>
								<div class="timeline-icon">
									<img :src="typeIcon1" alt="" v-if="item.remarks === true" />
									<img :src="typeIcon2" alt="" v-else />
								</div>
								<div class="timeline-line-bottom" v-if="idx !== CharacterLatestDynamic.length - 1"></div>
							</div>
							<div class="content">
								<div :class="{ 'content-type1': item.remarks === true, 'content-type2': item.remarks === false }">
									<p v-if="item.remarks === true" class="content-title1">{{ item.content }}</p>
									<p v-else class="content-title2">{{ item.title }}</p>
									<p v-if="item.remarks === true" class="content-title-en">{{ item.econtent }}</p>
								</div>
								<p v-if="item.remarks === false" class="content-contentcontent">{{ item.content }}</p>
								<div class="content-tag">
									<div style="display: flex; flex-wrap: wrap; gap: 8px;">
										<AreaTag v-for="tag in item.industryList" :key="tag"
											:tag-name="tag.industryName" @click="handleClickTag(tag.industryName)" />
									</div>
									<div class="origin">来源：{{ item.orgName }}</div>
								</div>
							</div>
						</div>
						</template>
					</div>
					<div v-if="CharacterLatestDynamic.length > 0" class="pagination">
						<div class="total">{{ `共 ${total} 项` }}</div>
						<el-pagination @current-change="handleCurrentChange" :page-size="pageSize"
							:current-page="currentPage" background layout="prev, pager, next" :total="total"
							class="custom-pagination" />
					</div>
				</AnalysisBox>
			</div>

			<div class="right">
				<!-- 基本信息 -->
				<AnalysisBox title="基本信息" width="520px" :height="boxHeight" :show-all-btn="false" class="right-top" v-if="characterBasicInfo">
					<div class="main-content">
						<div class="baseInfo">
							<div v-for="field in config.basicInfoFields" :key="field.key" class="baseInfo-item">
								<div class="baseInfo-item-title" :class="field.titleClass || ''">{{ field.label }}</div>
								<div class="baseInfo-item-content" :class="field.contentClass || ''">
									<template v-if="field.type === 'text'">
										{{ characterBasicInfo[field.key] }}
									</template>
									<template v-else-if="field.type === 'education'">
										<template v-if="field.format === 'school+major'">
											<div v-for="item in characterBasicInfo.educationList" :key="item.school">
												{{ item.school + item.major }}
											</div>
										</template>
										<template v-else>
											<span class="education-item"
												v-for="value in characterBasicInfo.educationList"
												:key="value.school">
												{{ value.school + "（" + value.major + "）" }}
											</span>
										</template>
									</template>
									<template v-else-if="field.type === 'industry'">
										<span class="span" v-for="item in characterBasicInfo[field.key]"
											:key="item">{{ item.industryName }}</span>
									</template>
								</div>
							</div>
						</div>
						<div class="company">
							<div class="company-title">{{ config.companySectionTitle }}</div>
							<div class="company-content">
								<div v-for="item in characterBasicInfo.organizationList" :key="item"
									class="company-item">
									<img :src="item.imageUrl ? item.imageUrl : DefaultIcon2" alt="" />
									<div>
										<div class="company-cn">{{ item.name }}</div>
										<div class="company-name">{{ item.ename }}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</AnalysisBox>

				<!-- 履历 - inline 方式 -->
				<template v-if="config.resumeMode === 'inline'">
					<AnalysisBox :title="config.resumeTitle" width="520px" :show-all-btn="false" class="right-bottom auto-height-box">
						<template #header-btn>
							<div class="resume-tabs">
								<button class="resume-tab" :class="{ active: resumeType === 'career' }"
									@click="switchResumeType('career')">职业履历</button>
								<button class="resume-tab" :class="{ active: resumeType === 'education' }"
									@click="switchResumeType('education')">教育履历</button>
							</div>
						</template>
						<div class="content-main">
							<template v-if="resumeType === 'career'">
								<template v-if="currentResumeList && currentResumeList.length > 0">
									<div v-for="item in currentResumeList" :key="item.startTime" class="content-item">
										<img :src="resumeIcon01" alt="" class="image01" />
										<div class="content-item-time">{{ item.startTime.split('-')[0] + '-' + getendTime(item) }}</div>
										<div class="content-item-title"><span>{{ item.orgName }}</span><span style="margin-left: 5px;margin-right: 5px;">|</span><span>{{ item.jobName }}</span></div>
										<div class="content-item-content">{{ item.content }}</div>
										<div class="content-item-door" v-if="item.door">
											<img :src="resumeIcon02" alt="" />
											<span>{{ item.door }}</span>
										</div>
									</div>
								</template>
								<el-empty v-else :image-size="80" description="暂无职业履历" />
							</template>
							<template v-else>
								<template v-if="currentResumeList && currentResumeList.length > 0">
									<div v-for="(item, index) in currentResumeList" :key="index" class="content-item">
										<img :src="resumeIcon01" alt="" class="image01" />
										<div class="content-item-time">{{ item.startTime.split('-')[0] + '-' + getendTime(item) }}</div>
										<div class="content-item-title">{{ item.school + '(' + item.country + ')' }}</div>
										<div class="content-item-content">{{ item.description }}</div>
									</div>
								</template>
								<el-empty v-else :image-size="80" description="暂无教育履历" />
							</template>
						</div>
					</AnalysisBox>
				</template>
				<!-- 履历 - card 方式 -->
				<template v-else>
					<ResumeCard :title="config.resumeTitle" :list="CharacterResume"
						@download="handleDownload" @collect="handleCollect" />
				</template>
			</div>
		</div>

		<!-- 历史提案 (国会议员) -->
		<template v-if="config.historicalProposalType === 'bill'">
			<div v-if="infoActive === '历史提案'" class="proposal-wrapper">
				<div class="proposal-tab-switcher">
					<button :class="['proposal-tab', { active: newsTab === 'history' }]" @click="newsTab = 'history'">
						<span>历史提案</span>
						<svg v-if="newsTab === 'history'" class="proposal-tab-arrow" width="8" height="8" viewBox="0 0 8 8" fill="currentColor">
							<path d="M4 0L8 4L4 8V0Z" />
						</svg>
					</button>
					<button :class="['proposal-tab', { active: newsTab === 'potential' }]" @click="newsTab = 'potential'">
						<span>潜在提案</span>
						<svg v-if="newsTab === 'potential'" class="proposal-tab-arrow" width="8" height="8" viewBox="0 0 8 8" fill="currentColor">
							<path d="M4 0L8 4L4 8V0Z" />
						</svg>
					</button>
				</div>
				<BillTracker v-if="newsTab === 'history'" />
				<PotentialNews v-else />
			</div>
		</template>


		<!-- 成果报告 (智库) -->
		<template v-if="config.historicalProposalType === 'news'">
			<NewsTracker v-if="infoActive === '成果报告'" />
		</template>

		<!-- 人物关系 - 传递 personId 确保 graph 能获取数据 -->
		<CharacterRelationships v-if="infoActive === '人物关系'" />

		<!-- 相关情况 -->
		<RelevantSituation v-if="config.showRelevantSituation && infoActive === '相关情况'" />

		<!-- 弹框 -->
		<el-dialog v-model="dialogVisible" width="761px" class="viewpoint-dialog" :modal="false" :draggable="true"
			:lock-scroll="false" :show-close="config.rootClass === 'member-of-congress' ? false : undefined">
			<template #header>
				<div class="viewpoint-header">
					<div class="viewpoint-title">
						<span v-if="config.dialogTagPrefix" class="viewpoint-tag">{{ config.dialogTagPrefix }}{{ currentTag }}</span>
						<span class="viewpoint-label">{{ config.dialogTagSuffix }}</span>
					</div>
					<template v-if="config.rootClass === 'member-of-congress'">
						<div class="viewpoint-close" @click="dialogVisible = false">
							<el-icon :size="16"><Close /></el-icon>
						</div>
					</template>
				</div>
			</template>
			<div class="viewpoint-body">
				<div v-for="item in CharacterFieldView" :key="item.id" class="viewpoint-item">
					<div class="viewpoint-avatar">
						<el-avatar :size="48" shape="circle"
							:src="item.imageUrl ? getProxyUrl(item.imageUrl) : DefaultIcon1" />
					</div>
					<div class="viewpoint-content">
						<div class="viewpoint-arrow"></div>
						<div class="viewpoint-card">
							<div class="viewpoint-card-header">
								<span class="viewpoint-name">{{ item.name }}</span>
								<span class="viewpoint-job">{{ item.jobName }}</span>
							</div>
							<div class="viewpoint-desc">{{ item.remarks }}</div>
						</div>
					</div>
				</div>
				<div v-if="!CharacterFieldView || CharacterFieldView.length === 0" class="viewpoint-empty">暂无数据</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from "vue";
import { useRoute } from 'vue-router';
import WordCloudChart from "@/components/base/WordCloundChart/index.vue";
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue';
import AreaTag from '@/components/base/AreaTag/index.vue';
import DefaultIcon1 from '@/assets/icons/default-icon1.png';
import DefaultIcon2 from '@/assets/icons/default-icon2.png';
import { Close } from '@element-plus/icons-vue';
import { ElEmpty } from 'element-plus';

import {
	getCharacterGlobalInfo,
	getCharacterBasicInfo,
	getCharacterView,
	getCharacterLatestDynamic,
	getCharacterResume,
	getCharacterFieldView,
	getCharacterFundSource,
	getCharacterReducationResume,
	getareaType
} from "@/api/characterPage/characterPage.js";

import { CHARACTER_CONFIG } from './config.js';

const props = defineProps({
	type: { type: [Number, String], required: true },
	personId: { type: String, default: '' }
});

const route = useRoute();
const config = computed(() => CHARACTER_CONFIG[Number(props.type)] || CHARACTER_CONFIG[1]);
const personIdRef = ref(props.personId || route.query.personId || "Y000064");

// 类型特定资源 - 动态导入
const typeAssets = ref({});
const loadTypeAssets = async () => {
	const t = Number(props.type);
	if (t === 1) {
		const assets = await import('../techLeader/assets/type1.png');
		const assets2 = await import('../techLeader/assets/type2.png');
		const icon01 = await import('../techLeader/assets/icon01.png');
		const icon02 = await import('../techLeader/assets/icon02.png');
		typeAssets.value = { type1: assets.default, type2: assets2.default, icon01: icon01.default, icon02: icon02.default };
	} else if (t === 2) {
		const assets = await import('../memberOfCongress/assets/type1.png');
		const assets2 = await import('../memberOfCongress/assets/type2.png');
		const icon01 = await import('../memberOfCongress/assets/icon01.png');
		const icon02 = await import('../memberOfCongress/assets/icon02.png');
		typeAssets.value = { type1: assets.default, type2: assets2.default, icon01: icon01.default, icon02: icon02.default };
	} else {
		const assets = await import('../thinkTankPerson/assets/type1.png');
		const assets2 = await import('../thinkTankPerson/assets/type2.png');
		const icon01 = await import('../thinkTankPerson/assets/icon01.png');
		const icon02 = await import('../thinkTankPerson/assets/icon02.png');
		typeAssets.value = { type1: assets.default, type2: assets2.default, icon01: icon01.default, icon02: icon02.default };
	}
};

const typeIcon1 = computed(() => typeAssets.value.type1 || '');
const typeIcon2 = computed(() => typeAssets.value.type2 || '');
const resumeIcon01 = computed(() => typeAssets.value.icon01 || '');
const resumeIcon02 = computed(() => typeAssets.value.icon02 || '');

// 子组件
import CharacterRelationships from '../techLeader/components/characterRelationships/index.vue';
import RelevantSituation from '../techLeader/components/relevantSituation/index.vue';
import BillTracker from '../memberOfCongress/components/historicalProposal/components/BillTracker.vue';
import PotentialNews from '../memberOfCongress/components/historicalProposal/components/PotentialNews.vue';
import NewsTracker from '../thinkTankPerson/components/historicalProposal/components/NewsTracker.vue';
import ResumeCard from '../thinkTankPerson/components/Resume.vue';

// 图片代理
const getProxyUrl = (url) => {
	if (!url) return "";
	const urlStr = String(url);
	if (!urlStr.startsWith('http') || urlStr.includes('images.weserv.nl') || urlStr.includes('localhost') || urlStr.includes('127.0.0.1')) {
		return url;
	}
	const cleanUrl = urlStr.replace(/^https?:\/\//i, '');
	return `https://images.weserv.nl/?url=${encodeURIComponent(cleanUrl)}`;
};

const avatarUrl = computed(() => {
	const url = characterInfo.value.imageUrl;
	if (!url) return '';
	return config.value.useImageProxy ? getProxyUrl(url) : url;
});

// ============ 数据 ============
const characterInfo = ref({});
const characterBasicInfo = ref({});
const characterView = ref([]);
const wordCloudKey = ref(0);
const CharacterLatestDynamic = ref([]);
const CharacterResume = ref({});
const CharacterFieldView = ref([]);
const CharacterFundSource = ref([]);
const CharacterEducationResume = ref([]);

// ============ 状态 ============
const infoActive = ref("人物详情");
const resumeType = ref('career');
const newsTab = ref('history');
const numActive = ref('');
const yearOptions = ref([]);

// 分页 - 动态
const currentPage = ref(1);
const total = ref(0);
const pageSize = ref(7);
const loading = ref(false);
const abortController = ref(null);

// 资金来源
const fundCurrentPage = ref(1);
const fundPageSize = ref(4);
const fundTotal = ref(0);
const selectedOption = ref("all");
const yearList = ref([
	{ label: "全部", value: "all" },
	{ label: "2025", value: 2025 },
	{ label: "2024", value: 2024 },
	{ label: "2023", value: 2023 }
]);

const isChecked = ref(false);
const related = ref('N');
const dialogVisible = ref(false);
const currentTag = ref(null);
const areaList = ref([]);

// ============ 计算属性 ============
const boxHeight = computed(() => {
	const orgList = characterBasicInfo.value.organizationList;
	const rules = config.value.boxHeightRules;
	if (orgList === undefined) return rules.find(r => r.condition === 'undefined')?.value || '600px';
	if (orgList.length === 0) return rules.find(r => r.condition === 'empty')?.value || '400px';
	if (orgList.length <= 2) return rules.find(r => r.condition === 'lte2')?.value || '500px';
	return rules.find(r => r.condition === 'default')?.value || '600px';
});

const currentResumeList = computed(() => {
	return resumeType.value === 'career' ? CharacterResume.value : CharacterEducationResume.value;
});

// ============ 方法 ============
const getendTime = (item) => {
	if (item.endTime == null) {
		return item.endTimeStatus == 0 ? '至今' : '未知';
	} else {
		return item.endTime.split('-')[0];
	}
};

const switchResumeType = (type) => {
	resumeType.value = type;
	if (type === 'education' && CharacterEducationResume.value.length === 0) {
		getCharacterEducationResumeFn();
	}
};

// API 调用
const getCharacterGlobalInfoFn = async () => {
	const params = { personId: personIdRef.value };
	try {
		const res = await getCharacterGlobalInfo(params);
		if (res.code === 200 && res.data) {
			characterInfo.value = res.data;
		}
	} catch (error) { }
};

const getCharacterBasicInfoFn = async () => {
	const params = { personId: personIdRef.value };
	try {
		const res = await getCharacterBasicInfo(params);
		if (res.code === 200 && res.data) {
			characterBasicInfo.value = res.data;
		}
	} catch (error) { }
};

const getCharacterViewFn = async () => {
	const params = { personId: personIdRef.value };
	if (numActive.value !== config.value.yearDefault && numActive.value !== '全部' && numActive.value !== '全部时间') {
		params.year = numActive.value;
	}
	try {
		const res = await getCharacterView(params);
		if (res.code === 200 && res.data) {
			characterView.value = res.data.map(item => ({
				name: item.option,
				value: item.count
			}));
		} else {
			characterView.value = [];
		}
	} catch (error) {
		characterView.value = [];
	}
	// 强制刷新 WordCloudChart 组件
	wordCloudKey.value++;
};

const handleChangeYear = () => {
	characterView.value = [];
	getCharacterViewFn();
};

const getCharacterFieldViewFn = async (tagname) => {
	let areaId = window.sessionStorage.getItem("areaId") || "20";
	if (config.value.fieldViewMode === 'areaList' && tagname) {
		const areaItem = areaList.value.find(item => item.name === tagname);
		areaId = areaItem?.id || "20";
	}
	const params = { areaId };
	try {
		const res = await getCharacterFieldView(params);
		if (res.code === 200 && res.data) {
			CharacterFieldView.value = res.data;
		}
	} catch (error) { }
};

const handleChange = () => {
	related.value = isChecked.value ? 'Y' : 'N';
	getCharacterLatestDynamicFn();
};

const handleCurrentChange = (page) => {
	currentPage.value = page;
	getCharacterLatestDynamicFn();
};

const getCharacterLatestDynamicFn = async () => {
	if (abortController.value) {
		abortController.value.abort();
	}
	abortController.value = new AbortController();
	loading.value = true;
	const params = {
		personId: personIdRef.value,
		cRelated: related.value,
		currentPage: currentPage.value - 1,
		pageSize: pageSize.value
	};
	try {
		const res = await getCharacterLatestDynamic(params, abortController.value.signal);
		if (res.code === 200) {
			if (res.data && res.data.content) {
				CharacterLatestDynamic.value = res.data.content.map(item => ({
					title: item.title,
					content: item.content,
					econtent: item.econtent,
					time: item.time,
					industryList: item.industryList || ["人工智能"],
					orgName: item.orgName,
					remarks: item.remarks
				}));
				total.value = res.data.totalElements;
			} else {
				CharacterLatestDynamic.value = [];
				total.value = 0;
			}
		} else {
			CharacterLatestDynamic.value = [];
			total.value = 0;
		}
		loading.value = false;
	} catch (error) {
		if (error.name !== "AbortError") {
			console.error(error);
			loading.value = false;
		}
	}
};

const getCharacterResumeFn = async () => {
	const params = { personId: personIdRef.value };
	try {
		const res = await getCharacterResume(params);
		if (res.code === 200 && res.data) {
			CharacterResume.value = res.data;
		}
	} catch (error) { }
};

const getCharacterEducationResumeFn = async () => {
	const params = { personId: personIdRef.value };
	try {
		const res = await getCharacterReducationResume(params);
		if (res.code === 200 && res.data) {
			CharacterEducationResume.value = res.data;
		}
	} catch (error) { }
};

const getCharacterFundSourceFn = async () => {
	const params = {
		personId: personIdRef.value,
		pageSize: 4,
		currentPage: fundCurrentPage.value - 1,
	};
	if (selectedOption.value !== 'all') {
		params.year = selectedOption.value;
	}
	try {
		const res = await getCharacterFundSource(params);
		if (res.code === 200 && res.data) {
			fundTotal.value = res.data.totalElements;
			CharacterFundSource.value = res.data.content.map((item, index) => ({
				rank: index + 1,
				contributor: item.orgName,
				totalAmount: item.totalDonation,
				individualAmount: item.personalDonation,
				pacsAmount: item.pacsDonation
			}));
		}
	} catch (error) { }
};

const handleFundPageChange = (page) => {
	fundCurrentPage.value = page;
	getCharacterFundSourceFn();
};

const handleChangeYearList = () => {
	getCharacterFundSourceFn();
};

const handleGetAreaType = async () => {
	try {
		const res = await getareaType();
		if (res.code === 200 && res.data) {
			areaList.value = res.data;
		}
	} catch (error) { }
};

const handleClickTag = async (tag) => {
	currentTag.value = tag;
	dialogVisible.value = true;
	await getCharacterFieldViewFn(tag);
};

const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 0) return "highlight-row";
	return "";
};

const handleDownload = () => { };
const handleCollect = () => { };

const buildYearOptions = () => {
	if (config.value.yearBuildMode === 'dynamic') {
		const currentYear = new Date().getFullYear();
		const years = [];
		for (let i = 0; i < 5; i++) {
			years.push(String(currentYear - i));
		}
		yearOptions.value = [config.value.yearDefault, ...years];
	} else {
		yearOptions.value = config.value.yearStaticOptions;
	}
	numActive.value = config.value.yearDefault;
};

// ============ 初始化 ============
const init = async () => {
	await loadTypeAssets();
	buildYearOptions();

	// 共用 API
	getCharacterGlobalInfoFn();
	getCharacterBasicInfoFn();
	getCharacterLatestDynamicFn();
	getCharacterResumeFn();
	getCharacterViewFn();

	// 类型特有
	if (config.value.useAreaTypeApi) {
		handleGetAreaType();
	}
	if (config.value.showFundSource) {
		getCharacterFundSourceFn();
	}
	if (config.value.fieldViewMode === 'sessionStorage') {
		getCharacterFieldViewFn();
	}
};

onMounted(() => {
	init();
});
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}

:deep(.wrapper-main) {
	margin-top: 15px;
}

:deep(.el-select-dropdown__item) {
	text-align: center !important;
	justify-content: center;
}

/* ============ 通用布局 ============ */
.tech-leader,
.member-of-congress,
.think-tank-person {
	width: 1600px;
	margin: 0 auto;
	padding-bottom: 50px;

	.header {
		width: 1600px;
		height: 200px;
		margin: 16px auto;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 10px;
		box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
		padding: 20px;
		display: flex;
		align-items: center;

		.avatar {
			width: 160px;
			height: 160px;
			margin-right: 24px;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.info {
			flex: 1;

			.name-cn {
				font-size: 32px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 42px;
				color: rgb(59, 65, 75);
				margin-bottom: 8px;
			}

			.name-en {
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(59, 65, 75);
				margin-bottom: 6px;
			}

			.introduction {
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(59, 65, 75);
				margin-bottom: 6px;
			}

			.domain {
				font-size: 14px;
				display: flex;
				flex-wrap: wrap;
				gap: 8px;

				p {
					display: inline-block;
					padding: 1px 8px;
					border-radius: 4px;
					margin-right: 8px;
					border: 1px solid;
				}

				.cl1 { border-color: rgba(186, 224, 255, 1); background-color: rgba(230, 244, 255, 1); color: rgba(22, 119, 255, 1); }
				.cl2 { border-color: rgba(217, 247, 190, 1); background-color: rgba(246, 255, 237, 1); color: rgba(82, 196, 26, 1); }
				.cl3 { border-color: rgba(255, 241, 184, 1); background-color: rgba(255, 251, 230, 1); color: rgba(250, 173, 20, 1); }
				.cl4 { border-color: rgba(255, 204, 199, 1); background-color: rgba(255, 241, 240, 1); color: rgba(255, 77, 79, 1); }
				.cl5 { border-color: rgba(255, 241, 184, 1); background-color: rgba(255, 251, 230, 1); color: rgba(250, 173, 20, 1); }
				.cl6 { border-color: rgba(255, 204, 199, 1); background-color: rgba(255, 241, 240, 1); color: rgba(255, 77, 79, 1); }
			}
		}
	}

	.info-divide {
		width: 1600px;
		height: 64px;
		margin: 16px auto;
		background-color: rgba(255, 255, 255, 0.65);
		border-radius: 10px;
		box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
		padding: 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		div {
			width: 530px;
			height: 54px;
			text-align: center;
			font-size: 20px;
			font-weight: 400;
			font-family: "Microsoft YaHei";
			line-height: 54px;
			color: rgb(59, 65, 75);
			border-radius: 10px;
			cursor: pointer;

			&:hover {
				background: rgba(231, 243, 255, 1);
			}
		}

		.active {
			font-size: 24px;
			font-weight: 700;
			font-family: "Microsoft YaHei";
			line-height: 54px;
			color: rgb(5, 95, 194);
			background-color: rgba(231, 243, 255, 1);
			border: 2px solid rgba(174, 214, 255, 1);
		}
	}

	.info-content {
		width: 1600px;
		margin: 16px auto;
		display: flex;

		.left {
			width: 1064px;
			margin-right: 16px;

			.left-top {
				margin-bottom: 16px;

				.chart-box {
					width: 100%;
					height: 200px;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.left-center {
				margin-bottom: 16px;
			}

			/* ============ 最新动态 ============ */
			.left-bottom {
				display: flex;
				flex-direction: column;

				:deep(.wrapper-header) {
					position: relative;
					display: flex;
					align-items: center;
					height: 56px;
					padding: 0 24px;
					flex-shrink: 0;
				}

				:deep(.header-btn) {
					top: 16px;
				}

				.input {
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgba(132, 136, 142, 1);
					display: flex;
					align-items: center;

					input[type="checkbox"] {
						width: 14px;
						height: 14px;
						accent-color: #1890ff;
						cursor: pointer;
						margin: 0;
					}
				}

				.dynamic-main {
					padding: 0 22px;

					.main-item {
						display: flex;
						flex-direction: row;
						gap: 20px;
						align-items: flex-start;

						.time {
							flex-shrink: 0;
							display: flex;
							flex-direction: column;
							align-items: flex-end;
							padding-top: 18px;

							.year {
								font-size: 16px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								color: rgba(5, 95, 194, 1);
								line-height: 24px;
								letter-spacing: 1px;
							}

							.date {
								font-size: 16px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								color: rgba(5, 95, 194, 1);
								line-height: 24px;
								letter-spacing: 1px;
							}
						}

						/* 时间轴列：上线段 + 图标 + 下线段 */
						.timeline-col {
							flex-shrink: 0;
							display: flex;
							flex-direction: column;
							align-items: center;
							align-self: stretch;

							.timeline-line-top {
								width: 2px;
								height: 28px;
								background-color: rgba(234, 236, 238, 1);
								flex-shrink: 0;
							}

							.timeline-icon {
								width: 24px;
								height: 24px;
								flex-shrink: 0;

								img {
									width: 24px;
									height: 24px;
								}
							}

							.timeline-line-bottom {
								width: 2px;
								flex: 1;
								background-color: rgba(234, 236, 238, 1);
							}
						}

						.content {
							flex: 1;
							min-width: 0;
							padding: 16px 0;
							display: flex;
							flex-direction: column;
							gap: 12px;

							/* remarks=true 涉华观点卡片 */
							.content-type1 {
								background-color: rgba(246, 250, 255, 1);
								border-radius: 4px;
								border: 1px solid rgba(231, 243, 255, 1);
								padding: 12px 16px;
								display: flex;
								flex-direction: column;
								gap: 8px;

								.content-title1 {
									font-size: 16px;
									font-weight: 700;
									font-family: "Microsoft YaHei";
									color: rgba(59, 65, 75, 1);
									line-height: 24px;
									cursor: pointer;
								}

								.content-title-en {
									font-size: 16px;
									font-weight: 400;
									font-family: "Microsoft YaHei";
									color: rgba(59, 65, 75, 1);
									line-height: 24px;
									cursor: pointer;
									text-align: justify;
								}
							}

							/* remarks=false 新闻 */
							.content-type2 {
								.content-title2 {
									font-size: 18px;
									font-weight: 700;
									font-family: "Microsoft YaHei";
									color: rgba(59, 65, 75, 1);
									line-height: 24px;
									cursor: pointer;
								}
							}

							.content-contentcontent {
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 3;
								overflow: hidden;
								text-overflow: ellipsis;
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								color: rgba(95, 101, 108, 1);
								line-height: 24px;
								cursor: pointer;
							}

							/* 标签 + 来源行 */
							.content-tag {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.origin {
									font-size: 14px;
									font-weight: 400;
									font-family: "Microsoft YaHei";
									line-height: 22px;
									color: rgba(132, 136, 142, 1);
									cursor: pointer;
									white-space: nowrap;
									flex-shrink: 0;
								}
							}
						}
					}
				}

				.pagination {
					width: 100%;
					height: 76px;
					margin: 0;
					display: flex;
					padding: 0 31px 0 36px;
					justify-content: space-between;
					align-items: center;
					border-top: 1px solid rgba(234, 236, 238, 1);
					position: relative;
					z-index: 3;
					background: #fff;
					flex-shrink: 0;

					.total {
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						color: rgba(59, 65, 75, 1);
					}

					:deep(.custom-pagination) {
						display: flex;
						align-items: center;
					}

					:deep(.custom-pagination.el-pagination.is-background .el-pager li) {
						min-width: 32px;
						height: 32px;
						line-height: 32px;
						border-radius: 6px;
						margin: 0 6px;
						border: 1px solid rgba(0, 0, 0, 0.15);
						background-color: #fff;
						color: rgb(95, 101, 108);
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
					}

					:deep(.custom-pagination.el-pagination.is-background .el-pager li.is-active) {
						background-color: #fff;
						color: rgba(22, 119, 255, 1);
						border-color: rgba(22, 119, 255, 1);
					}

					:deep(.custom-pagination.el-pagination.is-background .el-pager li.is-ellipsis) {
						border: none;
						background-color: transparent;
						color: rgb(95, 101, 108);
						min-width: 16px;
						margin: 0 6px;
					}

					:deep(.custom-pagination.el-pagination.is-background .btn-prev),
					:deep(.custom-pagination.el-pagination.is-background .btn-next) {
						min-width: 32px;
						height: 32px;
						border-radius: 6px;
						border: 1px solid rgba(0, 0, 0, 0.15);
						background-color: #fff;
						color: rgb(95, 101, 108);
						font-size: 16px;
						font-family: "Microsoft YaHei";
						margin: 0 6px;
					}

					:deep(.custom-pagination.el-pagination.is-background .btn-prev.is-disabled),
					:deep(.custom-pagination.el-pagination.is-background .btn-next.is-disabled) {
						color: rgba(95, 101, 108, 0.45);
						border-color: rgb(235, 238, 242);
						background-color: #fff;
					}
				}
			}
		}

		.right {
			width: 520px;

			.right-top {
				margin-bottom: 16px;

				.main-content {
					width: 520px;
					padding: 0 48px 50px 34px;
					margin-top: 16px;

					.baseInfo {
						width: 438px;
						padding-bottom: 12px;
						border-bottom: 1px solid rgb(234, 236, 238);

						.baseInfo-item {
							display: flex;
							margin-bottom: 12px;

							.baseInfo-item-title {
								flex: 0 0 110px;
								width: 110px;
								font-size: 16px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								line-height: 24px;
								color: rgb(59, 65, 75);
								white-space: nowrap;
							}

							.baseInfo-item-content {
								margin-left: 14px;
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								line-height: 24px;
								color: rgb(59, 65, 75);
							}

							.long {
								width: 306px;
							}

							.longlong {
								width: 306px;
								display: flex;
								flex-wrap: wrap;
								gap: 4px;

								.span {
									padding: 2px 8px;
									border-radius: 4px;
									background-color: rgba(230, 244, 255, 1);
									border: 1px solid rgba(186, 224, 255, 1);
									color: rgba(22, 119, 255, 1);
									font-size: 14px;
									font-weight: 400;
									font-family: "Microsoft YaHei";
									line-height: 20px;
								}
							}
						}
					}

					.company {
						width: 438px;
						padding-top: 19px;

						.company-title {
							font-size: 16px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(59, 65, 75);
							margin-bottom: 19px;
						}

						.company-content {
							width: 409px;
							max-height: 114px;
							display: flex;
							flex-wrap: wrap;
							overflow-y: auto;
							scrollbar-width: none;
							-ms-overflow-style: none;

							.company-item {
								width: 180px;
								height: 49px;
								margin-bottom: 16px;
								display: flex;
								align-items: center;
								cursor: pointer;

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

								.company-cn {
									width: 130px;
									font-size: 16px;
									font-weight: 700;
									font-family: "Microsoft YaHei";
									line-height: 24px;
									color: rgb(59, 65, 75);
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}

								.company-name {
									width: 130px;
									font-size: 16px;
									font-weight: 400;
									font-family: "Microsoft YaHei";
									line-height: 24px;
									color: rgb(95, 101, 108);
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}
							}

							.company-item:nth-child(2n-1) {
								margin-right: 39px;
							}
						}

						&::-webkit-scrollbar {
							display: none;
						}
					}
				}
			}

			.right-bottom {
				.content-main {
					width: 480px;
					margin-left: 16px;

					.content-item {
						width: 454px;
						margin-bottom: 16px;
						margin-left: 26px;
						position: relative;

						.image01 {
							width: 14px;
							height: 12.13px;
							position: absolute;
							top: 8px;
							left: -26px;
						}

						.content-item-time {
							font-size: 16px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							line-height: 30px;
							color: rgb(5, 95, 194);
							margin-bottom: 8px;
						}

						.content-item-title {
							font-size: 16px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							line-height: 30px;
							color: rgb(59, 65, 75);
							margin-bottom: 8px;
						}

						.content-item-content {
							font-size: 16px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(95, 101, 108);
							margin-bottom: 8px;
						}

						.content-item-door {
							width: 300px;
							height: 32px;
							display: flex;
							align-items: center;
							padding: 4px 0 4px 11px;
							border-radius: 4px;
							background-color: rgba(255, 246, 240, 1);
							border: 1px solid rgba(250, 140, 22, 0.4);

							img {
								width: 20px;
								height: 24px;
								margin-right: 10px;
							}

							span {
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								line-height: 24px;
								color: rgba(255, 149, 77, 1);
							}
						}
					}

					:deep(.el-empty) {
						padding-bottom: 30px;
					}
				}
			}
		}
	}
}

/* ============ 自适应高度覆盖 ============ */
.auto-height-box {
	height: auto !important;

	:deep(.wrapper-main) {
		height: auto !important;
		overflow: visible !important;
	}
}

/* ============ 科技领袖特有 ============ */
.tech-leader {
	.info-content {
		height: auto;
	}
}

/* ============ 国会议员特有 ============ */
.member-of-congress {
	.select {
		width: 120px;
	}

	.fund-table-main {
		padding: 0 24px;
	}

	.table-pagination {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16px;
		padding-bottom: 16px;

		.table-pagination-total {
			font-size: 16px;
			color: rgba(59, 65, 75, 1);
		}
	}

	:deep(.el-table) {
		--el-table-border-color: rgba(234, 236, 238, 1);
		--el-table-header-bg-color: transparent;

		tr {
			background-color: rgba(255, 255, 255, 1);
		}

		.highlight-row {
			background-color: rgba(247, 248, 249, 1) !important;
		}

		th.el-table__cell {
			border-bottom: 1px solid rgba(234, 236, 238, 1);
		}

		td.el-table__cell {
			border-bottom: none;
		}
	}
}

/* ============ 智库特有 ============ */
.think-tank-person {
	.info-content {
		height: auto;
	}
}

/* ============ 弹框样式 ============ */
.viewpoint-dialog {
	border-radius: 10px;
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
}

.viewpoint-dialog.el-dialog {
	width: 761px !important;
	height: 669px !important;
	max-height: 669px !important;
	border-radius: 10px;
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.viewpoint-dialog .el-dialog__header {
	padding: 0;
	margin: 0;
	height: 52px;
	flex-shrink: 0;
}

.viewpoint-dialog .el-dialog__body {
	padding: 0;
	flex: 1;
	overflow: hidden;
}

.viewpoint-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 52px;
	padding: 0 24px;
	border-bottom: 1px solid rgba(231, 243, 255, 1);
	box-sizing: border-box;
}

.viewpoint-title {
	display: flex;
	align-items: center;
}

.viewpoint-tag {
	font-size: 18px;
	font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
	font-weight: 700;
	color: rgba(206, 79, 81, 1);
	line-height: 24px;
}

.viewpoint-label {
	font-size: 18px;
	font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
	font-weight: 700;
	color: rgba(59, 65, 75, 1);
	line-height: 24px;
	margin-left: 2px;
}

.viewpoint-close {
	width: 32px;
	height: 32px;
	cursor: pointer;
}

.viewpoint-body {
	padding: 18px 24px 24px;
	height: calc(669px - 52px);
	max-height: calc(669px - 52px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-sizing: border-box;
}

.viewpoint-item {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.viewpoint-avatar {
	flex-shrink: 0;
	padding-top: 12px;
}

.viewpoint-content {
	flex: 1;
	display: flex;
	align-items: flex-start;
}

.viewpoint-arrow {
	width: 9px;
	height: 72px;
	flex-shrink: 0;
	background: url('../../techLeader/assets/arrow-icon.png') no-repeat center / 100%;
}

.member-of-congress .viewpoint-arrow {
	background: url('../../memberOfCongress/assets/arrow-icon.png') no-repeat center / 100%;
}

.viewpoint-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 12px;
	background-color: rgba(246, 250, 255, 1);
	border: 1px solid rgba(231, 243, 255, 1);
	border-radius: 4px;
}

.viewpoint-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.viewpoint-name {
	font-size: 16px;
	font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
	font-weight: 700;
	color: rgba(59, 65, 75, 1);
	line-height: 24px;
}

.viewpoint-job {
	font-size: 16px;
	font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
	font-weight: 400;
	color: rgba(95, 101, 108, 1);
	line-height: 30px;
}

.viewpoint-desc {
	font-size: 16px;
	font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
	font-weight: 400;
	color: rgba(59, 65, 75, 1);
	line-height: 24px;
	text-align: justify;
}

.viewpoint-empty {
	text-align: center;
	padding: 40px 0;
	color: rgba(170, 173, 177, 1);
	font-size: 14px;
}

/* ============ 履历 tabs ============ */
.resume-tabs {
	display: flex;
	flex-direction: row;
	gap: 8px;
	align-items: flex-start;
}

.resume-tab {
	width: 90px;
	height: 28px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1px 8px;
	border-radius: 4px;
	border: 1px solid rgba(230, 231, 232, 1);
	background: rgba(255, 255, 255, 1);
	color: rgba(59, 65, 75, 1);
	font-size: 16px;
	font-family: 'Microsoft YaHei', sans-serif;
	font-weight: 400;
	line-height: 30px;
	cursor: pointer;
	box-sizing: border-box;
}

.resume-tab.active {
	background: rgba(231, 243, 255, 1);
	border-color: rgba(5, 95, 194, 1);
	color: rgba(5, 95, 194, 1);
}

.tab-select {
	width: 120px;

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

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

	:deep(.el-select__placeholder) {
		color: rgba(59, 65, 75, 1);
		font-family: Microsoft YaHei;
		font-size: 14px;
		font-weight: 400;
		line-height: 22px;
	}

	:deep(.el-select-dropdown__item) {
		text-align: center;
		justify-content: center;
	}

	:deep(.el-popper.is-light) {
		border-radius: 10px;
	}
}

/* ============ 基本信息通用样式 ============ */
.baseInfo-item {
	display: flex;
	align-items: flex-start;
}

.baseInfo-item-title {
	flex: 0 0 110px;
	font-size: 16px;
	font-weight: 700;
	font-family: "Microsoft YaHei";
	line-height: 24px;
	color: rgb(59, 65, 75);
	white-space: nowrap;
}

.baseInfo-item-content {
	flex: 1;
	min-width: 0;
	font-size: 16px;
	font-weight: 400;
	font-family: "Microsoft YaHei";
	line-height: 24px;
	color: rgb(59, 65, 75);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
}

.education-item {
	white-space: nowrap;
}

/* ============ 历史提案 tab ============ */
.proposal-wrapper {
	width: 1600px;
	margin: 16px auto;
	position: relative;
}

.proposal-tab-switcher {
	position: absolute;
	left: -124px;
	top: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}

.proposal-tab {
	width: 112px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 0 16px;
	border-radius: 16px;
	border: none;
	font-size: 16px;
	font-family: 'Microsoft YaHei', sans-serif;
	font-weight: 400;
	color: var(--text-primary-65-color);
	background-color: var(--bg-white-100);
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	cursor: pointer;
	white-space: nowrap;

	&.active {
		color: var(--bg-white-100);
		background-color: var(--color-primary-100);
		box-shadow: none;
	}
}

.proposal-tab-arrow {
	flex-shrink: 0;
}
</style>

<style lang="scss">
/* 下拉面板 teleported 到 body，需要非 scoped 样式 */
.el-select__popper .el-select-dropdown__item {
	text-align: center;
	justify-content: center;
}
</style>
