<template>
  <div ref="containerRef" class="app-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/slaj/acci/stat' }">事故统计</el-breadcrumb-item>
      <el-breadcrumb-item>统计明细</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card shadow="never" class="mt10 mb8">
      <template #header>筛选条件</template>
      <el-descriptions :column="4" border>
        <el-descriptions-item label="年份">{{ queryYear }}</el-descriptions-item>
        <el-descriptions-item label="月份">{{ queryMonth || '全部' }}</el-descriptions-item>
        <el-descriptions-item label="事故类型" :span="2">{{ queryTypeLabel || queryType || '全部' }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns" storageKey="acci-analize-detail"></right-toolbar>
    </el-row>

    <div class="table-wrapper">
    <el-table :height="tableHeight" v-loading="loading" :data="objAcciList" @row-click="handleRowClick">
      <el-table-column label="事故名称" align="center" prop="acciName" v-if="columns.acciName.visible" :show-overflow-tooltip="true" />
      <el-table-column label="事故等级" align="center" prop="acciGrad" 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="acciCate" 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="repStat" v-if="columns.repStat.visible">
        <template #default="scope">
          <dict-tag :options="rep_stat" :value="scope.row.repStat" />
        </template>
      </el-table-column>
      <el-table-column label="发生时间" align="center" prop="occuTime" v-if="columns.occuTime.visible" width="180" />
      <el-table-column label="发生地点" align="center" prop="occuLoc" v-if="columns.occuLoc.visible" :show-overflow-tooltip="true" />
      <el-table-column label="死亡/重伤/失踪" align="center" width="160" v-if="columns.casNum.visible">
        <template #default="scope">
          {{ scope.row.casNum || 0 }}/{{ scope.row.serInjNum || 0 }}/{{ scope.row.missNum || 0 }}
        </template>
      </el-table-column>
      <el-table-column label="经济损失(万元)" align="center" prop="econLoss" v-if="columns.econLoss.visible" width="130" />
    </el-table>
    </div>

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

<script setup name="AnalizeDetail">
import { useRoute, useRouter } from 'vue-router'
import { useTableHeight } from '@/hooks/useTableHeight'
import { computed } from 'vue'
import { listObjAcci } from "@/api/slaj/acci"

const { tableHeight, containerRef } = useTableHeight()

const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
const { acci_grad, acci_cate, rep_stat } = proxy.useDict("acci_grad", "acci_cate", "rep_stat")

const objAcciList = ref([])
const loading = ref(true)
const showSearch = ref(true)
const total = ref(0)

const queryYear = ref(route.query.year || '')
const queryMonth = ref(route.query.month || '')
const queryType = ref(route.query.type || '')

const queryTypeLabel = computed(() => {
  const typeMap = { 'general': '一般事故', 'larger': '较大事故', 'major': '重大事故', 'special': '特别重大事故' }
  return typeMap[queryType.value] || ''
})

const columns = ref({
  acciName: { label: '事故名称', visible: true },
  acciGrad: { label: '事故等级', visible: true },
  acciCate: { label: '事故类别', visible: true },
  repStat: { label: '报告状态', visible: true },
  occuTime: { label: '发生时间', visible: true },
  occuLoc: { label: '发生地点', visible: true },
  casNum: { label: '死亡/重伤/失踪', visible: true },
  econLoss: { label: '经济损失(万元)', visible: true }
})

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  acciName: undefined,
  acciGrad: undefined,
  acciCate: undefined,
  repStat: undefined
})

function getList() {
  loading.value = true
  const params = { ...queryParams }

  if (queryYear.value) {
    if (queryMonth.value) {
      params.occuTimeBegin = `${queryYear.value}-${String(queryMonth.value).padStart(2, '0')}-01`
      const lastDay = new Date(Number(queryYear.value), Number(queryMonth.value), 0).getDate()
      params.occuTimeEnd = `${queryYear.value}-${String(queryMonth.value).padStart(2, '0')}-${String(lastDay).padStart(2, '0')}`
    } else {
      params.occuTimeBegin = `${queryYear.value}-01-01`
      params.occuTimeEnd = `${queryYear.value}-12-31`
    }
  }

  if (queryType.value) {
    params.acciGrad = queryType.value
  }

  listObjAcci(params).then(res => {
    loading.value = false
    objAcciList.value = res.rows
    total.value = res.total
  })
}

function handleRowClick(row) {
  router.push({ path: '/slaj/acci/detail', query: { guid: row.guid } })
}

function handleExport() {
  const params = { ...queryParams }
  if (queryYear.value) {
    if (queryMonth.value) {
      params.occuTimeBegin = `${queryYear.value}-${String(queryMonth.value).padStart(2, '0')}-01`
      const lastDay = new Date(Number(queryYear.value), Number(queryMonth.value), 0).getDate()
      params.occuTimeEnd = `${queryYear.value}-${String(queryMonth.value).padStart(2, '0')}-${String(lastDay).padStart(2, '0')}`
    } else {
      params.occuTimeBegin = `${queryYear.value}-01-01`
      params.occuTimeEnd = `${queryYear.value}-12-31`
    }
  }
  if (queryType.value) {
    params.acciGrad = queryType.value
  }
  proxy.download("acci/objacci/export", params, `analizeDetail_${new Date().getTime()}.xlsx`)
}

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