<template>
	<div class="character-page">
		<img src="./assets/images/background.png" alt="" class="bg" />
        <!-- 主要内容 -->
		<div class="main">
			<!-- 科技领袖 -->
			<tech-leader v-if="type == 1"/>
			<!-- 国会议员 -->
			<member-of-congress v-if="type == 2" />
			<!-- 智库研究人员 -->
			<think-tank-person v-if="type == 3" />
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import TechLeader from './components/techLeader/index.vue';
import MemberOfCongress from './components/memberOfCongress/index.vue';
import ThinkTankPerson from './components/thinkTankPerson/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);
			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){

	}
	
};

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>
