<template>
	<el-dialog
		v-model="visible"
		class="risk-signal-detail-dialog"
		modal-class="risk-signal-detail-modal"
		width="1280px"
		align-center
		:z-index="zIndex"
		:show-close="true"
		destroy-on-close
		@closed="handleClosed"
	>
		<template #header>
			<img class="header-icon" src="@/views/viewRiskSignal/assets/images/risk-icon.png" alt="" />
			<span class="risk-signal-detail-dialog__level risk-signal-detail-dialog__level--lv1">特别重大风险</span>
		</template>
		<div class="risk-signal-detail-dialog__body">
			<span class="risk-signal-detail-dialog__title">扩大实体清单制裁范围，对中企子公司实施同等管制</span>
			<div class="risk-signal-detail-dialog__origin">政策法规打压类风险</div>
			<div class="risk-signal-detail-dialog__meta">
				<span>2025年11月10日 16:14·美国商务部</span>
				<div class="risk-signal-detail-dialog__tags">
					<AreaTag :key="'overview-risk-dialog-tag-bio'" tagName="生物科技">生物科技</AreaTag>
					<AreaTag :key="'overview-risk-dialog-tag-ai'" tagName="人工智能">人工智能</AreaTag>
				</div>
			</div>
		</div>
		<div class="risk-signal-detail-dialog_relation">
			<div class="relation">
				<div class="logo">
					<img src="@/views/viewRiskSignal/assets/images/logo.png" alt="" />
				</div>
				<div class="name-text">总统行政令——</div>
				<div class="content-text">关于调整进口木材、锯材及其衍生产品进入美国的相关修正案</div>
			</div>
			<div class="right-arrow">
				<img src="@/views/viewRiskSignal/assets/images/right-arrow.png" alt="" />
			</div>
		</div>
		<div class="risk-signal-detail-dialog__desc">
			<p class="risk-signal-detail-dialog__desc-p">
				任何被列入美国出口管制“实体清单”或“军事最终用户清单”的企业，如果其直接或间接持有另一家公司50%或以上的股权，那么这家被控股的公司也将自动受到与清单上母公司同等的出口管制限制
			</p>
			<p class="risk-signal-detail-dialog__desc-p">
				任何被列入美国出口管制“实体清单”或“军事最终用户清单”的企业，如果其直接或间接持有另一家公司50%或以上的股权，那么这家被控股的公司也将自动受到与清单上母公司同等的出口管制限制
			</p>
		</div>
		<template #footer>
			<el-button type="primary" class="risk-signal-detail-dialog__action-btn" @click="visible = false">
				确定风险
			</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
import AreaTag from "@/components/base/AreaTag/index.vue";

defineProps({
	/** 与遮罩、弹窗层级一致，避免被大屏/轮播盖住 */
	zIndex: {
		type: Number,
		default: 20000
	}
});

const emit = defineEmits(["closed"]);

const visible = defineModel({ type: Boolean, default: false });

function handleClosed() {
	emit("closed");
}
</script>

<style lang="scss" src="./risk-signal-overview-detail-dialog.scss"></style>
