<template>
  <!-- 企业数量弹窗 -->
  <el-dialog center ref="dialog" :title="dataTitle" modal :show-close="false" :destory-on-close="true"
    class="dialogClass" :append-to-body="true" width="90%" custom-class="custom-dialog" v-model="isShow">

    <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>
      <!-- @cell-dblclick="editData" -->
      <el-table :auto-resize="true" v-loading="tableloading" stripe show-summary :summary-method="getSummaries"
        :key=tableKey ref="detailTable" height="450px" border :data="dataObjone" id="out-table">
        <el-table-column property="orgname" label="企业名称" width="250"></el-table-column>
        <el-table-column property="zgzc" label="在册在岗人数">
          <template #default="{ row }">
            <span>{{ row.zgzc ? row.zgzc : 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="安全管理机构">
          <el-table-column property="bzrs" label="编制人数">
            <template #default="{ row }">
              <span>{{ row.bzrs ? row.bzrs : 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column property="pzrs" label="配置人数">
            <template #default="{ row }">
              <span>{{ row.pzrs ? row.pzrs : 0 }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="安全责任体系">
          <el-table-column property="hysl" label="安委会会议数量">
            <template #default="{ row }">
              <span>{{ row.hysl ? row.hysl : 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column property="costFee" label="安全投入（万元）">
            <template #default="{ row }">
              <span>{{ row.costFee ? row.costFee : 0 }}</span>
            </template>
          </el-table-column>
        </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, defineEmits } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import { getSummaries } from "@/utils/tools";
import * as MOSTY from "@/components/MyComponents/index";
import { exportXlsx } from "@/excel/Export2Excel.js";
const props = defineProps({
  title: String,
  isShow: Boolean
});
const tableloading = ref(false)
const excelLoading = ref(false)
const tableKey = ref(1)
const emit = defineEmits(['changeVi'])
const dataObjone = ref([])
const popForm = ref(false);
const isShow = ref(false);
const dataTitle = props.title;
const detailTable = ref();
const listQuery = ref({
  orgcode: ''
});
// 企业数量数据
const getEnpData = () => {
  dataObjone.value = []
  tableloading.value = true
  getApi(listQuery.value, '/mosty-jcgl/basicData/listDisplay').then((res) => {
    dataObjone.value = res ? res : []
  }).finally(() => {
    tableloading.value = false
  })
}

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

//关闭弹窗的回调
function handleClose() {
  emit('changeVi', false)

}

onMounted(() => {
  isShow.value = true;
  getEnpData();
});

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

const exportExcels = () => {
  excelLoading.value = true
  let title = {
    orgname: '企业名称',
    zgzc: "在册在岗人数",
    bzrs: "编制人数",
    pzrs: "配置人数",
    hysl: "安委会会议数量",
    costFee: "安全投入（万元）",
  };
  const param = listQuery.value
  getApi(param, "/mosty-jcgl/basicData/listDisplay").then((res) => {
    if (res) {
      let data = res;
      let obj = {
        orgname: '合计',
        zgzc: 0,
        bzrs: 0,
        pzrs: 0,
        hysl: 0,
        costFee: 0,
      }
      if (data) {
        for (let i = 0; i < data.length; i++) {
          data[i].zgzc = data[i].zgzc ? data[i].zgzc : 0
          data[i].bzrs = data[i].bzrs ? data[i].bzrs : 0
          data[i].pzrs = data[i].pzrs ? data[i].pzrs : 0
          data[i].hysl = data[i].hysl ? data[i].hysl : 0
          data[i].costFee = data[i].costFee ? data[i].costFee : 0
          obj.zgzc += data[i].zgzc;
          obj.bzrs += data[i].bzrs;
          obj.pzrs += data[i].pzrs;
          obj.hysl += data[i].hysl;
          obj.costFee += data[i].costFee;
        }
        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 "@/styles/index.scss";
@import "~@/assets/css/element-plus.scss";

.button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}

// body .el-table th.gutter {

// display: table-cell !important;

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