<template>
	<div>
		<div class="list-page">
			<div class="search-box">
				<el-input v-model="searchKeyword" class="search-input" placeholder="搜索实体" :suffix-icon="Search" />
				<div class="filters">
					<el-checkbox v-model="onlyChina" label="只看中国实体" />
					<!-- <el-select v-model="order" placeholder="请选择排序方式" style="width: 160px">
						<el-option v-for="item in orderOptions" :value="item.value" :key="item.value" :label="item.name" />
					</el-select> -->
					<TimeSortSelectBox @handle-px-change="handleTimePx" />
				</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.label"
							@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 entityTypes"
							:key="index"
							v-model="item.checked"
							:label="item.label"
							@change="handleFilterChange(item, entityTypes, 'type')"
						/>
					</div>
					<div class="title">
						<div class="box"></div>
						<div class="text">制裁时间</div>
					</div>
					<div class="checkbox-group">
						<el-checkbox
							v-for="(item, index) in sanctionTimes"
							:key="index"
							v-model="item.checked"
							:label="item.label"
							@change="handleFilterChange(item, sanctionTimes, 'time')"
						/>
						<div v-if="sanctionTimes.find(i => i.value === 'custom' && i.checked)" class="custom-date-picker">
							<el-date-picker
								v-model="customDateRange"
								type="daterange"
								range-separator="-"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
							/>
						</div>
					</div>
				</div>
				<div class="right">
					<AnalysisBox title="实体清单" :showAllBtn="false">
						<template #header-btn>
							<div class="stats">
								<div class="dot"></div>
								<div class="count-text">
									共 <span class="highlight" @click="handlToDataLibrary">{{ ruleCount.totalCount }}</span> 家
								</div>
								<div class="rule-text">
									(50%规则涉及<span class="highlight" @click="handlToDataLibrary1">{{
										ruleCount.ruleCount
									}}</span
									>家)
								</div>
							</div>
						</template>
						<div class="right-table">
							<el-table
								:data="entityRows"
								table-layout="fixed"
								:row-class-name="tableRowClassName"
								:header-cell-style="{ background: '#fff' }"
								v-loading="tableLoading"
							>
								<template #empty>
									<el-empty description="暂无数据" />
								</template>
								<el-table-column label="实体名称" min-width="200">
									<template #default="{ row }">
										<div class="entity-name-cell" @click="handleCompClick(row)">
											<el-image v-if="row.img" class="avatar" :src="row.img" alt=""></el-image>
											<div v-else class="avatar-undefined">
												{{ (row.entityNameZh || row.entityName)?.match(/[\u4e00-\u9fa5a-zA-Z0-9]/)?.[0] }}
											</div>
											<CommonPrompt
												:content="row.entityNameZh || row.entityName"
												style="flex: 1; overflow: hidden"
											/>
										</div>
									</template>
								</el-table-column>
								<el-table-column label="涉及领域" min-width="200">
									<template #default="{ row }">
										<div class="domain-cell">
											<!-- <el-tag
												v-for="tag in row.techDomains"
												:key="tag"
												class="domain-tag"
												effect="plain"
												:disable-transitions="true"
												:style="getTagStyle(tag)"
											>
												{{ tag }}
											</el-tag> -->
											<AreaTag
												v-for="(tag, index) in getDisplayTags(row.techDomains)"
												:key="index"
												:tagName="tag"
											/>
										</div>
									</template>
								</el-table-column>
								<el-table-column
									prop="listingLocation"
									label="上市地点"
									width="140"
									show-overflow-tooltip
									align="center"
								/>
								<el-table-column
									prop="startTime"
									label="制裁时间"
									width="140"
									show-overflow-tooltip
									align="center"
								/>
								<el-table-column label="50%规则子企业" min-width="280" show-overflow-tooltip align="right">
									<template #default="{ row }">
										<div class="rule-cell" v-if="row.ruleOrgCount > 0">
											<div class="rule-text" :title="row.ruleOrgList?.[0]?.orgName || ''">
												{{ row.ruleOrgList?.[0]?.orgName || "" }}...等
											</div>
											<el-link
												class="rule-link"
												type="primary"
												:underline="false"
												@click="handleRuleClick(row)"
												>{{ row.ruleOrgCount }}家 ></el-link
											>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<div class="tight-footer">
							<div class="total-text">共 {{ total }} 项</div>
							<el-pagination
								:current-page="currentPage"
								v-model:page-size="pageSize"
								:total="total"
								layout="prev, pager, next"
								prev-text="<"
								next-text=">"
								@current-change="handleCurrentChange"
							/>
						</div>
					</AnalysisBox>
				</div>
			</div>
		</div>
		<RuleSubsidiaryDialog
			v-model="ruleDialogVisible"
			:company-name="currentRuleCompany"
			:total-count="currentRuleCount"
			:data-list="currentRuleList"
		/>
	</div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
import defaultIcon from "../../../../../assets/icons/default-avatar.png";
import RuleSubsidiaryDialog from "./RuleSubsidiaryDialog.vue";
import AreaTag from "@/components/base/AreaTag/index.vue";
import { getExportControlList, get50PercentEntityCount } from "@/api/exportControlV2.0.js";
import CommonPrompt from "@/views/exportControl/commonPrompt/index.vue";
import { useGotoCompanyPages } from "@/router/modules/company";
import TimeSortSelectBox from "@/components/base/TimeSortSelectBox/index.vue";
const gotoCompanyPages = useGotoCompanyPages();
const router = useRouter();

const order = ref("asc");
const orderOptions = ref([
	{ name: "倒序", value: "desc" },
	{ name: "正序", value: "asc" }
]);
// 跳转公司详情页
const handleCompClick = item => {
	console.log("item", item);
	window.sessionStorage.setItem("curTabName", item.entityNameZh || item.entityName);
	// const route = router.resolve({
	// 	name: "companyPages",
	// 	params: {
	// 		id: item.entityId
	// 	}
	// });
	// window.open(route.href, "_blank");
	gotoCompanyPages(item.entityId);
};

const searchKeyword = ref("");
const onlyChina = ref(true);
const sanctionTime = ref("");

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const tableLoading = ref(false);
const entityRows = computed(() => mainList.value);

const handleCurrentChange = val => {
	if (val === currentPage.value) return;
	currentPage.value = val;
	getExportControlListApi();
};

// 辅助函数：计算需要显示的标签
const getDisplayTags = domains => {
	if (!domains || domains.length === 0) return [];

	// 1. 获取当前用户选中的领域名称 (排除"全部")
	const selectedValues = techFields.value.filter(item => item.checked && item.value !== "all").map(item => item.label); // 注意：techFields中存储的是 label 作为显示名称

	// 如果没选中任何特定领域（即选中了“全部”或都没选），直接返回前3个
	if (selectedValues.length === 0) {
		return domains.slice(0, 3);
	}

	// 2. 分离 domains 中 "已选中" 和 "未选中" 的部分
	const matched = [];
	const others = [];

	domains.forEach(tag => {
		if (selectedValues.includes(tag)) {
			matched.push(tag);
		} else {
			others.push(tag);
		}
	});

	// 3. 组合结果：优先显示匹配的，不足的用其他的补齐，总数限制为3
	const result = [...matched];

	// 如果匹配的不足3个，从 others 中取剩余的配额
	if (result.length < 3) {
		const remainingCount = 3 - result.length;
		result.push(...others.slice(0, remainingCount));
	}

	// 如果匹配的超过3个，只取前3个（虽然通常匹配不会这么多，但做个保护）
	return result.slice(0, 3);
};

const getTagStyle = tag => {
	// 预设颜色池
	const colorPool = [
		{ color: "#CD4246", background: "rgba(255, 242, 240, 1)", borderColor: "rgba(255, 163, 158, 1)" }, // 红色
		{ color: "#0E78F1", background: "rgba(230, 244, 255, 1)", borderColor: "rgba(145, 206, 255, 1)" }, // 蓝色
		{ color: "#722ED1", background: "rgba(249, 240, 255, 1)", borderColor: "rgba(211, 173, 247, 1)" }, // 紫色
		{ color: "#13A8A8", background: "rgba(230, 255, 251, 1)", borderColor: "rgba(135, 232, 222, 1)" }, // 青色
		{ color: "#FA8C16", background: "rgba(255, 247, 230, 1)", borderColor: "rgba(255, 213, 145, 1)" }, // 橙色
		{ color: "#52C41A", background: "rgba(246, 255, 237, 1)", borderColor: "rgba(183, 235, 143, 1)" } // 绿色
	];

	// 使用简单的哈希算法将字符串映射到索引
	let hash = 0;
	for (let i = 0; i < tag.length; i++) {
		hash = tag.charCodeAt(i) + ((hash << 5) - hash);
	}

	// 确保索引为正数并取模
	const index = Math.abs(hash) % colorPool.length;

	return colorPool[index];
};

const tableRowClassName = ({ rowIndex }) => {
	return rowIndex % 2 === 0 ? "odd-row" : "";
};

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

const entityTypes = ref([
	{ label: "全部类型", value: "all", checked: true },
	{ label: "科研院校", value: "2", checked: false },
	{ label: "高校", value: "3", checked: false },
	{ label: "企业", value: "4", checked: false }
]);

const sanctionTimes = ref([
	{ label: "全部时间", value: "all", checked: true },
	{ label: "2026年", value: "2026", checked: false },
	{ label: "2025年", value: "2025", checked: false },
	{ label: "2024年", value: "2024", checked: false },
	{ label: "2023年", value: "2023", checked: false },
	{ label: "2022年", value: "2022", checked: false },
	// { label: "2021年", value: "2021", checked: false },
	{ label: "自定义", value: "custom", checked: false }
]);

const customDateRange = ref("");

const ruleDialogVisible = ref(false);
const currentRuleCompany = ref("");
const currentRuleCount = ref(0);
const currentRuleList = ref([]);

const handleRuleClick = row => {
	currentRuleCompany.value = row.entityNameZh || row.entityName;
	currentRuleCount.value = row.ruleOrgCount;
	currentRuleList.value = row.ruleOrgList || [];
	ruleDialogVisible.value = true;
};

// 筛选逻辑处理
const handleFilterChange = (item, list, type) => {
	// 如果点击的是"全部"
	if (item.value === "all") {
		if (item.checked) {
			// 选中全部，取消其他所有
			list.forEach(i => {
				if (i.value !== "all") i.checked = false;
			});
		} else {
			// 取消全部（通常不允许全部取消，至少得选一个，这里如果取消全部，就默认为全部选中）
			item.checked = true;
		}
	} else {
		// 点击的是具体项
		if (item.checked) {
			// 选中具体项，取消"全部"
			const allItem = list.find(i => i.value === "all");
			if (allItem) allItem.checked = false;

			// 特殊处理制裁时间的自定义和其他年份互斥
			if (type === "time") {
				if (item.value === "custom") {
					list.forEach(i => {
						if (i.value !== "custom" && i.value !== "all") i.checked = false;
					});
				} else {
					const customItem = list.find(i => i.value === "custom");
					if (customItem) customItem.checked = false;
				}
			}
		} else {
			// 取消具体项，检查是否还有选中的
			const anyChecked = list.some(i => i.checked);
			if (!anyChecked) {
				const allItem = list.find(i => i.value === "all");
				if (allItem) allItem.checked = true;
			}
		}
	}

	// 重置页码并查询
	currentPage.value = 1;
	getExportControlListApi();
};

// 获取实体清单列表
const mainList = ref([]);
const isFetching = ref(false);
const ruleCount = ref(0);

let abortController = null;
const getExportControlListApi = async () => {
	tableLoading.value = true;
	// 取消上一轮未完成的请求
	if (abortController) {
		try {
			abortController.abort();
		} catch {}
	}
	abortController = new AbortController();
	isFetching.value = true;
	// 处理科技领域筛选
	let techDomains = [];
	const allTech = techFields.value.find(item => item.value === "all");
	if (!allTech || !allTech.checked) {
		techDomains = techFields.value.filter(item => item.checked && item.value !== "all").map(item => item.value);
	}

	// 处理实体类型筛选
	let typeIds = [];
	const allType = entityTypes.value.find(item => item.value === "all");
	if (!allType || !allType.checked) {
		typeIds = entityTypes.value.filter(item => item.checked && item.value !== "all").map(item => Number(item.value));
	}

	// 处理制裁时间筛选
	let years = [];
	let startDate = undefined;
	let endDate = undefined;
	const allTime = sanctionTimes.value.find(item => item.value === "all");

	if (!allTime || !allTime.checked) {
		years = sanctionTimes.value
			.filter(item => item.checked && item.value !== "all" && item.value !== "custom")
			.map(item => Number(item.value));

		const customTime = sanctionTimes.value.find(item => item.value === "custom");
		if (customTime && customTime.checked && customDateRange.value && customDateRange.value.length === 2) {
			const start = new Date(customDateRange.value[0]);
			const end = new Date(customDateRange.value[1]);
			startDate = `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, "0")}-${String(
				start.getDate()
			).padStart(2, "0")}`;
			endDate = `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(2, "0")}-${String(end.getDate()).padStart(
				2,
				"0"
			)}`;
		}
	}

	const data = {
		// typeName: "实体清单",
		sanTypeId: sanTypeId.value || 1,
		isCn: onlyChina.value,
		techDomains: techDomains.length > 0 ? techDomains : undefined,
		entityTypes: typeIds.length > 0 ? typeIds : undefined,
		years: years.length > 0 ? years : undefined,
		startDate,
		endDate,
		keyword: searchKeyword.value || undefined,
		pageNum: currentPage.value,
		pageSize: pageSize.value,
		sortOrder: order.value
		// sortField: "sanctionTime" + order.value
	};

	try {
		const res = await getExportControlList(data, { signal: abortController.signal });
		tableLoading.value = false;
		// 50%规则涉及实体数
		const countRes = await get50PercentEntityCount(data);

		if (countRes.code === 200) {
			ruleCount.value = countRes.data;
		}
		if (res.code === 200) {
			mainList.value = res.data.content;
			total.value = res.data.totalElements;
		}
	} catch (error) {
		if (!error || (error.code !== "ERR_CANCELED" && error.name !== "CanceledError" && error.name !== "AbortError")) {
			console.error(error);
		}
		tableLoading.value = false;
	} finally {
		isFetching.value = false;
		abortController = null;
		tableLoading.value = false;
	}
};

// watch(onlyChina, () => {
// 	currentPage.value = 1;
// 	getExportControlListApi();
// });
const handleTimePx = data => {
	console.log("选择排序", data);
	currentPage.value = 1;
	order.value = orderOptions.value[data - 1].value;
	getExportControlListApi();
};
watch([onlyChina], () => {
	currentPage.value = 1;
	getExportControlListApi();
});

const searchDebounceTimer = ref(null);
watch(searchKeyword, () => {
	if (searchDebounceTimer.value) {
		clearTimeout(searchDebounceTimer.value);
	}
	searchDebounceTimer.value = setTimeout(() => {
		currentPage.value = 1;
		getExportControlListApi();
	}, 300);
});
const sanTypeId = ref("");
onMounted(() => {
	sanTypeId.value = router.currentRoute.value.query.sanTypeId || "1";
	getExportControlListApi();
});

watch(customDateRange, () => {
	if (sanctionTimes.value.find(item => item.value === "custom" && item.checked)) {
		currentPage.value = 1;
		getExportControlListApi();
	}
});

// 跳转到数据资源库
const handlToDataLibrary = () => {
	const params = {
		isCnEntityOnly: true
	};
	const route = router.resolve({
		path: "/dataLibrary/dataEntityList",
		query: params
	});
	window.open(route.href, "_blank");
};
const handlToDataLibrary1 = () => {
	const params = {
		isCnEntityOnly: true,
		isHalfRule: true
	};
	const route = router.resolve({
		path: "/dataLibrary/dataEntityList",
		query: params
	});
	window.open(route.href, "_blank");
};
</script>

<style scoped lang="scss">
.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: 360px;
			height: 32px;

			:deep(.el-input__wrapper) {
				padding: 0 11px;
				border: 1px solid rgba(170, 173, 177, 1);
				background-color: #fff;
				border-radius: 3px;
				border: 1px solid #ddd;
				border-radius: 4px;
				height: 32px;
			}

			:deep(.el-input__inner) {
				font-size: 14px;
				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;
			}

			:deep(.el-checkbox__label) {
				font-size: 14px;
				color: rgb(95, 101, 108);
				margin-top: 3px;
			}
		}
	}

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

		.left {
			padding-bottom: 20px;
			width: 360px;
			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;

				display: grid;
				grid-template-columns: repeat(2, 160px);
				gap: 8px 4px;
				padding-left: 20px;

				.el-checkbox {
					// width: 50%;
					// margin-right: 0;
					// margin-bottom: 4px;
					height: 24px;
					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;
					grid-column: 1 / -1;

					: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: 1223px;
			height: auto;
			border-radius: 10px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background-color: #fff;

			.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;

						.dot {
							width: 8px;
							height: 8px;
							background-color: #cd4246;
							border-radius: 50%;
							margin-right: 8px;
						}

						.count-text {
							font-size: 16px;
							font-weight: 700;
							color: #3b414b;
							font-family: "Microsoft YaHei";
							margin-right: 16px;

							.highlight {
								color: #cd4246;
								margin: 0 4px;
							}
						}

						.rule-text {
							font-size: 14px;
							color: #5f656c;
							font-family: "Microsoft YaHei";

							.highlight {
								color: #cd4246;
							}
						}
					}

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

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

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

			.right-table {
				padding: 5px 21px 0 21px;

				:deep(.el-table) {
					--el-table-header-bg-color: #fff;
					--el-table-border-color: transparent;
					--el-table-row-hover-bg-color: rgba(248, 249, 250, 1);
				}

				:deep(.el-table__inner-wrapper::before) {
					background-color: transparent;
				}

				:deep(.el-table__header-wrapper th) {
					height: 60px;
					background-color: #fff;
					font-size: 16px;
					font-weight: 700;
					color: rgba(59, 65, 75, 1);
					font-family: "Microsoft YaHei";
					border-bottom: 1px solid rgba(230, 231, 232, 1);
					border-top: 1px solid rgba(230, 231, 232, 1);
				}

				:deep(.el-table__header-wrapper .cell) {
					line-height: 22px;
				}

				:deep(.el-table__header-wrapper th:first-child .cell) {
					padding-left: 39px;
				}

				:deep(.el-table__row) {
					height: 64px;
				}

				:deep(.el-table__cell) {
					border-bottom: 0;
					font-size: 16px;
					font-weight: 400;
					color: rgb(95, 101, 108);
					font-family: "Microsoft YaHei";
				}

				:deep(.el-table__row .el-table__cell:first-child .cell) {
					padding-left: 39px;
				}

				:deep(.odd-row td.el-table__cell) {
					background-color: rgba(248, 249, 250, 1);
				}

				.entity-name-cell {
					display: flex;
					align-items: center;

					.avatar {
						width: 24px;
						height: 24px;
						margin-right: 8px;
						border-radius: 4px;
					}

					.avatar-undefined {
						width: 24px;
						height: 24px;
						margin-right: 8px;
						border-radius: 4px;
						background-color: #055fc2;
						color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 14px;
						font-weight: 500;
					}

					.name {
						font-size: 16px;
						font-weight: 700;
						color: rgba(59, 65, 75, 1);
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.domain-cell {
					display: flex;
					align-items: center;
					gap: 8px;

					:deep(.el-tag) {
						height: auto;
						padding: 2px 8px;
						border-radius: 4px;
						font-size: 14px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 20px;
						border: 1px solid;
					}
				}

				.rule-cell {
					display: flex;
					align-items: center;
					gap: 12px;

					.rule-text {
						flex: 1;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.rule-link {
						font-size: 16px;
						font-weight: 400;
						color: rgb(5, 95, 194);
						cursor: pointer;
						white-space: nowrap;
					}
				}
			}

			.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);
	}
}

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

	.dot {
		width: 8px;
		height: 8px;
		background-color: #cd4246;
		border-radius: 50%;
		margin-right: 8px;
	}

	.count-text {
		font-size: 16px;
		font-weight: 700;
		color: #3b414b;
		font-family: "Microsoft YaHei";
		margin-right: 16px;

		.highlight {
			color: #cd4246;
			margin: 0 4px;
			cursor: pointer;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	.rule-text {
		font-size: 14px;
		color: #5f656c;
		font-family: "Microsoft YaHei";

		.highlight {
			color: #cd4246;
			cursor: pointer;

			&:hover {
				text-decoration: underline;
			}
		}
	}
}
</style>
