<template>
	<div class="character-page">
		<img src="./assets/images/background.png" alt="" class="bg" />
		<!-- 主要内容 -->
		<div class="main">
			<unified-character :type="type" :person-id="personId" />
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import UnifiedCharacter from './components/unified/index.vue';

import { getCharacterGlobalInfo } from "@/api/characterPage/characterPage.js";

// 获取路由参数，1为科技领袖，2为国会议员，3为智库研究人员
const route = useRoute();
const type = ref(route.query.type || 1);
const decodeMaybeBase64 = (raw) => {
	if (raw == null) return null;
	const s0 = String(raw).trim();
	if (!s0) return null;
	// 明文 personId（如 Y000064）保持原样，避免误解码
	if (/^[A-Za-z]\d{6,}$/.test(s0) || /^Y\d+/i.test(s0)) {
		return s0;
	}
	if (s0.length >= 12 && /^[A-Za-z0-9+/_-]+={0,2}$/.test(s0)) {
		try {
			const normalized = s0.replace(/-/g, "+").replace(/_/g, "/");
			const padded = normalized + "===".slice((normalized.length + 3) % 4);
			const decoded = atob(padded);
			try {
				return decodeURIComponent(decoded);
			} catch (_) {
				return decoded;
			}
		} catch (_) { }
	}
	return s0;
};
const personId = ref(decodeMaybeBase64(route.query.personId) || "Y000064");


// 获取人物全局信息
const characterInfo = ref({});

const getCharacterGlobalInfoFn = async () => {
	const params = {
		personId: personId.value
	};
	try{
		const res = await getCharacterGlobalInfo(params);
		if (res.code === 200) {
			console.log("人物全局信息111", res);
			document.title=res.data.name
			if (res.data) {
				characterInfo.value = res.data;
				const personType = characterInfo.value.personType;
				if(personType === "002"){
					type.value = 1;
				}
				else if(personType === "004"){
					type.value = 2;
				}
				else if(personType === "005"){
					type.value = 3;
				}
			}
		}
	}catch(error){
		console.error('获取人物全局信息失败:', error);
	}

};

onMounted(() => {
	getCharacterGlobalInfoFn();
});


</script>


<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}
.character-page {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 100;
	overflow: auto;
	.bg {
		width: 100%;
		height: 459px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
	}
	.main {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
	}
}
</style>
