<template>
	<div class="home-wrapper" ref="pageScrollRef">
		<div class="home-main">
			<div class="home-main-center">
				<div class="center-center">
					<div class="center-header">
						<div class="center-header-left">
							<img class="iconstyle" src="./assets/images/warning.svg" />
							<div class="center-header-title">风险信号管理</div>
						</div>
						<div class="center-header-right">
							<img class="img" src="./assets/images/danger.svg" />
							<div class="text">风险统计</div>
						</div>
					</div>
					<div class="center-middle">
						<div class="center-middle-left">
							<div class="lineitem">
								<div class="item">
									<div class="top">
										<div class="dot" style="background-color: rgba(95, 101, 108, 1)"></div>
										<div class="text1">本年新增风险</div>
									</div>
									<div class="text2" style="color: rgba(95, 101, 108, 1)">
										<span class="text2-inner">{{ basicInfo.yearAdded + " 项" }}</span>
									</div>
								</div>
								<div class="item">
									<div class="top">
										<div class="dot" style="background-color: rgba(95, 101, 108, 1)"></div>
										<div class="text1">本月新增风险</div>
									</div>
									<div class="text2" style="color: rgba(95, 101, 108, 1)">
										<span class="text2-inner">{{ basicInfo.monthAdded + " 项" }}</span>
									</div>
								</div>
							</div>
							<div class="lineitem">
								<div class="item">
									<div class="top">
										<div class="dot" style="background-color: rgba(5, 95, 194, 1)"></div>
										<div class="text1">已处理风险</div>
									</div>
									<div class="text2" style="color: rgba(5, 95, 194, 1)"><span class="text2-inner">{{ basicInfo.dealCount
										+ " 项" }}</span></div>
								</div>
								<div class="item">
									<div class="top">
										<div class="dot" style="background-color: rgba(206, 79, 81, 1)"></div>
										<div class="text1">待处理风险</div>
									</div>
									<div class="text2" style="color: rgba(206, 79, 81, 1)">
										<span class="text2-inner">{{ basicInfo.pendingCount + " 项" }}</span>
									</div>
								</div>
							</div>
						</div>
						<div class="center-middle-right" id="chartCalendar"></div>
					</div>
				</div>
			</div>

			<div class="home-main-footer">
				<div class="home-main-footer-main">
					<div class="left">

						<div class="select-box">
							<div class="header">
								<div class="icon"></div>
								<div class="title">{{ "科技领域" }}</div>
							</div>
							<div class="select-main">
								<el-checkbox-group class="checkbox-group" :model-value="selectedAreaModel"
									@change="handleAreaGroupChange">
									<el-checkbox class="filter-checkbox all-checkbox" :label="RISK_FILTER_ALL_AREA">
										{{ RISK_FILTER_ALL_AREA }}
									</el-checkbox>
									<el-checkbox v-for="item in area" :key="item.id" class="filter-checkbox" :label="item.id">
										{{ item.name }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
						<div class="select-box">
							<div class="header">
								<div class="icon"></div>
								<div class="title">{{ "发布时间" }}</div>
							</div>
							<div class="select-main">
								<el-checkbox-group class="checkbox-group" :model-value="selectedTimeModel"
									@change="handleTimeGroupChange">

									<el-checkbox class="filter-checkbox all-checkbox" :label="Time_FILTER_ALL_SOURCE">
										{{ Time_FILTER_ALL_SOURCE }}
									</el-checkbox>
									<el-checkbox v-for="item in timeSource" :key="item.id" class="filter-checkbox" :label="item.id">
										{{ item.name }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
						<div class="select-box">
							<div class="header risk-source-header">
								<div class="icon"></div>
								<div class="title">{{ "涉及国家" }}</div>
								<img class="risk-source-header__toggle"
									:src="riskSourceExpanded ? riskSourceUpArrow : riskSourceDownArrow" alt=""
									@click.stop="handleToggleRiskSourceExpanded" />
							</div>
							<div class="select-main">
								<el-checkbox-group class="checkbox-group risk-source-checkbox-group"
									:model-value="selectedRiskSourceModel" @change="handleRiskSourceGroupChange">
									<el-checkbox class="filter-checkbox all-checkbox" :label="RISK_FILTER_ALL_SOURCE">
										{{ RISK_FILTER_ALL_SOURCE }}
									</el-checkbox>
									<el-checkbox v-for="item in riskSourceDisplayedOptions" :key="item.code" class="filter-checkbox"
										:label="item.code">
										{{ item.name }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
						<div class="select-box">
							<div class="header">
								<div class="icon"></div>
								<div class="title">{{ "风险类型" }}</div>
							</div>
							<div class="select-main">
								<el-checkbox-group class="checkbox-group risk-type-checkbox-group" :model-value="selectedRiskTypeModel"
									@change="handleRiskTypeGroupChange">
									<el-checkbox class="filter-checkbox all-checkbox" :label="RISK_FILTER_ALL_TYPE">
										{{ RISK_FILTER_ALL_TYPE }}
									</el-checkbox>
									<el-checkbox v-for="item in riskTypeOptions" :key="item.code" class="filter-checkbox"
										:label="item.code">
										{{ item.name }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
						<div class="select-box">
							<div class="header">
								<div class="icon"></div>
								<div class="title">{{ "风险等级" }}</div>
							</div>
							<div class="select-main">
								<el-checkbox-group class="checkbox-group" :model-value="selectedRiskDegreeModel"
									@change="handleRiskDegreeGroupChange">
									<el-checkbox class="filter-checkbox all-checkbox" :label="RISK_FILTER_ALL_LEVEL">
										{{ RISK_FILTER_ALL_LEVEL }}
									</el-checkbox>
									<el-checkbox v-for="item in riskDegree" :key="item.id" class="filter-checkbox" :label="item.id">
										{{ item.name }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
					</div>
					<div class="right" v-loading="loading">
						<div class="right-header">
							<div class="header-left">
								<div class="btn-left" :class="{ btnleftactive: activeProcessStatusId === item.id }"
									@click="handleClickBtn(item)" v-for="item in processStatusList" :key="item.id">
									<div class="btn-text" :class="{ btntextactive: activeProcessStatusId === item.id }">
										{{ item.name }}
									</div>
								</div>
							</div>
							<div class="header-right">
								<div class="searchbox">
									<el-input @keyup.enter="handleSearch" v-model="kewword" style="width: 268px; height: 100%"
										placeholder="搜索" />
									<div class="search-btn" @click="handleSearch"></div>
								</div>
								<div class="select-box">
									<el-select v-model="sortModel" class="resource-library-sort-select" placeholder="发布时间"
										style="width: 120px" :teleported="true" placement="bottom-start"
										:popper-options="resourceLibrarySortPopperOptions" @change="handleSortChange">
										<template #prefix>
											<img v-if="sortValue === 1"
												src="@/views/thinkTank/ThinkTankDetail/thinkDynamics/images/image down.png"
												class="resource-library-sort-prefix-img" alt="" @click.stop="toggleSortPrefix" />
											<img v-else src="@/views/thinkTank/ThinkTankDetail/thinkDynamics/images/image up.png"
												class="resource-library-sort-prefix-img" alt="" @click.stop="toggleSortPrefix" />
										</template>
										<el-option :key="'risk-sort-asc'" label="正序" :value="0" />
										<el-option :key="'risk-sort-desc'" label="倒序" :value="1" />
									</el-select>
								</div>
							</div>
						</div>
						<template v-if="riskList && riskList.length">
							<div class="right-main">
								<div class="itemlist itemlist--clickable" v-for="(val, idx) in riskList" :key="val.rowKey"
									@click="handleOpenRiskDetail(val)">
									<div class="box-title">
										<div class="risktitle" v-html="highlightRiskText(val.title)" />
										<div v-if="!isRiskLevelNoData(val.risktype)" class="risktype"
											:class="'risktype--' + getRiskListItemLevelKey(val.risktype)">
											<div class="icon" :class="'icon--' + getRiskListItemLevelKey(val.risktype)" />
											<div class="text">{{ getRiskListItemLevelLabel(val.risktype) }}</div>
										</div>
									</div>
									<div class="box-source">
										<img class="source-pic" :src="val.pic || DefaultIcon2" alt="" />
										<div class="source-text">{{ formatRiskSourceLine(val) }}</div>
									</div>
									<div class="desc-box" v-html="highlightRiskText(val.dsc)" />
									<div class="tag-box" v-if="val.tag.length">
										<AreaTag v-for="(tag, index) in val.tag" :key="index" :tagName="tag">{{ tag }}</AreaTag>
									</div>
								</div>
							</div>
							<div class="right-footer">
								<div class="footer-left">
									{{ `共 ${totalNum} 项调查` }}
								</div>
								<div class="footer-right">
									<el-pagination @current-change="handleCurrentChange" :pageSize="pageSize" :current-page="currentPage"
										:total="totalNum" background layout="prev, pager, next" />
								</div>
							</div>
						</template>
						<template v-else>
							<div class="right-empty">
								<el-empty class="right-el-empty" description="暂无数据" :image-size="100" />
							</div>
						</template>
					</div>
				</div>
			</div>
		</div>
		<el-dialog v-model="isRiskDetailVisible" class="risk-signal-detail-dialog" modal-class="risk-signal-detail-modal"
			width="1280px" align-center :show-close="true" destroy-on-close @closed="handleCloseRiskDetail">
			<template #header>
				<img class="header-icon" src="./assets/images/risk-icon.png" alt="" />
				<span v-if="riskDetailListLevelText" class="risk-signal-detail-dialog__level"
					:class="riskDetailListLevelModifierClass">{{ riskDetailListLevelText }}</span>
				<div v-if="riskDetailBodyFromApi" class="risk-signal-detail-dialog__read-indicator">
					<el-icon v-if="riskDetailStatus === false" class="risk-signal-detail-dialog__header-badge-close">
						<Close />
					</el-icon>
					<img v-else-if="riskDetailStatus === true" class="risk-signal-detail-dialog__header-badge-read"
						src="./assets/images/green-right.png" alt="" />
					<span v-if="riskDetailStatus != null" class="read">{{ riskDetailStatus ? "已读" : "未读" }}</span>
				</div>
			</template>
			<div class="risk-signal-detail-dialog__main" v-loading="riskDetailDetailLoading">
				<div v-if="riskDetailBodyFromApi">
					<div v-if="riskDetailItem.title" class="risk-signal-detail-dialog__body">
						<span class="risk-signal-detail-dialog__title">{{ riskDetailItem.title }}</span>
						<div v-if="riskDetailItem.directionLabels.length" class="risk-signal-detail-dialog__directions">
							<div v-for="(dirLabel, dirIndex) in riskDetailItem.directionLabels"
								:key="'risk-detail-direction-' + dirIndex + '-' + dirLabel" class="risk-signal-detail-dialog__origin">{{
									dirLabel }}</div>
						</div>
						<div class="risk-signal-detail-dialog__meta">

							<span>{{ riskDetailMetaLine }}</span>

							<div v-if="riskDetailItem.tag.length" class="risk-signal-detail-dialog__tags">
								<AreaTag v-for="(tag, index) in riskDetailItem.tag" :key="'risk-detail-tag-' + index + '-' + tag"
									:tagName="tag">
									{{ tag }}</AreaTag>
							</div>
						</div>
					</div>
					<div v-if="riskDetailShowRelationBar" class="risk-signal-detail-dialog_relation"
						@click="handleRiskDetailRelationClick">
						<div class="relation">
							<div class="logo"><img src="./assets/images/logo.png" alt="" /></div>
							<div class="name-text">{{ riskDetailItem.relationType }}</div>
							<div class="content-text">{{ riskDetailItem.relationTitle }}</div>
						</div>
						<div class="right-arrow"><img src="./assets/images/right-arrow.png" alt="" /></div>
					</div>
					<div class="risk-signal-detail-dialog__desc">{{ riskDetailItem.dsc }}</div>
				</div>
			</div>
			<template #footer>
				<el-button type="primary" class="risk-signal-detail-dialog__action-btn" :loading="riskDetailConfirmLoading"
					@click="handleConfirmRiskDetail">
					确定
				</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { computed, nextTick, onMounted, reactive, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { OPEN_FIRST_RISK_DETAIL_QUERY_KEY } from "@/utils/riskSignalOverviewNavigate";
import {
	buildRiskDetailPayloadFromApi,
	formatRiskPublishDisplay,
	getRiskDetailLevelModifier,
	normalizeRiskSignalListLevelText,
	parseRiskSignalTagList,
	resolveRiskSignalRelationRoute
} from "@/utils/riskSignalOverviewDetailHelpers.js";
import { getRiskSignalBaseInfo, getPageQuery, getRiskSignalInfoById, updateRiskSignalStatus, getRiskTypes, listRiskCountry } from "@/api/riskSignal/index";
import { ElMessage } from "element-plus";
import { Close } from "@element-plus/icons-vue";
import { getHylyList } from "@/api/thinkTank/overview";
import setChart from "@/utils/setChart";

import getCalendarHeatChart from "./utils/cleandarHeat";
import riskSourceDownArrow from "./assets/images/down-arrow.png";
import riskSourceUpArrow from "./assets/images/up-arrow.png";

import DefaultIcon2 from "@/assets/icons/default-icon2.png";
import { normalizeExclusiveAllOption } from "@/views/thinkTank/utils/resourceLibraryFilters";

const riskTypeOptions = ref([]);
const RISK_FILTER_ALL_TYPE = "全部类型";
const selectedRiskTypeModel = ref([RISK_FILTER_ALL_TYPE]);
const handleRiskTypeGroupChange = (val) => {
	selectedRiskTypeModel.value = normalizeExclusiveAllOption(val, RISK_FILTER_ALL_TYPE);
	handleGetPageQuery();
};

// 发布时间（与「全部时间」互斥）
const Time_FILTER_ALL_SOURCE = "全部时间";
const TIME_FILTER_1M = "TIME_FILTER_1M";
const TIME_FILTER_3M = "TIME_FILTER_3M";
const TIME_FILTER_6M = "TIME_FILTER_6M";
const TIME_FILTER_1Y = "TIME_FILTER_1Y";

const timeSource = ref([
	{ id: TIME_FILTER_1M, name: "近一个月" },
	{ id: TIME_FILTER_3M, name: "近三个月" },
	{ id: TIME_FILTER_6M, name: "近半年" },
	{ id: TIME_FILTER_1Y, name: "近一年" }
]);
const selectedTimeModel = ref([Time_FILTER_ALL_SOURCE]);
const handleTimeGroupChange = (val) => {
	selectedTimeModel.value = normalizeExclusiveAllOption(val, Time_FILTER_ALL_SOURCE);
	handleGetPageQuery();
};

const riskSourceOptions = ref([]);
const riskSourceExpanded = ref(false);
const riskSourceDisplayedOptions = computed(() => {
	if (riskSourceExpanded.value) {
		return riskSourceOptions.value;
	}
	return riskSourceOptions.value.slice(0, 9);
});
const RISK_FILTER_ALL_SOURCE = "全部国家";
const selectedRiskSourceModel = ref([RISK_FILTER_ALL_SOURCE]);
const handleRiskSourceGroupChange = (val) => {
	selectedRiskSourceModel.value = normalizeExclusiveAllOption(val, RISK_FILTER_ALL_SOURCE);
	handleGetPageQuery();
};

const handleToggleRiskSourceExpanded = () => {
	riskSourceExpanded.value = !riskSourceExpanded.value;
};

const riskDegree = ref([
	{
		name: "特别重大风险",
		id: "特别重大风险"
	},
	{
		name: "重大风险",
		id: "重大风险"
	},
	{
		name: "较大风险",
		id: "较大风险"
	},
	{
		name: "一般风险",
		id: "一般风险"
	},
	{
		name: "低风险",
		id: "低风险"
	}
]);
const RISK_FILTER_ALL_LEVEL = "全部等级";
const selectedRiskDegreeModel = ref([RISK_FILTER_ALL_LEVEL]);
const handleRiskDegreeGroupChange = (val) => {
	selectedRiskDegreeModel.value = normalizeExclusiveAllOption(val, RISK_FILTER_ALL_LEVEL);
	handleGetPageQuery();
};

const area = ref([

]);

// 科技领域字典：与智库资源库一致
const handleGetHylyList = async () => {
	try {
		const res = await getHylyList();
		if (res.code === 200 && Array.isArray(res.data)) {
			area.value = res.data;
		} else {
			area.value = [];
		}
	} catch (e) {
		console.error("获取科技领域字典失败", e);
		area.value = [];
	}
};

const RISK_FILTER_ALL_AREA = "全部领域";
const selectedAreaModel = ref([RISK_FILTER_ALL_AREA]);
const handleAreaGroupChange = (val) => {
	selectedAreaModel.value = normalizeExclusiveAllOption(val, RISK_FILTER_ALL_AREA);
	handleGetPageQuery();
};

const processStatusList = ref([
	{
		name: "全部",
		id: -1
	},
	{
		name: "未读",
		id: 0
	},

	{
		name: "已读",
		id: 1
	}
]);
const activeProcessStatusId = ref(-1);

const handleClickBtn = item => {
	activeProcessStatusId.value = item.id;
	handleGetPageQuery();
};

const riskList = ref([]);

const isRiskDetailVisible = ref(false);
/** 弹窗标题区：始终展示当前列表项的风险等级文案 */
const riskDetailListLevelText = ref("");
/** 标题/分类/时间/标签/正文/关联条等：仅接口返回后再展示 */
const riskDetailBodyFromApi = ref(false);
/** 详情接口请求中（与列表 v-loading 一致，遮罩内垂直水平居中） */
const riskDetailDetailLoading = ref(false);
/** 当前详情弹窗对应的列表项 id（确定风险时提交 UpdateStatu） */
const riskDetailCurrentId = ref(null);
/** 详情状态：false=未读，true=已读；仅接口返回后展示 */
const riskDetailStatus = ref(null);
/** 确定风险按钮提交中 */
const riskDetailConfirmLoading = ref(false);

const getEmptyRiskDetailPayload = () => ({
	title: "",
	origin: "",
	time: "",
	dsc: "",
	tag: [],
	risktype: "",
	category: "",
	directionLabels: [],
	relationType: "",
	relationTitle: "",
	relationModelCode: "",
	relationReferedId: ""
});

const riskDetailItem = reactive({
	title: "",
	origin: "",
	time: "",
	dsc: "",
	tag: [],
	risktype: "",
	category: "",
	directionLabels: [],
	relationType: "",
	relationTitle: "",
	relationModelCode: "",
	relationReferedId: ""
});

const assignRiskDetail = (val) => {
	riskDetailItem.title = val.title ?? "";
	riskDetailItem.origin = val.origin ?? "";
	riskDetailItem.time = val.time ?? "";
	riskDetailItem.dsc = val.dsc ?? "";
	riskDetailItem.tag = Array.isArray(val.tag) ? [...val.tag] : [];
	riskDetailItem.risktype = val.risktype ?? "";
	riskDetailItem.category = val.category ?? "";
	riskDetailItem.directionLabels = Array.isArray(val.directionLabels) ? [...val.directionLabels] : [];
	riskDetailItem.relationType = val.relationType ?? "";
	riskDetailItem.relationTitle = val.relationTitle ?? "";
	riskDetailItem.relationModelCode = val.relationModelCode ?? "";
	riskDetailItem.relationReferedId = val.relationReferedId ?? "";
};

/** 详情弹窗：时间与来源一行（避免模板里拼接） */
const riskDetailMetaLine = computed(() => {
	const t = String(riskDetailItem.time ?? "").trim();
	const o = String(riskDetailItem.origin ?? "").trim();
	if (t && o) {
		return `${t}·${o}`;
	}
	return t || o;
});

/** 详情关联条：有文案或有关联 id 时展示 */
const riskDetailShowRelationBar = computed(() => {
	const t = String(riskDetailItem.relationTitle ?? "").trim();
	const p = String(riskDetailItem.relationType ?? "").trim();
	const id = String(riskDetailItem.relationReferedId ?? "").trim();
	return Boolean(t || p || id);
});

const handleRiskDetailRelationClick = () => {
	const loc = resolveRiskSignalRelationRoute(
		riskDetailItem.relationModelCode,
		riskDetailItem.relationReferedId
	);
	if (!loc) {
		return;
	}
	const href = router.resolve(loc).href;
	window.open(href, "_blank");
};

/** 将 getRiskSignalInfoById 返回 data 写入详情（listRow 为列表行兜底） */
const assignRiskDetailFromApi = (data, listRow) => {
	assignRiskDetail(buildRiskDetailPayloadFromApi(data, listRow));
};

const handleOpenRiskDetail = async (val) => {
	const rowId = val?.id;
	riskDetailCurrentId.value = rowId != null && rowId !== "" ? rowId : null;
	riskDetailStatus.value = null;
	riskDetailListLevelText.value = normalizeRiskSignalListLevelText(val?.risktype);
	assignRiskDetail(getEmptyRiskDetailPayload());
	riskDetailBodyFromApi.value = false;
	riskDetailDetailLoading.value = false;
	isRiskDetailVisible.value = true;
	const id = rowId;
	if (id == null || id === "") {
		return;
	}
	riskDetailDetailLoading.value = true;
	try {
		const res = await getRiskSignalInfoById(String(id));
		if (res.code === 200 && res.data) {
			assignRiskDetailFromApi(res.data, val);
			riskDetailStatus.value = Boolean(res.data.status);
			riskDetailBodyFromApi.value = true;
		}
	} catch (error) {
		console.error("获取风险信号详情 error", error);
	} finally {
		riskDetailDetailLoading.value = false;
	}
};

const handleCloseRiskDetail = () => {
	riskDetailCurrentId.value = null;
	riskDetailStatus.value = null;
	riskDetailListLevelText.value = "";
	riskDetailBodyFromApi.value = false;
	riskDetailDetailLoading.value = false;
	assignRiskDetail(getEmptyRiskDetailPayload());
};

/** 确定风险：GET /api/riskSignal/UpdateStatu/{id} */
const handleConfirmRiskDetail = async () => {
	const id = riskDetailCurrentId.value;
	if (id == null || id === "") {
		isRiskDetailVisible.value = false;
		return;
	}
	riskDetailConfirmLoading.value = true;
	try {
		const res = await updateRiskSignalStatus(String(id));
		if (res.code === 200) {
			ElMessage.success(typeof res.msg === "string" && res.msg.trim() ? res.msg : "操作成功");
			isRiskDetailVisible.value = false;
			await handleGetPageQuery();
		} else {
			ElMessage.warning(typeof res.msg === "string" && res.msg.trim() ? res.msg : "操作失败");
		}
	} catch (error) {
		console.error("确定风险 UpdateStatu error", error);
		ElMessage.error("操作失败");
	} finally {
		riskDetailConfirmLoading.value = false;
	}
};

const riskDetailListLevelModifierClass = computed(
	() => `risk-signal-detail-dialog__level--${getRiskDetailLevelModifier(riskDetailListLevelText.value)}`
);

/** 列表项风险等级样式键：与 `@/components/base/riskSignal` itemLeftStatus1～5 一致 */
const getRiskListItemLevelKey = (level) => {
	const t = String(level ?? "").trim();
	if (!t || t === "暂无数值" || t === "暂无数据") return "lv4";
	if (t.includes("特别重大")) return "lv1";
	if (t === "重大风险" || (t.includes("重大") && !t.includes("较大") && !t.includes("特别"))) return "lv2";
	if (t === "较大风险" || t.includes("较大")) return "lv3";
	if (t === "低风险") return "lv5";
	if (t === "一般风险") return "lv4";
	return "lv4";
};

const getRiskListItemLevelLabel = (level) => {
	const t = String(level ?? "").trim();
	if (!t || t === "暂无数值") return "暂无数据";
	return t;
};

const isRiskLevelNoData = (level) => {
	const t = String(level ?? "").trim();
	return !t || t === "暂无数值" || t === "暂无数据";
};

const route = useRoute();
const router = useRouter();

const consumeOpenFirstDetailFromQuery = async () => {
	if (route.query[OPEN_FIRST_RISK_DETAIL_QUERY_KEY] !== "1") {
		return;
	}
	if (!riskList.value.length) {
		return;
	}
	handleOpenRiskDetail(riskList.value[0]);
	const nextQuery = { ...route.query };
	delete nextQuery[OPEN_FIRST_RISK_DETAIL_QUERY_KEY];
	await router.replace({ path: route.path, query: nextQuery });
};

const calendarData = ref([

]);

// 基本统计信息
const basicInfo = ref({
	dealCount: 0,
	monthAdded: 0,
	pendingCount: 0,
	yearAdded: 0
});

/** 风险统计：按数量级压缩展示（保留两位小数） */
const formatRiskStatCount = (raw) => {
	const n = Math.floor(Number(raw) || 0);
	if (n >= 1000000) {
		return `${(n / 1000000).toFixed(2)} 百万项`;
	}
	if (n >= 100000) {
		return `${(n / 100000).toFixed(2)} 十万项`;
	}
	if (n >= 10000) {
		return `${(n / 10000).toFixed(2)} 万项`;
	}
	return `${n} 项`;
};

/** 合并 baseInfo：顶部统计 + 热力图 dateList（eventTime / total） */
const handleGetRiskSignalBaseInfo = async () => {
	try {
		const res = await getRiskSignalBaseInfo();
		if (res.code === 200 && res.data) {
			const d = res.data;
			basicInfo.value = {
				yearAdded: Number(d.yearAdded) || 0,
				monthAdded: Number(d.monthAdded) || 0,
				dealCount: Number(d.dealCount) || 0,
				pendingCount: Number(d.pendingCount) || 0
			};
			const list = Array.isArray(d.dateList) ? d.dateList : [];
			calendarData.value = list.map((item) => {
				const day = item.eventTime ?? item.day ?? "";
				const count = item.total ?? item.count ?? 0;
				return [day, Number(count) || 0];
			});
		}
	} catch (error) {
		console.error("风险信号 baseInfo", error);
	}
};

const handleCleandarChart = async () => {
	await handleGetRiskSignalBaseInfo();
	const chartCalendar = getCalendarHeatChart(calendarData.value);
	setChart(chartCalendar, "chartCalendar");
};

/** sort：0 正序；1 倒序；接口默认倒序=1 */
const sortValue = ref(1);
/** el-select 展示用：默认 null => 显示 placeholder「发布时间」 */
const sortModel = ref(null);

const resourceLibrarySortPopperOptions = {
	modifiers: [
		{ name: "preventOverflow", options: { mainAxis: false, altAxis: false } },
		{ name: "flip", enabled: false }
	]
};

const toggleSortPrefix = () => {
	sortValue.value = sortValue.value === 1 ? 0 : 1;
	sortModel.value = sortValue.value;
	handleSortChange();
};

const handleSortChange = () => {
	if (sortModel.value === 0 || sortModel.value === 1) {
		sortValue.value = sortModel.value;
	}
	handleGetPageQuery();
};

// 搜索
const kewword = ref("");
const handleSearch = async () => {
	currentPage.value = 1;
	handleGetPageQuery();
};

const loading = ref(false);

const escapeHtml = (text) => {
	return String(text ?? "")
		.replace(/&/g, "&amp;")
		.replace(/</g, "&lt;")
		.replace(/>/g, "&gt;")
		.replace(/"/g, "&quot;")
		.replace(/'/g, "&#39;");
};

const escapeRegExp = (text) => {
	return String(text ?? "").replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
};

const highlightRiskText = (text) => {
	const safeText = escapeHtml(text);
	const keyword = (kewword.value || "").trim();
	if (!keyword) return safeText;
	const pattern = new RegExp(`(${escapeRegExp(keyword)})`, "gi");
	return safeText.replace(pattern, `<span class="risk-keyword-highlight">$1</span>`);
};

const formatRiskSourceLine = (row) => {
	const origin = String(row?.origin ?? "").trim();
	const typeName = String(row?.typeName ?? "").trim();
	const time = String(row?.time ?? "").trim();
	const left = typeName ? `${origin}·${typeName}` : origin;
	if (left && time) return `${left}  ${time}`;
	return left || time;
};

// 风险信号总数
const totalNum = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const pageScrollRef = ref(null);

const scrollToTop = async () => {
	await nextTick();
	if (pageScrollRef.value) {
		pageScrollRef.value.scrollTop = 0;
	}
};
// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
	scrollToTop();
	handleGetPageQuery();
};

// 按条件分页查询风险信号信息（POST /api/riskSignal/PageLimit）
const handleGetPageQuery = async () => {
	const stripAll = (list, allLabel) => (Array.isArray(list) ? list.filter((x) => x !== allLabel) : []);
	// 选中「全部xxx」时，传空数组表示不按该条件过滤（与之前未勾选时语义一致）
	const riskType = stripAll(selectedRiskTypeModel.value, RISK_FILTER_ALL_TYPE);
	const srcCountryList = stripAll(selectedRiskSourceModel.value, RISK_FILTER_ALL_SOURCE);
	const riskLevel = stripAll(selectedRiskDegreeModel.value, RISK_FILTER_ALL_LEVEL);
	const domainIds = stripAll(selectedAreaModel.value, RISK_FILTER_ALL_AREA);
	const timeFilters = stripAll(selectedTimeModel.value, Time_FILTER_ALL_SOURCE);

	// 发布时间筛选统一传 day（后端：全部时间=900000，近一年=365，其它同理）
	const getDayFromTimeFilter = () => {
		// 选中「全部时间」或未选具体时间 → 走全量
		if (!timeFilters.length) return 900000;
		const getDaysById = (id) => {
			if (id === TIME_FILTER_1M) return 30;
			if (id === TIME_FILTER_3M) return 90;
			if (id === TIME_FILTER_6M) return 180;
			if (id === TIME_FILTER_1Y) return 365;
			return null;
		};
		// 多选：以最大时间窗为准（如 近一月 + 近一年 => 365）
		const days = (timeFilters || [])
			.map((id) => getDaysById(id))
			.filter((x) => typeof x === "number" && !Number.isNaN(x));
		return days.length ? Math.max(...days) : 900000;
	};
	const day = getDayFromTimeFilter();

	let params;
	if (activeProcessStatusId.value === -1) {
		params = {
			riskType,
			countryId: srcCountryList,
			domainIds,
			directionId: [],
			riskLevel,
			day,
			sort: sortValue.value,

			keyWord: kewword.value,
			pageNum: currentPage.value - 1,
			pageSize: pageSize.value
		};
	} else {
		params = {
			riskType,
			countryId: srcCountryList,
			domainIds,
			directionId: [],
			riskLevel,
			dealStatus: activeProcessStatusId.value,
			day,
			sort: sortValue.value,

			keyWord: kewword.value,
			pageNum: currentPage.value - 1,
			pageSize: pageSize.value
		};
	}

	try {
		loading.value = true;
		const res = await getPageQuery(params);
		console.log("按条件查询", res);
		if (res.code === 200 && res.data) {
			const d = res.data;
			const content = Array.isArray(d.content) ? d.content : [];
			totalNum.value = Number(d.totalElements ?? d.total ?? content.length) || 0;
			riskList.value = content.map((item, i) => {
				const stableId = item.id ?? item.riskId ?? item.riskSignalId;
				const title = item.title ?? item.titleZh ?? "";
				const publishRaw = item.publishDate ?? item.time ?? "";
				const typeName = item.typeName ?? item.type ?? item.modle ?? item.module ?? "";
				return {
					id: stableId != null ? stableId : null,
					rowKey:
						stableId != null
							? String(stableId)
							: `p${currentPage.value}-i${i}-${String(publishRaw)}-${String(title)}`,
					title,
					origin: item.orgName != null && String(item.orgName).trim() !== "" ? String(item.orgName).trim() : "",
					typeName,
					category: String(typeName).trim(),
					time: formatRiskPublishDisplay(publishRaw) || String(publishRaw || ""),
					dsc: item.contentZh ?? item.summary ?? item.description ?? "",
					tag: parseRiskSignalTagList(item),
					risktype: item.riskLevel ?? item.level ?? "",
					direction: item.direction == null || item.direction === "" ? "" : item.direction,
					pic: item.orgLogo || ""
				};
			});
		} else {
			riskList.value = [];
			totalNum.value = 0;
		}
	} catch (error) {
		console.error("按条件查询error", error);
		riskList.value = [];
		totalNum.value = 0;
	} finally {
		loading.value = false;
	}
};

const handleGetRiskTypes = async () => {
	try {
		const res = await getRiskTypes();
		if (res && res.code === 200 && Array.isArray(res.data)) {
			riskTypeOptions.value = res.data
				.map((x) => ({ code: String(x?.code ?? "").trim(), name: String(x?.name ?? "").trim() }))
				.filter((x) => x.code && x.name);
		} else {
			riskTypeOptions.value = [];
		}
	} catch (error) {
		console.error("获取风险类型字典 error", error);
		riskTypeOptions.value = [];
	}
};

const handleGetRiskCountryList = async () => {
	try {
		const res = await listRiskCountry();
		if (res && res.code === 200 && Array.isArray(res.data)) {
			riskSourceOptions.value = res.data
				.map((x) => ({ code: String(x?.code ?? "").trim(), name: String(x?.name ?? "").trim() }))
				.filter((x) => x.code && x.name);
		} else {
			riskSourceOptions.value = [];
		}
	} catch (error) {
		console.error("获取风险来源国家字典 error", error);
		riskSourceOptions.value = [];
	}
};

watch(
	() => route.query[OPEN_FIRST_RISK_DETAIL_QUERY_KEY],
	async (v) => {
		if (v !== "1") {
			return;
		}
		await nextTick();
		await consumeOpenFirstDetailFromQuery();
	}
);

onMounted(async () => {
	handleCleandarChart();
	handleGetHylyList();
	handleGetRiskCountryList();
	handleGetRiskTypes();
	handleGetPageQuery();
	nextTick();
	consumeOpenFirstDetailFromQuery();
});
</script>

<style lang="scss" scoped>
:deep(.el-input__wrapper) {
	box-shadow: none;
}

.risk-source-checkbox-group :deep(.el-checkbox__label) {
	display: inline-block;
	max-width: 8em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

.risk-type-checkbox-group :deep(.el-checkbox__label) {
	display: inline-block;
	max-width: 8em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

.home-wrapper {
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow-y: auto;
	background: rgba(248, 249, 250, 1);

	.home-main {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background-size: 100% 100%;

		.home-main-center {
			margin-top: 16px;

			.center-center {
				margin: 0 auto;
				margin-top: 24px;
				width: 1600px;
				height: 288px;
				border-radius: 10px;
				box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
				background: rgba(255, 255, 255, 1);

				.center-header {
					display: flex;
					justify-content: space-between;

					.center-header-left {
						margin-left: 30px;
						display: flex;
						margin-top: 15px;

						.iconstyle {
							width: 27px;
							height: 24px;
							margin-top: 3px;
						}

						.center-header-title {
							margin-left: 10px;
							font-size: 24px;
							font-weight: 700;
							line-height: 32px;
						}
					}

					.center-header-right {
						margin-top: 20px;
						margin-right: 36px;
						width: 118px;
						height: 36px;
						border-radius: 6px;
						background-color: rgba(5, 95, 194, 1);
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						cursor: pointer;

						.img {
							width: 14px;
							height: 14px;
						}

						.text {
							margin-left: 8px;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							color: rgba(255, 255, 255, 1);
						}
					}
				}

				.center-middle {
					display: flex;

					.center-middle-left {
						display: flex;
						flex-direction: column;

						.lineitem {
							display: flex;
							justify-content: space-between;

							.item {
								margin-left: 61px;
								margin-top: 28px;
								margin-bottom: 3px;
								width: 111px;
								height: 66px;
								display: flex;
								flex-direction: column;
								justify-content: flex-end;

								.top {
									display: flex;
									justify-content: flex-end;
									padding-right: 2px;

									.dot {
										width: 6px;
										height: 6px;
										margin-top: 9px;
										margin-right: 7px;
										border-radius: 3px;
									}

									.text1 {
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
										color: rgba(59, 65, 75, 1);
										text-align: right;
										white-space: nowrap;
									}
								}

								.text2 {
									font-size: 32px;
									font-weight: 700;
									line-height: 42px;
									text-align: right;
									/* 强制不换行 */
									white-space: nowrap;
									// 让右边界固定在块内，超长只会向左溢出（且不省略、完整显示）
									width: 100%;
									direction: rtl;
								}

								.text2-inner {
									direction: ltr;
									unicode-bidi: isolate;
								}
							}
						}
					}

					.center-middle-right {
						width: 1159px;
						height: 189px;
						box-sizing: border-box;
						border: 1px solid rgba(234, 236, 238, 1);
						border-radius: 4px;
						margin-top: 16px;
						margin-left: 61px;
					}
				}
			}
		}

		.home-main-footer {
			// width: 100%;
			// height: 1059px;



			.home-main-footer-main {
				width: 1600px;
				margin: 16px auto;
				/* 意思：上30px / 左右auto / 下300px */
				box-sizing: border-box;
				// padding: 20px;
				display: flex;

				.left {
					width: 360px;
					margin-bottom: 24px;
					border-radius: 10px;
					padding-bottom: 24px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
					background: rgba(255, 255, 255, 1);
					height: 100%;

					.select-box {
						margin-top: 16px;

						.header {
							display: flex;
							gap: 17px;
							position: relative;

							.icon {
								margin-top: 4px;
								width: 8px;
								height: 16px;
								background: var(--color-main-active);
								border-radius: 0 4px 4px 0;
							}

							.title {
								height: 24px;
								color: var(--color-main-active);
								font-family: "Source Han Sans CN";
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
								letter-spacing: 1px;
								text-align: left;
							}

							&.risk-source-header {
								padding-right: 31px;
								/* 16 + 15，给箭头留空间 */
							}

							.risk-source-header__toggle {
								position: absolute;
								right: 15px;
								top: 50%;
								transform: translateY(-50%);
								width: 16px;
								height: 16px;
								cursor: pointer;
								display: block;
							}
						}

						.select-main {
							margin-left: 25px;
							margin-top: 12px;

							.checkbox-group {
								display: grid;
								grid-template-columns: repeat(2, 160px);
								gap: 8px 4px;

								:deep(.all-checkbox) {
									width: 160px;
									height: 24px;
									margin: 0;
								}

								:deep(.filter-checkbox) {
									width: 160px;
									height: 24px;
									margin-right: 0 !important;
								}

								:deep(.el-checkbox__label) {
									font-family: "Source Han Sans CN", sans-serif;
									font-weight: 400;
									font-size: 16px;
									line-height: 24px;
									letter-spacing: 0px;
									text-align: justify;
									color: rgb(95, 101, 108);
								}
							}
						}
					}
				}

				.right {
					margin-left: 16px;
					margin-bottom: 24px;
					width: 1224px;
					position: relative;
					display: flex;
					flex-direction: column;

					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					background: rgba(255, 255, 255, 1);

					.right-header {
						height: 60px;
						display: flex;
						justify-content: space-between;
						border-bottom: 1px solid rgba(234, 236, 238, 1);

						.header-left {
							display: flex;
							margin-left: 24px;
							gap: 36px;

							.btn-left {
								display: flex;
								height: 60px;
								cursor: pointer;
								align-items: center;

								.btn-text {
									font-size: 18px;
									font-weight: 400;
									line-height: 24px;
									color: rgba(59, 65, 75, 1);
									text-align: center;
								}

								.btntextactive {
									font-weight: 700;
									color: rgba(5, 95, 194, 1);
								}
							}

							.btnleftactive {
								border-bottom: 2px solid rgba(5, 95, 194, 1);
							}
						}

						.header-right {
							display: flex;
							margin-right: 25px;
							gap: 12px;
							align-items: center;

							.searchbox {
								display: flex;

								width: 300px;
								height: 32px;
								border-radius: 4px;
								border: 1px solid rgba(230, 231, 232, 1);
								background: rgba(255, 255, 255, 1);
								box-sizing: border-box;

								.search-btn {
									width: 16px;
									height: 16px;
									margin: 8px;
									cursor: pointer;
									background: url("./assets/images/search-icon.png");
								}
							}

							.select-box {
								width: 120px;
								height: 32px;
								box-sizing: border-box;

								.resource-library-sort-select {
									:deep(.el-select__wrapper) {
										height: 32px;
										min-height: 32px;
										border-radius: 4px;
									}
								}

								.resource-library-sort-prefix-img {
									width: 6.72px;
									height: 14px;
								}
							}
						}
					}

					.right-main {
						width: 1224px;
						flex: 1;

						padding-left: 24px;
						padding-top: 6px;
						min-height: 520px;

						.itemlist {
							padding-left: 0px;
							padding-top: 16px;
							padding-bottom: 16px;
							width: 1176px;
							display: flex;

							flex-direction: column;
							border-bottom: 1px solid rgba(234, 236, 238, 1);

							.box-title {
								height: 28px;
								display: flex;
								justify-content: space-between;

								.risktitle {
									max-width: 857px;
									font-size: 18px;
									font-weight: 700;
									line-height: 24px;
									color: rgba(59, 65, 75, 1);
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									flex: 0 1 auto;

									:deep(.risk-keyword-highlight) {
										background: rgba(255, 204, 0, 0.35);
										color: inherit;
									}
								}

								.risktype {
									height: 28px;
									padding: 0 8px;
									border-radius: 20px;
									font-size: 16px;
									font-weight: 400;
									line-height: 28px;
									display: flex;
									justify-content: center;
									align-items: center;
									gap: 6px;
									flex: 0 0 auto;

									.icon {
										width: 4px;
										height: 4px;
										border-radius: 2px;
									}

									.icon--lv1 {
										background: rgb(206, 79, 81);
									}

									.icon--lv2 {
										background: rgba(250, 140, 22, 1);
									}

									.icon--lv3 {
										background: rgba(212, 177, 6, 1);
									}

									.icon--lv4 {
										background: rgba(82, 196, 26, 1);
									}

									.icon--lv5 {
										background: rgba(22, 119, 255, 1);
									}
								}

								.risktype--lv1 {
									background: rgba(255, 241, 240, 1);
									color: rgb(206, 79, 81);
								}

								.risktype--lv2 {
									background: rgba(255, 247, 230, 1);
									color: rgba(250, 140, 22, 1);
								}

								.risktype--lv3 {
									background: rgba(254, 255, 230, 1);
									color: rgba(212, 177, 6, 1);
								}

								.risktype--lv4 {
									background: rgba(246, 255, 237, 1);
									color: rgba(82, 196, 26, 1);
								}

								.risktype--lv5 {
									background: rgba(230, 244, 255, 1);
									color: rgba(22, 119, 255, 1);
								}
							}

							.box-source {
								margin-top: 6px;
								display: flex;
								flex-direction: row;
								align-items: center;
								height: 24px;
								gap: 10px;

								.source-pic {
									width: 16px;
									height: 16px;
								}

								.source-text {
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									color: rgba(95, 101, 108, 1);
								}
							}

							.desc-box {
								margin-top: 9px;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								color: rgba(59, 65, 75, 1);
								text-align: justify;

								:deep(.risk-keyword-highlight) {
									background: rgba(255, 204, 0, 0.35);
									color: inherit;
								}
							}

							.tag-box {
								height: 28px;
								margin-top: 11px;
								display: flex;
								flex-direction: row;
								gap: 8px;


							}

							&.itemlist--clickable {
								cursor: pointer;
							}
						}
					}

					.right-footer {
						display: flex;
						height: 90px;
						padding-top: 28px;
						justify-content: space-between;

						.footer-left {
							color: rgba(59, 65, 75, 1);
							font-family: "Source Han Sans CN";
							font-size: 14px;
							font-weight: 400;
							line-height: 18px;
							margin-left: 26px;
							margin-top: 4px;
						}

						.footer-right {
							margin-right: 58px;
						}
					}

					.right-empty {
						flex: 1;
						min-height: 520px;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 24px;

						:deep(.el-empty__image) {
							margin-bottom: 0;
						}

						.right-el-empty {
							padding: 0;
							margin: 0;
						}
					}
				}
			}
		}
	}
}


.risk-signal-detail-dialog__title {
	font-family: 'Source Han Sans CN';
	font-weight: 700;
	font-size: 24px;
	line-height: 36px;
	letter-spacing: 0px;
	text-align: justify;
	color: rgba(59, 65, 75, 1);
}

.risk-signal-detail-dialog__origin {
	font-family: 'Source Han Sans CN', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: justify;
	color: rgb(206, 79, 81);
	background-color: rgb(250, 237, 237);
	width: fit-content;
	padding: 0px 12px;
	border-radius: 20px;
}

.risk-signal-detail-dialog__directions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.risk-signal-detail-dialog__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-left: 12px;
}

.risk-signal-detail-dialog__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-family: 'Source Han Sans CN';
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: left;
	color: rgb(59, 65, 75);
	justify-content: space-between;
}

.header-icon {
	width: 32px;
	height: 32px;

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

.risk-signal-detail-dialog_relation {
	width: 100%;
	max-width: 100%;
	height: 48px;
	box-sizing: border-box;
	margin-top: 24px;
	background-color: rgb(246, 250, 255);
	border: 1px solid rgb(231, 243, 255);
	border-radius: 50px;
	display: flex;
	justify-content: space-between;
	cursor: pointer;

	.relation {
		height: 36px;
		display: flex;
		flex-direction: row;

		.logo {
			width: 36px;
			height: 36px;
			margin-top: 6px;
			margin-left: 7px;
			display: block;

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

		.name-text {
			color: rgb(5, 95, 194);
			font-family: 'Source Han Sans CN';
			font-weight: 700;
			font-size: 16px;
			line-height: 24px;
			letter-spacing: 1px;
			text-align: left;
			margin-top: 12px;
			margin-left: 8px;
		}

		.content-text {
			color: rgb(5, 95, 194);
			font-family: 'Source Han Sans CN';
			font-weight: 400;
			font-size: 16px;
			line-height: 24px;
			letter-spacing: 0px;
			text-align: left;
			margin-top: 12px;
		}

	}

	.right-arrow {
		width: 12px;
		height: 11px;
		margin-top: 19px;
		margin-right: 18px;

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

.risk-signal-detail-dialog__desc {
	height: 360px;
	color: rgb(95, 101, 108);
	font-family: 'Source Han Sans CN';
	font-weight: 400;
	font-size: 16px;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: justify;
	margin-top: 24px;
	padding-left: 12px;
	padding-right: 12px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 12;
	line-clamp: 12;
	overflow: hidden;
	text-overflow: ellipsis;
}

.risk-signal-detail-dialog__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
</style>

<style lang="scss">
/* el-dialog 默认 teleport 到 body，壳子样式需非 scoped */
/* 遮罩层内水平垂直居中（勿对 .el-dialog 写 margin:0 !important，会顶到左上角） */
.risk-signal-detail-modal.el-overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden !important;
	background-color: rgba(0, 0, 0, 0.25) !important;
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
}

.risk-signal-detail-modal .el-overlay-dialog {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden !important;
}

/* 覆盖 EP 默认 el-dialog 的 padding:12px，仅去掉顶部 */
.el-dialog.is-align-center.risk-signal-detail-dialog,
.risk-signal-detail-dialog.el-dialog {
	position: relative;
	width: 1280px !important;
	max-width: calc(100vw - 32px);
	height: 750px;
	max-height: calc(100vh - 32px);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	overflow: hidden !important;
	box-sizing: border-box;
	padding: 0 12px 12px 12px !important;
}

.risk-signal-detail-dialog.el-dialog::-webkit-scrollbar,
.risk-signal-detail-dialog .el-dialog__body::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.risk-signal-detail-dialog.el-dialog,
.risk-signal-detail-dialog .el-dialog__body {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* 底部分隔线：原 1278px，左右各再伸出 16px */
.el-dialog.is-align-center.risk-signal-detail-dialog::after,
.risk-signal-detail-dialog.el-dialog::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 88px;
	width: calc(1278px + 24px);
	max-width: none;
	height: 1px;
	background-color: rgb(234, 236, 238);
	pointer-events: none;
	z-index: 5;
}

/* 详情弹窗标题「风险等级」颜色：与 `@/components/base/riskSignal` 等级色一致 */
.risk-signal-detail-dialog .el-dialog__header .risk-signal-detail-dialog__level,
.risk-signal-detail-dialog__level {
	font-family: "YouSheBiaoTiHei", sans-serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 39px;
	letter-spacing: 0;
	text-align: left;
}

.risk-signal-detail-dialog__level--lv1 {
	color: rgb(206, 79, 81) !important;
}

.risk-signal-detail-dialog__level--lv2 {
	color: rgba(250, 140, 22, 1) !important;
}

.risk-signal-detail-dialog__level--lv3 {
	color: rgba(212, 177, 6, 1) !important;
}

.risk-signal-detail-dialog__level--lv4 {
	color: rgba(82, 196, 26, 1) !important;
}

.risk-signal-detail-dialog__level--lv5 {
	color: rgba(22, 119, 255, 1) !important;
}

.risk-signal-detail-dialog .el-dialog__footer {
	padding: 0 !important;
	margin: 0 !important;
	border-top: none !important;
	height: 0;
	min-height: 0;
	overflow: visible;
	position: static;
}

.risk-signal-detail-dialog__action-btn {
	position: absolute;
	right: 53px;
	bottom: 26px;
	width: 360px !important;
	height: 36px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 6px !important;
	background-color: rgb(5, 95, 194) !important;
	border-color: rgb(5, 95, 194) !important;
	color: rgb(255, 255, 255) !important;
	font-family: 'Source Han Sans CN';
	font-weight: 400 !important;

	font-size: 16px !important;
	line-height: 24px !important;
	letter-spacing: 0px !important;
	text-align: center !important;

}



.risk-signal-detail-dialog .el-dialog__header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	border-bottom: none;
	padding: 8px 0px;
	position: relative;
}

.risk-signal-detail-dialog .header-icon {
	margin-right: 6px;
}

/* 顶部分隔线：替代原 header 底边框，宽度与底部分隔线一致（左右各多 16px） */
.risk-signal-detail-dialog .el-dialog__header::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: calc(1278px + 32px);
	max-width: none;
	height: 1px;
	background-color: rgb(234, 236, 238);
	pointer-events: none;
	z-index: 1;
}

.risk-signal-detail-dialog .el-dialog__body {
	flex: 1;
	min-height: 0;
	min-width: 0;
	overflow: hidden !important;

	box-sizing: border-box;
	padding-left: 22px;
	padding-right: 22px;
	padding-top: 34px;
}

/* 详情请求中 v-loading 遮罩区域（与列表一致有足够高度以便居中） */
.risk-signal-detail-dialog .risk-signal-detail-dialog__main {
	position: relative;
	width: 100%;
	min-height: 480px;
	box-sizing: border-box;
}

.risk-signal-detail-dialog .risk-signal-detail-dialog__directions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* 避免内容撑出横向滚动；长文换行（不出现滚动条） */
.risk-signal-detail-dialog .risk-signal-detail-dialog__title,
.risk-signal-detail-dialog .risk-signal-detail-dialog__meta,
.risk-signal-detail-dialog .risk-signal-detail-dialog__body,
.risk-signal-detail-dialog .risk-signal-detail-dialog__directions {
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.risk-signal-detail-dialog .risk-signal-detail-dialog__desc {
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 14;
	line-clamp: 14;
	overflow: hidden;
	text-overflow: ellipsis;
}

.risk-signal-detail-dialog .risk-signal-detail-dialog_relation {
	max-width: 100%;
	width: 100% !important;
	box-sizing: border-box;
}

.risk-signal-detail-dialog .risk-signal-detail-dialog__header-badge-close {
	position: absolute;
	right: 61px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	border-radius: 8px;
	background-color: rgba(206, 79, 81, 1);
	color: rgba(255, 255, 255, 1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.risk-signal-detail-dialog .risk-signal-detail-dialog__header-badge-close :deep(svg) {
	width: 12px;
	height: 12px;
}

.risk-signal-detail-dialog .risk-signal-detail-dialog__header-badge-close :deep(svg path) {
	fill: rgba(255, 255, 255, 1) !important;
	stroke: rgba(255, 255, 255, 1) !important;
}

.risk-signal-detail-dialog .risk-signal-detail-dialog__read-indicator {
	position: absolute;
	right: 61px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.risk-signal-detail-dialog .risk-signal-detail-dialog__header-badge-close {
	position: static;
	transform: none;
}

.risk-signal-detail-dialog .risk-signal-detail-dialog__header-badge-read {
	width: 16px;
	height: 16px;
	display: block;
}

.risk-signal-detail-dialog .read {
	font-family: 'Source Han Sans CN';
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: left;
	color: rgb(95, 101, 108);
}
</style>