<template>
  <!-- 消防队弹窗 -->
  <el-dialog center ref="dialog" :title="dataTitle" :show-close="false" modal :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" id="out-table" stripe ref="detailTable" height="450px" border
        show-summary :summary-method="getSummaries" :data="dataObjone">
        <el-table-column property="orgName" label="企业名称" width="250"></el-table-column>
        <el-table-column property="fireImp" sortable label="消防重点部位数量"></el-table-column>
        <el-table-column property="fullFireBrg" sortable label="专职消防队数量"></el-table-column>
        <el-table-column property="fullFirPer" sortable label="专职消防员数量"></el-table-column>
        <el-table-column property="fireEngine" sortable label="消防车数量"></el-table-column>
        <el-table-column property="miniStation" sortable label="微型消防站数量"></el-table-column>
        <!-- <el-table-column label="操作" v-if="!popForm">
          <template #default="scope">
            <span class="operesee" @click="handleClick(scope.$index, scope.row)"><el-icon>
                <View />
              </el-icon>详情</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 } from "@/utils/tools";
import { exportXlsx } from "@/excel/Export2Excel.js";
const tableKey = ref(1)
const tableloading = ref(false)
const excelLoading = ref(false)
const popForm = ref(false);
const detailTable = ref();
const emit = defineEmits(['changeVi'])
const listQuery = ref({
  code: ''
});
const props = defineProps({
  visible: false,
  dataTitle: {
    type: String,
    requried: true
  }
});
//消防队
const dataObjone = ref([
  { orgName: '甘肃省烟草专卖局（公司）', fireImp: 49, fullFireBrg: 55, fullFirPer: 35, fireEngine: 14, miniStation: 65 },
  { orgName: '兰州市烟草专卖局（公司）', fireImp: 48, fullFireBrg: 39, fullFirPer: 47, fireEngine: 33, miniStation: 17 },
  { orgName: '天水市烟草专卖局（公司）', fireImp: 7, fullFireBrg: 64, fullFirPer: 18, fireEngine: 52, miniStation: 47 },
  { orgName: '陇南市烟草专卖局（公司）', fireImp: 32, fullFireBrg: 45, fullFirPer: 16, fireEngine: 32, miniStation: 52 },
  { orgName: '酒泉市烟草专卖局（公司）', fireImp: 75, fullFireBrg: 67, fullFirPer: 70, fireEngine: 65, miniStation: 9 },
  { orgName: '嘉峪关市烟草专卖局（公司）', fireImp: 68, fullFireBrg: 75, fullFirPer: 1, fireEngine: 71, miniStation: 88 },
  { orgName: '庆阳市烟草专卖局（公司）', fireImp: 14, fullFireBrg: 67, fullFirPer: 47, fireEngine: 56, miniStation: 24 },
  { orgName: '白银市烟草专卖局（公司）', fireImp: 19, fullFireBrg: 51, fullFirPer: 69, fireEngine: 71, miniStation: 30 },
  { orgName: '定西市烟草专卖局（公司）', fireImp: 26, fullFireBrg: 22, fullFirPer: 6, fireEngine: 26, miniStation: 22 },
  { orgName: '金昌市烟草专卖局（公司）', fireImp: 36, fullFireBrg: 20, fullFirPer: 25, fireEngine: 45, miniStation: 52 },
  { orgName: '平凉市烟草专卖局（公司）', fireImp: 60, fullFireBrg: 58, fullFirPer: 93, fireEngine: 19, miniStation: 45 },
  { orgName: '武威市烟草专卖局（公司）', fireImp: 54, fullFireBrg: 39, fullFirPer: 19, fireEngine: 82, miniStation: 75 },
  { orgName: '甘南州烟草专卖局（公司）', fireImp: 49, fullFireBrg: 30, fullFirPer: 89, fireEngine: 28, miniStation: 47 },
  { orgName: '临夏州烟草专卖局（公司）', fireImp: 43, fullFireBrg: 42, fullFirPer: 11, fireEngine: 4, miniStation: 51 },
])
onMounted(() => {
  // fireBrigadeData();
  popForm.value = false;
});
// 请求消防队列表数据
const fireBrigadeData = () => {
  dataObjone.value = []
  getApi({}, '/mosty-jcgl/fireInformation/listDisplay').then((res) => {
    dataObjone.value = res ? res : []
  })
}

// 获取详情数据
const getDetails = () => {
  dataObjone.value = []
  getApi(listQuery.value, "/mosty-jcgl/fireInformation/details").then((res) => {
    dataObjone.value = res.list ? res.list : [];
  })
}

//详情按钮
const handleClick = (index, row) => {
  tableKey.value = 2
  var code = row.cityCode
  listQuery.value.code = code
  popForm.value = true; //显示返回按钮
  getDetails()
};

//点击返回
const backbtn = () => {
  tableKey.value = 1
  popForm.value = false;
  fireBrigadeData()
};
//关闭弹窗的回调
function handleClose() {
  emit("changVi", false)
  currentPage.value = 1;
}
//关闭弹窗事件
function closeDialog() {
  emit("changeVi", false)
  popForm.value = false;
}
const exportExcels = () => {
  excelLoading.value = true
  let title = {
    orgName: '企业名称',
    fireImp: "消防重点部位数量",
    fullFireBrg: "专职消防队数量",
    fullFirPer: "专职消防员数量",
    fireEngine: "消防车数量",
    miniStation: "微型消防站数量",
  };
  const param = listQuery.value
  let data = structuredClone(dataObjone.value);
  let obj = {
    orgName: '合计',
    fireImp: 0,
    fullFireBrg: 0,
    fullFirPer: 0,
    fireEngine: 0,
    miniStation: 0,
  }
  if (data) {
    for (let i = 0; i < data.length; i++) {
      obj.fireImp += data[i].fireImp;
      obj.fullFireBrg += data[i].fullFireBrg;
      obj.fullFirPer += data[i].fullFirPer;
      obj.fireEngine += data[i].fireEngine;
      obj.miniStation += data[i].miniStation;
    }
    data.push(obj)
    let tablename = "消防队台账.xlsx";
    exportXlsx(title, data, '消防队台账', tablename);
    excelLoading.value = false
  }
  // getApi(param, "/mosty-jcgl/basicData/tzsbList").then((res) => {
  //   if (res) {

  //     excelLoading.value = false
  //   }
  // }).catch(() => {
  //   excelLoading.value = false
  // });
};

</script>

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

// 死固定住企业名称宽
::v-deep .el-table--border .el-table__cell:first-child .cell {
  width: 250px !important;
}
</style>
