<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">
						<div class="title">
							<span class="title-active">第{{ term.tkxh }}条.</span>
							{{ term.fynr }}
						</div>
						<div class="content">
							<span class="content-active">Sec.{{ term.tkxh }}</span>
							{{ term.ywnr }}
						</div>
					</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}条${checkedValue ? "涉华" : ""}条款` }}
				</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 * as echarts from "echarts";
import getPieChart from "./utils/piechart";
import { getBillContentId, getBillContentTk, getBillContentXzfs, getBillHyly } from "@/api/bill";

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([
	{
		id: 1,
		title: "废除价值800美元以下进口包裹的免税政策，改为征收30%关税或每件25-50美元费用。",
		header: "第51255条",
		headerEn: "Sec.51225",
		content: "Elimination of De Minimis Rule for imports valued below $800.",
		tags: [
			{
				name: "关税",
				status: 2
			},
			{
				name: "跨境电商",
				status: 1
			}
		]
	},
	{
		id: 2,
		title: "对所有进口商品加征10%关税。",
		header: "第51255条",
		headerEn: "Sec.51225",
		content: "Imposing a 10% baseline tariff on all imported goods.",
		tags: [
			{
				name: "关税",
				status: 2
			}
		]
	},
	{
		id: 3,
		title: "第50404条：若美企与中企签订超100万美元技术许可协议，将丧失政府补贴资格。",
		header: "第51255条",
		headerEn: "Sec.51225",
		content:
			"Sec. 50404. If the taxpayer has entered into any technology licensing agreement with a FEOC exceeding $1,000,000...",
		tags: [
			{
				name: "技术封锁",
				status: 6
			}
		]
	},
	{
		id: 4,
		title: "第4502条：2025年9月30日后终止电动汽车消费者税收抵免。",
		header: "第51255条",
		headerEn: "Sec.51225",
		content: "Sec.4502. Termination of electric vehicle consumer tax credits after September 30, 2025.",
		tags: [
			{
				name: "税收",
				status: 2
			},
			{
				name: "新能源",
				status: 1
			}
		]
	},
	{
		id: 5,
		title: "2026年1月1日起对使用进口组件的光伏项目征收15%消费税。",
		header: "第51255条",
		headerEn: "Sec.51225",
		content: "Imposition of 15% excise tax on solar projects using imported components after January 1, 2026.",
		tags: [
			{
				name: "供应链打压",
				status: 3
			},
			{
				name: "光伏",
				status: 1
			}
		]
	},
	{
		id: 6,
		title: "若风电/光伏项目中受关注外国实体（FEOC）组件成本占比超标（如2026年太阳能为40%），则取消税收抵免。",
		header: "第51255条",
		headerEn: "Sec.51225",
		content:
			"Prohibiting tax credits for wind/solar projects if components from Foreign Entities of Concern (FEOC) exceed cost ratios ...",
		tags: [
			{
				name: "供应链打压",
				status: 3
			},
			{
				name: "光伏",
				status: 1
			}
		]
	},
	{
		id: 7,
		title: "第50401条：2025年起，若电池中关键矿物由受关注外国实体（FEOC）提取、加工或回收，则该车辆无法享受税收抵免。",
		header: "第51255条",
		headerEn: "Sec.51225",
		content:
			"Sec. 50401. No tax credit shall be allowed for any vehicle placed in service after December 31, 2024, if any of the...",
		tags: [
			{
				name: "供应链打压",
				status: 3
			},
			{
				name: "新能源",
				status: 1
			}
		]
	},
	{
		id: 8,
		title: "Sec. 50401. No tax credit shall be allowed for any vehicle placed in service after December 31, 2024, if any of the...",
		header: "第51255条",
		headerEn: "Sec.51225",
		content:
			"Sec. 50405. No credit shall be allowed under this chapter to any entity in which a foreign adversary holds 25% or more ...",
		tags: [
			{
				name: "新能源",
				status: 1
			}
		]
	},
	{
		id: 9,
		title: "第4501条：芯片企业税收抵免提至35%，但禁止在中国大陆扩大先进制程生产。",
		header: "第51255条",
		headerEn: "Sec.51225",
		content:
			"Sec. 4501. The advanced manufacturing investment credit under section 48D shall be increased to 35%, provided that ...",
		tags: [
			{
				name: "技术封锁",
				status: 5
			},
			{
				name: "半导体",
				status: 4
			}
		]
	},
	{
		id: 10,
		title: "第20013条：授权拨款5亿美元用于向台湾提供防御物资、训练及其他服务。",
		content:
			"Sec. 20013. $500,000,000 is authorized to be appropriated for the provision of defense articles, training, and other ...",
		header: "第51255条",
		headerEn: "Sec.51225",
		tags: [
			{
				name: "拨款",
				status: 2
			},
			{
				name: "军工",
				status: 6
			}
		]
	}
]);
const btnActiveIndex = ref(1);
const handleSelectBtn = index => {
	btnActiveIndex.value = index;
};

const chart1Data = ref([
	{ name: "出口管制", value: 24 },
	{ name: "金融制裁", value: 30 },
	{ name: "资本管制", value: 31 },
	{ name: "对台军售", value: 32 },
	{ name: "关税贸易", value: 50 },
	{ name: "技术封锁", value: 46 },
	{ name: "供应链打压", value: 40 }
]);
const chart1ColorList = ref(["#4096ff", "#b37feb", "#ff7875", "#85a5ff", "#69b1ff", "#ffc069", "#87e8de"]);

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

const chart2Data = ref([
	// { name: "军工", value: 85 },
	// { name: "金融业", value: 98 },
	// { name: "新能源", value: 95 },
	// { name: "半导体", value: 80 },
	// { name: "跨境电商", value: 71 },
]);

// 绘制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");
	}
};

// 获取法案id列表
const handleGetBillList = async () => {
	const params = {
		id: window.sessionStorage.getItem("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");
};

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

// 根据原文ID获取条款列表
const handleGetBillContentTk = async cRelated => {
	const params = {
		billid: window.sessionStorage.getItem("billId"),
		id: curBill.value,
		cRelated: cRelated,
		currentPage: currentPage.value - 1,
		pageSize: pageSize.value
	};
	try {
		const res = await getBillContentTk(params);
		console.log("条款内容", res);
		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;
	} catch (error) {}
};

// 获取限制方式列表
const handleGetBillContentXzfs = async () => {
	const params = {
		id: window.sessionStorage.getItem("billId")
	};

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

// 行业领域
const handleGetBillHyly = async () => {
	const params = {
		id: window.sessionStorage.getItem("billId")
	};

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

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

onMounted(async () => {
	await handleGetBillList();
	handleGetBillContentTk("N");
	await handleGetBillContentXzfs();
	await handleGetBillHyly();
	let chart1 = getPieChart(chart1Data.value, chart1ColorList.value);
	setChart(chart1, "chart1");
});
</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: 1150px;
		height: 845px;
		border-radius: 4px;
		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: 1104px;
				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 {
		margin-top: 16px;
		margin-left: 16px;
		.right-box1 {
			width: 576px;
			height: 415px;
			border-radius: 4px;
			background: rgba(255, 255, 255, 1);
			.right-box1-main {
				width: 576px;
				height: 310px;
			}
			.right-box1-footer {
				width: 549px;
				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: 456px;
					height: 24px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 24px;
				}
				.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: 576px;
			height: 415px;
			border-radius: 4px;
			background: rgba(255, 255, 255, 1);
			.right-box2-main {
				width: 576px;
				height: 310px;
			}
			.right-box2-footer {
				width: 549px;
				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: 456px;
					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>
