<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 @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 :prop="item.prop" :label="item.label" v-for="(item, i) in detailColumn" :key="i">
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { getApi, postApi } from "@/api/tobAcco_api.js"
const props = defineProps({
  params: Object
})
const dialogVisible = ref(false)
const dataTable = ref([])
const tableColumn = ref([
  { label: "企业名称", prop: "orgName", fixed: "left" },
  { label: "事故总数", prop: "count" },
  { label: "自然灾害数量", prop: "naturalCount" },
  { label: "安全生产事故数量", prop: "safetyCount" },
  { label: "上报时间", prop: "gxTime" }
])
const detailColumn = reactive([
  { label: "企业名称", prop: "orgName" },
  { label: "事故名称", prop: "name" },
  { label: "事故发生日期", prop: "occurDate" },
  { label: "事故类型", prop: "accidentCategoryName" },
  { label: "事故责任类型", prop: "liabilityTypeName" },
  { label: "事故死亡人员数量", prop: "deathQty" },
  { label: "事故重伤人员数量", prop: "seriousInjuryQty" },
  { label: "事故轻伤人员数量", prop: "slightInjuryQty" },
  { label: "事故直接经济损失", prop: "directEconomicLoss" }
])
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/accidentEventsStat/queryReportingHistoryStat").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/accidentEventsStat/queryReportingHistoryStatLogDetails").then(res => {
    if (res) {
      detailTable.value = res
      detailLoading.value = false
    }
  })
}
const onDetail = e => {
  detailVisible.value = true
  getDetailList(e.orgCode)
}

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

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