<template>
	<div class="industrial-impact">
		<div class="main">
			<div class="left">
				<AnalysisBox title="制裁科研机构列表" :showAllBtn="false">
					<template #header-btn>
						<el-select v-model="searchDomain" class="dependency-select" placeholder="全部领域">
							<el-option v-for="item in domainOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</template>
					<div class="left-main">
						<div class="company-list-container">
							<div class="list-header">科研机构名称</div>
							<div class="company-list">
								<el-empty v-if="entityList.length === 0" description="暂无数据" style="padding-top: 200px"
									:image-size="100" />
								<div class="company-item" :class="{ active: selectedCompanyId === item.id }" v-for="item in entityList"
									:key="item.id" @click="selectedCompanyId = item.id">
									<div class="icon-wrapper">
										<img :src="defaultTitle" alt="" />
									</div>
									<div class="company-name">{{ item.name }}</div>
								</div>
							</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
			<div class="right">
				<div class="right-item">
					<AnalysisBox title="科研仪器对美依赖情况">
						<div class="right-main">
							<el-empty v-if="rdInstrumentDependency.length === 0" description="暂无数据" style="padding-top: 100px"
								:image-size="100" />
							<div v-if="rdInstrumentDependency.length !== 0" class="echarts" ref="chartRef"></div>
							<div v-if="rdInstrumentDependency.length !== 0" class="bottom">
								<img :src="ai" class="ai-icon" alt="" />
								<span class="text">受制裁实体中，电子测量仪器对美依赖程度最高，此外，电子策略仪器、物理性能测试仪器等也有较高的对美依赖度。</span>
								<img :src="right" class="right-icon" alt="" />
							</div>
						</div>
					</AnalysisBox>
				</div>
				<div class="right-item">
					<AnalysisBox title="科研仪器进口国分布">
						<div class="right-main">
							<el-empty v-if="rdInstrumentImportCountry.length === 0" description="暂无数据" style="padding-top: 100px"
								:image-size="100" />
							<div v-if="rdInstrumentImportCountry.length !== 0" class="echarts" ref="marketChartRef"></div>
							<div v-if="rdInstrumentImportCountry.length !== 0" class="bottom">
								<img :src="ai" class="ai-icon" alt="" />
								<span class="text">电子测量仪器来源国主要为美国,但是德国、日本等国也占有较大比重,后续可考虑将上述国家作为仪器进口来源替代国。</span>
								<img :src="right" class="right-icon" alt="" />
							</div>
						</div>
					</AnalysisBox>
				</div>
				<div class="right-item">
					<!-- <div class="title-com">
						<div class="box"></div>
						<div class="text">新增国际合作项目</div>
						<div class="right-group">
							<el-select v-model="activeProjectDomain" class="project-domain-select" placeholder="全部领域">
								<el-option v-for="item in projectDomainOptions" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
							<div class="btn">
								<img src="../../../../assets/数据库按钮.png" alt="" />
								<img src="../../../../assets/下载按钮.png" alt="" />
								<img src="../../../../assets/收藏按钮.png" alt="" />
							</div>
						</div>
					</div>
					<div class="right-main">
						<el-empty v-if="internationalCooperation.length === 0" description="暂无数据" style="padding-top: 100px"
							:image-size="100" />
						<div v-if="internationalCooperation.length !== 0" class="echarts" ref="rdChartRef"></div>
						<div v-if="internationalCooperation.length !== 0" class="bottom">
							<img :src="ai" class="ai-icon" alt="" />
							<span class="text">列入实体清单后新增国际项目数量明显减少。</span>
							<img :src="right" class="right-icon" alt="" />
						</div>
					</div> -->
					<AnalysisBox title="新增国际合作项目">
						<template #header-btn>
							<el-select v-model="activeProjectDomain" class="project-domain-select" placeholder="全部领域">
								<el-option v-for="item in projectDomainOptions" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</template>
						<div class="right-main">
							<el-empty v-if="internationalCooperation.length === 0" description="暂无数据" style="padding-top: 100px"
								:image-size="100" />
							<div v-if="internationalCooperation.length !== 0" class="echarts" ref="rdChartRef"></div>
							<div v-if="internationalCooperation.length !== 0" class="bottom">
								<img :src="ai" class="ai-icon" alt="" />
								<span class="text">列入实体清单后新增国际项目数量明显减少。</span>
								<img :src="right" class="right-icon" alt="" />
							</div>
						</div>
					</AnalysisBox>
				</div>
				<div class="right-item">
					<!-- <div class="title-com">
						<div class="box"></div>
						<div class="text">新增国际合著论文</div>
						<div class="right-group">
							<el-select v-model="activePaperDomain" class="paper-domain-select" placeholder="全部领域">
								<el-option v-for="item in paperDomainOptions" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
							<div class="btn">
								<img src="../../../../assets/数据库按钮.png" alt="" />
								<img src="../../../../assets/下载按钮.png" alt="" />
								<img src="../../../../assets/收藏按钮.png" alt="" />
							</div>
						</div>
					</div>
					<div class="right-main">
						<el-empty v-if="internationalPaper.length === 0" description="暂无数据" style="padding-top: 100px"
							:image-size="100" />
						<div v-if="internationalPaper.length !== 0" class="echarts" ref="shareChartRef"></div>
						<div v-if="internationalPaper.length !== 0" class="bottom">
							<img :src="ai" class="ai-icon" alt="" />
							<span class="text">总量下降，特别是在人工智能、高端通信等敏感技术领域。</span>
							<img :src="right" class="right-icon" alt="" />
						</div>
					</div> -->
					<AnalysisBox title="新增国际合著论文">
						<template #header-btn>
							<el-select v-model="activePaperDomain" class="paper-domain-select" placeholder="全部领域">
								<el-option v-for="item in paperDomainOptions" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</template>
						<div class="right-main">
							<el-empty v-if="internationalPaper.length === 0" description="暂无数据" style="padding-top: 100px"
								:image-size="100" />
							<div v-if="internationalPaper.length !== 0" class="echarts" ref="shareChartRef"></div>
							<div v-if="internationalPaper.length !== 0" class="bottom">
								<img :src="ai" class="ai-icon" alt="" />
								<span class="text">总量下降，特别是在人工智能、高端通信等敏感技术领域。</span>
								<img :src="right" class="right-icon" alt="" />
							</div>
						</div>
					</AnalysisBox>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import defaultTitle from "../../../../assets/default-icon2.png";
import ai from "../../assets/ai.png";
import right from "../../assets/right.png";
import {
	getSingleSanctionEntityList,
	getSingleSanctionEntityRDInstrumentDependency,
	getSingleSanctionEntityRDInstrumentImportCountry,
	getSingleSanctionEntityInternationalCooperation,
	getSingleSanctionEntityInternationalPaper
} from "@/api/exportControlV2.0";

const domainOptions = [
	{ label: "全部领域", value: "" },
	{ label: "人工智能", value: "1" },
	{ label: "生物科技", value: "2" },
	{ label: "新一代信息技术", value: "3" },
	{ label: "量子科技", value: "4" },
	{ label: "新能源", value: "5" },
	{ label: "集成电路", value: "6" },
	{ label: "海洋", value: "7" },
	{ label: "先进制造", value: "8" },
	{ label: "新材料", value: "9" },
	{ label: "航空航天", value: "10" },
	{ label: "深海", value: "11" },
	{ label: "极地", value: "12" },
	{ label: "太空", value: "13" },
	{ label: "核", value: "14" }
];

const activeInstrument = ref("电子测量仪器");
const instrumentOptions = ["电子测量仪器"];

const activeProjectDomain = ref("");
const projectDomainOptions = domainOptions;

const activePaperDomain = ref("");
const paperDomainOptions = domainOptions;

const searchDomain = ref("");
const selectedCompanyId = ref(null);
const sanRecordId = ref("");
const entityList = ref([]);
const internationalCooperation = ref([]);
const rdInstrumentImportCountry = ref([]);
const rdInstrumentDependency = ref([]);

// 单次制裁-影响分析-新增国际合著论文
const internationalPaper = ref([]);
const getInternationalPaper = async () => {
	if (!selectedCompanyId.value) return;
	try {
		const params = {
			id: selectedCompanyId.value
		};
		if (activePaperDomain.value) {
			params.domainId = activePaperDomain.value;
		}
		const res = await getSingleSanctionEntityInternationalPaper(params);
		if (res.code === 200) {
			internationalPaper.value = res.data || [];
			nextTick(() => {
				initShareChart();
			});
		}
	} catch (error) {
		console.log(error);
	}
};

// 单次制裁-影响分析-新增国际合作项目
const getInternationalCooperation = async () => {
	if (!selectedCompanyId.value) return;
	try {
		const params = {
			id: selectedCompanyId.value
		};
		if (activeProjectDomain.value) {
			params.domainId = activeProjectDomain.value;
		}
		const res = await getSingleSanctionEntityInternationalCooperation(params);
		if (res.code === 200) {
			internationalCooperation.value = res.data || [];
			nextTick(() => {
				initRdChart();
			});
		}
	} catch (error) {
		console.log(error);
	}
};

// 单次制裁-影响分析-科研仪器进口国分布
const getRDInstrumentImportCountry = async () => {
	try {
		const res = await getSingleSanctionEntityRDInstrumentImportCountry({
			id: selectedCompanyId.value
		});
		if (res.code === 200) {
			rdInstrumentImportCountry.value = res.data || [];
			nextTick(() => {
				initMarketChart();
			});
		}
	} catch (error) {
		console.log(error);
	}
};

// 单次制裁-影响分析-科研仪器对美依赖情况
const getRDInstrumentDependency = async () => {
	try {
		const res = await getSingleSanctionEntityRDInstrumentDependency({
			id: selectedCompanyId.value
		});
		if (res.code === 200) {
			rdInstrumentDependency.value = res.data || [];
			nextTick(() => {
				initChart();
			});
		}
	} catch (error) {
		console.log(error);
	}
};

// 单次制裁-影响分析-科研机构列表-查询
const getEntityList = async () => {
	try {
		const res = await getSingleSanctionEntityList({
			sanRecordId: sanRecordId.value,
			isOnlyCn: false,
			domainId: searchDomain.value || undefined
		});
		if (res.code === 200) {
			entityList.value = (res.data || []).reduce((acc, group) => {
				if (group.orgType === "科研机构" && group.orgInfoList) {
					acc.push(
						...group.orgInfoList.map(org => ({
							id: org.id,
							name: org.orgNameZh
						}))
					);
				}
				return acc;
			}, []);

			// 默认选中第一个
			if (entityList.value.length > 0 && !selectedCompanyId.value) {
				selectedCompanyId.value = entityList.value[0].id;
			}
		}
	} catch (error) {
		console.log(error);
	}
};

watch(selectedCompanyId, val => {
	if (val) {
		getRDInstrumentDependency();
		getRDInstrumentImportCountry();
		getInternationalCooperation();
		getInternationalPaper();
	}
});

watch(activeProjectDomain, () => {
	getInternationalCooperation();
});

watch(activePaperDomain, () => {
	getInternationalPaper();
});

watch(searchDomain, () => {
	getEntityList();
});

const getUrlParams = () => {
	const urlParams = new URLSearchParams(window.location.search);
	sanRecordId.value = urlParams.get("id") || "";
};

const chartRef = ref(null);
const marketChartRef = ref(null);
const rdChartRef = ref(null);
const shareChartRef = ref(null);

const initChart = () => {
	if (!chartRef.value || rdInstrumentDependency.value.length === 0) return;
	const myChart = echarts.getInstanceByDom(chartRef.value) || echarts.init(chartRef.value);

	// 处理接口数据，映射为图表所需的 name 和 value
	const chartData = rdInstrumentDependency.value.map(item => ({
		name: item.name,
		value: item.count
	}));

	const option = {
		grid: {
			top: "5%",
			left: "0%",
			right: "5%",
			bottom: "0%",
			containLabel: true
		},
		dataZoom: [
			{
				type: "inside",
				orient: "vertical",
				start: 0,
				end: chartData.length > 7 ? (7 / chartData.length) * 100 : 100,
				zoomLock: true
			}
		],
		xAxis: {
			show: false,
			type: "value"
		},
		yAxis: [
			{
				type: "category",
				data: chartData.map(item => item.name),
				axisLine: { show: false },
				axisTick: { show: false },
				axisLabel: {
					color: "rgb(59, 65, 75)",
					fontSize: 16,
					fontWeight: 400,
					fontFamily: "Microsoft YaHei",
					margin: 20,
					interval: 0
				},
				inverse: true
			},
			{
				type: "category",
				data: chartData.map(item => item.value),
				axisLine: { show: false },
				axisTick: { show: false },
				axisLabel: {
					margin: 20,
					interval: 0,
					fontSize: 16,
					fontFamily: "Microsoft YaHei",
					color: (value, index) => {
						return index < 3 ? "rgba(209, 90, 90, 1)" : "rgba(59, 139, 245, 1)";
					}
				},
				inverse: true
			}
		],
		series: [
			{
				type: "bar",
				data: chartData.map((item, index) => {
					return {
						value: item.value,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
								{
									offset: 0,
									color: index < 3 ? "rgba(209, 90, 90, 0.05)" : "rgba(59, 139, 245, 0.05)"
								},
								{
									offset: 1,
									color: index < 3 ? "rgba(209, 90, 90, 1)" : "rgba(59, 139, 245, 1)"
								}
							]),
							borderRadius: [0, 10, 10, 0]
						},
						label: {
							show: false
						}
					};
				}),
				barWidth: 10,
				showBackground: false
			}
		]
	};
	myChart.setOption(option);
};

const initMarketChart = () => {
	if (!marketChartRef.value || rdInstrumentImportCountry.value.length === 0) return;
	const myChart = echarts.getInstanceByDom(marketChartRef.value) || echarts.init(marketChartRef.value);

	const chartData = rdInstrumentImportCountry.value.map(item => ({
		name: item.name,
		value: item.count
	}));

	const colors = ["#66b1ff", "#ffba63", "#7ce3d3", "#8a9dff", "#ff7c7c", "#b386f2", "#4080ff"];

	const option = {
		color: colors,
		tooltip: {
			trigger: "item",
			formatter: "{b}: {c}%"
		},
		legend: {
			type: "scroll",
			orient: "vertical",
			right: "5%",
			top: "middle",
			bottom: "20",
			itemGap: 20,
			icon: "circle",
			formatter: function (name) {
				const item = chartData.find(i => i.name === name);
				const total = chartData.reduce((sum, i) => sum + i.value, 0);
				const percent = total > 0 ? ((item.value / total) * 100).toFixed(0) : 0;
				return `{name|${name}}  {value|${percent}%}`;
			},
			textStyle: {
				rich: {
					name: {
						fontSize: 16,
						color: "#333",
						width: 60,
						padding: [0, 0, 0, 5],
						fontFamily: "Microsoft YaHei"
					},
					value: {
						fontSize: 16,
						color: "#333",
						fontFamily: "Microsoft YaHei"
					}
				}
			}
		},
		series: [
			{
				name: "科研仪器进口国分布",
				type: "pie",
				radius: ["80px", "98px"],
				center: ["30%", "50%"],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: "center"
				},
				emphasis: {
					label: {
						show: false
					}
				},
				labelLine: {
					show: false
				},
				data: chartData
			}
		]
	};
	myChart.setOption(option);
};

const initRdChart = () => {
	if (!rdChartRef.value) return;
	const myChart = echarts.getInstanceByDom(rdChartRef.value) || echarts.init(rdChartRef.value);

	// 处理接口返回的数据，按年份升序排序
	const chartData = [...internationalCooperation.value].sort((a, b) => a.year - b.year);
	const years = chartData.map(item => item.year.toString());
	const data = chartData.map(item => item.count);

	// 动态计算 Y 轴最大值和间隔
	const maxVal = Math.max(...data, 10);
	const yMax = Math.ceil(maxVal / 5) * 5;

	const option = {
		tooltip: {
			trigger: "axis"
		},
		grid: {
			top: "15%",
			left: "3%",
			right: "4%",
			bottom: "3%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			boundaryGap: false,
			data: years,
			axisLine: {
				lineStyle: {
					color: "#E6EBF5"
				}
			},
			axisLabel: {
				color: "#606266",
				fontSize: 12,
				lineHeight: 18,
				fontFamily: "Microsoft YaHei"
			},
			axisTick: {
				show: false
			}
		},
		yAxis: {
			type: "value",
			min: 0,
			max: yMax,
			interval: yMax / 5,
			axisLabel: {
				color: "#606266",
				fontSize: 12,
				fontFamily: "Microsoft YaHei"
			},
			splitLine: {
				lineStyle: {
					type: "dashed",
					color: "rgba(231, 243, 255, 1)"
				}
			}
		},
		series: [
			{
				data: data,
				type: "line",
				symbol: "none",
				smooth: false,
				lineStyle: {
					color: "#055FC2",
					width: 2
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: "rgba(5, 95, 194, 0.2)"
						},
						{
							offset: 1,
							color: "rgba(5, 95, 194, 0)"
						}
					])
				}
			}
		]
	};
	myChart.setOption(option);
};

const initShareChart = () => {
	if (!shareChartRef.value) return;
	const myChart = echarts.getInstanceByDom(shareChartRef.value) || echarts.init(shareChartRef.value);

	// 处理接口返回的数据，按年份升序排序
	const chartData = [...internationalPaper.value].sort((a, b) => a.year - b.year);
	const years = chartData.map(item => item.year.toString());
	const data = chartData.map(item => item.count);

	// 动态计算 Y 轴最大值和间隔
	const maxVal = Math.max(...data, 10);
	const yMax = Math.ceil(maxVal / 5) * 5;

	const option = {
		tooltip: {
			trigger: "axis"
		},
		grid: {
			top: "15%",
			left: "3%",
			right: "4%",
			bottom: "3%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			boundaryGap: false,
			data: years,
			axisLine: {
				lineStyle: {
					color: "#E6EBF5"
				}
			},
			axisLabel: {
				color: "#606266",
				fontSize: 12,
				lineHeight: 18,
				fontFamily: "Microsoft YaHei"
			},
			axisTick: {
				show: false
			}
		},
		yAxis: {
			type: "value",
			min: 0,
			max: yMax,
			interval: yMax / 5,
			axisLabel: {
				color: "#606266",
				fontSize: 12,
				fontFamily: "Microsoft YaHei"
			},
			splitLine: {
				lineStyle: {
					type: "dashed",
					color: "rgba(231, 243, 255, 1)"
				}
			}
		},
		series: [
			{
				data: data,
				type: "line",
				symbol: "none",
				smooth: false,
				lineStyle: {
					color: "#055FC2",
					width: 2
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: "rgba(5, 95, 194, 0.2)"
						},
						{
							offset: 1,
							color: "rgba(5, 95, 194, 0)"
						}
					])
				}
			}
		]
	};
	myChart.setOption(option);
};

const handleResize = () => {
	[chartRef, marketChartRef, rdChartRef, shareChartRef].forEach(refItem => {
		if (refItem.value) {
			const myChart = echarts.getInstanceByDom(refItem.value);
			if (myChart) {
				myChart.resize();
			}
		}
	});
};

onMounted(async () => {
	getUrlParams();
	// 单次制裁-影响分析-科研机构列表-查询 (等待获取到默认的 selectedCompanyId 后会触发 watch 加载其他数据)
	await getEntityList();

	window.addEventListener("resize", handleResize);
});

onBeforeUnmount(() => {
	window.removeEventListener("resize", handleResize);
});
</script>

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

.industrial-impact {
	width: 100%;
	padding-top: 16px;
	padding-bottom: 50px;

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

		.left {
			width: 480px;
			height: 860px;
			.left-main {
				margin-top: 11px;
				padding: 0 16px;

				.top-bar {
					display: flex;
					gap: 12px;
					margin-bottom: 8px;

					.domain-select {
						width: 150px;

						:deep(.el-input__wrapper) {
							height: 32px;
							border-radius: 4px;
						}
					}

					.search-input {
						width: 288px;

						:deep(.el-input__wrapper) {
							height: 32px;
							border-radius: 4px;
						}
					}
				}

				.company-list-container {
					.list-header {
						width: 446px;
						height: 48px;
						padding: 12px 16px;
						font-size: 16px;
						font-weight: 700;
						color: rgb(59, 65, 75);
						border-top: 1px solid rgb(234, 236, 238);
						border-bottom: 1px solid rgb(234, 236, 238);
					}

					.company-list {
						height: 700px;
						overflow-y: auto;

						.company-item {
							display: flex;
							align-items: center;
							height: 48px;
							padding: 0 16px;
							cursor: pointer;
							border-bottom: 1px solid #f0f2f5;
							box-sizing: border-box;

							&:hover {
								background-color: #f5f7fa;
							}

							&.active {
								background-color: rgba(246, 250, 255, 1);
								border: 1px solid rgba(174, 214, 255, 1);

								.company-name {
									color: rgb(5, 95, 194);
									font-weight: 700;
								}

								.icon-wrapper {
									background-color: transparent;
								}
							}

							.icon-wrapper {
								width: 24px;
								height: 24px;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-right: 12px;
								border-radius: 50%;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.company-name {
								font-size: 16px;
								color: rgb(59, 65, 75);
								font-weight: 400;
								line-height: 24px;
								font-family: "Microsoft YaHei";
							}
						}
					}
				}
			}
		}

		.right {
			width: 1104px;
			height: 860px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-content: space-between;

			.right-item {
				width: 544px;
				height: 422px;
			}

			.right-main {
				width: 100%;
				height: calc(100% - 56px);
				padding: 0px 14px 15px 14px;

				.echarts {
					width: 516px;
					height: 300px;
					margin-bottom: 5px;
				}

				.bottom {
					width: 516px;
					// height: 40px;
					border-radius: 4px;
					background-color: rgba(246, 250, 255, 1);
					border: 1px solid rgba(231, 243, 255, 1);
					display: flex;
					align-items: center;
					padding: 6px 12px;
					box-sizing: border-box;

					.ai-icon {
						width: 20px;
						height: 20px;
						margin-right: 12px;
					}

					.text {
						flex: 1;
						font-size: 16px;
						font-family: "Microsoft YaHei";
						font-weight: 400;
						color: rgb(5, 95, 194);
						line-height: 24px;
					}

					.right-icon {
						width: 24px;
						height: 24px;
						cursor: pointer;
					}
				}
			}
		}
	}
}

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

	.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-group {
		margin-left: auto;
		display: flex;
		align-items: center;

		.rule-checkbox {
			margin-right: 20px;

			:deep(.el-checkbox__label) {
				font-size: 16px;
				color: #5f656c;
				font-family: "Microsoft YaHei";
			}

			:deep(.el-checkbox__inner) {
				border-color: #c9cdd4;
			}

			:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
				background-color: #055fc2;
				border-color: #055fc2;
			}

			:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
				color: #5f656c;
			}
		}

		.toggle-btns {
			display: flex;
			gap: 8px;
			margin-right: 20px;

			.t-btn {
				padding: 2px 8px;
				border: 1px solid rgb(230, 231, 232);
				border-radius: 4px;
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				color: rgb(59, 65, 75);
				cursor: pointer;
				box-sizing: border-box;

				&.active {
					color: rgb(5, 95, 194);
					background-color: rgba(231, 243, 255, 1);
					border-color: rgb(5, 95, 194);
				}
			}
		}

		.btn {
			margin-left: 0;
		}

		.dependency-select {
			width: 121px;
			height: 28px;
			margin-right: 14px;

			:deep(.el-input__wrapper) {
				height: 28px;
				min-height: 28px;
				padding: 0 8px;
				box-shadow: 0 0 0 1px #dcdfe6 inset;
			}

			:deep(.el-input__inner) {
				height: 28px;
				line-height: 28px;
				font-size: 14px;
			}
		}

		.instrument-select {
			width: 180px;
			height: 28px;
			margin-right: 14px;

			:deep(.el-input__wrapper) {
				height: 28px;
				min-height: 28px;
				padding: 0 8px;
				box-shadow: 0 0 0 1px #dcdfe6 inset;
			}

			:deep(.el-input__inner) {
				height: 28px;
				line-height: 28px;
				font-size: 14px;
			}
		}

		.project-domain-select {
			width: 150px;
			height: 28px;
			margin-right: 14px;

			:deep(.el-input__wrapper) {
				height: 28px;
				min-height: 28px;
				padding: 0 8px;
				box-shadow: 0 0 0 1px #dcdfe6 inset;
			}

			:deep(.el-input__inner) {
				height: 28px;
				line-height: 28px;
				font-size: 14px;
			}
		}

		.paper-domain-select {
			width: 150px;
			height: 28px;
			margin-right: 14px;

			:deep(.el-input__wrapper) {
				height: 28px;
				min-height: 28px;
				padding: 0 8px;
				box-shadow: 0 0 0 1px #dcdfe6 inset;
			}

			:deep(.el-input__inner) {
				height: 28px;
				line-height: 28px;
				font-size: 14px;
			}
		}
	}

	.btn {
		width: 92px;
		height: 28px;
		margin-left: auto;

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

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

	.btn-com {
		width: 60px;
		height: 28px;
		margin-left: auto;

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

.dependency-select {
	width: 121px;
	height: 28px;
	margin-right: 14px;

	:deep(.el-input__wrapper) {
		height: 28px;
		min-height: 28px;
		padding: 0 8px;
		box-shadow: 0 0 0 1px #dcdfe6 inset;
	}

	:deep(.el-input__inner) {
		height: 28px;
		line-height: 28px;
		font-size: 14px;
	}
}

.project-domain-select {
	width: 150px;
	height: 28px;
	margin-right: 14px;

	:deep(.el-input__wrapper) {
		height: 28px;
		min-height: 28px;
		padding: 0 8px;
		box-shadow: 0 0 0 1px #dcdfe6 inset;
	}

	:deep(.el-input__inner) {
		height: 28px;
		line-height: 28px;
		font-size: 14px;
	}
}

.paper-domain-select {
	width: 150px;
	height: 28px;
	margin-right: 14px;

	:deep(.el-input__wrapper) {
		height: 28px;
		min-height: 28px;
		padding: 0 8px;
		box-shadow: 0 0 0 1px #dcdfe6 inset;
	}

	:deep(.el-input__inner) {
		height: 28px;
		line-height: 28px;
		font-size: 14px;
	}
}
</style>
