<template>
  <!-- 特种设备弹窗 -->
  <el-dialog center ref="dialog" :title="dataTitle" :show-close="false" modal :destory-on-close="true"
    class="dialogClass" :append-to-body="true" width="90%" 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" border show-summary
        :summary-method="getSummaries" :data="tzsbdata">
        <el-table-column property="orgname" label="企业名称" width="250"></el-table-column>
        <el-table-column property="boiler" sortable label="锅炉总计"></el-table-column>
        <el-table-column property="pressVessel" sortable label="压力容器总计"></el-table-column>
        <el-table-column property="pressPipeline" sortable label="压力管道总计"></el-table-column>
        <el-table-column property="forklift" sortable label="厂内机动车数量"></el-table-column>
        <el-table-column property="cylinder" sortable label="工业气瓶总计"></el-table-column>
        <el-table-column property="elevator" sortable label="电梯数量"></el-table-column>
        <el-table-column property="hoisting" sortable 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 } from "@/utils/tools";
import { exportXlsx } from "@/excel/Export2Excel.js";
const tableloading = ref(false)
const tableKey = ref(1)
const excelLoading = ref(false)
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 tzsbdata = ref([]);
onMounted(() => {
  getTzsbData();
  popForm.value = false;
});
//特种设备接口

const getTzsbData = () => {
  tzsbdata.value = []
  tableloading.value = true
  getApi(listQuery.value, '/mosty-jcgl/basicData/tzsbList').then((res) => {
    tzsbdata.value = res ? res : [];
  }).finally(() => {
    tableloading.value = false
  })
}

//关闭弹窗事件
function closeDialog() {
  emit("changeVi", false)
  popForm.value = false;
}


//详情按钮
const handleClick = (row) => {
  listQuery.value.orgcode = row.orgid
  popForm.value = true; //显示返回按钮
  getTzsbData()
  tableKey.value = 2
};
//点击返回
const backbtn = () => {
  listQuery.value.orgcode = ''
  popForm.value = false;
  getTzsbData()
  tableKey.value = 1
};

const exportExcels = () => {
  excelLoading.value = true
  let title = {
    orgname: '企业名称',
    boiler: "锅炉总计",
    pressVessel: "压力容器总计",
    pressPipeline: "压力管道总计",
    forklift: "厂内机动车数量",
    cylinder: "工业气瓶总计",
    elevator: "电梯数量",
    hoisting: "起重机械数量",
  };
  const param = listQuery.value
  getApi(param, "/mosty-jcgl/basicData/tzsbList").then((res) => {
    if (res) {
      let data = res;
      let obj = {
        orgname: '合计',
        boiler: 0,
        pressVessel: 0,
        pressPipeline: 0,
        forklift: 0,
        cylinder: 0,
        elevator: 0,
        hoisting: 0,
      }
      if (data) {
        for (let i = 0; i < data.length; i++) {
          obj.boiler += data[i].boiler;
          obj.pressVessel += data[i].pressVessel;
          obj.pressPipeline += data[i].pressPipeline;
          obj.forklift += data[i].forklift;
          obj.cylinder += data[i].cylinder;
          obj.elevator += data[i].elevator;
          obj.hoisting += data[i].hoisting;
        }
        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";

::v-deep .el-table__body-wrapper {
  height: 400px !important;
}
</style>
