<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 }" @click="infoActive = item">
				{{ item }}
			</div>
		</div>
		<!-- 人物详情 -->
		<div class="info-content" v-if="infoActive === '人物详情'">
			<div class="left">
				<div class="left-top">
					<div class="title">
						<div class="box"></div>
						<div class="text">科技观点</div>
						<div class="btn">
							<img src="./assets/下载按钮.png" alt="" />
							<img src="./assets/收藏按钮.png" alt="" />
						</div>
					</div>
					<!-- 主要内容 -->
					<div class="num-list">
						<div v-for="item in num" :key="item" :class="{ active: item === numActive }" @click="numActive = item">
							{{ item }}
						</div>
					</div>
					<!-- echarts 图表 -->
					<div class="echarts">
						<div class="row" v-for="(row, index) in wordCloudData" :key="index">
							<span
								v-for="(item, idx) in row"
								:key="idx"
								:style="{
									color: item.color,
									fontSize: item.fontSize || '16px',
									fontWeight: item.fontWeight || 'normal'
								}"
							>
								{{ item.text }}
							</span>
						</div>
					</div>
				</div>
				<div class="left-bottom">
					<div class="title">
						<div class="box"></div>
						<div class="text">最新动态</div>
						<div class="input"><input type="checkbox" v-model="isChecked" @change="handleChange"/>只看涉华动态</div>
						<div class="btn">
							<img src="./assets/下载按钮.png" alt="" />
							<img src="./assets/收藏按钮.png" alt="" />
						</div>
					</div>
					<!-- 主要内容 -->
					<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>
										<span
											v-for="tag in item.industryList"
											:key="tag"
											class="tag"
											:class="{
												dl1: tag === '人工智能',
												dl2: tag === '量子科技',
												dl3: tag === '新能源',
												dl4: tag === '集成电路'
											}"
											@click="handleClickTag(tag)"
											>{{ tag }}</span
										>
									</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>
				</div>
			</div>
			<div class="right">
				<div class="right-top">
					<div class="title">
						<div class="box"></div>
						<div class="text">基本信息</div>
						<div class="btn">
							<img src="./assets/下载按钮.png" alt="" />
							<img src="./assets/收藏按钮.png" alt="" />
						</div>
					</div>
					<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">{{ 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" 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>
				</div>
				<div class="right-bottom">
					<div class="title">
						<div class="box"></div>
						<div class="text">职业履历</div>
						<div class="btn">
							<img src="./assets/下载按钮.png" alt="" />
							<img src="./assets/收藏按钮.png" alt="" />
						</div>
					</div>
					<div class="content-main">
						<div v-for="item in CharacterResume" 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.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>
					</div>
				</div>
			</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"
		>
			<template #header>
				<div class="viewpoint-header">
					<div class="viewpoint-title">领域观点</div>
				</div>
			</template>
			<div class="viewpoint-body">
				<div class="viewpoint-body-title">#人工智能</div>
				<div v-for="item in CharacterFieldView" class="viewpoint-item">
					<!-- <img :src="item.imageUrl ? getProxyUrl(item.imageUrl) : DefaultIcon1" alt="" /> -->
					<el-avatar :size="42" shape="circle" :src="item.imageUrl ? getProxyUrl(item.imageUrl) : DefaultIcon1" class="viewpoint-item-img" />
					<div class="viewpoint-item-content">
						<div class="viewpoint-item-name">{{ item.name }}</div>
						<div class="viewpoint-item-desc">{{ item.remarks }}</div>
						<div class="viewpoint-item-job">{{ item.jobName }}</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import CharacterRelationships from "./components/characterRelationships/index.vue";
import RelevantSituation from "./components/relevantSituation/index.vue";
import { getCharacterGlobalInfo, 
	getCharacterBasicInfo,
	getCharacterView,
	getCharacterLatestDynamic,
	getCharacterResume,
	getCharacterFieldView } from "@/api/characterPage/characterPage.js";

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 DefaultIcon1 from '@/assets/icons/default-icon1.png'
import DefaultIcon2 from '@/assets/icons/default-icon2.png'

// 处理图片代理
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 characterInfo = ref({});

const getCharacterGlobalInfoFn = async () => {
	const params = {
		personId: window.sessionStorage.getItem("personId") || "Y000064"
	};
	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: window.sessionStorage.getItem("personId") || "Y000064"
	};
	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: window.sessionStorage.getItem("personId") || "Y000064",
		year: numActive.value || 2025
	};
	try{
		const res = await getCharacterView(params);
		if (res.code === 200) {
			console.log("人物观点", res);
			if (res.data) {
				characterView.value = res.data;
			}
		}
	}catch(error){

	}
	
};

// 获取领域观点
const CharacterFieldView = ref({});
const getCharacterFieldViewFn = async () => {
	const params = {
		areaId: window.sessionStorage.getItem("areaId") || "20",
	};
	try{
		const res = await getCharacterFieldView(params);
		if (res.code === 200) {
			console.log("领域观点", res);
			if (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: window.sessionStorage.getItem("personId") || "Y000064",
		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: window.sessionStorage.getItem("personId") || "Y000064"
	};
	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 infoActive = ref("人物详情");
const num = ref(["2025", "2024", "2023", "2022", "2021", "2020"]);
const numActive = ref("2025");

const dialogVisible = ref(false);
const handleClickTag = tag => {
	dialogVisible.value = true;
};
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();
});

</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 {
			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 {
				width: 100%;
				height: 300px;
				margin-bottom: 16px;
				background-color: rgba(255, 255, 255, 1);
				border-radius: 10px;
				box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
				.title {
					width: 100%;
					height: 56px;
					display: flex;
					align-items: center;
					padding: 14px 12px 16px 0;
					.box {
						width: 8px;
						height: 20px;
						background-color: rgb(5, 95, 194);
						border-bottom-right-radius: 4px;
						border-top-right-radius: 4px;
						margin-right: 14px;
					}
					.text {
						font-size: 20px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 26px;
						color: rgb(5, 95, 194);
					}
					.btn {
						width: 60px;
						height: 28px;
						margin-left: auto;
						img {
							width: 28px;
							height: 28px;
							cursor: pointer;
						}
						img:first-child {
							margin-right: 4px;
						}
					}
				}
				.num-list {
					display: flex;
					align-items: center;
					padding-left: 24px;
					margin-bottom: 16px;
					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;

					.row {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;

						span {
							font-family: "Microsoft YaHei";
							white-space: nowrap;
							cursor: pointer;
							transition: all 0.3s;

							&:hover {
								transform: scale(1.1);
								text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
							}
						}
					}
				}
			}
			.left-bottom {
				width: 100%;
				height: 1540px;
				background-color: rgba(255, 255, 255, 1);
				border-radius: 10px;
				box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
				.title {
					width: 100%;
					height: 85px;
					display: flex;
					align-items: center;
					padding: 14px 12px 45px 0;
					position: relative;
					.box {
						width: 8px;
						height: 20px;
						background-color: rgb(5, 95, 194);
						border-bottom-right-radius: 4px;
						border-top-right-radius: 4px;
						margin-right: 14px;
					}
					.text {
						font-size: 20px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 26px;
						color: rgb(5, 95, 194);
					}
					.btn {
						width: 60px;
						height: 28px;
						margin-left: auto;
						img {
							width: 28px;
							height: 28px;
							cursor: pointer;
						}
						img:first-child {
							margin-right: 4px;
						}
					}
					.input {
						position: absolute;
						top: 15px;
						right: 114px;
						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 {
								font-size: 16px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								color: rgb(5, 95, 194);
								line-height: 24px;
							}
							.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;
								.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;
					}
				}
				.line {
					width: 100%;
					height: 1px;
					background-color: rgb(234, 236, 238);
					margin-top: 30px;
					border: none;
				}
				.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 {
				width: 520px;
				height: 577px;
				background-color: rgba(255, 255, 255, 1);
				border-radius: 10px;
				box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
				margin-bottom: 16px;
				.title {
					width: 100%;
					height: 60px;
					display: flex;
					align-items: center;
					padding: 14px 12px 20px 0;
					.box {
						width: 8px;
						height: 20px;
						background-color: rgb(5, 95, 194);
						border-bottom-right-radius: 4px;
						border-top-right-radius: 4px;
						margin-right: 14px;
					}
					.text {
						font-size: 20px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 26px;
						color: rgb(5, 95, 194);
					}
					.btn {
						width: 60px;
						height: 28px;
						margin-left: auto;
						img {
							width: 28px;
							height: 28px;
							cursor: pointer;
						}
						img:first-child {
							margin-right: 4px;
						}
					}
				}
				.main-content {
					width: 520px;
					height: 517px;
					padding: 0 48px 50px 34px;
					.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;
						height: 176px;
						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;
							height: 114px;
							display: flex;
							flex-wrap: wrap;
							overflow-y: scroll;
							.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 {
				width: 520px;
				height: 1263px;
				background-color: rgba(255, 255, 255, 1);
				border-radius: 10px;
				box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
				.title {
					width: 100%;
					height: 80px;
					display: flex;
					align-items: center;
					padding: 14px 12px 40px 0;
					.box {
						width: 8px;
						height: 20px;
						background-color: rgb(5, 95, 194);
						border-bottom-right-radius: 4px;
						border-top-right-radius: 4px;
						margin-right: 14px;
					}
					.text {
						font-size: 20px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 26px;
						color: rgb(5, 95, 194);
					}
					.btn {
						width: 60px;
						height: 28px;
						margin-left: auto;
						img {
							width: 28px;
							height: 28px;
							cursor: pointer;
						}
						img:first-child {
							margin-right: 4px;
						}
					}
				}
				.content-main {
					width: 480px;
					height: 1020px;
					margin-left: 16px;
					.content-item {
						width: 454px;
						margin-bottom: 60px;
						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(.viewpoint-dialog) {
	width: 761px !important;
	height: 669px;
	padding: 0;
	border-radius: 4px;
	.el-dialog__body {
		padding: 0;
	}
	.el-dialog__header {
		padding: 0;
		margin: 0;
		position: relative;
		height: 48px;
	}
	.el-dialog__headerbtn {
		top: 50%;
		transform: translateY(-50%);
		right: 12px;
	}
	.viewpoint-header {
		width: 761px;
		height: 48px;
		background: linear-gradient(180deg, rgba(31, 140, 252, 0.2) 0%, rgba(36, 144, 255, 0) 100%);
		display: flex;
		align-items: center;
		padding: 0 24px;
		border-bottom: 1px solid rgb(234, 236, 238);
	}
	.viewpoint-title {
		font-size: 16px;
		font-weight: 700;
		font-family: "Microsoft YaHei";
		line-height: 24px;
		color: rgb(5, 95, 194);
	}
	.viewpoint-body {
		padding: 24px 24px 35px 24px;
		height: calc(669px - 48px);
		box-sizing: border-box;
		overflow: hidden;
		.viewpoint-body-title {
			font-size: 28px;
			font-weight: 700;
			font-family: "Microsoft YaHei";
			line-height: 37px;
			color: rgb(59, 65, 75);
			margin-bottom: 32px;
		}
		.viewpoint-item {
			width: 713px;
			min-height: 81px;
			display: block;
			margin-bottom: 12px;
			position: relative;
			padding-left: 48px;
			.viewpoint-item-img {
				position: absolute;
				top: 0;
				left: -10px;
				width: 42px;
				height: 42px;
			}
			.viewpoint-item-content {
				width: 665px;
				min-height: 81px;
				background-image: url("./assets/bg01.png");
				background-size: 100% 100%;
				position: relative;
				top: 0;
				left: 0;
				padding-left: 23px;
				padding-top: 12px;
				padding-bottom: 13px;
				box-sizing: border-box;
				.viewpoint-item-name {
					font-size: 16px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(59, 65, 75);
					margin-bottom: 5px;
				}
				.viewpoint-item-desc {
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(59, 65, 75);
				}
				.viewpoint-item-job {
					position: absolute;
					top: 8px;
					right: 22px;
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 30px;
					color: rgb(132, 136, 142);
				}
			}
		}
	}
}
</style>
