<template>
	<div class="temp-wrap">
		<div class="left">
			<div class="box-header">
				<div class="box-header-left"></div>
				<div class="box-header-title">主要条款</div>
				<div class="box-header-btn-box"></div>
				<div class="header-right">
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="left-top">
				<el-select v-model="curBill" placeholder="请选择" style="width: 240px" @change="handleChangeBill">
					<el-option v-for="item in billList" :key="item.id" :label="item.label" :value="item.value" />
				</el-select>
				<el-checkbox
					style="margin-left: 30px"
					v-model="checkedValue"
					label="只看涉华条款"
					size="large"
					@change="handleChangeCheckbox"
				/>
				<div class="search" style="width: 240px; margin-left: 475px">
					<el-input v-model="searchValue" style="width: 240px" placeholder="搜索条款" />
					<div class="icon">
						<img src="./assets/icons/search-icon.png" alt="" />
					</div>
				</div>
			</div>
			<div class="left-main">
				<div class="left-main-item" v-for="(term, index) in mainTermsList" :key="index">
					<div class="id">{{ (currentPage - 1) * pageSize + index + 1 }}</div>
					<div class="info">
						<el-tooltip
							effect="dark"
							:content="`第${term.tkxh}条. ${term.fynr}`"
							popper-class="bill-template-popper"
							placement="top"
							:show-after="500"
						>
							<div class="title">
								<span class="title-active">第{{ term.tkxh }}条.</span>
								{{ term.fynr }}
							</div>
						</el-tooltip>
						<el-tooltip
							effect="dark"
							:content="`Sec.${term.tkxh} ${term.ywnr}`"
							popper-class="bill-template-popper"
							placement="top"
							:show-after="500"
						>
							<div class="content">
								<span class="content-active">Sec.{{ term.tkxh }}</span>
								{{ term.ywnr }}
							</div>
						</el-tooltip>
					</div>
					<div class="tags-box">
						<div
							class="tag"
							v-for="(val, idx) in (term.hylyList || []).slice(0, 2)"
							:key="idx"
							:class="{
								'tag1': val === '人工智能',
								'tag2': val === '新一代信息技术' || !['人工智能', '政治', '经济', '军事', '科技'].includes(val),
								'tag3': val === '政治',
								'tag4': val === '经济',
								'tag5': val === '军事',
								'tag6': val === '科技'
							}"
						>
							{{ val }}
						</div>
					</div>
					<!-- <div class="open">
						<img src="./assets/icons/open-icon.png" alt="" />
					</div> -->
				</div>
			</div>
			<div class="left-footer">
				<div class="left-footer-text">
					{{ `共 ${total} 项` }}
				</div>
				<div class="left-footer-right">
					<el-pagination
						background
						layout="prev, pager, next"
						:total="total"
						v-model:current-page="currentPage"
						v-model:page-size="pageSize"
						@current-change="handleCurrentChange"
					/>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="right-box1">
				<div class="box-header">
					<div class="box-header-left"></div>
					<div class="box-header-title">限制手段</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon1.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="right-box1-main" id="chart1"></div>
				<div class="right-box1-footer">
					<div class="right-box1-footer-left">
						<img src="./assets/icons/right-icon1.png" alt="" />
					</div>
					<div class="right-box1-footer-center">通过关税壁垒、技术脱钩、新能源打压、地缘捆绑遏制中国产业链发展</div>
					<div class="right-box1-footer-right">
						<img src="./assets/icons/arrow-right.png" alt="" />
					</div>
				</div>
			</div>
			<div class="right-box2">
				<div class="box-header">
					<div class="box-header-left"></div>
					<div class="box-header-title">涉及领域</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon1.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="right-box2-main" id="chart2"></div>
				<div class="right-box2-footer">
					<div class="right-box2-footer-left">
						<img src="./assets/icons/right-icon1.png" alt="" />
					</div>
					<div class="right-box2-footer-center">系统性挤压中国新能源、跨境电商及高端制造的在美生存空间。</div>
					<div class="right-box2-footer-right">
						<img src="./assets/icons/arrow-right.png" alt="" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import * as echarts from "echarts";
import getPieChart from "./utils/piechart";
import { getBillContentId, getBillContentTk, getBillContentXzfs, getBillHyly } from "@/api/bill";

const route = useRoute();

const curBill = ref("");
const curBillId = ref(null);
const checkedValue = ref(false);
const searchValue = ref("");
const billList = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const mainTermsList = ref([]);
const btnActiveIndex = ref(1);
const handleSelectBtn = index => {
	btnActiveIndex.value = index;
};

const chart1Data = ref([]);
const chart1ColorList = ref(["#4096ff", "#b37feb", "#ff7875", "#85a5ff", "#69b1ff", "#ffc069", "#87e8de"]);

const chart2ColorList = ref(["#ff7875", "#85a5ff", "#95de64", "#ffc069", "#85e5db"]);

const chart2Data = ref([]);

// 绘制echarts图表
const setChart = (option, chartId) => {
	let chartDom = document.getElementById(chartId);
	chartDom.removeAttribute("_echarts_instance_");
	let chart = echarts.init(chartDom);
	chart.setOption(option);
	return chart;
};

// 切换原文
const handleChangeBill = val => {
	curBill.value = val;
	const item = billList.value.find(item => item.value === val);
	if (item) {
		curBillId.value = item.id;
		currentPage.value = 1;
		handleGetBillContentTk(checkedValue.value ? "Y" : "N");
		handleGetBillContentXzfs();
		handleGetBillHyly();
	}
};

// 获取法案id列表
const handleGetBillList = async () => {
	const params = {
		id: route.query.billId
	};
	try {
		const res = await getBillContentId(params);
		console.log("法案id列表", res);
		billList.value = res.data.map(item => {
			return {
				label: item.bbmc,
				value: item.bbmc,
				id: item.ywid
			};
		});
		if (billList.value.length > 0) {
			curBill.value = billList.value[0].value;
			curBillId.value = billList.value[0].id;
		}
	} catch (error) {}
};

const handleChangeCheckbox = val => {
	currentPage.value = 1;
	handleGetBillContentTk(val ? "Y" : "N");
	handleGetBillContentXzfs();
	handleGetBillHyly();
};

const handleCurrentChange = val => {
	currentPage.value = val;
	handleGetBillContentTk(checkedValue.value ? "Y" : "N");
};

// 根据原文ID获取条款列表
const handleGetBillContentTk = async cRelated => {
	const params = {
		billId: route.query.billId,
		id: curBill.value,
		cRelated: cRelated,
		pageSize: pageSize.value,
		currentPage: currentPage.value
	};
	try {
		const res = await getBillContentTk(params);
		console.log("条款内容", res);
		if (res && res.data) {
			mainTermsList.value = (res.data.content || []).map(item => {
				// 处理 fynr
				if (item.fynr) {
					const matchComplex = item.fynr.match(/^(?:正文内容[:：]\s*)?[“"]?\s*第\s*([0-9a-zA-Z]+)\s*[条节][:：\.\。]?[”"]?\s*/);
					if (matchComplex) {
						// 匹配 "第xxx条"、"正文内容：第xxx条"、"“第xxx条" 等
						if (!item.tkxh) {
							item.tkxh = matchComplex[1];
						}
						item.fynr = item.fynr.replace(matchComplex[0], "");
					} else {
						// 匹配 "xxx."
						item.fynr = item.fynr.replace(/^\d+\.\s*/, "");
					}
				}
				// 处理 ywnr
				if (item.ywnr) {
					const matchSec = item.ywnr.match(/^(?:SEC\.|SECTION)\s*([0-9a-zA-Z]+)[\.:]?\s*/i);
					if (matchSec) {
						if (!item.tkxh) {
							item.tkxh = matchSec[1];
						}
						item.ywnr = item.ywnr.replace(matchSec[0], "");
					} else {
						item.ywnr = item.ywnr.replace(/^\d+\.\s*/, "");
					}
				}
				// 处理 tkxh 末尾的点
				if (item.tkxh) {
					item.tkxh = item.tkxh.replace(/\.$/, "");
				}
				return item;
			});
			total.value = res.data.totalElements || 0;
		} else {
			mainTermsList.value = [];
			total.value = 0;
		}
	} catch (error) {
		console.error("获取条款内容失败", error);
		mainTermsList.value = [];
		total.value = 0;
	}
};

// 获取限制方式列表
const handleGetBillContentXzfs = async () => {
	const params = {
		billId: route.query.billId,
		versionId: curBill.value,
		cRelated: checkedValue.value ? "Y" : "N"
	};

	try {
		const res = await getBillContentXzfs(params);
		console.log("限制方式", res);
		chart1Data.value = res.data.map(item => {
			return {
				name: item.xzfsmc,
				value: item.countTk
			};
		});
		let chart1 = getPieChart(chart1Data.value, chart1ColorList.value);
		setChart(chart1, "chart1");
	} catch (error) {}
};

// 行业领域
const handleGetBillHyly = async () => {
	const params = {
		billId: route.query.billId,
		versionId: curBill.value,
		cRelated: checkedValue.value ? "Y" : "N"
	};

	try {
		const res = await getBillHyly(params);
		console.log("行业领域", res.data);
		chart2Data.value = res.data.map(item => {
			return {
				name: item.hylymc,
				value: item.countTk
			};
		});

		let chart2 = getPieChart(chart2Data.value, chart2ColorList.value);
		setChart(chart2, "chart2");
	} catch (error) {}
};

onMounted(async () => {
	await handleGetBillList();
	handleGetBillContentTk("N");
	await handleGetBillContentXzfs();
	await handleGetBillHyly();
});
</script>

<style lang="scss" scoped>
.temp-wrap {
	display: flex;
	.box-header {
		display: flex;
		position: relative;
		height: 50px;
		.box-header-left {
			margin-top: 18px;
			width: 8px;
			height: 20px;
			border-radius: 0 4px 4px 0;
			background: var(--color-main-active);
		}
		.box-header-title {
			margin-left: 14px;
			margin-top: 14px;
			height: 26px;
			color: var(--color-main-active);
			font-family: Microsoft YaHei;
			font-size: 20px;
			font-weight: 700;
			line-height: 26px;
			letter-spacing: 0px;
			text-align: left;
		}
		.box-header-btn-box {
			position: absolute;
			top: 14px;
			right: 52px;
			display: flex;
			justify-content: flex-end;
			.btn {
				margin-left: 8px;
				padding: 0;
			}
		}
		.header-right {
			position: absolute;
			top: 14px;
			right: 12px;
			display: flex;
			justify-content: flex-end;
			gap: 4px;
			.icon {
				width: 28px;
				height: 28px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.left {
		margin-top: 16px;
		width: 1064px;
		height: 845px;
		border-radius: 10px;
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 1);
		.left-top {
			height: 45px;
			margin-top: 2px;
			margin-left: 22px;
			margin-right: 24px;
			display: flex;
			.search {
				position: relative;
				.icon {
					position: absolute;
					right: 10px;
					top: 5px;
					width: 16px;
					height: 16px;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.left-main {
			.left-main-item {
				margin-left: 22px;
				width: 1016px;
				height: 65px;
				box-sizing: border-box;
				border-radius: 2px;
				background: rgba(255, 255, 255, 1);
				display: flex;
				position: relative;
				.id {
					margin-top: 20px;
					margin-left: 15px;
					width: 24px;
					height: 24px;
					border-radius: 12px;
					background: rgba(231, 241, 255);
					color: var(--color-main-active);
					font-size: 12px;
					text-align: center;
					line-height: 24px;
				}
				.info {
					margin-left: 13px;
					margin-top: 15px;
					width: 780px;
					.title {
						height: 14px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 600;
						line-height: 14px;
						text-align: left;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						.title-active {
							color: var(--color-main-active);
						}
					}
					.content {
						margin-top: 6px;
						height: 14px;
						color: rgba(132, 136, 142, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 14px;
						text-align: left;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						.content-active {
							color: var(--color-main-active);
						}
					}
				}
				.tags-box {
					display: flex;
					justify-content: right;
					align-items: center;
					flex: 1;
					margin-right: 50px;
					.tag {
						text-align: right;
						line-height: 18px;
						padding: 1px 8px;
						border-radius: 4px;
						margin-left: 5px;
						font-size: 12px;
						font-family: "Microsoft YaHei";
						font-size: 14px;
						font-weight: 400;
					}
					.tag1 {
						border: 1px solid rgba(217, 247, 190, 1);
						background: rgba(246, 255, 237, 1);
						color: rgba(82, 196, 26, 1);
					}
					.tag2 {
						border: 1px solid rgba(186, 224, 255, 1);
						background: rgba(230, 244, 255, 1);
						color: rgba(22, 119, 255, 1);
					}
					.tag3 {
						border: 1px solid rgba(135, 232, 222, 1);
						background: rgba(230, 255, 251, 1);
						color: rgba(19, 168, 168, 1);
					}
					.tag4 {
						border: 1px solid rgba(211, 173, 247, 1);
						background: rgba(249, 240, 255, 1);
						color: rgba(114, 46, 209, 1);
					}
					.tag5 {
						border: 1px solid rgba(255, 229, 143, 1);
						background: rgba(255, 251, 230, 1);
						color: rgba(250, 173, 20, 1);
					}
					.tag6 {
						border: 1px solid rgba(255, 163, 158, 1);
						background: rgba(255, 241, 240, 1);
						color: rgba(245, 34, 45, 1);
					}
				}
				.open {
					position: absolute;
					top: 22px;
					right: 23px;
					width: 20px;
					height: 20px;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
			.left-main-item:nth-child(2n-1) {
				background: rgba(249, 250, 252, 1);
			}
		}
		.left-footer {
			margin: 30px;
			height: 30px;
			display: flex;
			justify-content: space-between;
			.left-footer-text {
				margin-top: 6px;
				height: 18px;
				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;
			}
		}
	}
	.right {
		width: 520px;
		margin-top: 16px;
		margin-left: 16px;
		.right-box1 {
			width: 520px;
			height: 415px;
			border-radius: 10px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 1);
			.right-box1-main {
				width: 520px;
				height: 310px;
			}
			.right-box1-footer {
				width: 493px;
				height: 40px;
				display: flex;
				border: 1px solid rgba(231, 241, 255, 1);
				border-radius: 4px;
				background: rgba(246, 251, 255, 1);
				margin-left: 13px;
				.right-box1-footer-left {
					margin-top: 10px;
					margin-left: 12px;
					width: 19px;
					height: 20px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.right-box1-footer-center {
					margin-left: 13px;
					margin-top: 8px;
					width: 400px;
					height: 24px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 24px;
					overflow: hidden;
				}
				.right-box1-footer-right {
					margin-left: 13px;
					margin-top: 8px;
					width: 24px;
					height: 24px;
					background: rgba(231, 241, 255, 1);
					border-radius: 12px;
					background: #e7f1ff;
					box-sizing: border-box;
					padding: 3px;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.right-box2 {
			margin-top: 15px;
			width: 520px;
			height: 415px;
			border-radius: 10px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 1);
			.right-box2-main {
				width: 520px;
				height: 310px;
			}
			.right-box2-footer {
				width: 493px;
				height: 40px;
				display: flex;
				border: 1px solid rgba(231, 241, 255, 1);
				border-radius: 4px;
				background: rgba(246, 251, 255, 1);
				margin-left: 13px;
				.right-box2-footer-left {
					margin-top: 10px;
					margin-left: 12px;
					width: 19px;
					height: 20px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.right-box2-footer-center {
					margin-left: 13px;
					margin-top: 8px;
					width: 400px;
					height: 24px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 24px;
				}
				.right-box2-footer-right {
					margin-left: 13px;
					margin-top: 8px;
					width: 24px;
					height: 24px;
					background: rgba(231, 241, 255, 1);
					border-radius: 12px;
					background: #e7f1ff;
					box-sizing: border-box;
					padding: 3px;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}

:deep(.el-checkbox__label) {
	font-size: 16px !important;
}
</style>

<style>
.bill-template-popper.el-popper {
	padding: 8px 16px !important;
	border-radius: 10px !important;
	background-color: rgb(59, 65, 75) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	font-family: "Microsoft YaHei" !important;
	line-height: 30px !important;
	color: #fff !important;
	border: none !important;
	max-width: 600px;
}

.bill-template-popper.el-popper .el-popper__arrow::before {
	background-color: rgb(59, 65, 75) !important;
	border-color: rgb(59, 65, 75) !important;
}
</style>
