<template>
	<div class="wrap">
		<div class="header">
			<div class="header-left">
				<img src="./assets/images/icon-harvard.png" 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, index)"
				:class="{ tabActive: item.active }"
				v-for="(item, index) in tabList"
				:key="index"
			>
				{{ item.name }}
			</div>
		</div>
		<div class="main">
			<overView v-if="activeTabName === '学校详情'"></overView>
			<researchStrength v-else-if="activeTabName === '科研实力'"></researchStrength>
			<cooperationStatus v-else-if="activeTabName === '合作情况'"></cooperationStatus>
			<otherStatus v-else-if="activeTabName === '其他情况'"></otherStatus>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import overView from "./overView/index.vue";
import researchStrength from "./researchStrength/index.vue";
import cooperationStatus from "./cooperationStatus/index.vue";
import otherStatus from "./otherStatus/index.vue";

const institutionInfo = ref({
	name: "哈佛大学",
	enName: "Harvard University",
	desc: "哈佛大学是 1636 年创立于美国马萨诸塞州剑桥市的顶尖私立研究型大学，为常春藤盟校成员、科研与学术影响力卓著。",
	tagList: ["常春藤", "精英摇篮"]
});

const activeTabName = ref("学校详情");

const tabList = ref([
	{
		name: "学校详情",
		active: true
	},
	{
		name: "科研实力",
		active: false
	},
	{
		name: "合作情况",
		active: false
	},
	{
		name: "其他情况",
		active: false
	}
]);

const handleClickTab = (val, index) => {
	tabList.value.forEach(item => {
		item.active = false;
	});
	tabList.value[index].active = true;
	activeTabName.value = val.name;
};
</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: 397px;
			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 {
		width: 1600px;
		margin: 16px auto;
	}
}
</style>