<template>
	<div class="wrap">
		<div class="header">
			<div class="header-top">
				<div class="header-top-left">
					<img :src="thinkTank.imageUrl" alt="" />
				</div>
				<div class="header-top-center">
					<div class="center-top">
						<div class="name">{{ thinkTank.name }}</div>
						<div class="e-name">{{ thinkTank.ename }}</div>
					</div>
					<div class="center-center">
						{{ thinkTank.describe }}
					</div>
					<div class="center-footer">
						<AreaTag v-for="(tag, index) in thinkTank.tags" :key="index" :tagName="tag.industryName"></AreaTag>
					</div>
				</div>
				<div class="header-top-right">
					<button class="blue-btn" @click="handleOpenThinkTankSite">
						<img class="btn-img" src="./images/image1.png" alt="" />
						<span class="text">{{ '查看智库官网' }}</span>
					</button>
				</div>
			</div>
			<div class="header-footer">
				<div class="tab" :class="{ tabActive: tabActiveName === '智库动态' }" @click="switchTab('智库动态')">
					<div class="icon">
						<img v-show="tabActiveName === '智库动态'" src="./images/tab-icon-active.png" alt="" />
						<img v-show="tabActiveName !== '智库动态'" src="./images/tab-icon.png" alt="" />
					</div>
					<div class="text" :class="{ textActive: tabActiveName === '智库动态' }">{{ "智库动态" }}</div>
				</div>
				<div class="tab" :class="{ tabActive: tabActiveName === '政策追踪' }" @click="switchTab('政策追踪')">
					<div class="icon">
						<img v-show="tabActiveName === '政策追踪'" src="./images/tab-icon2-active.png" alt="" />
						<img v-show="tabActiveName !== '政策追踪'" src="./images/tab-icon2.png" alt="" />
					</div>
					<div class="text" :class="{ textActive: tabActiveName === '政策追踪' }">{{ "政策追踪" }}</div>
				</div>
				<div class="tab" :class="{ tabActive: tabActiveName === '智库百科' }" @click="switchTab('智库百科')">
					<div class="icon">
						<img v-show="tabActiveName === '智库百科'" src="./images/tab-icon3-active.png" alt="" />
						<img v-show="tabActiveName !== '智库百科'" src="./images/tab-icon3.png" alt="" />
					</div>
					<div class="text" :class="{ textActive: tabActiveName === '智库百科' }">{{ "智库百科" }}</div>
				</div>
			</div>
		</div>
		<div class="main">
			<ThinkInfo v-if="tabActiveName === '智库百科'"></ThinkInfo>
			<PolicyTracking v-if="tabActiveName === '政策追踪'"></PolicyTracking>
			<ThinkDaynamics v-if="tabActiveName === '智库动态'"></ThinkDaynamics>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";

import ThinkDaynamics from "./thinkDynamics/index.vue";
import PolicyTracking from "./PolicyTracking/index.vue";
import ThinkInfo from "./thinkInfo/index.vue";
import { getThinkTankSummary } from "@/api/thinkTank/overview";
import { useRouter } from "vue-router";

const router = useRouter();
const tabActiveName = ref("智库动态");
const switchTab = name => {
	tabActiveName.value = name;
};

const thinkTank = ref({});
// 获取智库基本信息
const handleGetThinkTankSummary = async () => {
	try {
		const parmas = {
			id: router.currentRoute._value.params.id
		};
		const res = await getThinkTankSummary(parmas);
		console.log("智库信息", res);
		if (res.code === 200 && res.data) {
			thinkTank.value = res.data;
		}
	} catch (error) {
		console.error("获取智库列表error", error);
	}
};

// 查看智库官网
const handleOpenThinkTankSite = () => {
	const url = thinkTank.value?.url;
	if (!url) {
		return;
	}
	// 简单校验一下，防止空字符串
	window.open(url, "_blank");
};

onMounted(async () => {
	handleGetThinkTankSummary();
});
</script>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow-y: auto;

	.header {
		width: 100%;
		height: 188px;
		box-sizing: border-box;

		border-bottom: 1px solid rgb(234, 236, 238);
		border-top: 1px solid rgb(234, 236, 238);
		box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 1);
		position: relative;
		position: sticky;
		top: 0;
		z-index: 99999;
		overflow: visible;

		.header-top {
			width: 1600px;
			margin: 0 auto;
			margin-top: 24px;
			display: flex;

			.header-top-left {
				width: 88px;
				height: 88px;


				img {
					width: 100%;
					height: 100%;
				}
			}

			.header-top-center {
				margin-left: 22px;

				.center-top {
					display: flex;

					.name {
						height: 26px;
						color: rgb(59, 65, 75);
						font-family: 'Source Han Sans CN';
						font-size: 20px;
						font-weight: 700;
						line-height: 26px;
						letter-spacing: 0px;
						text-align: left;
					}

					.e-name {
						margin-left: 11px;
						height: 26px;
						color: rgb(132, 136, 142);
						font-family: 'Source Han Sans CN';
						font-size: 14px;
						font-weight: 400;
						line-height: 22px;
						letter-spacing: 0px;
						text-align: left;
					}
				}

				.center-center {
					margin-top: 4px;
					width: 769px;
					height: 24px;
					color: rgb(132, 136, 142);
					font-family: 'Source Han Sans CN';
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: justify;
				}

				.center-footer {
					margin-top: 9px;
					display: flex;
					gap: 8px;

					.tag {
						height: 26px;


						padding: 1px 8px 1px 8px;
						box-sizing: border-box;
						border: 1px solid rgb(231, 243, 255);
						border-radius: 4px;
						background: rgb(246, 250, 255);
						position: relative;
						display: inline-flex;
						align-items: center;

						.tag-industryName {
							color: rgb(5, 95, 194);
							font-family: 'Source Han Sans CN';
							font-size: 16px;
							font-weight: 400;
							line-height: 23px;
							text-align: left;
							letter-spacing: 0px;

						}
					}
				}
			}

			.header-top-right {
				margin-left: auto;
				height: 36px;

				box-sizing: border-box;
				position: relative;


				.blue-btn {
					height: 100%;
					box-sizing: border-box;
					border: none;
					outline: none;
					border-radius: 6px;
					background: rgba(5, 95, 194, 1);
					padding: 7px 16px;
					display: flex;
					align-items: center;

					&:focus {
						outline: none;
					}

					.btn-img {
						width: 16px;
						height: 16px;
						margin-left: 0px;
						margin-top: 3px;
						margin-bottom: 3px;

						margin-right: 8px;

					}

					.text {
						color: #fff;
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 22px;
					}
				}
			}
		}

		.header-footer {
			width: 1600px;
			margin: 0 auto;
			margin-top: 28px;
			height: 48px;
			display: flex;
			gap: 24px;

			.tab {
				height: 48px;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 4px;
				cursor: pointer;
				border-bottom: 2px solid transparent;

				.icon {
					width: 16px;
					height: 16px;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.text {
					height: 24px;
					color: rgb(59, 65, 75);
					font-family: 'Source Han Sans CN';
					font-size: 18px;
					font-weight: 400;
					line-height: 24px;
				}

				.textActive {
					color: rgb(5, 95, 194);
					font-weight: 700;
				}
			}

			.tab.tabActive {
				border-bottom: 2px solid rgb(5, 95, 194);
			}
		}
	}

	.main {
		margin: 0 auto;
		width: 1600px;


	}
}

:deep(.el-input__wrapper) {
	box-shadow: none;
	border-radius: 10px;
}

:deep(.el-input__wrapper:hover) {
	box-shadow: none !important;
}

:deep(.el-input__wrapper.is-focus) {
	box-shadow: none !important;
}
</style>