<template>
  <StepPanelShell title="巡检任务创建" :snapshot="snapshot">
    <template #actions>
      <el-button type="primary" plain :disabled="!task.task_id" @click="$emit('locate', { type: 'task', id: task.task_id })">定位区段</el-button>
      <el-button v-if="snapshot.status === 'failed'" type="danger" plain @click="$emit('retry')">重试节点</el-button>
    </template>
    <section class="node-section">
      <h3>任务参数</h3>
      <DetailGrid :items="taskDetails" />
    </section>
    <section class="node-section split-section">
      <div>
        <h3>飞行要求</h3>
        <DetailGrid :items="flightDetails" />
      </div>
      <div>
        <h3>采集要求</h3>
        <div class="requirement-list">
          <div v-for="item in visual.capture_requirements || []" :key="item.type">
            <strong>{{ resourceLabel(item.type) }}</strong>
            <span>{{ item.quality }}</span>
            <el-tag size="small" type="success" effect="plain">必需</el-tag>
          </div>
        </div>
      </div>
    </section>
    <section class="node-section">
      <h3>识别场景</h3>
      <div class="tag-list"><el-tag v-for="scene in visual.scene_set || []" :key="scene" effect="plain">{{ scene }}</el-tag></div>
    </section>
  </StepPanelShell>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { safeObject, type StepSnapshot } from "../../../types/demo-run";
import DetailGrid from "../common/DetailGrid.vue";
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 task = computed(() => safeObject(visual.value.task));
const flight = computed(() => safeObject(visual.value.flight_requirements));
const taskDetails = computed(() => [
  { label: "任务编号", value: task.value.task_id }, { label: "任务名称", value: task.value.task_name },
  { label: "优先级", value: task.value.priority }, { label: "线路/行别", value: `${task.value.line_id || '-'} / ${task.value.direction || '-'}` },
  { label: "里程范围", value: `${task.value.mileage_start || '-'} - ${task.value.mileage_end || '-'}` }, { label: "巡检长度", value: `${task.value.distance_km || 0}km` },
  { label: "计划开始", value: task.value.planned_start_time }, { label: "计划结束", value: task.value.planned_end_time }
]);
const flightDetails = computed(() => [
  { label: "飞行高度", value: `${flight.value.flight_height_m || 0}m` }, { label: "飞行速度", value: `${flight.value.flight_speed_mps || 0}m/s` },
  { label: "返航电量", value: `${flight.value.battery_return_threshold || 0}%` }, { label: "影像重叠率", value: `${flight.value.image_overlap || 0}%` }
]);
function resourceLabel(value: string) {
  return ({ image: "可见光", thermal: "红外", tif: "地理栅格", pointcloud: "点云" } as Record<string, string>)[value] || value;
}
</script>
