<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" type="border-card" @tab-change="onTabChange">
      <!-- 工程危险源 -->
      <el-tab-pane v-hasPermi="['hazar:tab:queryEng']" label="工程危险源" name="eng">
        <el-form :model="queryParams" :inline="true" v-show="showSearch" label-width="80px">
          <el-form-item label="工程名称" prop="engName">
            <el-input v-model="queryParams.engName" placeholder="请输入" clearable style="width: 200px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="组织机构" prop="orgName">
            <el-input v-model="queryParams.orgName" placeholder="请输入" clearable style="width: 200px" @keyup.enter="handleQuery" />
          </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="['hazar:query: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="engName" min-width="150" :show-overflow-tooltip="true" />
          <el-table-column label="管理单位" align="center" prop="orgName" min-width="140" :show-overflow-tooltip="true" />
          <el-table-column label="总数" align="center" prop="totalCount" width="80" />
          <el-table-column label="一般危险源" align="center" prop="normalCount" width="100" />
          <el-table-column label="重大危险源" align="center" prop="majorCount" width="100" />
          <el-table-column label="已管控危险源" align="center" prop="controlledCount" width="110" />
          <el-table-column label="未管控危险源" align="center" prop="uncontrolledCount" width="110" />
        </el-table>
        </div>

        <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
      </el-tab-pane>

      <!-- 非工程危险源 -->
      <el-tab-pane v-hasPermi="['hazar:tab:queryNonEng']" label="非工程危险源" name="nonEng">
        <el-form :model="queryParams2" :inline="true" v-show="showSearch" label-width="80px">
          <el-form-item label="组织机构" prop="orgName">
            <el-input v-model="queryParams2.orgName" placeholder="请输入" clearable style="width: 200px" @keyup.enter="handleQuery2" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery2">搜索</el-button>
            <el-button type="warning" plain icon="Download" @click="handleExport2" v-hasPermi="['hazar:query:export']">导出</el-button>
          </el-form-item>
        </el-form>

        <div class="table-wrapper">
        <el-table :height="tableHeight" v-loading="loading2" :data="list2" 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="orgName" min-width="200" :show-overflow-tooltip="true" />
          <el-table-column label="总数" align="center" prop="totalCount" width="80" />
          <el-table-column label="一般危险源" align="center" prop="normalCount" width="100" />
          <el-table-column label="重大危险源" align="center" prop="majorCount" width="100" />
          <el-table-column label="已管控危险源" align="center" prop="controlledCount" width="110" />
          <el-table-column label="未管控危险源" align="center" prop="uncontrolledCount" width="110" />
        </el-table>
        </div>

        <pagination :total="total2" v-model:page="queryParams2.pageNum" v-model:limit="queryParams2.pageSize" @pagination="getList2" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="HazEngQuery">
import { getHazGroupBy } from "@/api/slaj/hazard"

const { proxy } = getCurrentInstance()

const tableHeight = 'calc(100vh - 240px)'
const activeTab = ref('eng')
const showSearch = ref(true)
const list = ref([]); const loading = ref(false); const total = ref(0)
const list2 = ref([]); const loading2 = ref(false); const total2 = ref(0)

const queryParams = reactive({ pageNum: 1, pageSize: 10, hazSort: '1', engName: undefined, orgName: undefined })
const queryParams2 = reactive({ pageNum: 1, pageSize: 10, hazSort: '2', orgName: undefined })

function getList() {
  loading.value = true
  getHazGroupBy({ ...queryParams, pageNum: queryParams.pageNum, pageSize: queryParams.pageSize }).then(res => {
    list.value = res.rows || []
    total.value = res.total || 0
    loading.value = false
  }).catch(() => { loading.value = false })
}

function getList2() {
  loading2.value = true
  getHazGroupBy({ ...queryParams2, pageNum: queryParams2.pageNum, pageSize: queryParams2.pageSize }).then(res => {
    list2.value = res.rows || []
    total2.value = res.total || 0
    loading2.value = false
  }).catch(() => { loading2.value = false })
}

function handleQuery() { queryParams.pageNum = 1; getList() }
function handleQuery2() { queryParams2.pageNum = 1; getList2() }
function handleExport() { proxy.download("hazard/objhaz/export", { ...queryParams }, `工程危险源_${new Date().getTime()}.xlsx`) }
function handleExport2() { proxy.download("hazard/objhaz/export", { ...queryParams2 }, `非工程危险源_${new Date().getTime()}.xlsx`) }
function onTabChange() { if (activeTab.value === 'eng') getList(); else getList2() }

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