<script setup lang="ts">
/**
 * 指令接收详情
 *
 * 展示防汛指令的详细内容和操作按钮，
 * 支持接收确认和退回操作。
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showSuccessToast, showConfirmDialog } from 'vant'

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

/** 接收状态 */
const accepted = ref(false)
const remark = ref('')

/** 模拟指令详情 */
const instruction = {
  id: 1,
  title: '启动III级防汛应急响应',
  level: 'urgent',
  from: '市防汛指挥部',
  time: '2025-06-15 08:00',
  content: '根据市气象台发布的暴雨橙色预警，预计未来6小时内我市将出现大范围强降雨，累计雨量可达80-120毫米。经研究决定，自2025年6月15日08时起启动III级防汛应急响应。请各相关单位按要求落实防汛措施。',
  contact: '张主任',
  phone: '010-88886666',
}

function onAccept() {
  accepted.value = true
  showSuccessToast('已接收指令')
}

function onDecline() {
  showConfirmDialog({
    title: '退回指令',
    message: '确定要退回该指令吗？请填写退回原因。',
  })
    .then(() => {
      showSuccessToast('已退回')
      router.back()
    })
    .catch(() => {})
}
</script>

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

    <van-cell-group inset>
      <van-cell title="指令标题" :value="instruction.title" />
      <van-cell title="来源单位" :value="instruction.from" />
      <van-cell title="发布时间" :value="instruction.time" />
      <van-cell title="联 系 人" :value="instruction.contact" />
      <van-cell title="联系电话" :value="instruction.phone" />
    </van-cell-group>

    <van-cell-group inset style="margin-top: 12px">
      <van-cell title="指令内容" />
      <div class="content-block">{{ instruction.content }}</div>
    </van-cell-group>

    <van-cell-group v-if="accepted" inset style="margin-top: 12px">
      <van-field
        v-model="remark"
        label="备注"
        placeholder="可选填写接收备注"
        type="textarea"
        rows="2"
        autosize
      />
    </van-cell-group>

    <div class="action-bar">
      <van-button
        v-if="!accepted"
        type="primary"
        block
        round
        @click="onAccept"
      >
        接收指令
      </van-button>
      <van-button
        v-else
        type="success"
        block
        round
        @click="router.back()"
      >
        确认完成
      </van-button>
      <van-button
        v-if="!accepted"
        type="default"
        block
        round
        style="margin-top: 10px"
        @click="onDecline"
      >
        退回
      </van-button>
    </div>
  </div>
</template>

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

  :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;
  }
}

.content-block {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-regular);
  background: var(--color-bg-card);
  white-space: pre-wrap;
}

.action-bar {
  padding: 24px 16px;
}
</style>
