<template>
	<div class="wrap">
		<div class="header">
			<div class="header-left">
				<img :src="institutionInfo.logo ? institutionInfo.logo : DefaultIcon2" alt="" />
			</div>
			<div class="header-right">
				<div class="title">{{ institutionInfo.name }}</div>
				<div class="en-title">{{ institutionInfo.enName }}</div>
				<div class="desc">{{ institutionInfo.desc }}</div>
				<div class="tag-box">
					<div class="tag" v-for="(tag, index) in institutionInfo.tagList" :key="index">
						{{ tag }}
					</div>
				</div>
			</div>
			<!-- <div class="header-btn">
				<div class="icon">
					<img src="@/assets/images/links-icon.png" alt="" />
				</div>
				<div class="text">{{ "查看官网" }}</div>
			</div> -->
		</div>
		<div class="tab-box">
			<div
				class="tab"
				@click="handleClickTab(item)"
				:class="{ tabActive: activeTabName == item.name }"
				v-for="(item, index) in tabList"
				:key="index"
			>
				{{ item.name }}
			</div>
		</div>
		<div class="main">
			<InsDetail v-if="activeTabName === '机构详情'"></InsDetail>
			<Deepdig v-else-if="activeTabName === '深度挖掘'"></Deepdig>
			<Sanction v-else></Sanction>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import { useRoute } from "vue-router";
import InsDetail from "./insDetail/index.vue";
import Deepdig from "./deepdig/index.vue";
import Sanction from "./sanction/index.vue";
import { getGovOrgBasicInfo } from "@/api/institution/index";

import DefaultIcon2 from "@/assets/icons/default-icon2.png";

const route = useRoute();

const institutionInfo = ref({
	name: "",
	enName: "",
	desc: "",
	tagList: [],
	logo: ""
});

const handleGetInfo = async () => {
	const params = {
		id: route.query.id
	};
	try {
		const res = await getGovOrgBasicInfo(params);
		console.log("机构信息", res);
		if (res.code === 200 && res.data) {
			institutionInfo.value.name = res.data.orgName;
			institutionInfo.value.enName = res.data.orgNameEn;
			institutionInfo.value.desc = res.data.orgIntroduction;
			institutionInfo.value.name = res.data.orgName;
		}
	} catch (error) {}
};

handleGetInfo();

const activeTabName = ref("机构详情");

const tabList = ref([
	{
		name: "机构详情"
	},
	{
		name: "深度挖掘"
	},
	{
		name: "对华制裁"
	}
]);

const handleClickTab = val => {
	activeTabName.value = val.name;
	window.sessionStorage.setItem("institutionActiveTabName", val.name);
};

onMounted(() => {
	if (window.sessionStorage.getItem("institutionActiveTabName")) {
		activeTabName.value = window.sessionStorage.getItem("institutionActiveTabName");
	}
});

onUnmounted(() => {
	window.sessionStorage.removeItem('institutionActiveTabName')
})

</script>

<style lang="scss" scoped>
.wrap {
	width: 1920px;
	height: 100%;
	background-image: url("./assets/images/bg.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	padding-top: 16px;
	.header {
		width: 1600px;
		height: 200px;
		margin: 0 auto 16px;
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, 1);
		border-radius: 10px;
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 0.8);
		display: flex;
		position: relative;
		.header-left {
			width: 160px;
			height: 160px;
			margin: 20px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.header-right {
			margin-left: 24px;
			.title {
				margin-top: 26px;
				height: 42px;
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 32px;
				font-weight: 700;
				line-height: 42px;
				letter-spacing: 0px;
				text-align: left;
			}
			.en-title {
				margin-top: 8px;
				height: 24px;
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				letter-spacing: 0px;
				text-align: left;
			}
			.desc {
				margin-top: 6px;
				height: 24px;
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				letter-spacing: 0px;
				text-align: justify;
			}
			.tag-box {
				margin-top: 14px;
				display: flex;
				gap: 8px;
				.tag {
					height: 24px;
					padding: 0px 8px;
					border-radius: 4px;
					background: rgba(231, 243, 255, 1);
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
					letter-spacing: 0px;
				}
			}
		}
		.header-btn {
			position: absolute;
			top: 26px;
			right: 30px;
			width: 120px;
			height: 36px;
			border-radius: 6px;
			background: rgba(5, 95, 194, 1);
			display: flex;
			gap: 3px;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			.icon {
				width: 16px;
				height: 16px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text {
				height: 22px;
				color: rgba(255, 255, 255, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 22px;
			}
		}
	}
	.tab-box {
		width: 1600px;
		height: 64px;
		margin: 0 auto;
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, 1);
		border-radius: 10px;
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 0.8);
		display: flex;
		justify-content: space-between;
		align-items: center;
		.tab {
			width: 526px;
			height: 54px;
			box-sizing: border-box;
			border: 2px solid transparent;
			border-radius: 10px;
			text-align: center;
			line-height: 50px;
			color: rgba(59, 65, 75, 1);
			font-family: Microsoft YaHei;
			font-size: 20px;
			font-weight: 400;
			letter-spacing: 0px;
			cursor: pointer;
			&:hover {
				background: rgba(231, 243, 255, 1);
			}
		}
		.tabActive {
			border: 2px solid rgba(174, 214, 255, 1);
			background: rgba(231, 243, 255, 1);
			color: rgba(5, 95, 194, 1);
			font-size: 24px;
			font-weight: 700;
		}
	}
	.main {
		height: 800px;
		width: 1600px;
		margin: 16px auto;
	}
}
</style>