<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 personId = ref(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>
