<template>
  <StepPanelShell title="GIS 规则判定" :snapshot="snapshot">
    <template #actions><el-button v-if="snapshot.status === 'failed'" type="danger" plain @click="$emit('retry')">重试规则</el-button></template>
    <section class="node-section">
      <h3>规则集</h3>
      <div class="rule-list"><div v-for="rule in rules" :key="rule.rule_id"><strong>{{ rule.rule_name }}</strong><code>{{ rule.input_field }} {{ rule.operator }} {{ rule.threshold }}</code><el-tag size="small" type="success" effect="plain">{{ rule.rule_version }}</el-tag></div></div>
    </section>
    <section class="node-section">
      <div class="section-heading"><h3>判定记录</h3><span>{{ hits.length }} 项</span></div>
      <el-table :data="hits" size="small" max-height="320" row-key="alarm_id">
        <el-table-column prop="scene" label="场景" min-width="130" />
        <el-table-column label="输入/阈值" min-width="190"><template #default="scope"><span>{{ compact(scope.row.input_values) }}</span><small class="table-note">{{ scope.row.threshold }}</small></template></el-table-column>
        <el-table-column label="结论" width="100"><template #default="scope"><el-tag :type="scope.row.decision === 'hit' ? 'danger' : 'info'" size="small">{{ scope.row.decision === 'hit' ? '命中' : '抑制' }}</el-tag></template></el-table-column>
        <el-table-column label="规则依据" min-width="180"><template #default="scope">{{ (scope.row.rule_hits || []).join(' / ') || '-' }}</template></el-table-column>
        <el-table-column label="操作" width="80"><template #default="scope"><el-button link type="primary" @click="$emit('locate', { type: 'alarm', id: scope.row.alarm_id })">定位</el-button></template></el-table-column>
      </el-table>
    </section>
    <section class="node-section"><h3>空间图层</h3><div class="tag-list"><el-tag v-for="layer in visual.spatial_layers || []" :key="layer" type="info" effect="plain">{{ layer }}</el-tag></div></section>
  </StepPanelShell>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { safeObject, type Row, type StepSnapshot } from "../../../types/demo-run";
import StepPanelShell from "../common/StepPanelShell.vue";
const props = defineProps<{ snapshot: StepSnapshot }>();
defineEmits<{ retry: []; locate: [entity: { type: string; id: string }] }>();
const visual = computed(() => safeObject(props.snapshot.visual_payload));
const rules = computed<Row[]>(() => Array.isArray(visual.value.rules) ? visual.value.rules : []);
const hits = computed<Row[]>(() => Array.isArray(visual.value.rule_hits) ? visual.value.rule_hits : []);
function compact(value: unknown) { return Object.entries(safeObject(value)).slice(0, 2).map(([key, item]) => `${key}:${item}`).join('，') || '-'; }
</script>
