<template>
	<div class="tech-leader">
		<!-- 科技领袖人物基础 -->
		<div class="header">
			<div class="avatar">
				<!-- <img :src="characterInfo.imageUrl" alt="" /> -->
				<el-avatar :size="160" shape="circle" :src="characterInfo.imageUrl" />
			</div>
			<div class="info">
				<!-- <div class="name"> -->
				<p class="name-cn">{{ characterInfo.name }}</p>
				<p class="name-en">{{ characterInfo.ename }}</p>
				<!-- </div> -->
				<div class="introduction">
					<p>{{ characterInfo.description }}</p>
				</div>
				<div class="domain">
					<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>
				</div>
			</div>
		</div>
		<!-- 科技领袖人物信息区分 -->
		<div class="info-divide">
			<div v-for="item in info" :key="item" :class="{ active: item === infoActive }" style="width: 50%;" @click="infoActive = item">
				{{ item }}
			</div>
		</div>
		<!-- 人物详情 -->
		<div class="info-content" v-if="infoActive === '人物详情'">
			<div class="left">
				<!-- 科技观点 -->
				<AnalysisBox title="科技观点" width="1064px" height="300px" :show-all-btn="false" class="left-top">
					<!-- <template #headerBtn>
						<div class="num-list">
							<div v-for="item in num" :key="item" :class="{ active: item === numActive }"
								@click="handleChangeYear(item)">
								{{ item }}
							</div>
						</div>
					</template> -->
					<template #header-btn>
						<el-select v-model="numActive" class="tab-select" :teleported="true" @change="handleChangeYear">
							<el-option v-for="item in num" :key="item" :label="item" :value="item" />
						</el-select>
					</template>
					<div class="echarts" id="wordCloudChart"></div>
				</AnalysisBox>

				<!-- 最新动态 -->
				<AnalysisBox title="最新动态" width="1064px" height="1540px" :show-all-btn="false" class="left-bottom">
					<template #header-btn>
						<div class="check-input">
							<input type="checkbox" v-model="isChecked" @change="handleChange" />
							<span style="margin-left: 5px;">只看涉华动态</span>
						</div>
					</template>
					<div class="main">
						<div v-for="item 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="image">
								<img src="./assets/type1.png" alt="" v-if="item.remarks === true" />
								<img src="./assets/type2.png" alt="" v-else />
							</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>
						<div class="line-test"></div>
					</div>
					<div 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 class="baseInfo-item">
								<div class="baseInfo-item-title">出生日期：</div>
								<div class="baseInfo-item-content">{{ characterBasicInfo.birthday }}</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">国籍：</div>
								<div class="baseInfo-item-content">{{ characterBasicInfo.country }}</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">教育背景：</div>
								<div class="baseInfo-item-content" v-for="value in characterBasicInfo.educationList"
									:key="value.school">
									{{ value.school + "（" + value.major + "）" }}
								</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">净资产：</div>
								<div class="baseInfo-item-content">{{ characterBasicInfo.assets }}</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">职业：</div>
								<div class="baseInfo-item-content">{{ characterBasicInfo.positionTitle }}</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">婚姻状况：</div>
								<div class="baseInfo-item-content">{{ characterBasicInfo.marital }}</div>
							</div>
							<div class="baseInfo-item">
								<div class="baseInfo-item-title">出生地：</div>
								<div class="baseInfo-item-content">{{ characterBasicInfo.birthPlace }}</div>
							</div>
						</div>
						<div class="company">
							<div class="company-title">知名企业</div>
							<div class="company-content">
								<div v-for="item in characterBasicInfo.organizationList" :key="item.name"
									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>

				<!-- 职业履历 -->
				<AnalysisBox title="职业履历" width="520px" height="1336px" :show-all-btn="false" class="right-bottom">
					<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'">
							<div v-for="item in currentResumeList" :key="item.startTime" class="content-item">
								<img src="./assets/icon01.png" alt="" class="image01" />
								<div class="content-item-time">{{ item.startTime + '-' + getendTime(item) }}</div>
								<div class="content-item-title">{{ item.orgName + '|' + item.jobName }}</div>
								<div class="content-item-content">{{ item.content }}</div>
								<div class="content-item-door" v-if="item.door">
									<img src="./assets/icon02.png" alt="" />
									<span>{{ item.door }}</span>
								</div>
							</div>
						</template>
						<!-- 教育履历 -->
						<template v-else>
							<div v-for="(item, index) in currentResumeList" :key="index" class="content-item">
								<img src="./assets/icon01.png" alt="" class="image01" />
								<div class="content-item-time">{{ item.startTime + '-' + item.endTime }}</div>
								<div class="content-item-title">{{ item.school+'('+item.country+')' }}</div>
								<div class="content-item-content">{{ item.description }}</div>
								<!-- <div class="content-item-door" v-if="item.country">
									<img src="./assets/icon02.png" alt="" />
									<span>{{ item.country }}</span>
								</div> -->
							</div>
						</template>
					</div>
				</AnalysisBox>
			</div>
		</div>
		<!-- 人物关系 -->
		<CharacterRelationships v-if="infoActive === '人物关系'" />
		<!-- 相关情况 -->
		<RelevantSituation v-if="infoActive === '相关情况'" />
		<!-- 弹框 -->
		<el-dialog v-model="dialogVisible" width="761px" class="viewpoint-dialog" :modal="false" :draggable="true"
			:lock-scroll="false" :show-close="false">
			<template #header>
				<div class="viewpoint-header">
					<div class="viewpoint-title">
						<span class="viewpoint-tag">#{{ currentTag }}</span>
						<span class="viewpoint-label">相关领域标签</span>
					</div>
					<div class="viewpoint-close" @click="dialogVisible = false">
						<el-icon :size="16">
							<Close />
						</el-icon>
					</div>
				</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.length === 0" class="viewpoint-empty">暂无数据</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import setChart from "@/utils/setChart";
import CharacterRelationships from "./components/characterRelationships/index.vue";
import RelevantSituation from "./components/relevantSituation/index.vue";
import getWordCloudChart from "../../utils/worldCloudChart";
import {
	getCharacterGlobalInfo,
	getCharacterBasicInfo,
	getCharacterView,
	getCharacterLatestDynamic,
	getCharacterResume,
	getCharacterFieldView,
	getCharacterReducationResume,
	getareaType
} from "@/api/characterPage/characterPage.js";
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue'
import Musk from "./assets/Musk.png";
import spaceX from "./assets/spaceX.png";
import tesla from "./assets/tesla.png";
import starlink from "./assets/starlink.png";
import X from "./assets/X.png";
import img1 from "./assets/img1.png";
import img2 from "./assets/img2.png";
import img3 from "./assets/img3.png";
import img4 from "./assets/img4.png";
import img5 from "./assets/img5.png";
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 { useRoute } from 'vue-router';
const route = useRoute();
const areaList = ref([])
const personId = ref(route.query.personId || "Y000064");
const handleGetAreaType = async () => {
	try {
		const res = await getareaType();
		console.log(" 列表", res);
		if (res.code === 200 && res.data) {
			areaList.value = res.data
		}
	} catch (error) {
		console.error(" 列表error", error);
	}
};
const boxHeight = computed(() => {
	console.log('dddd',characterBasicInfo.value)
	if(characterBasicInfo.value.organizationList==undefined) return '605px'
	if(characterBasicInfo.value.organizationList.length==0) return '405px'
	if(characterBasicInfo.value.organizationList.length<=2) return '505px'
	return '625px'
})
// 处理图片代理
const getProxyUrl = (url) => {
	if (!url) return "";
	const urlStr = String(url);
	// 排除非 http 开头（相对路径）、已经是代理链接、或者是本地链接
	if (!urlStr.startsWith('http') || urlStr.includes('images.weserv.nl') || urlStr.includes('localhost') || urlStr.includes('127.0.0.1')) {
		return url;
	}
	// 移除协议头 http:// 或 https://
	const cleanUrl = urlStr.replace(/^https?:\/\//i, '');
	return `https://images.weserv.nl/?url=${encodeURIComponent(cleanUrl)}`;
};


const wordCloudData = ref([
	[
		{ text: "Boring Company", color: "rgba(19, 168, 168, 1)" },
		{ text: "地球化改造", color: "rgb(206, 79, 81)" },
		{ text: "减少燃料对外依赖", color: "rgba(250, 173, 20, 1)" },
		{ text: "猛禽发动机", color: "rgba(250, 173, 20, 1)" },
		{ text: "Neuralink+Grok", color: "rgba(22, 119, 255, 1)" },
		{ text: "脑机接口", color: "rgba(19, 168, 168, 1)" }
	],
	[
		{ text: "星舰轨道加油", color: "rgb(206, 79, 81)" },
		{ text: "星舰计划", color: "rgba(22, 119, 255, 1)" },
		{ text: "超回路列车", color: "rgba(250, 173, 20, 1)" },
		{ text: "可持续能源转型", color: "rgb(206, 79, 81)" },
		{ text: "工作可选项", color: "rgba(250, 173, 20, 1)" },
		{ text: "文明存续", color: "rgba(19, 168, 168, 1)" },
		{ text: "可持续能源", color: "rgba(255, 122, 69, 1)" }
	],
	[
		{ text: "未实现赤字控制目标", color: "rgba(255, 122, 69, 1)" },
		{ text: "可持续能源", color: "rgba(255, 122, 69, 1)" },
		{ text: "第一性原理", color: "rgba(250, 173, 20, 1)" },
		{ text: "可持续能源", color: "rgba(255, 122, 69, 1)" },
		{ text: "完全自动驾驶 (FSD)", color: "rgb(206, 79, 81)" },
		{ text: "多行星物种", color: "rgba(255, 122, 69, 1)" }
	],
	[
		{ text: "Neuralink+Grok", color: "rgba(22, 119, 255, 1)" },
		{ text: "火星殖民", color: "rgb(206, 79, 81)", fontSize: "26px", fontWeight: "700" },
		{ text: "大力发展太阳能", color: "rgba(255, 122, 69, 1)" },
		{ text: "Neuralink+Grok", color: "rgba(22, 119, 255, 1)" },
		{ text: "可持续富足", color: "rgba(250, 173, 20, 1)" },
		{ text: "具身智能", color: "rgba(250, 173, 20, 1)" }
	],
	[
		{ text: "火箭回收技术", color: "rgba(19, 168, 168, 1)" },
		{ text: "Optimus 机器人", color: "rgba(250, 173, 20, 1)" },
		{ text: "超音速海啸", color: "rgba(250, 173, 20, 1)" },
		{ text: "柔性电极阵列", color: "rgba(19, 168, 168, 1)" },
		{ text: "完全自动驾驶 (FSD)", color: "rgb(206, 79, 81)" },
		{ text: "多智能体协作", color: "rgba(19, 168, 168, 1)" }
	]
]);
const musk = ref({
	nameCn: "埃隆·马斯克",
	nameEn: "Elon Reeve Musk",
	introduction: "南非裔美籍企业家与工程师，SpaceX 与 X（原推特）创始人，特斯拉 CEO，推动商业航天、电动汽车与卫星互联网变革。",
	domain: ["电动汽车", "太空探索", "可再生资源", "人工智能", "脑机接口", "超级高铁"],
	imageUrl: Musk
});
const resumeType = ref('career');
const CharacterEducationResume = ref([]);

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
	}
}


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

const switchResumeType = (type) => {
	resumeType.value = type;
	if (type === 'education' && CharacterEducationResume.value.length === 0) {
		getCharacterEducationResumeFn();
	}
};
// 获取人物全局信息
const characterInfo = ref({});

const getCharacterGlobalInfoFn = async () => {
	const params = {
		personId: personId.value
	};
	try {
		const res = await getCharacterGlobalInfo(params);
		if (res.code === 200) {
			console.log("人物全局信息", res);
			if (res.data) {
				characterInfo.value = res.data;
			}
		}
	} catch (error) {

	}

};

// 获取人物基本信息
const characterBasicInfo = ref({});
const getCharacterBasicInfoFn = async () => {
	const params = {
		personId: personId.value
	};
	try {
		const res = await getCharacterBasicInfo(params);
		if (res.code === 200) {
			console.log("人物基本信息", res);
			if (res.data) {
				characterBasicInfo.value = res.data;
			}
		}
	} catch (error) {
		console.error(error);
	}
};

// 获取人物观点
const characterView = ref({});
const getCharacterViewFn = async () => {
	const params = {
		personId: personId.value
	};

	if (numActive.value !== '全部') {
		params.year = numActive.value;
	}
	try {
		const res = await getCharacterView(params);
		if (res.code === 200) {
			console.log("人物观点", res);
			if (res.data) {
				characterView.value = res.data.map(item => {
					return {
						name: item.option,
						value: item.count
					};
				});
			}
		}
	} catch (error) {

	}

};

const handleCharacterView = async () => {
	await getCharacterViewFn();
	const wordCloudChart = getWordCloudChart(characterView.value);
	setChart(wordCloudChart, "wordCloudChart");
};

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

// 获取领域观点
const CharacterFieldView = ref({});
const getCharacterFieldViewFn = async (tagname) => {
	const areaItem = areaList.value.find(item => item.name === tagname)
	const params = {
		areaId: areaItem?.id || "20",
	}
	try {
		const res = await getCharacterFieldView(params)
		if (res.code === 200 && res.data) {
			CharacterFieldView.value = res.data
		}
	} catch (error) { }
}

//是否涉华
const isChecked = ref(false);
const related = ref('N');

const handleChange = event => {
	if (isChecked.value) {
		related.value = 'Y';
	} else {
		related.value = 'N';
	}
	getCharacterLatestDynamicFn();
	console.log(related.value);
};

const currentPage = ref(1);
// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
	getCharacterLatestDynamicFn();
};

// 获取最新动态
const CharacterLatestDynamic = ref({});
const total = ref(0);
const pageSize = ref(7);
const loading = ref(false);
const abortController = ref(null);
const getCharacterLatestDynamicFn = async () => {
	// 取消上一次未完成的请求
	if (abortController.value) {
		abortController.value.abort();
	}
	// 创建新的 AbortController
	abortController.value = new AbortController();

	loading.value = true;

	const params = {
		personId: personId.value,
		cRelated: related.value,
		currentPage: currentPage.value - 1,
		pageSize: pageSize.value
	};

	try {
		const res = await getCharacterLatestDynamic(params, abortController.value.signal);
		console.log("最新动态", res);
		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 CharacterResume = ref({});
const getCharacterResumeFn = async () => {
	const params = {
		personId: personId.value
	};
	try {
		const res = await getCharacterResume(params);
		if (res.code === 200) {
			console.log("人物职业履历", res);
			if (res.data) {
				CharacterResume.value = res.data;
			}
		}
	} catch (error) {

	}

};




const info = ref(["人物详情", "人物关系"]);

// const info = ref(["人物详情", "人物关系", "相关情况"]);
const infoActive = ref("人物详情");
const num = ref(['全部', "2025", "2024", "2023", "2022", "2021", "2020"]);
const numActive = ref("全部");

const dialogVisible = ref(false);
const currentTag = ref(null)
const handleClickTag = async (tag) => {
	currentTag.value = tag
	dialogVisible.value = true
	await getCharacterFieldViewFn(tag)
}
const newList = ref([
	{
		id: 1,
		title: "能源才是真正的货币。我预测，人工智能和机器人的普及将在 3 年内导致美国出现通缩，并在 20 年内让工作成为可选项。我们需要提前改革教育和社会保障体系，为这一转变做好准备。",
		titleEn:
			"Energy is the real currency. I predict that the widespread adoption of AI and robots will lead to deflation in the US within 3 years and make work optional within 20 years. We need to reform the education and social security systems in advance to prepare for this shift.",
		pie: ["人工智能"],
		origin: "X",
		time: "2025年10月10日",
		type: 1
	},
	{
		id: 2,
		title: "Neuralink 首位受试者二次植入脑机接口，目标实现下肢自主活动",
		content:
			"2025 年 11 月 21 日，马斯克宣布 Neuralink 首位人类受试者将接受第二次脑机接口植入手术。新版植入物电极数升级至 3000 个，信号延迟缩短至 15 毫秒，通过 “脑 - 脊信号桥接” 技术激活下肢神经，有望让脊髓损伤患者重新站立，标志着技术从 “操控外部设备” 迈入 “修复自身运动功能” 阶段。",
		pie: ["量子科技"],
		origin: "华尔街日报",
		time: "2025年10月10日",
		type: 2
	},
	{
		id: 3,
		title: "马斯克预判 AI 财富流向：英伟达、谷歌成关键，入口掌控终极价值",
		content:
			"2025 年 11 月 30 日，马斯克在播客采访中指出，AI 财富将沿 “芯片→平台→系统→入口” 路径流动。他点名英伟达（算力工具）和谷歌（数据生态）具备核心价值，同时透露 X 平台将打造 “AI 时代超级入口”，整合支付、社交、任务执行等功能，实现 “WeChat++” 愿景。",
		pie: ["新能源"],
		origin: "金融时报",
		time: "2025年10月09日",
		type: 2
	},
	{
		id: 4,
		title: "特斯拉人形机器人复数定名 “Optimi”，马斯克透露年产亿台目标",
		content:
			"2025 年 12 月 1 日，马斯克在社交平台确认特斯拉人形机器人 Optimus 的复数形式为 “Optimi”。他重申该机器人将成为特斯拉产量最高的产品，长期年产能目标达数亿台，目前计划在加州、得州工厂分别搭建年产 100 万台和数千万台的生产线。",
		pie: ["量子科技"],
		origin: "泰晤士报",
		time: "2025年10月09日",
		type: 2
	},
	{
		id: 5,
		title: "究竟要有多少无辜的人死去，美国才能进行改革？我们需要采取激进行动。错误地给非暴力人士贴上 “法西斯” 或 “纳粹” 的标签，应被视为煽动谋杀。这种扣帽子的行为往往被用来为施暴找借口，对社会而言极为危险。",
		titleEn:
			"How many innocent people have to die before the US reforms? We need radical action. Falsely labeling non-violent people as “fascist” or “Nazi” should be considered incitement to murder. This kind of name-calling is often used to rationalize violence, which is extremely dangerous for society.",
		pie: ["人工智能"],
		origin: "X",
		time: "2025年10月08日",
		type: 1
	},
	{
		id: 6,
		title: "Grok5 将于 2026 年与《英雄联盟》顶级人类战队对决，规则严格：无数据直读，仅通过摄像头输入；反应时间和点击速度不超过人类水平；必须通过阅读说明书自主学习玩法。目的是测试人工智能的策略与学习能力。",
		titleEn:
			"Grok5 will play League of Legends against top human teams in 2026, with strict constraints: no data access, only camera input; reaction time and click speed capped at human levels; must learn by reading the manual. The purpose is to test the strategic and learning abilities of AI.",
		pie: ["集成电路"],
		origin: "X",
		time: "2025年10月08日",
		type: 1
	},
	{
		id: 7,
		title: "SpaceX 频谱收购获 FCC 认可，美国下一代连接技术领先优势强化",
		content:
			"美国联邦通信委员会（FCC）正式表态支持 SpaceX 收购回声星通信频谱交易。FCC 指出，此次 170 亿美元交易将极大增强行业竞争力，助力美国在下一代连接技术领域巩固领先地位，同时为偏远地区提供更可靠的移动网络覆盖。",
		pie: ["量子科技"],
		origin: "华盛顿邮报",
		time: "2025年10月07日",
		type: 2
	}
]);
const companyList = ref([
	{
		id: 1,
		cn: "太空探索技术公司",
		name: "SpaceX",
		logo: spaceX
	},
	{
		id: 2,
		cn: "特斯拉",
		name: "Tesla",
		logo: tesla
	},
	{
		id: 3,
		cn: "星链",
		name: "Starlink",
		logo: starlink
	},
	{
		id: 4,
		cn: "X 平台（原推特）",
		name: "X (formerly Twitter)",
		logo: X
	}
]);
// 个人履历
const resumeList = ref([
	{
		id: 1,
		time: "2022-至今",
		title: "Twitter/X  |  所有者、CTO",
		content: "以440亿美元收购Twitter，并担任首席技术官，进行大规模重组和品牌重塑为X。",
		door: "旋转门：从硬件科技到社交媒体"
	},
	{
		id: 2,
		time: "2004-至今",
		title: "Tesla  |  董事长、产品架构师，后任CEO",
		content: "早期投资者并加入特斯拉，领导产品设计和开发，推动电动汽车革命。推出了多款畅销电动汽车。",
		door: "旋转门：从互联网支付到汽车制造"
	},
	{
		id: 3,
		time: "2002-至今",
		title: "SpaceX  |  创始人、CEO兼CTO",
		content: "创立太空探索技术公司，目标是降低太空运输成本，最终实现火星殖民。开发了猎鹰系列火箭和龙飞船。",
		door: "旋转门：从互联网支付到太空科技"
	},
	{
		id: 4,
		time: "1999-2002",
		title: "PayPal  |  创始人、CEO",
		content: "创立太空探索技术公司，目标是降低太空运输成本，最终实现火星殖民。开发了猎鹰系列火箭和龙飞船。",
		door: ""
	},
	{
		id: 5,
		time: "1995-1999",
		title: "Zip2  |  联合创始人",
		content: "与弟弟金巴尔·马斯克共同创立了Zip2，为报纸行业提供在线城市指南。1999年康柏以3.07亿美元收购了Zip2。",
		door: ""
	}
]);
// 弹框数据
const dialogData = ref([
	{
		id: 1,
		name: "山姆・奥特曼",
		content: "主张分级监管，反对 “一刀切” 审批；警告美国领先优势有限，电力与基建是关键瓶颈。",
		img: img1,
		job: "OpenAI CEO"
	},
	{
		id: 2,
		name: "布拉德・史密斯",
		content: "主张全技术栈监管与基础建设投入，强调美国需在芯片、算法、数据各层保持领先。",
		img: img2,
		job: "微软副董事长"
	},
	{
		id: 3,
		name: "黄仁勋",
		content: "认为 AI 处于 “智能基建起步期”，大模型为基础，代理式 AI 为下一阶段；否定 AI 泡沫，强调与实体经济融合。",
		img: img3,
		job: "NVIDIA CEO"
	},
	{
		id: 4,
		name: "杰弗里・辛顿",
		content: "担忧 AI 发展过快，警告 “涌现能力” 超预期，可能导致存在性风险；呼吁放缓研发、加强安全。",
		img: img4,
		job: "图灵奖得主、深度学习先驱"
	},
	{
		id: 5,
		name: "李飞飞",
		content: "关注 AI 伦理与公平性，强调安全与普惠并重，对 AGI 时间表持谨慎态度。",
		img: img5,
		job: "斯坦福大学教授"
	}
]);


onMounted(() => {
	getCharacterGlobalInfoFn();
	getCharacterBasicInfoFn();
	// getCharacterViewFn();
	getCharacterLatestDynamicFn();
	getCharacterResumeFn();
	// getCharacterFieldViewFn();
	handleCharacterView();
	handleGetAreaType()
});

</script>

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

.tech-leader {
	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;

				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 {
			width: 50%;
			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;
		height: 1856px;
		margin: 16px auto;
		display: flex;

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

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

				.num-list {
					display: flex;
					align-items: center;

					div {
						padding: 1px 8px;
						line-height: 30px;
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						color: rgb(59, 65, 75);
						cursor: pointer;
						border: 1px solid rgb(230, 231, 232);
						border-radius: 4px;
						margin-right: 8px;
					}

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

				.echarts {
					width: 1009px;
					height: 170px;
					margin-left: 24px;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 10px 0;
				}
			}

			.left-bottom {
				.check-input {
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(132, 136, 142);

					input {
						margin-right: 8px;
					}
				}

				.main {
					width: 1064px;
					height: 1357px;
					box-sizing: border-box;
					padding-right: 50px;
					position: relative;
					z-index: 110;

					.main-item {
						width: 1014px;
						margin-bottom: 40px;
						display: flex;

						.time {
							width: 77px;
							box-sizing: border-box;
							margin-right: 20px;
							display: flex;
							flex-direction: column;
							align-items: flex-end;

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

						.image {
							margin-right: 20px;

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

						.content {
							width: 873px;

							.content-type1 {
								background-color: rgba(246, 250, 255, 1);
								border-radius: 10px;
								border: 1px solid rgb(234, 236, 238);
								padding: 12px 14px 12px 15px;

								.content-title1 {
									font-size: 16px;
									font-weight: 700;
									font-family: "Microsoft YaHei";
									color: rgb(59, 65, 75);
									line-height: 24px;
									padding-bottom: 12px;
									border-bottom: 1px solid rgb(234, 236, 238);
									cursor: pointer;
								}

								.content-title-en {
									font-size: 16px;
									font-weight: 400;
									font-family: "Microsoft YaHei";
									color: rgb(59, 65, 75);
									line-height: 24px;
									padding-top: 12px;
									cursor: pointer;
								}
							}

							.content-type2 {
								.content-title2 {
									font-size: 20px;
									font-weight: 700;
									font-family: "Microsoft YaHei";
									color: rgb(59, 65, 75);
									line-height: 26px;
									padding-bottom: 8px;
									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: rgb(95, 101, 108);
								line-height: 24px;
								margin-bottom: 8px;
								cursor: pointer;
							}

							.content-tag {
								width: 873px;
								display: flex;
								justify-content: space-between;
								margin-top: 10px;

								.tag {
									font-size: 14px;
									font-weight: 400;
									font-family: "Microsoft YaHei";
									line-height: 20px;
									margin-right: 8px;
									padding: 1px 10px;
									border-radius: 4px;
									border: 1px solid;
									cursor: pointer;
								}

								.dl1 {
									background-color: rgba(230, 255, 251, 1);
									color: rgba(19, 168, 168, 1);
									border-color: rgba(135, 232, 222, 1);
								}

								.dl2 {
									background-color: rgba(255, 241, 240, 1);
									color: rgb(206, 79, 81);
									border-color: rgba(255, 163, 158, 1);
								}

								.dl3 {
									background-color: rgba(255, 247, 230, 1);
									color: rgba(250, 140, 22, 1);
									border-color: rgba(255, 213, 145, 1);
								}

								.dl4 {
									background-color: rgba(249, 240, 255, 1);
									color: rgba(114, 46, 209, 1);
									border-color: rgba(211, 173, 247, 1);
								}

								.origin {
									font-size: 14px;
									font-weight: 400;
									font-family: "Microsoft YaHei";
									line-height: 22px;
									color: rgb(132, 136, 142);
									cursor: pointer;
								}
							}
						}
					}

					.line-test {
						position: absolute;
						top: 10px;
						left: 109px;
						height: 1300px;
						border: 1px solid rgb(230, 231, 232);
						z-index: -1;
					}
				}

				.pagination {
					width: 100%;
					height: 76px;
					margin: 20px auto;
					display: flex;
					padding: 0 31px 0 36px;
					justify-content: space-between;
					align-items: center;
					border-top: 1px solid rgb(234, 236, 238);

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

					: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;
			height: 100%;

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

				.main-content {
					width: 520px;
					height: 517px;
					padding: 0 48px 50px 34px;
					margin-top: 16px;
					.baseInfo {
						width: 438px;
						height: 290px;
						padding-bottom: 50px;
						border-bottom: 1px solid rgb(234, 236, 238);

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

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

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

					.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;
							overflow: visible;
							display: flex;
							flex-wrap: wrap;

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

							.company-item:last-child {
								.company-name {
									width: 150px;
								}
							}
						}
					}
				}
			}

			.right-bottom {
				.content-main {
					width: 480px;
					height: 1020px;
					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);
							}
						}
					}
				}
			}
		}
	}
}

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

.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('./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;
}

.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;
}
</style>
