<template>
  <!-- 消防设施弹窗 -->
  <el-dialog center ref="dialog" :title="dataTitle" modal :show-close="false" :destory-on-close="true"
    class="dialogClass" :append-to-body="true" width="871px" custom-class="custom-dialog" v-model="props.visible">
    <section class="button">
      <el-button @click="exportExcels" :loading="excelLoading">导出</el-button>
      <el-button v-if="popForm" @click="backbtn">返回</el-button>
      <el-button @click="closeDialog">关闭</el-button>
    </section>
    <div class="itemTrading">

      <el-table :key="tableKey" v-loading="tableloading" ref="detailTable" stripe show-summary
        :summary-method="getSummaries" height="450px" border :data="dataxfsz" id="out-table">
        <el-table-column property="orgname" label="企业名称" width="250"></el-table-column>
        <el-table-column property="xfc" sortable label="消防池数量"></el-table-column>
        <el-table-column label="消火栓系统">
          <el-table-column property="snxhs" sortable label="室内消火栓系统"></el-table-column>
          <el-table-column property="swxhs" sortable label="室外消火栓系统"></el-table-column>
          <el-table-column property="fireHrCount" label="合计">
            <template #default="{ row }">
              <span>{{ row.snxhs + row.swxhs }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="火灾自动报警系统">
          <el-table-column property="gwgy" sortable label="感温感烟数量"></el-table-column>
          <el-table-column property="kqcy" sortable label="空气采样数量"></el-table-column>
          <el-table-column property="hw" sortable label="红外对射数量"></el-table-column>
        </el-table-column>
        <el-table-column property="mh" sortable label="灭火系统"></el-table-column>
        <el-table-column property="xfkzs" label="消防控制室数量"></el-table-column>
        <el-table-column label="操作" v-if="!popForm">
          <template #default="{ row }">
            <span class="operesee" @click="handleClick(row)" v-if="row.orgid.slice(0, 4) != '5200'"><el-icon>
                <View />
              </el-icon>详情</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, onMounted, reactive, watch, defineEmits } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { getSummaries, numAdd } from "@/utils/tools";
import { exportXlsx } from "@/excel/Export2Excel.js";
const tableloading = ref(false)
const excelLoading = ref(false)
const tableKey = ref('1') //避免表格切换而页面抖动
const currentPage = ref("20");
const popForm = ref(false);
const detailTable = ref();
const emit = defineEmits(['changeVi'])
const listQuery = ref({
  orgcode: ''
});
const props = defineProps({
  visible: false,
  dataTitle: {
    type: String,
    requried: true
  }
});
//消防设施
const dataxfsz = ref([]);

onMounted(() => {
  getxmhData();
  popForm.value = false;
});

//请求消防设施列表数据
const getxmhData = () => {
  dataxfsz.value = []
  tableloading.value = true
  getApi({}, '/mosty-jcgl/basicData/xfssList').then((res) => {
    if (res) {
      res.forEach(el => {
        el.fireHrCount = numAdd("add", -1, el.snxhs, el.swxhs)
      });
      dataxfsz.value = res
    } else {
      dataxfsz.value = []
    }
  }).finally(() => {
    tableloading.value = false
  })
}
//详情按钮
const handleClick = (row) => {
  listQuery.value.orgcode = row.orgid
  popForm.value = true; //显示返回按钮
  getxmhData()
  tableKey.value = 2
};
//点击返回
const backbtn = () => {
  listQuery.value.orgcode = ''
  popForm.value = false;
  getxmhData()
  tableKey.value = 1
};


//单元格双击事件
function editData(e) {
  var val = e.name;
  popForm.value = true; //显示返回按钮
}

//关闭弹窗事件
function closeDialog() {
  emit("changeVi", false)
  popForm.value = false;
}
const exportExcels = () => {
  excelLoading.value = true
  let title = {
    orgname: '企业名称',
    xfc: "消防池数量",
    snxhs: "室内消火栓系统",
    swxhs: "室外消火栓系统",
    fireHrCount: "消火栓合计",
    gwgy: "感温感烟数量",
    kqcy: "空气采样数量",
    hw: "红外对射数量",
    mh: "灭火系统",
    xfkzs: "消防控制室数量",
  };
  getApi(listQuery.value, "/mosty-jcgl/basicData/xfssList").then((res) => {
    if (res) {
      let data = res;
      let obj = {
        orgname: '合计',
        xfc: 0,
        snxhs: 0,
        swxhs: 0,
        fireHrCount: 0,
        gwgy: 0,
        kqcy: 0,
        hw: 0,
        mh: 0,
        xfkzs: 0
      }
      if (data) {
        for (let i = 0; i < data.length; i++) {
          data[i].fireHrCount = numAdd("add", -1, data[i].snxhs, data[i].swxhs)
          obj.xfc += data[i].xfc;
          obj.snxhs += data[i].snxhs;
          obj.swxhs += data[i].swxhs;
          obj.fireHrCount += data[i].fireHrCount;
          obj.gwgy += data[i].gwgy;
          obj.kqcy += data[i].kqcy;
          obj.hw += data[i].hw;
          obj.mh += data[i].mh;
          obj.xfkzs += data[i].xfkzs;
        }

        data.push(obj)
        let tablename = "消防设施台账.xlsx";
        exportXlsx(title, data, '消防设施台账', tablename);
        excelLoading.value = false
      }
      excelLoading.value = false
    }
  }).catch(() => {
    excelLoading.value = false
  });
};

</script>

<style lang="scss" scoped>
@import "~@/assets/css/element-plus.scss";
</style>
