<template>
	<div class="list-page">
		<div class="search-box">
			<div style="display: flex; justify-content: center">
				<el-select v-model="currentCCLVersion" style="width: 388px; height: 32px; margin-right: 14px">
					<el-option v-for="item in cclVersionList" :key="item.key" :label="item.value" :value="item.key" />
				</el-select>
				<el-input v-model="searchKeyword" class="search-input" placeholder="搜索物项或ECCN编码" :suffix-icon="Search" />
			</div>
			<div class="filters">
				<el-checkbox v-model="viewNew" label="查看最近更新内容" />
				<el-select v-model="currentCCLType" style="width: 388px; height: 32px; margin-right: 14px">
					<el-option v-for="item in CCLTypeList" :key="item.id" :label="item.name" :value="item.id" />
				</el-select>
			</div>
		</div>
		<div class="main">
			<div class="left">
				<div class="title">
					<div class="box"></div>
					<div class="text">科技领域</div>
				</div>
				<div class="checkbox-group">
					<el-checkbox
						v-for="(item, index) in techFields"
						:key="index"
						v-model="item.checked"
						:label="item.name"
						@change="handleFilterChange(item, techFields, 'tech')"
					/>
				</div>
				<div class="title">
					<div class="box"></div>
					<div class="text">管控原因</div>
				</div>
				<div class="checkbox-group">
					<el-checkbox
						v-for="(item, index) in controlReason"
						:key="index"
						v-model="item.checked"
						:label="item.name"
						@change="handleFilterChange(item, controlReason, 'reason')"
					/>
				</div>
			</div>
			<div class="right">
				<AnalysisBox title="CCL清单列表" :showAllBtn="false">
					<div class="right-table">
						<div class="list" v-for="(item, i) in cclList" :key="i">
							<div class="list-title" @click="item.isExpand = !item.isExpand">
								<span>类别 {{ item.cclCode }}-{{ item.cclTitleZh }}</span>
								<img src="../../assets/downArrow_white.png" alt v-if="item.isExpand" />
								<img src="../../assets/upArrow_white.png" alt v-else />
							</div>

							<div style="width: 100%" v-if="item.isExpand">
								<div style="width: 100%" v-for="(element, index) in item.cclChildren" :key="index">
									<div class="list-desc">{{ element.cclCode }}. {{ element.cclTitleZh }}</div>

									<div class="list-content" v-for="(ele, j) in element.cclChildren" :key="j">
										<div class="content-title" @click="ele.isExpand = !ele.isExpand">
											<div class="code-zone">
												<!-- <div class="dot" v-if="ele.isDot"></div> -->
												<span class="code">{{ ele.cclCode }}</span>
											</div>
											<span class="name">{{ ele.cclTitleZh }}</span>
											<img src="../../assets/upArrow_gray.png" alt v-if="ele.isExpand" />
											<img src="../../assets/downArrow_gray.png" alt v-else />
										</div>
										<div class="content-body" v-if="ele.isExpand">
											<!-- <img src="../../assets/cclDetail.png" alt /> -->
											<div v-if="ele.cclDescription" v-html="ele.cclDescription"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { Search, Select } from "@element-plus/icons-vue";
import defaultIcon from "../../../../../assets/icons/default-avatar.png";
import {
	getECCNCategory,
	getAreaType,
	getControlReason,
	getCclQuery,
	getCCLVersionList,
	getExportControlList,
	get50PercentEntityCount
} from "@/api/exportControlV2.0.js";
import dayjs from "dayjs";

const router = useRouter();

const currentCCLType = ref("");
const CCLTypeList = ref([]);
const getTypeList = async () => {
	try {
		const res = await getECCNCategory();
		if (res && res.code === 200) {
			console.log("-----getTypeList", res.data);
			CCLTypeList.value = res.data;
			currentCCLType.value = CCLTypeList.value[0].id;
		}
	} catch (error) {
		console.error("获取类别字典失败:", error);
	}
};

const techFields = ref([]);
const getTechFields = async () => {
	try {
		const res = await getAreaType();
		if (res && res.code === 200) {
			console.log("-----getTechFields", res.data);
			techFields.value = res.data;
			// 默认选中第一个
			techFields.value[0].checked = true;
		}
	} catch (error) {
		console.error("获取科技领域字典失败:", error);
	}
};

const controlReason = ref([]);
const getControlReasonList = async () => {
	try {
		const res = await getControlReason();
		if (res && res.code === 200) {
			console.log("-----getControlReasonList", res.data);
			controlReason.value = res.data;
			// 默认选中第一个
			controlReason.value[0].checked = true;
		}
	} catch (error) {
		console.error("获取管控原因字典失败:", error);
	}
};

const searchKeyword = ref("");
const onlyChina = ref(false);
const viewNew = ref(true);

// 获取ccl清单列表
const getCclList = async () => {
	let techDomains = techFields.value.filter(item => item.checked).map(item => +item.id);
	let controls = controlReason.value.filter(item => item.checked).map(item => +item.id);
	const params = {
		categoryCode: currentCCLType.value,
		techDomainIds: techDomains,
		keyword: searchKeyword.value || "",
		controlIds: controls,
		isLatest: viewNew.value,
		recordId: currentCCLVersion.value || ""
	};
	console.log(JSON.stringify(params));
	try {
		// const res = await getCclQuery(null);
		const res = await getCclQuery(params);
		// const res = {
		//   "code": 200,
		//   "message": "操作成功",
		//   "success": true,
		//   "data": [
		//     {
		//       "id": 1,
		//       "cclCode": "0",
		//       "cclTitle": "Nuclear Materials, Facilities and Equipment and Miscellaneous",
		//       "cclTitleZh": "核材料、设备设施及其他类似物项",
		//       "cclDescription": null,
		//       "cclDescriptionZh": null,
		//       "cclChildren": [
		//         {
		//           "id": 11,
		//           "cclCode": "A",
		//           "cclTitle": "Equipment, Assemblies and Components",
		//           "cclTitleZh": "设备、组件和部件",
		//           "cclDescription": null,
		//           "cclDescriptionZh": null,
		//           "cclChildren": [
		//             {
		//               "id": 1,
		//               "cclCode": "0A002",
		//               "cclTitle": "Power generating or propulsion equipment \"specially designed\" for use with space, marine or mobile \"nuclear reactors\". (These items are \"subject to the ITAR.\" See 22 CFR parts 120 through 130.)",
		//               "cclTitleZh": "专为太空、海洋或移动“核反应堆”设计的发电或推进设备。（这些项目“受 ITAR 约束”。参见 22 CFR 第 120 至 130 部分。）",
		//               "cclDescription": null,
		//               "cclDescriptionZh": null,
		//               "cclChildren": null
		//             },
		//             {
		//               "id": 2,
		//               "cclCode": "0A501",
		//               "cclTitle": "Firearms (except 0A502 shotguns, 0A506 semi-automatic rifles, 0A507 semi-automatic pistols, and 0A508 semi-automatic shotguns) and related commodities (except semi-automatic related commodities enumerated or otherwise described in Eccn 0A509 for Eccns 0A506, 0A507, or 0A508) as follows (see List of Items controlled).",
		//               "cclTitleZh": "火器（除 0A502 霰弹枪、0A506 半自动步枪、0A507 半自动手枪和 0A508 半自动霰弹枪外）及相关商品（除 Eccn 0A509 中列举或以其他方式描述的 Eccns 0A506、0A507 或 0A508 相关物品外），具体如下（参见管制物品列表）。",
		//               "cclDescription": "<p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">License Requirements</span></p><p class=\"flush-paragraph-1\"><em>Reason for Control:</em> NS, RS, FC, UN, AT</p><div class=\"table-wrapper\"><div class=\"gpotbl_div\"><table border=\"1\" cellpadding=\"1\" cellspacing=\"1\" class=\"gpo_table\" frame=\"void\" width=\"100%\"><thead><tr><th class=\"center\">Control(s)</th><th class=\"center\">Country chart<br>(see Supp. No. 1 to part 738)</th></tr></thead><tbody><tr><td class=\"left\">NS applies to entire entry except 0A501.y</td><td class=\"left\">NS Column 1.</td></tr><tr><td class=\"left\">RS applies to entire entry except 0A501.y</td><td class=\"left\">RS Column 1.</td></tr><tr><td class=\"left\">FC applies to entire entry except 0A501.y</td><td class=\"left\">FC Column 1.</td></tr><tr><td class=\"left\">UN applies to entire entry</td><td class=\"left\">See § 746.1 of the EAR for UN controls.</td></tr><tr><td class=\"left\">AT applies to entire entry</td><td class=\"left\">AT Column 1.</td></tr></tbody></table></div></div><div class=\"note\"><div class=\"header\"><em>License Requirement Note:</em></div><p><em>In addition to using the Commerce Country Chart to determine license requirements, a license is required for exports and reexports of ECCN 0A501.y.7 firearms to the People's Republic of China.</em></p></div><p class=\"flush-paragraph-1\">List Based License Exceptions (See Part 740 for a Description of All License Exceptions)</p><p class=\"flush-paragraph-1\"><em>LVS:</em> $500 for 0A501.c, .d, and .x.</p><p class=\"flush-paragraph-1\">$500 for 0A501.c, .d, .e, and .x if the ultimate destination is Canada.</p><p class=\"flush-paragraph-1\"><em>GBS:</em> N/A</p><p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">Special Conditions for STA</span></p><p class=\"flush-paragraph-1\">License Exception STA may not be used for ECCN 0A501.a, .b, .c, .d, or .e, to any of the destinations listed in Country Group A:5 or A:6 (See supplement no.1 to part 740 of the EAR). License Exception STA may not be used for any item in this entry to any of the destinations listed in Country Group A:6 (See Supplement No.1 to part 740 of the EAR).</p><p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">List of Items Controlled</span></p><p class=\"flush-paragraph-1\"><em>Related Controls:</em> (1) See USML Category I for firearms that are fully automatic, and certain related parts, components, accessories, and attachments (including magazines with a capacity of greater than 50 rounds). (2) See ECCN 0A506 for semi-automatic rifles. (3) See ECCN 0A507 for semi-automatic pistols. (4) See ECCN 0A508 for semi-automatic shotguns and ECCN 0A502 for certain \"parts\" and \"components\" for semi-automatic shotguns that are not controlled by 0A509.a or .c. (5) See ECCN 0A509 for enumerated or otherwise described \"parts,\" \"components,\" devices, \"accessories,\" and \"attachments\" for ECCNs 0A506, 0A507, and 0A508. (6) See .d, .x, and .y of this entry for other \"parts,\" \"components,\" \"accessories,\" and \"attachments\" \"specially designed\" for 0A506 and 0A507, or 0A508. (7) See ECCN 0A502 for non-automatic shotguns and their \"parts\" and \"components\" that are subject to the EAR and for certain \"parts\" and \"components\" for semi-automatic shotguns that are not controlled by 0A509.a or .c. (8) See ECCN 0A504 and USML Category XII for controls on optical sighting devices.</p><p class=\"flush-paragraph-1\"><em>Related Definitions:</em> N/A.</p><p class=\"flush-paragraph\"><em>Items:</em></p><p>a. Non-automatic and non-semi-automatic firearms equal to .50 caliber (12.7 mm) or less.</p><div class=\"note\"><div class=\"header\"><em>Note 1 to paragraph 0A501.a:</em></div><p><em>'Combination pistols' are controlled under ECCN 0A501.a. A 'combination pistol' (a.k.a., a combination gun) has at least one rifled barrel and at least one smoothbore barrel (generally a shotgun style barrel).</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 2 to paragraph 0A501.a:</em></div><p><em>Semi-automatic firearms</em> equal to .50 caliber (12.7 mm) or less <em>are controlled under ECCNs 0A506 and 0A507.</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note to 0A501.a:</em></div><p><em>Firearms described in 0A501.a include those chambered for the .50 BMG cartridge.</em></p></div><p>b. Non-automatic and non-semi-automatic rifles, carbines, revolvers or pistols with a caliber greater than .50 inches (12.7 mm) but less than or equal to .72 inches (18.0 mm).</p><p>c. The following types of \"parts\" and \"components\" if \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry or ECCNs 0A506 or 0A507, or USML Category I (unless otherwise enumerated or elsewhere specified on the USML or controlled under ECCN 0A509): Barrels, cylinders, barrel extensions, mounting blocks (trunnions), bolts, bolt carriers, operating rods, gas pistons, trigger housings, triggers, hammers/striker, sears, disconnectors, pistol grips that contain fire control \"parts\" or \"components\" (<em>e.g.,</em> triggers, hammers/striker, sears, disconnectors) and buttstocks that contain fire control \"parts\" or \"components.\"</p><div class=\"note\"><div class=\"header\"><em>Technical Note to 0A501.c:</em></div><p><em>Barrel blanks that have reached a stage in manufacturing in which they are either chambered or rifled are controlled by 0A501.c.</em></p></div><p>d. Detachable magazines with a capacity of 17 to 50 rounds \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry or controlled by ECCNs 0A506 or 0A507.</p><div class=\"note\"><div class=\"header\"><em>Note 3 to paragraph 0A501.d</em></div><p><em>Magazines with a capacity of 16 rounds or less are controlled under 0A501.x; for magazines with a capacity greater than 50 rounds, see USML Category I. Magazines that hold only blank ammunition controlled under 0A505.d are controlled under 0A501.d or 0A501.x, depending on the magazine's capacity.</em></p></div><p>e. Receivers (frames) and \"complete breech mechanisms,\" including castings, forgings, stampings, or machined items thereof, \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry.</p><div class=\"note\"><div class=\"header\"><em>Note 4 to 0A501.e:</em></div><p><em>Frames (receivers) under 0A501.e refers to any \"part\" or \"component\" of the firearm that has or is customarily marked with a serial number when required by law. This paragraph 0A501.e is synonymous with a \"part\" or \"component\" that is regulated by the Bureau of Alcohol, Tobacco, Firearms and Explosives (see <a href=\"https://www.govinfo.gov/link/uscode/18/921\" class=\"usc external\" target=\"_blank\" rel=\"noopener noreferrer\">18 U.S.C. 921(a)(3)</a>; <a href=\"https://www.ecfr.gov/current/title-27/part-447\" class=\"cfr external\">27 CFR parts 447</a>, <a href=\"https://www.ecfr.gov/current/title-27/part-478\" class=\"cfr external\">478</a>, and <a href=\"https://www.ecfr.gov/current/title-27/part-479\" class=\"cfr external\">479</a>,) as a firearm.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 5 to 0A501.e:</em></div><p><em>Frames (receivers) \"specially designed\" for semi-automatic firearms are controlled under ECCN 0A509.b or .c.</em></p></div><p>f. through w. [Reserved]</p><p>x. \"Parts\" and \"components\" that are \"specially designed\" for a commodity classified under paragraphs .a through .c of this entry, a commodity classified under ECCNs 0A506 or 0A507, or the USML and not elsewhere specified on the USML or CCL or controlled under ECCN 0A509.</p><p>y. Specific \"parts,\" \"components,\" \"accessories\" and \"attachments\" \"specially designed\" for a commodity subject to control in this ECCN, ECCNs 0A506, 0A507, or common to a defense article in USML Category I and not elsewhere specified in the USML or CCL as follows, and \"parts,\" \"components,\" \"accessories,\" and \"attachments\" \"specially designed\" therefor.</p><p>y.1. Stocks (including adjustable, collapsible, blades and braces), grips, handguards, or forends, that do not contain any fire control \"parts\" or \"components\" (<em>e.g.,</em> triggers, hammers/striker, sears, disconnectors);</p><p>y.2 through y.5. [Reserved]</p><p>y.6. Bayonets; and</p><p>y.7. Firearms manufactured from 1890 to 1898 and reproductions thereof.</p><div class=\"note\"><div class=\"header\"><em>Technical Note 1 to 0A501:</em></div><p><em>ECCN 0A501 includes \"parts\" and \"components\" that are not \"subject to the ITAR\" even though they are common to firearms described in ECCN 0A501 and to those firearms \"subject to the ITAR.\"</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note 2 to 0A501:</em></div><p><em>A receiver with any other controlled \"part\" or \"component\" ( e.g., a barrel (0A501.c), or trigger guard (0A501.x), or stock (0A501.y.1)) is still controlled under 0A501.e.</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note 3 to 0A501:</em></div><p><em>Blank firing adapters, which are attachments to semi-automatic and automatic firearms used in conjunction with blank cartridges for safety and functional reasons and used for firearm training purposes by police, military, sporting shooters, as well as in the movie industry, are designated as EAR99.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 6 to 0A501:</em></div><p><em>Antique firearms (i.e., those manufactured before 1890) and reproductions thereof, muzzle loading and black powder firearms except those designs based on centerfire weapons of a post 1937 design, BB guns, pellet rifles, paint ball, and all other air rifles are EAR99 commodities.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 7 to 0A501:</em></div><p><em>Muzzle loading and black powder firearms with a caliber less than 20 mm that were manufactured post 1937 that are used for hunting or sporting purposes that were not \"specially designed\" for military use and are not described on the USML nor controlled as shotguns under ECCN 0A502 are EAR99 commodities.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 8 to 0A501:</em></div><p><em>Scope mounts or accessory rails, iron sights, sling swivels, and butt plates or recoil pads that are subject to the EAR are designated as EAR99. These commodities have been determined to no longer warrant being \"specially designed\" for purposes of ECCN 0A501.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 9 to 0A501:</em></div><p><em>A kit, including a replacement or repair kit, of firearms \"parts\" or \"components\" customarily sold and exported together takes on the classification of the most restrictive \"part\" or \"component\" that is included in the kit. For example, a kit containing 0A501.y and .x \"parts,\" is controlled as a 0A501.x kit because the .x \"part\" is the most restrictive \"part\" included in the kit. A complete 0A501 firearm disassembled in a kit form is controlled as a firearm under 0A501.a, .b, or .y.7.</em></p></div>",
		//               "cclDescriptionZh": "<p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">License Requirements</span></p><p class=\"flush-paragraph-1\"><em>Reason for Control:</em> NS, RS, FC, UN, AT</p><div class=\"table-wrapper\"><div class=\"gpotbl_div\"><table border=\"1\" cellpadding=\"1\" cellspacing=\"1\" class=\"gpo_table\" frame=\"void\" width=\"100%\"><thead><tr><th class=\"center\">控制原因</th><th class=\"center\">Country chart<br>（参见第738部分补充1号文）</th></tr></thead><tbody><tr><td class=\"left\">NS applies to entire entry except 0A501.y</td><td class=\"left\">NS Column 1.</td></tr><tr><td class=\"left\">RS applies to entire entry except 0A501.y</td><td class=\"left\">RS Column 1.</td></tr><tr><td class=\"left\">FC applies to entire entry except 0A501.y</td><td class=\"left\">FC Column 1.</td></tr><tr><td class=\"left\">UN applies to entire entry</td><td class=\"left\">See § 746.1 of the EAR for UN controls.</td></tr><tr><td class=\"left\">AT applies to entire entry</td><td class=\"left\">AT Column 1.</td></tr></tbody></table></div></div><div class=\"note\"><div class=\"header\"><em>License Requirement Note:</em></div><p><em>In addition to using the Commerce Country Chart to determine license requirements, a license is required for exports and reexports of ECCN 0A501.y.7 firearms to the People's Republic of China.</em></p></div><p class=\"flush-paragraph-1\">List Based License Exceptions (See Part 740 for a Description of All License Exceptions)</p><p class=\"flush-paragraph-1\"><em>LVS:</em> $500 for 0A501.c, .d, and .x.</p><p class=\"flush-paragraph-1\">$500 for 0A501.c, .d, .e, and .x if the ultimate destination is Canada.</p><p class=\"flush-paragraph-1\"><em>GBS:</em> N/A</p><p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">Special Conditions for STA</span></p><p class=\"flush-paragraph-1\">License Exception STA may not be used for ECCN 0A501.a, .b, .c, .d, or .e, to any of the destinations listed in Country Group A:5 or A:6 (See supplement no.1 to part 740 of the EAR). License Exception STA may not be used for any item in this entry to any of the destinations listed in Country Group A:6 (See Supplement No.1 to part 740 of the EAR).</p><p class=\"flush-paragraph-1\"> <span class=\"minor-caps\">List of Items Controlled</span></p><p class=\"flush-paragraph-1\"><em>Related Controls:</em> (1) See USML Category I for firearms that are fully automatic, and certain related parts, components, accessories, and attachments (including magazines with a capacity of greater than 50 rounds). (2) See ECCN 0A506 for semi-automatic rifles. (3) See ECCN 0A507 for semi-automatic pistols. (4) See ECCN 0A508 for semi-automatic shotguns and ECCN 0A502 for certain \"parts\" and \"components\" for semi-automatic shotguns that are not controlled by 0A509.a or .c. (5) See ECCN 0A509 for enumerated or otherwise described \"parts,\" \"components,\" devices, \"accessories,\" and \"attachments\" for ECCNs 0A506, 0A507, and 0A508. (6) See .d, .x, and .y of this entry for other \"parts,\" \"components,\" \"accessories,\" and \"attachments\" \"specially designed\" for 0A506 and 0A507, or 0A508. (7) See ECCN 0A502 for non-automatic shotguns and their \"parts\" and \"components\" that are subject to the EAR and for certain \"parts\" and \"components\" for semi-automatic shotguns that are not controlled by 0A509.a or .c. (8) See ECCN 0A504 and USML Category XII for controls on optical sighting devices.</p><p class=\"flush-paragraph-1\"><em>Related Definitions:</em> N/A.</p><p class=\"flush-paragraph\"><em>Items:</em></p><p>a. Non-automatic and non-semi-automatic firearms equal to .50 caliber (12.7 mm) or less.</p><div class=\"note\"><div class=\"header\"><em>Note 1 to paragraph 0A501.a:</em></div><p><em>'Combination pistols' are controlled under ECCN 0A501.a. A 'combination pistol' (a.k.a., a combination gun) has at least one rifled barrel and at least one smoothbore barrel (generally a shotgun style barrel).</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 2 to paragraph 0A501.a:</em></div><p><em>Semi-automatic firearms</em> equal to .50 caliber (12.7 mm) or less <em>are controlled under ECCNs 0A506 and 0A507.</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note to 0A501.a:</em></div><p><em>Firearms described in 0A501.a include those chambered for the .50 BMG cartridge.</em></p></div><p>b. Non-automatic and non-semi-automatic rifles, carbines, revolvers or pistols with a caliber greater than .50 inches (12.7 mm) but less than or equal to .72 inches (18.0 mm).</p><p>c. The following types of \"parts\" and \"components\" if \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry or ECCNs 0A506 or 0A507, or USML Category I (unless otherwise enumerated or elsewhere specified on the USML or controlled under ECCN 0A509): Barrels, cylinders, barrel extensions, mounting blocks (trunnions), bolts, bolt carriers, operating rods, gas pistons, trigger housings, triggers, hammers/striker, sears, disconnectors, pistol grips that contain fire control \"parts\" or \"components\" (<em>e.g.,</em> triggers, hammers/striker, sears, disconnectors) and buttstocks that contain fire control \"parts\" or \"components.\"</p><div class=\"note\"><div class=\"header\"><em>Technical Note to 0A501.c:</em></div><p><em>Barrel blanks that have reached a stage in manufacturing in which they are either chambered or rifled are controlled by 0A501.c.</em></p></div><p>d. Detachable magazines with a capacity of 17 to 50 rounds \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry or controlled by ECCNs 0A506 or 0A507.</p><div class=\"note\"><div class=\"header\"><em>Note 3 to paragraph 0A501.d</em></div><p><em>Magazines with a capacity of 16 rounds or less are controlled under 0A501.x; for magazines with a capacity greater than 50 rounds, see USML Category I. Magazines that hold only blank ammunition controlled under 0A505.d are controlled under 0A501.d or 0A501.x, depending on the magazine's capacity.</em></p></div><p>e. Receivers (frames) and \"complete breech mechanisms,\" including castings, forgings, stampings, or machined items thereof, \"specially designed\" for a commodity controlled by paragraph .a or .b of this entry.</p><div class=\"note\"><div class=\"header\"><em>Note 4 to 0A501.e:</em></div><p><em>Frames (receivers) under 0A501.e refers to any \"part\" or \"component\" of the firearm that has or is customarily marked with a serial number when required by law. This paragraph 0A501.e is synonymous with a \"part\" or \"component\" that is regulated by the Bureau of Alcohol, Tobacco, Firearms and Explosives (see <a href=\"https://www.govinfo.gov/link/uscode/18/921\" class=\"usc external\" target=\"_blank\" rel=\"noopener noreferrer\">18 U.S.C. 921(a)(3)</a>; <a href=\"https://www.ecfr.gov/current/title-27/part-447\" class=\"cfr external\">27 CFR parts 447</a>, <a href=\"https://www.ecfr.gov/current/title-27/part-478\" class=\"cfr external\">478</a>, and <a href=\"https://www.ecfr.gov/current/title-27/part-479\" class=\"cfr external\">479</a>,) as a firearm.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 5 to 0A501.e:</em></div><p><em>Frames (receivers) \"specially designed\" for semi-automatic firearms are controlled under ECCN 0A509.b or .c.</em></p></div><p>f. through w. [Reserved]</p><p>x. \"Parts\" and \"components\" that are \"specially designed\" for a commodity classified under paragraphs .a through .c of this entry, a commodity classified under ECCNs 0A506 or 0A507, or the USML and not elsewhere specified on the USML or CCL or controlled under ECCN 0A509.</p><p>y. Specific \"parts,\" \"components,\" \"accessories\" and \"attachments\" \"specially designed\" for a commodity subject to control in this ECCN, ECCNs 0A506, 0A507, or common to a defense article in USML Category I and not elsewhere specified in the USML or CCL as follows, and \"parts,\" \"components,\" \"accessories,\" and \"attachments\" \"specially designed\" therefor.</p><p>y.1. Stocks (including adjustable, collapsible, blades and braces), grips, handguards, or forends, that do not contain any fire control \"parts\" or \"components\" (<em>e.g.,</em> triggers, hammers/striker, sears, disconnectors);</p><p>y.2 through y.5. [Reserved]</p><p>y.6. Bayonets; and</p><p>y.7. Firearms manufactured from 1890 to 1898 and reproductions thereof.</p><div class=\"note\"><div class=\"header\"><em>Technical Note 1 to 0A501:</em></div><p><em>ECCN 0A501 includes \"parts\" and \"components\" that are not \"subject to the ITAR\" even though they are common to firearms described in ECCN 0A501 and to those firearms \"subject to the ITAR.\"</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note 2 to 0A501:</em></div><p><em>A receiver with any other controlled \"part\" or \"component\" ( e.g., a barrel (0A501.c), or trigger guard (0A501.x), or stock (0A501.y.1)) is still controlled under 0A501.e.</em></p></div><div class=\"note\"><div class=\"header\"><em>Technical Note 3 to 0A501:</em></div><p><em>Blank firing adapters, which are attachments to semi-automatic and automatic firearms used in conjunction with blank cartridges for safety and functional reasons and used for firearm training purposes by police, military, sporting shooters, as well as in the movie industry, are designated as EAR99.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 6 to 0A501:</em></div><p><em>Antique firearms (i.e., those manufactured before 1890) and reproductions thereof, muzzle loading and black powder firearms except those designs based on centerfire weapons of a post 1937 design, BB guns, pellet rifles, paint ball, and all other air rifles are EAR99 commodities.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 7 to 0A501:</em></div><p><em>Muzzle loading and black powder firearms with a caliber less than 20 mm that were manufactured post 1937 that are used for hunting or sporting purposes that were not \"specially designed\" for military use and are not described on the USML nor controlled as shotguns under ECCN 0A502 are EAR99 commodities.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 8 to 0A501:</em></div><p><em>Scope mounts or accessory rails, iron sights, sling swivels, and butt plates or recoil pads that are subject to the EAR are designated as EAR99. These commodities have been determined to no longer warrant being \"specially designed\" for purposes of ECCN 0A501.</em></p></div><div class=\"note\"><div class=\"header\"><em>Note 9 to 0A501:</em></div><p><em>A kit, including a replacement or repair kit, of firearms \"parts\" or \"components\" customarily sold and exported together takes on the classification of the most restrictive \"part\" or \"component\" that is included in the kit. For example, a kit containing 0A501.y and .x \"parts,\" is controlled as a 0A501.x kit because the .x \"part\" is the most restrictive \"part\" included in the kit. A complete 0A501 firearm disassembled in a kit form is controlled as a firearm under 0A501.a, .b, or .y.7.</em></p></div>",
		//               "cclChildren": null
		//             },
		//             {
		//               "id": 3,
		//               "cclCode": "0A502",
		//               "cclTitle": "Shotguns; shotguns \"parts\" and \"components,\" consisting of complete trigger mechanisms; magazines and magazine extension tubes; \"complete breech mechanisms;\" except: semi-automatic shotguns controlled under Eccn 0A508; certain \"parts,\" components,\" devices, \"accessories,\" and \"attachments\" for semi-automatic shotguns controlled under Eccn 0A509; equipment used to slaughter domestic animals or used exclusively to treat or tranquilize animals; and arms designed solely for signal, flare, or saluting use.",
		//               "cclTitleZh": "霰弹枪;霰弹枪“零件”和“组件”，由完整的扳机机构组成;弹药库和弹匣延长管;“完整的闭锁机构”;除外：根据 Eccn 0A508 控制的半自动霰弹枪;根据 Eccn 0A509 控制的某些半自动霰弹枪的“零件”、“组件”、“装置”、“配件”;用于屠宰家畜或专门用于治疗或镇静动物的设备;以及仅用于信号、照明或敬礼使用的武器。",
		//               "cclDescription": null,
		//               "cclDescriptionZh": null,
		//               "cclChildren": null
		//             }
		//           ]
		//         }
		//       ]
		//     }
		//   ]
		// }
		// cclList.value = res.data
		// // 给数据添加isExpand字段
		// cclList.value.forEach((item) => {
		//   item.isExpand = false
		//   item.cclChildren.forEach((ele) => {
		//     ele.cclChildren.forEach((i) => {
		//       i.isExpand = false
		//     })
		//   })
		// })
		if (res && res.code === 200) {
			console.log("----getCclList", res.data);
			cclList.value = res.data;
			// 给数据添加isExpand字段
			cclList.value.forEach(item => {
				item.isExpand = false;
				item.cclChildren.forEach(ele => {
					ele.cclChildren.forEach(i => {
						i.isExpand = false;
					});
				});
			});
		}
	} catch (error) {
		console.error("获取ccl清单列表失败:", error);
	}
};

// 商业管制清单-CCL清单列表-清单版本
const cclVersionList = ref([]);
// 当前选中的清单版本
const currentCCLVersion = ref("");
// 获取清单版本列表
const getCCLVersionListApi = async () => {
	try {
		const res = await getCCLVersionList();
		if (res && res.code === 200) {
			console.log("----getCCLVersionList", res.data);
			cclVersionList.value = res.data.map(item => {
				return {
					key: item.key,
					value: `清单版本-${dayjs(item.value).format("YYYY年MM月DD日")}`
					// value: `清单版本-${item.value}`
				};
			});
			currentCCLVersion.value = res.data[0].key;
		}
	} catch (error) {
		console.error("获取清单版本列表失败:", error);
	}
};

// 筛选逻辑处理
const handleFilterChange = (item, list, type) => {
	console.log(item, list, type);
	getCclList();
};

watch(viewNew, newValue => {
	getCclList();
});

watch(currentCCLType, newValue => {
	console.log(newValue);
	getCclList();
});

watch(currentCCLVersion, newValue => {
	console.log(newValue);
	getCclList();
});

// const searchDebounceTimer = ref(null);
// watch(searchKeyword, () => {
//   if (searchDebounceTimer.value) {
//     clearTimeout(searchDebounceTimer.value);
//   }
//   searchDebounceTimer.value = setTimeout(() => {
//     currentPage.value = 1;
//     getExportControlListApi();
//   }, 300);
// });
watch(searchKeyword, newValue => {
	console.log("-----searchKey", newValue);
	getCclList();
});

// 模拟清单列表
const cclList = ref([
	{
		name: "类别 0-核材料、设施和设备、枪支、弹药[以及其他物品]",
		desc: 'A."最终产品"、"设备"、"附件"、"附加装置"、"零件"、"组件"和"系统"',
		isExpand: true,
		list: [
			{
				code: "0A002",
				name: '发电或推进设备，"专门设计"用于与太空、海洋或移动"核反应堆"一起使用。（这些项目"受 ITAR 管辖。"参见 22 CFR 第 120 至 130 部分。）',
				isExpand: false,
				isDot: false
			},
			{
				code: "0A501",
				name: "枪支（不包括 0A502 霰弹枪、0A506 半自动步枪、0A507 半自动手枪和 0A508 半自动霰弹枪）及相关商品（不包括在 Eccn 0A509 中列举或以其他方式描述的与半自动相关的商品，用于 Eccn 0A506、0A507 或 0A508）如下（参见受控物品清单）",
				isExpand: true,
				isDot: true
			},
			{
				code: "0A501",
				name: "枪支（不包括 0A502 霰弹枪、0A506 半自动步枪、0A507 半自动手枪和 0A508 半自动霰弹枪）及相关商品（不包括在 Eccn 0A509 中列举或以其他方式描述的与半自动相关的商品，用于 Eccn 0A506、0A507 或 0A508）如下（参见受控物品清单）",
				isExpand: false,
				isDot: true
			}
		]
	}
]);

onMounted(async () => {
	// 获取类别字段
	await getTypeList();
	// 获取科技领域字典
	await getTechFields();
	// 获取管控原因字典
	await getControlReasonList();
	// 获取ccl清单列表
	getCclList();
	// 获取清单版本列表
	getCCLVersionListApi();
});
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}

.list-page {
	width: 1601px;
	padding-bottom: 50px;
	margin: 0 auto;
	padding-top: 16px;

	.search-box {
		margin-bottom: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.search-input {
			width: 388px;
			height: 32px;

			:deep(.el-input__wrapper) {
				padding: 0 11px;
			}

			:deep(.el-input__inner) {
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(95, 101, 108);
			}
		}

		.filters {
			display: flex;
			align-items: center;

			.el-checkbox {
				margin-right: 20px;
				color: rgb(59, 65, 75);
			}

			.time-select {
				width: 160px;
				height: 32px;
			}
		}
	}

	.main {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;

		.left {
			padding-bottom: 20px;
			width: 388px;
			height: auto;
			border-radius: 10px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background-color: #fff;

			.checkbox-group {
				display: flex;
				flex-wrap: wrap;
				padding: 0 0 0 24px;

				.el-checkbox {
					width: 50%;
					margin-right: 0;
					margin-bottom: 4px;
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(95, 101, 108);
				}

				.custom-date-picker {
					width: 100%;
					margin-top: 8px;
					padding-right: 24px;
					box-sizing: border-box;

					:deep(.el-date-editor) {
						width: 100%;
						height: 32px;
						box-shadow: none;
						border: 1px solid #dcdfe6;
						border-radius: 4px;
						padding: 0 10px;

						&:hover {
							border-color: #c0c4cc;
						}

						&.is-active {
							border-color: #409eff;
						}

						.el-range-input {
							font-size: 14px;
							font-family: "Microsoft YaHei";
							color: rgb(95, 101, 108);
						}

						.el-range-separator {
							color: rgb(95, 101, 108);
							line-height: 30px;
						}

						.el-input__icon {
							line-height: 32px;
							color: rgb(95, 101, 108);
						}
					}
				}
			}
		}

		.right {
			width: 1196px;
			height: auto;
			.title {
				width: 100%;
				height: 56px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 14px 12px 16px 0;
				box-sizing: border-box;

				.left-wrapper {
					display: flex;
					align-items: center;

					.box {
						width: 8px;
						height: 20px;
						background-color: rgb(5, 95, 194);
						border-bottom-right-radius: 4px;
						border-top-right-radius: 4px;
						margin-right: 14px;
					}

					.text {
						font-size: 20px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 26px;
						color: rgb(5, 95, 194);
					}
				}

				.right-wrapper {
					display: flex;
					align-items: center;

					.stats {
						display: flex;
						align-items: center;
						margin-right: 24px;

						span {
							font-size: 16px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							margin-left: 4px;
							color: rgb(95, 101, 108);
						}
					}

					.btn {
						width: 60px;
						height: 28px;

						img {
							width: 28px;
							height: 28px;
							cursor: pointer;
						}

						img:first-child {
							margin-right: 4px;
						}
					}
				}
			}

			.right-table {
				margin-top: 11px;
				padding: 5px 21px 0 21px;
				max-height: 1987px;
				overflow: auto;
				box-sizing: border-size;
				// background: red;

				.list {
					width: 100%;
					height: auto;
					margin-bottom: 14px;

					.list-title {
						width: 100%;
						height: 54px;
						background: rgb(5, 95, 194);
						color: white;
						padding: 14px 23px 16px 29px;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-radius: 4px;

						span {
							font-family: Microsoft YaHei;
							font-style: Bold;
							font-size: 18px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: left;
						}
					}

					.list-desc {
						margin-left: 28px;
						margin-top: 14px;
						margin-bottom: 16px;
						font-family: Microsoft YaHei;
						font-style: Bold;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: left;
						color: black;
					}

					.list-content {
						width: 100%;
						margin-bottom: 12px;

						.content-title {
							background: rgb(234, 236, 238);
							display: flex;
							align-items: flex-start;
							justify-content: space-around;
							// padding: 9px 0px;

							.code-zone {
								width: 75px;
								display: flex;
								margin-top: 11px;
								align-items: center;
								justify-content: space-around;

								.dot {
									width: 8px;
									height: 8px;
									border-radius: 50%;
									border: 2px solid rgb(206, 79, 81);
									background-color: rgb(206, 79, 81);
									z-index: 1;
								}

								.code {
									font-family: Microsoft YaHei;
									font-style: Bold;
									font-size: 16px;
									font-weight: 700;
									line-height: 26px;
									letter-spacing: 0px;
									text-align: left;
									color: rgba(59, 65, 75, 1);
								}
							}

							.name {
								width: 984px;
								margin-top: 9px;
								font-family: Microsoft YaHei;
								font-style: Regular;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: justify;
								color: rgba(59, 65, 75, 1);
							}

							img {
								margin-top: 20px;
							}
						}

						.content-body {
							margin-left: 90px;
							// margin-right: 92px;

							img {
								width: 984px;
								height: 1047px;
							}
						}
					}
				}
			}

			.tight-footer {
				padding: 16px 24px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.total-text {
					font-size: 14px;
					font-weight: 400;
					color: #5f656c;
					font-family: "Microsoft YaHei";
				}

				:deep(.el-pagination) {
					--el-pagination-button-bg-color: #fff;
					--el-pagination-hover-color: #0e78f1;
					--el-pagination-font-size: 14px;

					.el-pager li {
						border: 1px solid #dcdfe6;
						border-radius: 4px;
						margin: 0 4px;
						font-weight: 400;
						color: #5f656c;
						min-width: 32px;
						height: 32px;
						line-height: 30px;

						&.is-active {
							background-color: #0e78f1;
							color: #fff;
							border-color: #0e78f1;
						}

						&:hover:not(.is-active) {
							color: #0e78f1;
							border-color: #0e78f1;
						}
					}

					.btn-prev,
					.btn-next {
						border: 1px solid #dcdfe6;
						border-radius: 4px;
						padding: 0;
						margin: 0 4px;
						min-width: 32px;
						height: 32px;
						line-height: 30px;
						text-align: center;

						&:hover {
							color: #0e78f1;
							border-color: #0e78f1;
						}

						&[disabled] {
							border-color: #e4e7ed;
							color: #c0c4cc;
						}
					}
				}
			}
		}
	}
}

.title {
	width: 100%;
	height: 56px;
	display: flex;
	align-items: center;
	padding: 14px 12px 16px 0;

	.box {
		width: 8px;
		height: 16px;
		background-color: rgb(5, 95, 194);
		border-bottom-right-radius: 4px;
		border-top-right-radius: 4px;
		margin-right: 14px;
	}

	.text {
		font-size: 16px;
		font-weight: 700;
		font-family: "Microsoft YaHei";
		line-height: 24px;
		color: rgb(5, 95, 194);
	}
}
</style>
