<template>
	<el-row :gutter="20">
		<el-col :span="24">
			<custom-container title="政令时序及战略里程碑" height="510px">
				<!-- 顶部右侧自定义内容 -->
				<!-- <template #header-right>
					<div style="display: flex; gap: 8px">
						<el-input placeholder="搜索项目..." clearable style="width: 200px">
							<template #prefix>
								<el-icon><Search /></el-icon>
							</template>
						</el-input>
						<el-button type="primary">涉华背景</el-button>
						<el-button>全部背景</el-button>
					</div>
				</template> -->

				<template #default>
					<div class="content-box">
						<el-image :src="TimeLine" alt="" style="width: 100%; height: 306px" />
						<div class="content-box-footer">
							<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
							<span class="content-box-footer-text"> 促进美国人工智能栈技术出口总统政令的时序及战略里程碑分析结果。 </span>
							<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
						</div>
					</div>
				</template>
			</custom-container>
		</el-col>
	</el-row>

	<el-row :gutter="20">
		<el-col :span="24">
			<custom-container title="相关政令关联分析" height="505px">
				<template #default>
					<div class="content-box">
						<div class="content-tabs">
							<div
								:class="['content-tabs-item', activeTab === item.id ? 'contetn-tabs-item-active' : '']"
								v-for="item in data"
								:key="item.id"
								@click="tabsClick(item.id)"
							>
								{{ item.name }}
								<el-image :src="IconOpen" :style="{ width: '16px', height: '16px' }"></el-image>
							</div>
						</div>
						<div class="content-tabs-pane">
							<div class="content-tabs-pane-left">
								<div class="content-tabs-pane-header">
									<el-image :src="IconNews" :style="{ width: '20px', height: '20px' }"></el-image>
									政令基本信息
								</div>
								<div class="content-tabs-pane-content">
									<div class="content-tabs-pane-content-item">
										<span class="content-tabs-pane-content-item-title">政令名称：</span>
										<span>{{ currentContent.info.fullName }}</span>
									</div>
									<div class="content-tabs-pane-content-item">
										<span class="content-tabs-pane-content-item-title">英文名称：</span>
										<span>{{ currentContent.info.fullNameEn }}</span>
									</div>
									<div class="content-tabs-pane-content-item">
										<span class="content-tabs-pane-content-item-title">相关领域：</span>
										<!-- <span>{{ currentContent.info.fullName }}</span> -->
										<el-tag v-for="item in currentContent.info.tags" :key="item" type="primary">{{ item }}</el-tag>
									</div>
									<div class="content-tabs-pane-content-item">
										<span class="content-tabs-pane-content-item-title">签署时间：</span>
										<span>{{ currentContent.info.time }}</span>
									</div>
									<div class="content-tabs-pane-content-item">
										<span class="content-tabs-pane-content-item-title">签署总统：</span>
										<span>{{ currentContent.info.president }}</span>
									</div>
									<div class="content-tabs-pane-content-item">
										<span class="content-tabs-pane-content-item-title">政令编号：</span>
										<span>{{ currentContent.info.orderNum }}</span>
									</div>
									<div class="content-tabs-pane-content-item">
										<span class="content-tabs-pane-content-item-title">执行期限：</span>
										<span>{{ currentContent.info.period }}</span>
									</div>
								</div>
							</div>
							<div class="content-tabs-pane-right">
								<div class="content-tabs-pane-header">
									<el-image :src="IconNews" :style="{ width: '20px', height: '20px' }"></el-image>
									政令主要条款
								</div>
								<div class="content-tabs-pane-content">
									<div class="content-tabs-pane-content-list">
										<div class="content-tabs-pane-content-list-item" v-for="(item, index) in clause" :key="item.id">
											<span class="content-tabs-pane-content-list-item-index">
												{{ (currentPage - 1) * 5 + index + 1 }}
											</span>
											<span class="content-tabs-pane-content-list-item-content">
												{{ item.content }}
											</span>
										</div>
									</div>
								</div>
								<div class="content-tabs-pane-footer">
									<el-pagination
										v-model:current-page="currentPage"
										:page-size="5"
										size="small"
										:total="currentContent.clause.length"
										background
										layout="total, prev, pager, next"
										@size-change="handleSizeChange"
										@current-change="handleCurrentChange"
									/>
								</div>
							</div>
						</div>
					</div>
				</template>
			</custom-container>
		</el-col>
	</el-row>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import CustomContainer from "@/components/Container/index.vue";
import { TAGTYPE } from "@/common/constant.js";
import TimeLine from "@/assets/images/time-line.png";
import IconOpen from "@/assets/images/icon-open.png";
import IconNews from "@/assets/images/icon-news.png";
import { data } from "./mock";
const activeTab = ref(11);
const currentContent = ref({});
const clause = ref([]);
const tableData = ref([
	{
		date: "2024年5月14日",
		entity: "37/24",
		entityCN: "37/4",
		proportion: "100%/1"
	},
	{
		date: "2024年4月11日",
		entity: "37/24",
		entityCN: "37/4",
		proportion: "100%/1"
	},
	{
		date: "2024年2月27日",
		entity: "37/24",
		entityCN: "37/4",
		proportion: "100%/1"
	},
	{
		date: "2023年12月7日",
		entity: "37/24",
		entityCN: "37/4",
		proportion: "100%/1"
	},
	{
		date: "2023年11月15日",
		entity: "37/24",
		entityCN: "37/4",
		proportion: "100%/1"
	},

	{
		date: " 2024年3月5日",
		entity: "37/24",
		entityCN: "37/4",
		proportion: "100%/1"
	}
]);

// 重点实体列表
const entityList = ref([
	{
		entity: "中国科学技术大学",
		tags: ["双一流", "985", "关税政策"]
	},
	{
		entity: "合肥量子信息科学国家实验室",
		tags: ["中国上市企业"]
	},
	{
		entity: "中国科学院物理研究所",
		tags: ["科研院所"]
	}
]);
let option = null;
onMounted(() => {
	currentContent.value = data.filter(item => item.id === activeTab.value)[0];
	clause.value = currentContent.value.clause.slice((currentPage.value - 1) * 5, currentPage.value * 5);
	console.log("数据查看 =>", currentContent.value);
	// 更新频率
	option = {
		grid: {
			left: 0,
			right: 0,
			top: 0,
			bottom: 0
		},
		legend: {
			show: true,
			bottom: -5,
			icon: "circle",
			itemWidth: 6,
			itemHeight: 6,
			textStyle: {
				color: "#4E5969"
			}
		},
		tooltip: {
			show: true,
			formatter(params) {
				return `总计：${params.value}<br>${params.data.size}`;
			}
		},
		series: [
			{
				type: "pie",
				radius: ["40%", "70%"],
				avoidLabelOverlap: true,
				label: {
					show: false,
					position: "center"
				},
				data: [
					{
						value: 37,
						name: "中国上市企业"
					},
					{
						value: 4,
						name: "科研院所"
					}
				]
			}
		]
	};
});

const tabsClick = id => {
	console.log(id);
	activeTab.value = id;
	currentContent.value = data.filter(e => e.id === id)[0];
	currentPage.value = 1;
	clause.value = currentContent.value.clause.slice((currentPage.value - 1) * 5, currentPage.value * 5);
};
const currentPage = ref(1);
const handleCurrentChange = val => {
	currentPage.value = val;
	clause.value = currentContent.value.clause.slice((val - 1) * 5, val * 5);
	console.log(`当前页: ${val}`);
	console.log(`当前页-shuju`, clause.value);
};
const handleSizeChange = val => {
	console.log(val);
};
</script>

<style scoped>
.content-box {
	/* height: 90vh; */
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	border: 1px solid rgba(234, 236, 238, 1);
	overflow: hidden;
}
.content-tabs {
	height: 100%;
	padding-top: 2%;
	width: 300px;
	border-right: 1px solid rgba(234, 236, 238, 1);
}
.content-tabs-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(234, 236, 238, 1);
	color: rgba(95, 101, 108, 1);
	font-size: 16px;
	font-weight: 400;
	padding-left: 24px;
	padding-right: 24px;
	height: 36px;
	cursor: pointer;
}
.contetn-tabs-item-active {
	background-color: rgba(231, 243, 255, 1);
	color: rgba(10, 87, 166, 1);
}
.content-tabs-pane {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	height: 100%;
	flex: 1;
	/* padding-top: 25px; */
	padding-left: 20px;
	background-color: rgba(246, 250, 255, 1);
}
.content-tabs-pane-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	width: 550px;
	padding-top: 15px;
	gap: 15px;
	flex-shrink: 0;
}
.content-tabs-pane-right {
	height: 375px;
	padding-top: 15px;
	padding-left: 20px;
	border-left: 1px solid rgba(234, 236, 238, 1);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-right: 15px;
	flex-grow: 1;
}
.content-tabs-pane-header {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--base-color);
}
.content-tabs-pane-content {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-bottom: auto;
}
.content-tabs-pane-content-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--base-color);
}
.content-tabs-pane-content-item-title {
	font-size: 16px;
	font-weight: 700;
	color: rgba(59, 65, 75, 1);
}
.content-tabs-pane-content-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 15px;
}
.content-tabs-pane-content-list-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 5px 10px;
	gap: 8px;
	border: 1px solid rgba(234, 236, 238, 1);
	border-radius: 5px;
}
.content-tabs-pane-content-list-item-index {
	height: 24px;
	width: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	/* font-weight: 700; */
	border-radius: 50%;
	color: var(--base-color);
	background-color: rgba(231, 243, 255, 1);
}
.content-tabs-pane-content-list-item-content {
	font-size: 16px;
	font-weight: 400;
	color: rgba(10, 18, 30, 1);
}
.content-box-list {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.content-box-list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding-bottom: 5px;
	border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.content-box-list-item-title {
	font-size: 16px;
	font-weight: 700;
	color: rgba(10, 18, 30, 1);
}
.content-box-list-item-tag {
	display: flex;
	gap: 8px;
}
.content-box-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background-color: rgba(246, 251, 255, 1);
	padding: 5px 15px;
}
.content-box-footer-text {
	font-size: 16px;
	font-weight: 400;
	color: rgba(10, 87, 166, 1);
}
.footer-img-small {
	width: 20px;
	height: 20px;
}
.footer-img-large {
	width: 24px;
	height: 24px;
}
</style>
