<template>
	<div class="wrap">
		<div class="header">
			<div class="header-top">
				<div class="header-top-left">
					<img :src="thinkInfo.imageUrl" alt="" />
					<div>
						<div class="title">{{ thinkInfo.name }}</div>
						<div class="en-title">
							{{ thinkInfo.ename }}
						</div>
						<div style="display: flex">
							<div class="tag-box" v-for="value in thinkInfo.tags">
								<div class="tag">{{ value.industryName }}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="header-top-right">
					<div class="name">{{ thinkInfo.thinkTankName }}</div>
					<div class="time">{{ thinkInfo.times }}</div>
				</div>
			</div>
			<div class="header-bottom">
				<div class="tab-box">
					<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>
				<div class="btn-box">
					<!-- <div class="btn">
						<div class="icon">
							<img src="./images/btn-icon1.png" alt="" />
						</div>
						<div class="text">{{ "查看官网" }}</div>
					</div> -->
					<div class="btn">
						<div class="icon">
							<img src="./images/btn-icon2.png" alt="" />
						</div>
						<div class="text" @click="toReport()">{{ "报告原文" }}</div>
					</div>
					<div class="btn">
						<div class="icon">
							<img src="./images/btn-icon3.png" alt="" />
						</div>
						<div class="text">{{ "文档下载" }}</div>
					</div>
					<div class="btn btn1">
						<div class="icon">
							<img src="./images/btn-icon4.png" alt="" />
						</div>
						<div class="text">{{ "分析报告" }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main">
			<ReportAnalysis v-if="tabActiveName === '报告分析'"></ReportAnalysis>
			<PolicyTracking v-else></PolicyTracking>
		</div>
	</div>
</template>

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

import ReportAnalysis from "./reportAnalysis/index.vue";
import PolicyTracking from "./policyTracking/index.vue";
import { getThinkTankReportSummary } from "@/api/thinkTank/overview";
import { useRouter } from "vue-router";
const router = useRouter();
const reportUrl = ref("");
const thinkInfo = ref({});

// 获取报告全局信息
const handleGetThinkTankReportSummary = async () => {
	try {
		const res = await getThinkTankReportSummary(router.currentRoute._value.params.id);
		console.log("报告全局信息", res);
		if (res.code === 200 && res.data) {
			reportUrl.value = res.data.reportUrl;
			thinkInfo.value = res.data;
		}
	} catch (error) {
		console.error("获取报告全局信息error", error);
	}
};

const toReport = () => {
	console.log(reportUrl.value, "reportUrl.valuereportUrl.value");
	const route = router.resolve({
		name: "ReportOriginal",
		params: {
			id: router.currentRoute._value.params.id
		}
	});
	window.open(route.href, "_blank");
};
const tabActiveName = ref("报告分析");

const switchTab = name => {
	tabActiveName.value = name;
};
onMounted(async () => {
	handleGetThinkTankReportSummary();
});
</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 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: sticky;
		top: 0;
		z-index: 99999999;
		.header-top {
			margin-top: 20px;
			margin-left: 160px;
			display: flex;
			justify-content: space-between;
			margin-right: 160px;

			.header-top-left {
				display: flex;

				img {
					width: 72px;
					height: 88px;
				}

				.title {
					margin-left: 20px;
					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;
				}

				.en-title {
					margin-left: 20px;
					height: 24px;
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: left;
				}

				.tag-box {
					margin-top: 11px;
					display: flex;
					gap: 8px;
					margin-left: 20px;

					.tag {
						height: 26px;
						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: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: left;
					}
				}
			}

			.header-top-right {
				.name {
					height: 24px;
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: right;
				}

				.time {
					height: 24px;
					margin-top: 5px;
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: right;
				}
			}
		}

		.header-bottom {
			margin: 0 auto;
			margin-top: 30px;
			width: 1600px;
			height: 48px;
			display: flex;
			justify-content: space-between;

			.tab-box {
				width: 224px;
				height: 48px;
				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);
				}
			}

			.btn-box {
				display: flex;
				gap: 12px;

				.btn {
					width: 120px;
					height: 36px;
					box-sizing: border-box;
					border: 1px solid rgba(230, 231, 232, 1);
					border-radius: 6px;
					background: rgba(255, 255, 255, 1);
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 8px;

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

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

					.text {
						width: 66px;
						height: 22px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 22px;
						letter-spacing: 0px;
						text-align: center;
					}
				}

				.btn1 {
					border-radius: 6px;
					background: var(--color-main-active);

					.text {
						color: rgba(255, 255, 255, 1);
					}
				}
			}
		}
	}

	.main {
		width: 100%;
	}
}
</style>