<template>
  <el-dialog :title="props.title" width="1400px" v-model="dialogVisible" @close="onClose">
    <el-table :data="tableData" style="width: 100%" v-loading="tableLoading"
      :header-cell-style="{ background: '#f5f5f5' }" height="600px">
      <el-table-column label="企业名称" prop="baOrgName" fixed width="240" />
      <el-table-column label="消防池（座）" prop="firePoolQty" width="110" />
      <el-table-column label="应急广播（套）" prop="emgcBroadcastQty" width="130" />
      <el-table-column prop="emgcEvcuatSysQty" label="应急疏散指示系统（套）" width="150" />
      <el-table-column prop="frConRoomQty" label="消防控制室（个）" width="140" />
      <el-table-column prop="juniorWorkerQty" label="五级/初级工（人）" width="140" />
      <el-table-column prop="intermediateWorkerQty" label="四级/中级工（人）" width="140" />
      <el-table-column prop="prvtFrBrigadeQty" label="专职消防队（个）" width="140" />
      <el-table-column prop="prvtFrmanQty" label="专职消防员（个）" width="140" />
      <el-table-column prop="updateTime" label="最后一次上报时间" width="160" />
      <el-table-column label="操作" width="100" fixed="right">
        <template #default="{ row }">
          <el-link type="primary" @click="onDetail(row)">详情</el-link>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  <DetailDialog ref="detailDialog" :title="dialogTitle" :type="'historyDetail'" :rowItem="rowItem" />
</template>

<script setup>
import { onMounted, ref, reactive, getCurrentInstance, watch, nextTick } from "vue";
// import * as MOSTY from "@/components/MyComponents/index";
// import * as rule from "@/utils/rules.js";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import DetailDialog from "./XfzstzDialog";
// import { getItem } from "@/utils/storage";

const props = defineProps({ title: String, baOrgCode: String, query: Object });
// const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
const tableLoading = ref(false);
const tableData = ref([]);
const detailDialog = ref(null);
const dialogTitle = ref("");
const rowItem = ref(null);
defineExpose({ dialogVisible });

const onClose = () => {
  dialogVisible.value = false;
};
const onDetail = (e) => {
  detailDialog.value.dialogVisible = true;
  rowItem.value = e;
  dialogTitle.value = `消防设施（${e.baOrgName}）历史详情`;
};

onMounted(() => { });
watch(
  () => dialogVisible.value,
  (n, o) => {
    if (n) {
      tableLoading.value = true;
      getApi({ baOrgCode: props.baOrgCode, ...props.query }, "/mosty-jcgl/data/firEquipment/history/list").then((res) => {
        if (!res) return;
        tableData.value = res;
        tableLoading.value = false;
      });
    }
  },
  { deep: true }
  // { immediate: true, deep: true }
);
</script>

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