<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">
						<div class="tag" v-for="(tag, index) in thinkTank.tags" :key="index">{{ tag.industryName }}</div>
					</div>
				</div>
				<!-- <div class="header-top-right">{{ '查看智库官网' }}</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);
	}
};

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

<style lang="scss" scoped>
.wrap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow-y: auto;
	.header {
		width: 1920px;
		height: 188px;
		box-sizing: border-box;
		padding: 0 160px;
		border-bottom: 1px solid rgba(234, 236, 238, 1);
		border-top: 1px solid rgba(234, 236, 238, 1);
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 1);
		position: relative;
		position: sticky;
		top: 0;
		z-index: 99999999;
		.header-top {
			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: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 700;
						line-height: 26px;
						letter-spacing: 0px;
						text-align: left;
					}

					.e-name {
						margin-left: 11px;
						height: 26px;
						color: rgba(132, 136, 142, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 26px;
						letter-spacing: 0px;
						text-align: left;
					}
				}

				.center-center {
					margin-top: 4px;
					width: 769px;
					height: 24px;
					color: rgba(132, 136, 142, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: 0px;
				}

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

					.tag {
						height: 26px;
						line-height: 26px;
						text-align: center;
						padding: 0 8px;
						box-sizing: border-box;
						border: 1px solid rgba(231, 243, 255, 1);
						border-radius: 4px;
						background: rgba(246, 250, 255, 1);
						color: rgba(5, 95, 194, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
					}
				}
			}
		}

		.header-footer {
			width: 340px;
			height: 48px;
			position: absolute;
			bottom: 0;
			left: 160px;
			display: flex;
			gap: 24px;

			.tab {
				width: 94px;
				height: 48px;
				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: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 18px;
					font-weight: 400;
					line-height: 24px;
				}

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

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

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

		.main-header {
			height: 64px;
			display: flex;
			justify-content: space-between;

			.search-box {
				margin-top: 16px;
				display: flex;
				width: 300px;
				height: 32px;
				box-sizing: border-box;
				border: 1px solid rgba(230, 231, 232, 1);
				border-radius: 4px;
				background: rgba(255, 255, 255, 1);

				.icon {
					width: 16px;
					height: 16px;
					margin: 8px 7px;
					cursor: pointer;

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

			.select-box {
				margin-top: 16px;
				margin-right: 5px;
			}
		}

		.main-content {
			display: flex;
			gap: 16px;

			.left {
				width: 300px;
				height: 806px;
				box-sizing: border-box;
				border: 1px solid rgba(234, 236, 238, 1);
				border-radius: 10px;
				box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
				background: rgba(255, 255, 255, 1);
				position: relative;

				.select-box {
					margin-top: 21px;

					.select-box-header {
						display: flex;
						gap: 17px;

						.icon {
							margin-top: 4px;
							width: 8px;
							height: 16px;
							background: var(--color-main-active);
							border-radius: 0 4px 4px 0;
						}

						.title {
							height: 24px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 1px;
							text-align: left;
						}
					}

					.select-main {
						margin-left: 25px;
					}

					.select-main1 {
						width: 100px;
					}
				}
			}

			.right {
				width: 1284px;
				height: 1377px;

				.card-box {
					width: 1284px;
					height: 1248px;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.footer-card {
						width: 418px;
						height: 300px;
						border-radius: 10px;
						box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
						background: rgba(255, 255, 255, 1);

						.footer-card-top {
							width: 384px;
							height: 206px;
							margin: 0 auto;
							margin-top: 15px;

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

						.footer-card-title {
							margin: 0 auto;
							margin-top: 13px;
							width: 376px;
							height: 24px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 18px;
							font-weight: 700;
							line-height: 24px;
						}

						.footer-card-footer {
							margin: 0 auto;
							margin-top: 5px;
							width: 376px;
							height: 22px;
							display: flex;
							justify-content: space-between;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
						}
					}
				}

				.right-footer {
					margin-top: 43px;
					display: flex;
					justify-content: space-between;

					.info {
						height: 19px;
						color: rgba(132, 136, 142, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 18px;
						letter-spacing: 0px;
						text-align: left;
					}
				}
			}
		}
	}
}

: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>