<template>
  <StepPanelShell title="航线任务下发" :snapshot="snapshot">
    <template #actions>
      <el-button type="primary" plain :disabled="!mission.mission_id" @click="$emit('locate', { type: 'uav', id: uav.uav_id })">定位无人机</el-button>
      <el-button v-if="snapshot.status === 'failed'" type="danger" plain @click="$emit('retry')">重新下发</el-button>
    </template>
    <section class="node-section">
      <div class="section-heading"><h3>航线执行</h3><el-tag :type="statusTag(mission.status)">{{ statusLabel(mission.status) }}</el-tag></div>
      <el-progress :percentage="Number(visual.route_progress || 0)" :stroke-width="12" />
      <DetailGrid :items="missionDetails" />
    </section>
    <section class="node-section">
      <h3>无人机状态</h3>
      <DetailGrid :items="uavDetails" />
    </section>
    <section class="node-section">
      <h3>下发与飞行步骤</h3>
      <div class="process-strip">
        <div v-for="step in visual.dispatch_steps || []" :key="step.index" :class="`process-${step.status}`">
          <i>{{ step.index }}</i><span>{{ step.name }}</span><small>{{ statusLabel(step.status) }}</small>
        </div>
      </div>
    </section>
    <section class="node-section receipt-row">
      <h3>最新回执</h3>
      <span>{{ receipt.code }} / {{ receipt.message }}</span><time>{{ receipt.received_at }}</time>
    </section>
  </StepPanelShell>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { safeObject, statusLabel, statusTag, 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 mission = computed(() => safeObject(visual.value.mission));
const uav = computed(() => safeObject(visual.value.uav));
const receipt = computed(() => safeObject(visual.value.latest_receipt));
const missionDetails = computed(() => [
  { label: "航线任务", value: mission.value.mission_id }, { label: "外部任务", value: mission.value.external_mission_id },
  { label: "航线长度", value: `${mission.value.route_length_km || 0}km` }, { label: "当前里程", value: mission.value.current_mileage },
  { label: "预计时长", value: `${mission.value.estimated_minutes || 0}分钟` }, { label: "厂商平台", value: mission.value.vendor }
]);
const uavDetails = computed(() => [
  { label: "无人机", value: `${uav.value.uav_id || '-'} / ${uav.value.model || '-'}` }, { label: "载荷", value: uav.value.payload },
  { label: "电量", value: `${uav.value.battery_percent || 0}%` }, { label: "链路质量", value: `${uav.value.link_quality || 0}%` },
  { label: "RTK", value: uav.value.rtk_status }, { label: "在线", value: uav.value.online }
]);
</script>
