<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.value" :label="item.label" :value="item.id" />
				</el-select>
				<el-checkbox style="margin-left: 30px" v-model="checkedValue" label="只看涉华条款" size="large" />
				<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">{{ index + 1 }}</div>
					<div class="info">
						<div class="title">
							<span class="title-active">{{ term.header }}</span>
							{{ term.title }}
						</div>
						<div class="content">
							<span class="content-active">{{ term.headerEn }}</span>
							{{ term.content }}
						</div>
					</div>
					<div class="tags-box">
						<div
							class="tag"
							v-for="(val, idx) in term.tags"
							:key="idx"
							:class="{
								tag1: val.status === 1,
								tag2: val.status === 2,
								tag3: val.status === 3,
								tag4: val.status === 4,
								tag5: val.status === 5,
								tag6: val.status === 6
							}"
						>
							{{ val.name }}
						</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">
					{{ "共96条涉华条款" }}
				</div>
				<div class="left-footer-right">
					<el-pagination background layout="prev, pager, next" :total="96" />
				</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 billList = ref([
	{
		value: "公法（2025年7月4日）",
		label: "公法（2025年7月4日）"
	},
	{
		value: "公法（2025年7月8日）",
		label: "公法（2025年7月8日）"
	}
]);

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 => {
	curBillId.value = val;
};

// 获取法案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
			};
		});
		curBill.value = billList.value[0].label;
		curBillId.value = billList.value[0].id;
	} catch (error) {}
};

// 根据原文ID获取条款列表
const handleGetBillContentTk = async cRelated => {
	const params = {
		id: curBillId.value,
		cRelated: cRelated,
		currentPage: 0,
		pageSize: 10
	};
	try {
		const res = await getBillContentTk(params);
		console.log("条款内容", res);
	} 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(false);
	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;
				.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: 813px;
					.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 {
					margin-left: 20px;
					margin-top: 21px;
					width: 160px;
					height: 22px;
					display: flex;
					justify-content: flex-end;
					.tag {
						height: 18px;
						line-height: 18px;
						padding: 0 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 {
					margin-left: 10px;
					margin-top: 22px;
					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>
