<script setup lang="ts">
/**
 * 指令接收详情 — 防汛指令接收与处理
 *
 * 展示防汛指令的完整内容，提供接收确认和退回操作，
 * 接收后可填写备注并确认完成。
 * DESIGN: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px.
 */
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showSuccessToast, showConfirmDialog, showToast } from 'vant'

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

// ── 类型 ──
type InstructionLevel = 'urgent' | 'normal'
interface InstructionDetail {
  id: number
  title: string
  level: InstructionLevel
  from: string
  time: string
  deadline?: string
  content: string
  contact: string
  phone: string
  attachments?: string[]
}

// ── 状态 ──
const loading = ref(true)
const accepted = ref(false)
const remark = ref('')
const showDeclineDialog = ref(false)
const declineReason = ref('')
const actionLoading = ref(false)

// ── 映射 ──
const levelMap: Record<InstructionLevel, { label: string; color: string }> = {
  urgent: { label: '紧急', color: '#ee0a24' },
  normal: { label: '普通', color: '#1989fa' },
}

// ── 数据 ──
const instruction = ref<InstructionDetail>({
  id: 0,
  title: '',
  level: 'normal',
  from: '',
  time: '',
  content: '',
  contact: '',
  phone: '',
})

const mockDetail: InstructionDetail = {
  id: Number(route.query.id) || 1,
  title: '启动III级防汛应急响应',
  level: 'urgent',
  from: '市防汛指挥部',
  time: '2025-06-15 08:00',
  deadline: '2025-06-15 18:00',
  content:
    '根据市气象台发布的暴雨橙色预警，预计未来6小时内我市将出现大范围强降雨，累计雨量可达80-120毫米。经研究决定，自2025年6月15日08时起启动III级防汛应急响应。\n\n请各相关单位按要求落实以下防汛措施：\n1. 立即启动防汛应急预案，做好人员值班安排；\n2. 对重点区域进行巡查，排查安全隐患；\n3. 确保防汛物资储备充足，设备处于良好状态；\n4. 保持通讯畅通，及时上报汛情信息。',
  contact: '张主任',
  phone: '010-88886666',
  attachments: ['防汛应急预案.pdf', '值班安排表.xlsx'],
}

// ── 方法 ──
async function onAccept() {
  actionLoading.value = true
  await new Promise(resolve => setTimeout(resolve, 500))
  accepted.value = true
  actionLoading.value = false
  showSuccessToast('已接收指令')
}

function onDecline() {
  showDeclineDialog.value = true
}

async function confirmDecline() {
  if (!declineReason.value.trim()) {
    showToast('请填写退回原因')
    return
  }
  await new Promise(resolve => setTimeout(resolve, 500))
  showDeclineDialog.value = false
  showSuccessToast('已退回')
  router.back()
}

async function onComplete() {
  actionLoading.value = true
  await new Promise(resolve => setTimeout(resolve, 500))
  actionLoading.value = false
  showSuccessToast('处理完成')
  router.back()
}

onMounted(async () => {
  await new Promise(resolve => setTimeout(resolve, 300))
  instruction.value = mockDetail
  loading.value = false
})
</script>

<template>
  <div class="page-container">
    <!-- 导航栏 -->
    <van-nav-bar
      title="指令详情"
      left-arrow
      fixed
      placeholder
      @click-left="router.back()"
    />

    <!-- 加载状态 -->
    <van-loading v-if="loading" class="loading-center" size="24" />

    <template v-else>
      <!-- 指令级别标签 -->
      <div class="level-header">
        <span
          class="level-tag"
          :style="{ background: levelMap[instruction.level].color }"
        >
          {{ levelMap[instruction.level].label }}
        </span>
        <span class="level-label">防汛指令</span>
      </div>

      <!-- 基本信息卡片 -->
      <div class="info-card">
        <div class="card-title-row">{{ instruction.title }}</div>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">来源单位</span>
            <span class="info-value">{{ instruction.from }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">发布时间</span>
            <span class="info-value">{{ instruction.time }}</span>
          </div>
          <div v-if="instruction.deadline" class="info-item">
            <span class="info-label">截止时间</span>
            <span class="info-value deadline">{{ instruction.deadline }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">联系人</span>
            <span class="info-value">{{ instruction.contact }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">联系电话</span>
            <span class="info-value">
              <a :href="`tel:${instruction.phone}`">{{ instruction.phone }}</a>
            </span>
          </div>
        </div>
      </div>

      <!-- 指令内容卡片 -->
      <div class="content-card">
        <div class="section-label">指令内容</div>
        <div class="content-text">{{ instruction.content }}</div>
      </div>

      <!-- 附件卡片 -->
      <div v-if="instruction.attachments?.length" class="info-card">
        <div class="section-label">附件</div>
        <div class="attach-list">
          <div
            v-for="(file, i) in instruction.attachments"
            :key="i"
            class="attach-item"
          >
            <van-icon name="description" size="18" color="var(--color-primary)" />
            <span>{{ file }}</span>
          </div>
        </div>
      </div>

      <!-- 接收后备注 -->
      <div v-if="accepted" class="info-card">
        <van-field
          v-model="remark"
          label="备注"
          placeholder="可选填写接收备注"
          type="textarea"
          rows="2"
          autosize
        />
      </div>

      <!-- 操作按钮区 -->
      <div class="action-bar">
        <!-- 未接收状态 -->
        <template v-if="!accepted">
          <van-button
            type="primary"
            block
            round
            size="large"
            :loading="actionLoading"
            @click="onAccept"
          >
            接收指令
          </van-button>
          <van-button
            type="default"
            block
            round
            size="large"
            class="btn-decline"
            @click="onDecline"
          >
            退回
          </van-button>
        </template>
        <!-- 已接收状态 -->
        <template v-else>
          <van-button
            type="success"
            block
            round
            size="large"
            :loading="actionLoading"
            @click="onComplete"
          >
            确认完成
          </van-button>
        </template>
      </div>
    </template>

    <!-- 退回弹窗 -->
    <van-dialog
      v-model:show="showDeclineDialog"
      title="退回指令"
      show-cancel-button
      @confirm="confirmDecline"
    >
      <div class="decline-body">
        <van-field
          v-model="declineReason"
          type="textarea"
          rows="3"
          autosize
          placeholder="请填写退回原因"
        />
      </div>
    </van-dialog>
  </div>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: var(--color-bg-page);
  padding-bottom: 150px;

  :deep(.van-nav-bar) {
    background: var(--color-primary);
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-text-color: #fff;
    --van-nav-bar-icon-color: #fff;
  }
}

.loading-center {
  display: flex;
  justify-content: center;
  padding-top: 160px;
}

// ── 级别头部 ──
.level-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;

  .level-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
  }

  .level-label {
    font-size: 14px;
    color: var(--color-text-secondary);
  }
}

// ── 卡片通用 ──
.info-card,
.content-card {
  margin: 0 12px 10px;
  padding: 16px;
  background: var(--color-bg-card);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.card-title-row {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.5;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-light);
}

// ── 信息网格 ──
.info-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  align-items: center;

  .info-label {
    width: 70px;
    font-size: 13px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
  }

  .info-value {
    font-size: 14px;
    color: var(--color-text-primary);

    &.deadline {
      color: var(--color-danger);
      font-weight: 500;
    }

    a {
      color: var(--color-primary);
    }
  }
}

// ── 段落标签 ──
.section-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 10px;
}

// ── 内容文本 ──
.content-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-regular);
  white-space: pre-wrap;
  word-break: break-all;
}

// ── 附件列表 ──
.attach-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attach-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-bg-page);
  border-radius: 6px;
  font-size: 13px;
  color: var(--color-text-primary);
}

// ── 操作按钮区 ──
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--color-bg-card);
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-decline {
  --van-button-default-color: var(--color-danger) !important;
  --van-button-default-border-color: var(--color-danger) !important;
}

// ── 退回弹窗 ──
.decline-body {
  padding: 12px 16px 0;
}
</style>
