<template>
  <div class="app-container">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="安监总局共享" name="sawf">
        <div ref="containerRef" class="table-page-wrap">
        <el-form :model="sawfQuery" ref="sawfQueryRef" :inline="true" class="mb8">
          <el-form-item label="时间范围" prop="dateRange">
            <el-date-picker
              v-model="sawfDateRange"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleSawfQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleSawfQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetSawfQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <div class="table-wrapper">
        <el-table :height="tableHeight" v-loading="sawfLoading" :data="sawfList" stripe>
          <el-table-column label="事故名称" align="center" prop="acciName" :show-overflow-tooltip="true" />
          <el-table-column label="事故等级" align="center" prop="acciLevel" width="100" />
          <el-table-column label="发生时间" align="center" prop="acciTime" width="160" />
          <el-table-column label="事故地点" align="center" prop="acciAddr" :show-overflow-tooltip="true" />
          <el-table-column label="事故类型" align="center" prop="acciType" width="100" />
          <el-table-column label="死亡人数" align="center" prop="deathNum" width="90" />
          <el-table-column label="受伤人数" align="center" prop="injuryNum" width="90" />
        </el-table>
        </div>
        <pagination
          v-show="sawfTotal > 0"
          :total="sawfTotal"
          v-model:page="sawfQuery.pageNum"
          v-model:limit="sawfQuery.pageSize"
          @pagination="fetchSawfList"
        />
        </div>
      </el-tab-pane>

      <el-tab-pane label="水利部共享" name="mwr">
        <el-form :model="mwrQuery" ref="mwrQueryRef" :inline="true" class="mb8">
          <el-form-item label="时间范围" prop="dateRange">
            <el-date-picker
              v-model="mwrDateRange"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleMwrQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleMwrQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetMwrQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="mwrLoading" :data="mwrList" stripe>
          <el-table-column label="事故名称" align="center" prop="acciName" :show-overflow-tooltip="true" />
          <el-table-column label="事故等级" align="center" prop="acciLevel" width="100" />
          <el-table-column label="发生时间" align="center" prop="acciTime" width="160" />
          <el-table-column label="事故地点" align="center" prop="acciAddr" :show-overflow-tooltip="true" />
          <el-table-column label="事故类型" align="center" prop="acciType" width="100" />
          <el-table-column label="死亡人数" align="center" prop="deathNum" width="90" />
          <el-table-column label="受伤人数" align="center" prop="injuryNum" width="90" />
        </el-table>
        <pagination
          v-show="mwrTotal > 0"
          :total="mwrTotal"
          v-model:page="mwrQuery.pageNum"
          v-model:limit="mwrQuery.pageSize"
          @pagination="fetchMwrList"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="AcciShareData">
import { ref, reactive, onMounted } from 'vue'
import { useTableHeight } from '@/hooks/useTableHeight'
import { listSawfAcci, listMwrAcci } from "@/api/slaj/acci"

const { tableHeight, containerRef } = useTableHeight()

const activeTab = ref('sawf')

// --- 安监总局 ---
const sawfLoading = ref(false)
const sawfList = ref([])
const sawfTotal = ref(0)
const sawfDateRange = ref([])
const sawfQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  beginTime: undefined,
  endTime: undefined,
})

function fetchSawfList() {
  sawfLoading.value = true
  if (sawfDateRange.value && sawfDateRange.value.length === 2) {
    sawfQuery.beginTime = sawfDateRange.value[0]
    sawfQuery.endTime = sawfDateRange.value[1]
  } else {
    sawfQuery.beginTime = undefined
    sawfQuery.endTime = undefined
  }
  listSawfAcci(sawfQuery).then(res => {
    sawfList.value = res.rows ?? []
    sawfTotal.value = res.total ?? 0
    sawfLoading.value = false
  }).catch(() => {
    sawfLoading.value = false
  })
}

function handleSawfQuery() {
  sawfQuery.pageNum = 1
  fetchSawfList()
}

function resetSawfQuery() {
  sawfDateRange.value = []
  sawfQuery.beginTime = undefined
  sawfQuery.endTime = undefined
  sawfQuery.pageNum = 1
  fetchSawfList()
}

// --- 水利部 ---
const mwrLoading = ref(false)
const mwrList = ref([])
const mwrTotal = ref(0)
const mwrDateRange = ref([])
const mwrQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  beginTime: undefined,
  endTime: undefined,
})

function fetchMwrList() {
  mwrLoading.value = true
  if (mwrDateRange.value && mwrDateRange.value.length === 2) {
    mwrQuery.beginTime = mwrDateRange.value[0]
    mwrQuery.endTime = mwrDateRange.value[1]
  } else {
    mwrQuery.beginTime = undefined
    mwrQuery.endTime = undefined
  }
  listMwrAcci(mwrQuery).then(res => {
    mwrList.value = res.rows ?? []
    mwrTotal.value = res.total ?? 0
    mwrLoading.value = false
  }).catch(() => {
    mwrLoading.value = false
  })
}

function handleMwrQuery() {
  mwrQuery.pageNum = 1
  fetchMwrList()
}

function resetMwrQuery() {
  mwrDateRange.value = []
  mwrQuery.beginTime = undefined
  mwrQuery.endTime = undefined
  mwrQuery.pageNum = 1
  fetchMwrList()
}

onMounted(() => {
  fetchSawfList()
  fetchMwrList()
})
</script>
