<template>
	<div class="wrap">
		<div class="box1">
			<AnalysisBox title="相关政令" :showAllBtn="false">
				<div class="box1-main">
					<el-scrollbar height="100%" always>
						<el-empty v-if="siderList.length === 0" style="padding-top: 240px" description="暂无数据" :image-size="100" />
						<div class="left-item" :class="{ 'item-active': siderActiveIndex===index }" v-for="(item, index) in siderList" :key="index" @click="handleClickSider(index)">
							<div class="item-head">
								<div class="itme-name one-line-ellipsis">{{ item.title }}</div>
								<div class="item-tag">政令</div>
							</div>
							<div class="itme-time one-line-ellipsis">{{ item.time }} · {{ "美国白宫" }} </div>
						</div>
					</el-scrollbar>
				</div>
			</AnalysisBox>
		</div>
		<div class="box2">
			<AnalysisBox title="政令关系挖掘" :showAllBtn="false">
				<div class="box2-main">
					
				</div>
			</AnalysisBox>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import router from "@/router";
import { getDecreeMainContent } from "@/api/decree/introduction";
import { getDecreeRelateOrder } from "@/api/decree/deepdig";

import box2InfoImg from "./assets/icons/box1-info.png";

const allData = ref([]);
const relateId = ref(0);

const route = useRoute();

const pageSize = ref(10);
const currentPage = ref(1);
// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
};
const showList = computed(() => {
	const startIndex = (currentPage.value - 1) * pageSize.value;
	const endIndex = startIndex + pageSize.value;
	return decreeInfo.value.list.slice(startIndex, endIndex);
});

const siderList = ref([
	{
		time: "2023年7月25日",
		title: "拜登人工智能政令拜登人工智能政令拜登人工智能政令拜登人工智能政令",
	},
	{
		time: "2025年7月25日",
		title: "特朗普撤销拜登AI规则"
	},
	{
		time: "2023年7月25日",
		title: "美国AI行动计划"
	},
	{
		time: "2024年7月25日",
		title: "对中国AI芯片限制"
	}
]);
const siderActiveIndex = ref(0);
const handleClickSider = async index => {
	siderActiveIndex.value = index;
	decreeInfo.value.id = allData.value[index].id;
	decreeInfo.value.img = allData.value[index].imageUrl;
	decreeInfo.value.totalTitle = allData.value[index].name;
	decreeInfo.value.eTotalTitle = allData.value[index].ename;
	decreeInfo.value.signTime = allData.value[index].postDate;
	decreeInfo.value.signOrg = allData.value[index].proposeOrgName;

	relateId.value = allData.value[index].id;

	const params1 = {
		currentPage: 0,
		pageSize: 999999,
		id: relateId.value
	};
	try {
		const res = await getDecreeMainContent(params1);
		console.log("政令主要内容", res);
		if (res.code === 200 && res.data) {
			decreeInfo.value.list = res.data.content;
		} else {
			decreeInfo.value.list = [];
		}
	} catch (error) { }
};

const decreeInfo = ref({
	id: 0,
	img: "",
	totalTitle: "",
	eTotalTitle: "",
	signTime: "",
	signOrg: "",
	list: [
		// {
		// 	content:
		// 		"要求强大AI系统开发者与政府分享安全测试结果（“红队测试”）；制定生物合成筛查标准防范风险；建立AI生成内容鉴别标准"
		// },
		// {
		// 	content: "优先支持隐私保护技术（PET）研发；评估各机构如何收集和使用商业信息；制定评估隐私保护技术有效性的指南。"
		// },
		// {
		// 	content: "为解决算法歧视提供明确指导；确保刑事司法系统中AI使用的公平性；协调调查和起诉AI相关的民权侵犯行为。"
		// }
	]
});

const handleGetRelateOrder = async () => {
	const params = {
		id: route.query.id
	};
	try {
		const res = await getDecreeRelateOrder(params);
		console.log("相关政令关联分析", res);
		if (res.code === 200 && res.data) {
			allData.value = res.data;
			siderList.value = res.data.map(item => {
				return {
					time: item.year,
					title: item.name
				};
			});
			decreeInfo.value.id = allData.value[0].id;
			decreeInfo.value.img = allData.value[0].imageUrl;
			decreeInfo.value.totalTitle = allData.value[0].name;
			decreeInfo.value.eTotalTitle = allData.value[0].ename;
			decreeInfo.value.signTime = allData.value[0].postDate;
			decreeInfo.value.signOrg = allData.value[0].proposeOrgName;
			relateId.value = allData.value[0].id;
			const params1 = {
				currentPage: 0,
				pageSize: 999999,
				id: relateId.value
			};
			try {
				const res = await getDecreeMainContent(params1);
				console.log("政令主要内容", res);
				if (res.code === 200 && res.data) {
					decreeInfo.value.list = res.data.content;
				} else {
					decreeInfo.value.list = [];
				}
			} catch (error) { }
		} else {
			allData.value = [];
			// siderList.value = [];
			decreeInfo.value.id = 0;
			decreeInfo.value.img = "";
			decreeInfo.value.totalTitle = "";
			decreeInfo.value.eTotalTitle = "";
			decreeInfo.value.signTime = "";
			decreeInfo.value.signOrg = "";
			decreeInfo.value.list = [];
		}
	} catch (error) {
		allData.value = [];
		siderList.value = [];
		decreeInfo.value.id = 0;
		decreeInfo.value.img = "";
		decreeInfo.value.totalTitle = "";
		decreeInfo.value.eTotalTitle = "";
		decreeInfo.value.signTime = "";
		decreeInfo.value.signOrg = "";
		decreeInfo.value.list = [];
	}
};

const handleToDecreeDetail = item => {
	console.log("item", item.id);
	window.sessionStorage.setItem("curTabName", item.totalTitle);
	const route = router.resolve({
		path: "/decreeLayout/overview/introduction",
		query: {
			id: item.id
		}
	});
	window.open(route.href, "_blank");
};

onMounted(() => {
	handleGetRelateOrder();
});
</script>

<style lang="scss" scoped>
.wrap {
	min-height: 845px;
	width: 1600px;
	margin: 16px auto;
	display: flex;
	gap: 16px;

	.box1 {
		width: 480px;

		.box1-main {
			padding: 10px 16px;
				
			.left-item {
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				border-bottom: 1px solid rgba(240, 242, 244, 1);
				padding: 10px;
				cursor: pointer;
				&:first-child {
					border-top: 1px solid rgba(240, 242, 244, 1);
				}
				&:hover {
					background: rgba(246, 250, 255, 1);
				}
				.item-head {
					display: flex;
					align-items: center;
					margin-bottom: 6px;
				}
				.itme-name {
					width: 20px;
					flex: auto;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 600;
					letter-spacing: 0px;
				}
				.item-tag{
					height: 24px;
					line-height: 24px;
					text-align: center;
					padding: 0 8px;
					border-radius: 12px;
					background: rgba(231, 243, 255, 1);
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					letter-spacing: 0px;
					margin-left: 6px;
				}
				.itme-time {
					color: rgb(95, 101, 108);
					font-family: "Source Han Sans CN";
					font-size: 16px;
					font-weight: 400;
					letter-spacing: 0px;
				}
			}

			.item-active {
				background: rgba(246, 250, 255, 1);
				position: relative;

				&::after {
					position: absolute;
					content: "";
					width: 5px;
					height: 100%;
					background: var(--color-main-active);
					right: 0px;
					top: 0px;
				}
			}
		}
	}

	.box2 {
		width: 20px;
		flex: auto;
	}
}

// 修改element-plus滚动条样式
:deep(.el-scrollbar__bar.is-vertical) {
	right: 0px;
	width: 4px;
	background: transparent;
	border-radius: 2px;
	&>div {
		background: #c5c7c9;
		opacity: 1;
	}
	&>div:hover {
		background: #505357;
	}
}
</style>
