<template>
  <el-dialog title="上报历史" width="1400px" v-model="dialogVisible">
    <el-table border :data="dataTable" style="width: 100%; margin-bottom: 10px" v-loading="tableLoading" :header-cell-style="{ background: '#F6F6F6' }" height="70vh">
      <el-table-column :prop="item.prop" :label="item.label" v-for="(item, i) in tableColumn" :key="i"> </el-table-column>
      <el-table-column align="center" label="操作" width="170" fixed="right">
        <template #default="{ row }">
          <el-link type="primary" @click="onDetail(row)">详情</el-link>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  <el-dialog title="上报历史" width="1400px" v-model="detailVisible">
    <el-table
      border
      ref="multipleTableRef"
      id="mergeTable"
      :data="detailTable"
      style="width: 100%"
      highlight-current-row
      :header-cell-style="{ background: '#F6F6F6' }"
      v-loading="detailLoading"
      height="550px"
    >
      <el-table-column label="序号" type="index" align="center" width="80" />
      <el-table-column label="企业名称" prop="orgName" align="center" width="200" />
      <el-table-column label="应急预案名称" prop="emergencyPlanName" align="center" />
      <el-table-column label="应急预案类别名称" prop="emergencyPlanCategoryName" align="center" />
      <el-table-column label="应对风险类别名称" prop="accidentCategoryName" align="center" />
      <!-- <el-table-column label="最近检测点位数量" prop="pointsQty" align="center" />
      <el-table-column label="最近超标点位数量" prop="exceedingPointsQty" align="center" /> -->
    </el-table>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { getApi, postApi } from "@/api/tobAcco_api.js"
import * as MOSTY from "@/components/MyComponents/index"
import { getItem } from "@/utils/storage"
import { ElMessage } from "element-plus"

const { proxy } = getCurrentInstance()
const props = defineProps({
  params: Object
})
const dialogVisible = ref(false)
const dataTable = ref([])
const tableColumn = ref([
  { label: "企业名称", prop: "orgName" },
  { label: "上报次数", prop: "sbcs" },
  { label: "上报时间", prop: "gxTime" },
  { label: "预案数量", prop: "placeCount" },
  { label: "类型数量", prop: "typeCount" },
  { label: "未上报总数", prop: "failReportCount" }
  // { label: "上报时间", prop: "gxTime" }
])
const tableLoading = ref(false)
const detailVisible = ref(false)
const detailTable = ref([])
const detailLoading = ref(false)
defineExpose({ dialogVisible })

const getDataList = () => {
  dataTable.value = []
  tableLoading.value = true

  postApi(props.params, "/mosty-jcgl/data/emergencyPlanInfo/history/stat").then(res => {
    if (res) {
      dataTable.value = res
      tableLoading.value = false
    }
  })
}
const getDetailList = orgCode => {
  detailTable.value = []
  detailLoading.value = true
  props.params.orgCode = orgCode
  postApi(props.params, "/mosty-jcgl/data/emergencyPlanInfo/history/detail").then(res => {
    if (res) {
      // detailTable.value = res
      detailLoading.value = false
      res.forEach(item => {
        item.detectionLedgerList.forEach(list => {
          list.placeName = item.placeName
          detailTable.value.push(list)
        })
        if (item.detectionLedgerList.length === 0) {
          detailTable.value.push({
            orgName: item.orgName,
            placeName: item.placeName,
            sourceId: item.sourceId,
            detectionLedgerList: []
          })
        }
      })
      onMergeTable()
    }
  })
}
const onDetail = e => {
  detailVisible.value = true
  getDetailList(e.orgCode)
}

const onMergeTable = () => {
  nextTick(() => {
    let colnumIndex = 3,
      tableFirstTd = "",
      tableCurrentTd = "",
      tableSpanNum = 0,
      tableTdArr = document.querySelectorAll("#mergeTable .el-table__body tr td:nth-child(" + colnumIndex + ")")

    for (let i = 0; i < tableTdArr.length; i++) {
      if (i === 0) {
        tableFirstTd = tableTdArr[0]
        tableSpanNum = 1
      } else {
        tableCurrentTd = tableTdArr[i]
        if (tableFirstTd.innerText === tableCurrentTd.innerText) {
          tableSpanNum++
          tableCurrentTd.style.display = "none"
          tableFirstTd.setAttribute("rowSpan", tableSpanNum)

          tableCurrentTd.previousSibling.style.display = "none"
          tableFirstTd.previousSibling.setAttribute("rowSpan", tableSpanNum)
          tableCurrentTd.previousSibling.previousSibling.style.display = "none"
          tableFirstTd.previousSibling.previousSibling.setAttribute("rowSpan", tableSpanNum)
        } else {
          tableFirstTd = tableTdArr[i]
          tableSpanNum = 1
        }
      }
    }

    let count = 0
    let tableFirstTdArr = document.querySelectorAll("#mergeTable .el-table__body tr td:nth-child(" + 1 + ")")
    tableFirstTdArr.forEach(item => {
      if (item.style.display !== "none") {
        count++
        item.innerHTML = `<div>${count}</div>`
      }
    })
  })
}

watch(
  () => dialogVisible.value,
  (n, o) => {
    if (n) {
      getDataList()
    }
  },
  { deep: true }
  // { immediate: true, deep: true }
)
</script>

<style lang="scss" scoped></style>
