<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" type="border-card">
      <el-tab-pane label="隐患列表" name="hidd">
        <div ref="containerRef" class="table-page-wrap">
        <el-form :model="hiddQueryParams" ref="hiddQueryRef" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="隐患名称" prop="hiddName">
            <el-input v-model="hiddQueryParams.hiddName" placeholder="请输入隐患名称" clearable style="width: 240px" @keyup.enter="handleHiddQuery" />
          </el-form-item>
          <el-form-item label="隐患等级" prop="hiddGrad">
            <el-select v-model="hiddQueryParams.hiddGrad" placeholder="请选择隐患等级" clearable style="width: 240px">
              <el-option v-for="dict in hidd_grad" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="隐患状态" prop="hiddStat">
            <el-select v-model="hiddQueryParams.hiddStat" placeholder="请选择隐患状态" clearable style="width: 240px">
              <el-option v-for="dict in hidd_stat" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleHiddQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetHiddQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleHiddExport" v-hasPermi="['hidd:objhidd:export']">导出</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getHiddList" :columns="hiddColumns" storageKey="hidd-zjindex-hidd"></right-toolbar>
        </el-row>

        <div class="table-wrapper">
        <el-table :height="tableHeight" v-loading="hiddLoading" :data="hiddList">
          <el-table-column label="隐患名称" align="center" prop="hiddName" v-if="hiddColumns.hiddName.visible" :show-overflow-tooltip="true" />
          <el-table-column label="隐患等级" align="center" prop="hiddGrad" v-if="hiddColumns.hiddGrad.visible">
            <template #default="scope">
              <dict-tag :options="hidd_grad" :value="scope.row.hiddGrad" />
            </template>
          </el-table-column>
          <el-table-column label="隐患状态" align="center" prop="hiddStat" v-if="hiddColumns.hiddStat.visible">
            <template #default="scope">
              <dict-tag :options="hidd_stat" :value="scope.row.hiddStat" />
            </template>
          </el-table-column>
          <el-table-column label="涉及部位" align="center" prop="proPart" v-if="hiddColumns.proPart.visible" :show-overflow-tooltip="true" />
          <el-table-column label="采集时间" align="center" prop="collTime" v-if="hiddColumns.collTime.visible" width="180" />
        </el-table>
        </div>

        <pagination v-show="hiddTotal > 0" :total="hiddTotal" v-model:page="hiddQueryParams.pageNum" v-model:limit="hiddQueryParams.pageSize" @pagination="getHiddList" />
        </div>
      </el-tab-pane>

      <el-tab-pane label="月报列表" name="month">
        <el-form :model="monthQueryParams" ref="monthQueryRef" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="上报单位" prop="repOrgGuid">
            <el-input v-model="monthQueryParams.repOrgGuid" placeholder="请输入上报单位" clearable style="width: 240px" @keyup.enter="handleMonthQuery" />
          </el-form-item>
          <el-form-item label="上报期间" prop="repPeri">
            <el-input v-model="monthQueryParams.repPeri" placeholder="请输入上报期间" clearable style="width: 240px" @keyup.enter="handleMonthQuery" />
          </el-form-item>
          <el-form-item label="上报状态" prop="repStat">
            <el-select v-model="monthQueryParams.repStat" placeholder="请选择上报状态" clearable style="width: 240px">
              <el-option v-for="dict in rep_stat" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleMonthQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetMonthQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleMonthExport" v-hasPermi="['hidd:monrepperi:export']">导出</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getMonthList" :columns="monthColumns" storageKey="hidd-zjindex-month"></right-toolbar>
        </el-row>

        <el-table v-loading="monthLoading" :data="monthList">
          <el-table-column label="上报单位" align="center" prop="repOrgGuid" v-if="monthColumns.repOrgGuid.visible" :show-overflow-tooltip="true" />
          <el-table-column label="上报期间" align="center" prop="repPeri" v-if="monthColumns.repPeri.visible" />
          <el-table-column label="上报状态" align="center" prop="repStat" v-if="monthColumns.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="repTime" v-if="monthColumns.repTime.visible" width="180" />
        </el-table>

        <pagination v-show="monthTotal > 0" :total="monthTotal" v-model:page="monthQueryParams.pageNum" v-model:limit="monthQueryParams.pageSize" @pagination="getMonthList" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="HiddZjIndex">
import { listObjHidd } from "@/api/slaj/hidd"
import { useTableHeight } from '@/hooks/useTableHeight'
import { listBisOrgMonRepPeri } from "@/api/slaj/hidd"

const { tableHeight, containerRef } = useTableHeight()

const { proxy } = getCurrentInstance()
const { hidd_grad, hidd_stat, rep_stat } = proxy.useDict("hidd_grad", "hidd_stat", "rep_stat")

const activeTab = ref('hidd')
const showSearch = ref(true)

// 隐患列表
const hiddList = ref([])
const hiddLoading = ref(true)
const hiddTotal = ref(0)
const hiddColumns = ref({
  hiddName: { label: '隐患名称', visible: true },
  hiddGrad: { label: '隐患等级', visible: true },
  hiddStat: { label: '隐患状态', visible: true },
  proPart: { label: '涉及部位', visible: true },
  collTime: { label: '采集时间', visible: true }
})
const hiddQueryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  hiddName: undefined,
  hiddGrad: undefined,
  hiddStat: undefined
})

// 月报列表
const monthList = ref([])
const monthLoading = ref(true)
const monthTotal = ref(0)
const monthColumns = ref({
  repOrgGuid: { label: '上报单位', visible: true },
  repPeri: { label: '上报期间', visible: true },
  repStat: { label: '上报状态', visible: true },
  repTime: { label: '上报时间', visible: true }
})
const monthQueryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  repOrgGuid: undefined,
  repPeri: undefined,
  repStat: undefined
})

/** 查询隐患列表 */
function getHiddList() {
  hiddLoading.value = true
  listObjHidd(hiddQueryParams).then(res => {
    hiddLoading.value = false
    hiddList.value = res.rows
    hiddTotal.value = res.total
  })
}

/** 搜索隐患 */
function handleHiddQuery() {
  hiddQueryParams.pageNum = 1
  getHiddList()
}

/** 重置隐患搜索 */
function resetHiddQuery() {
  proxy.resetForm("hiddQueryRef")
  handleHiddQuery()
}

/** 导出隐患 */
function handleHiddExport() {
  proxy.download("hidd/objhidd/export", {
    ...hiddQueryParams
  }, `hiddZjIndex_${new Date().getTime()}.xlsx`)
}

/** 查询月报列表 */
function getMonthList() {
  monthLoading.value = true
  listBisOrgMonRepPeri(monthQueryParams).then(res => {
    monthLoading.value = false
    monthList.value = res.rows
    monthTotal.value = res.total
  })
}

/** 搜索月报 */
function handleMonthQuery() {
  monthQueryParams.pageNum = 1
  getMonthList()
}

/** 重置月报搜索 */
function resetMonthQuery() {
  proxy.resetForm("monthQueryRef")
  handleMonthQuery()
}

/** 导出月报 */
function handleMonthExport() {
  proxy.download("hidd/monrepperi/export", {
    ...monthQueryParams
  }, `hiddMonthZjIndex_${new Date().getTime()}.xlsx`)
}

onMounted(() => {
  getHiddList()
  getMonthList()
})
</script>
