<template>
  <div class="plan-approval app-container">
    <el-card shadow="never" class="filter-card">
      <el-form :inline="true" size="small" :model="queryParams">
        <el-form-item label="预案名称">
          <el-input v-model="queryParams.planName" placeholder="请输入预案名称" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="请选择" clearable>
            <el-option label="草稿" value="draft" />
            <el-option label="审批中" value="approving" />
            <el-option label="驳回" value="rejected" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
            查询
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never">
      <el-table :data="planList" v-loading="loading" border>
        <el-table-column prop="planName" label="预案名称" min-width="200" show-overflow-tooltip />
        <el-table-column prop="planType" label="类型" width="120" />
        <el-table-column prop="eventType" label="事件类型" width="140" />
        <el-table-column prop="eventLevel" label="级别" width="100" />
        <el-table-column prop="status" label="状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="statusTag(scope.row.status)">
              {{ renderStatus(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="180">
          <template slot-scope="scope">{{ parseTime(scope.row.updateTime) }}</template>
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="openDetail(scope.row)">查看</el-button>
            <el-button
              type="text"
              size="mini"
              @click="markApprove(scope.row)"
              v-if="scope.row.status === 'approving'"
            >
              审批通过
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="markReject(scope.row)"
              v-if="scope.row.status === 'approving'"
            >
              驳回
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { listPlans, updatePlan } from '@/api/emergency/plan'
import { parseTime } from '@/utils/shuyu-utils'

export default {
  name: 'PlanApprovalWorkbench',
  data() {
    return {
      loading: false,
      planList: [],
      queryParams: {
        planName: '',
        status: 'approving'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    parseTime,
    handleQuery() {
      this.getList()
    },
    resetQuery() {
      this.queryParams.planName = ''
      this.queryParams.status = 'approving'
      this.getList()
    },
    getList() {
      this.loading = true
      listPlans({
        pageNum: 1,
        pageSize: 50,
        planName: this.queryParams.planName,
        status: this.queryParams.status
      })
        .then(res => {
          this.planList = res.rows || res.data || []
        })
        .finally(() => {
          this.loading = false
        })
    },
    statusTag(status) {
      const map = { draft: 'info', approving: 'warning', rejected: 'danger', approved: 'success' }
      return map[status] || 'default'
    },
    renderStatus(status) {
      const map = { draft: '草稿', approving: '审批中', rejected: '已驳回', approved: '已批准' }
      return map[status] || status || '-'
    },
    openDetail(row) {
      this.$router.push({ path: '/plan/detail', query: { id: row.id } })
    },
    markApprove(row) {
      this.$modal
        .confirm('确认将该预案标记为审批通过吗？')
        .then(() => updatePlan(row.id, { status: 'approved' }))
        .then(() => {
          this.$modal.msgSuccess('已标记为通过')
          this.getList()
        })
        .catch(() => {})
    },
    markReject(row) {
      this.$modal
        .confirm('确认驳回该预案吗？')
        .then(() => updatePlan(row.id, { status: 'rejected' }))
        .then(() => {
          this.$modal.msgSuccess('已驳回')
          this.getList()
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped>
.filter-card {
  margin-bottom: 16px;
}
</style>

