<template>
  <div ref="containerRef" class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="auto">
      <el-form-item label="单位性质" prop="wiunProp">
        <el-select v-model="queryParams.wiunProp" placeholder="请选择" clearable style="width: 130px">
          <el-option label="直属单位" value="1" />
          <el-option label="下级水行政" value="2" />
          <el-option label="流域机构" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="事故类型" prop="acciCate">
        <el-select v-model="queryParams.acciCate" placeholder="请选择" clearable style="width: 130px">
          <el-option v-for="dict in acci_cate" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="事故等级" prop="acciGrad">
        <el-select v-model="queryParams.acciGrad" placeholder="请选择" clearable style="width: 130px">
          <el-option v-for="dict in acci_grad" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="单位名称" prop="sgdwName">
        <el-input v-model="queryParams.sgdwName" placeholder="请输入" clearable style="width: 180px" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="行政区域" prop="areaName">
        <el-input v-model="queryParams.areaName" placeholder="请输入" clearable style="width: 150px" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="事故时间">
        <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['acci:fastquery:export']">导出</el-button>
      </el-form-item>
    </el-form>

    <div class="table-wrapper">
    <el-table :height="tableHeight" v-loading="loading" :data="list" border style="width:100%" :header-cell-style="{ 'text-align': 'center' }">
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column label="上报单位" align="center" prop="sgdwName" min-width="160" :show-overflow-tooltip="true" v-if="columns.sgdwName.visible">
        <template #default="scope">
          <el-link type="primary" @click="handleDetail(scope.row)" v-hasPermi="['acci:fastquery:detail']">{{ scope.row.sgdwName }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="事故类型" align="center" prop="acciCate" width="100" v-if="columns.acciCate.visible">
        <template #default="scope">
          <dict-tag :options="acci_cate" :value="scope.row.acciCate" />
        </template>
      </el-table-column>
      <el-table-column label="事故等级" align="center" prop="acciGrad" width="100" v-if="columns.acciGrad.visible">
        <template #default="scope">
          <dict-tag :options="acci_grad" :value="scope.row.acciGrad" />
        </template>
      </el-table-column>
      <el-table-column label="重伤人数（人）" align="center" prop="serInjNum" width="120" v-if="columns.serInjNum.visible" />
      <el-table-column label="死亡人数（人）" align="center" prop="casNum" width="120" v-if="columns.casNum.visible" />
      <el-table-column label="直接经济损失（万元）" align="center" prop="econLoss" width="150" v-if="columns.econLoss.visible" />
    </el-table>
    </div>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />

    <!-- 事故详情弹窗 -->
    <el-dialog title="事故详情" v-model="detailOpen" width="80%" top="5vh" append-to-body>
      <div v-loading="detailLoading">
        <div class="section-title">基本档案</div>
        <el-table :data="[detailForm]" border style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
          <el-table-column label="单位名称" align="center" prop="sgdwName" min-width="140" />
          <el-table-column label="事故单位类型" align="center" width="100">
            <template #default="scope">{{ scope.row.acciWiunType === '1' ? '直属' : scope.row.acciWiunType === '2' ? '下级' : scope.row.acciWiunType === '3' ? '流域' : scope.row.acciWiunType }}</template>
          </el-table-column>
          <el-table-column label="事故类型" align="center" prop="acciCate" width="100" />
          <el-table-column label="发生时间" align="center" prop="occuTime" width="100" />
          <el-table-column label="重伤人数（人）" align="center" prop="serInjNum" width="100" />
          <el-table-column label="死亡人数（人）" align="center" prop="casNum" width="100" />
          <el-table-column label="直接经济损失（万元）" align="center" prop="econLoss" width="120" />
          <el-table-column label="事故简要情况" align="center" prop="otlcolGuuiVicm" min-width="120" :show-overflow-tooltip="true" />
          <el-table-column label="是否责任事故" align="center" width="100">
            <template #default="scope">{{ scope.row.ifDuty === '1' ? '是' : '否' }}</template>
          </el-table-column>
          <el-table-column label="是否已电话上报" align="center" width="110">
            <template #default="scope">{{ scope.row.ifPhone === '1' ? '是' : '否' }}</template>
          </el-table-column>
        </el-table>

        <div class="section-title" style="margin-top: 16px;">补报信息</div>
        <el-table :data="suppList" border style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
          <el-table-column label="补报时间" align="center" prop="repTime" width="120" />
          <el-table-column label="死亡人数（人）" align="center" prop="casNum" width="100" />
          <el-table-column label="重伤人数（人）" align="center" prop="serInjNum" width="100" />
          <el-table-column label="经济损失（万元）" align="center" prop="econLoss" width="120" />
          <el-table-column label="事故描述" align="center" prop="acciDesc" min-width="150" :show-overflow-tooltip="true" />
        </el-table>
        <pagination :total="suppTotal" v-model:page="suppQuery.pageNum" v-model:limit="suppQuery.pageSize" @pagination="loadSuppList" layout="total, prev, pager, next" />
      </div>
      <template #footer>
        <el-button @click="detailOpen = false">关 闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="AcciFastQuery">
import { listObjAcci, listBisAcciExpRep } from "@/api/slaj/acci"
import { useTableHeight } from '@/hooks/useTableHeight'

const { tableHeight, containerRef } = useTableHeight()

const { proxy } = getCurrentInstance()
const { acci_grad, acci_cate } = proxy.useDict("acci_grad", "acci_cate")

const list = ref([])
const loading = ref(false)
const total = ref(0)
const showSearch = ref(true)
const dateRange = ref([])

const columns = ref({
  sgdwName: { label: '上报单位', visible: true },
  acciCate: { label: '事故类型', visible: true },
  acciGrad: { label: '事故等级', visible: true },
  serInjNum: { label: '重伤人数', visible: true },
  casNum: { label: '死亡人数', visible: true },
  econLoss: { label: '直接经济损失', visible: true }
})

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  wiunProp: undefined,
  acciCate: undefined,
  acciGrad: undefined,
  sgdwName: undefined,
  areaName: undefined
})

// 详情弹窗
const detailOpen = ref(false)
const detailLoading = ref(false)
const detailForm = ref({})
const suppList = ref([])
const suppTotal = ref(0)
const suppQuery = reactive({ pageNum: 1, pageSize: 10 })

function getList() {
  loading.value = true
  const params = { ...queryParams }
  if (dateRange.value && dateRange.value.length === 2) {
    params.beginTime = dateRange.value[0]
    params.endTime = dateRange.value[1]
  }
  listObjAcci(params).then(res => {
    list.value = res.rows || []
    total.value = res.total || 0
  }).finally(() => { loading.value = false })
}

function handleQuery() {
  queryParams.pageNum = 1
  getList()
}

function handleExport() {
  const params = { ...queryParams }
  if (dateRange.value && dateRange.value.length === 2) {
    params.beginTime = dateRange.value[0]
    params.endTime = dateRange.value[1]
  }
  proxy.download("acci/objacci/export", params, `事故快报_${new Date().getTime()}.xlsx`)
}

function handleDetail(row) {
  detailForm.value = { ...row }
  suppList.value = []
  suppTotal.value = 0
  suppQuery.pageNum = 1
  detailOpen.value = true
  loadSuppList()
}

function loadSuppList() {
  detailLoading.value = true
  listBisAcciExpRep({ acciGuid: detailForm.value.guid, pageNum: suppQuery.pageNum, pageSize: suppQuery.pageSize }).then(res => {
    suppList.value = res.rows || []
    suppTotal.value = res.total || 0
  }).finally(() => { detailLoading.value = false })
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
.table-wrapper { margin-top: 8px; }
.section-title { font-weight: bold; font-size: 14px; margin-bottom: 8px; }
</style>
