<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">
      <!-- @cell-dblclick="editData"   -->
      <el-table :key="tableKey" v-loading="tableloading" id="out-table" show-summary stripe
        :summary-method="getSummaries" ref="detailTable" height="450px" border :data="zywhData">
        <el-table-column property="orgName" label="企业名称" width="250"></el-table-column>
        <el-table-column property="occHazard" sortable label="职业危害因素工作场所数量"></el-table-column>
        <el-table-column property="occHazardEmp" sortable label="接触职业危害从业人数"></el-table-column>
        <el-table-column label="职业危害因素工作场所数量">
          <el-table-column property="dust" sortable label="粉尘数量"></el-table-column>
          <el-table-column property="noise" sortable label="噪声数量"></el-table-column>
          <el-table-column property="highTemp" sortable label="高温数量"></el-table-column>
          <el-table-column property="laser" sortable label="激光数量"></el-table-column>
          <el-table-column property="poison" sortable label="毒物数量"></el-table-column>
          <el-table-column property="shake" sortable label="震动数量"></el-table-column>
          <el-table-column property="uvRay" sortable label="紫外线数量"></el-table-column>
          <el-table-column property="radiation" sortable label="射频辐射数量"></el-table-column>
        </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 tableloading = ref(false)
const excelLoading = ref(false)
const tableKey = ref(1)
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 zywhData = ref([
  {
    "orgName": "甘肃省烟草专卖局（公司）",
    "occHazard": 71,
    "occHazardEmp": 38,
    "dust": 75,
    "noise": 62,
    "highTemp": 81,
    "laser": 38,
    "poison": 55,
    "shake": 35,
    "uvRay": 59,
    "radiation": 21
  },
  {
    "orgName": "兰州市烟草专卖局（公司）",
    "occHazard": 22,
    "occHazardEmp": 84,
    "dust": 82,
    "noise": 70,
    "highTemp": 9,
    "laser": 58,
    "poison": 23,
    "shake": 46,
    "uvRay": 37,
    "radiation": 23
  },
  {
    "orgName": "天水市烟草专卖局（公司）",
    "highTemp": 25,
    "laser": 88,
    "occHazard": 90,
    "occHazardEmp": 15,
    "dust": 61,
    "noise": 94,
    "poison": 81,
    "shake": 33,
    "uvRay": 18,
    "radiation": 89
  },
  {
    "orgName": "陇南市烟草专卖局（公司）",
    "highTemp": 2,
    "laser": 5,
    "occHazard": 16,
    "occHazardEmp": 78,
    "dust": 73,
    "noise": 36,
    "poison": 88,
    "shake": 11,
    "uvRay": 53,
    "radiation": 73
  },
  {
    "orgName": "酒泉市烟草专卖局（公司）",
    "highTemp": 91,
    "laser": 44,
    "occHazard": 12,
    "occHazardEmp": 66,
    "dust": 27,
    "noise": 22,
    "poison": 20,
    "shake": 7,
    "uvRay": 28,
    "radiation": 61
  },
  {
    "orgName": "嘉峪关市烟草专卖局（公司）",
    "highTemp": 16,
    "laser": 84,
    "occHazard": 15,
    "occHazardEmp": 51,
    "dust": 10,
    "noise": 80,
    "poison": 11,
    "shake": 24,
    "uvRay": 31,
    "radiation": 43
  },
  {
    "orgName": "庆阳市烟草专卖局（公司）",
    "highTemp": 96,
    "laser": 67,
    "occHazard": 27,
    "occHazardEmp": 29,
    "dust": 32,
    "noise": 40,
    "poison": 55,
    "shake": 9,
    "uvRay": 26,
    "radiation": 63
  },
  {
    "orgName": "白银市烟草专卖局（公司）",
    "highTemp": 1,
    "laser": 92,
    "occHazard": 26,
    "occHazardEmp": 2,
    "dust": 22,
    "noise": 93,
    "poison": 34,
    "shake": 52,
    "uvRay": 95,
    "radiation": 21
  },
  {
    "orgName": "定西市烟草专卖局（公司）",
    "highTemp": 86,
    "laser": 56,
    "occHazard": 97,
    "occHazardEmp": 97,
    "dust": 3,
    "noise": 93,
    "poison": 42,
    "shake": 55,
    "uvRay": 23,
    "radiation": 61
  },
  {
    "orgName": "金昌市烟草专卖局（公司）",
    "highTemp": 20,
    "laser": 39,
    "occHazard": 87,
    "occHazardEmp": 7,
    "dust": 66,
    "noise": 18,
    "poison": 74,
    "shake": 89,
    "uvRay": 66,
    "radiation": 24
  },
  {
    "orgName": "平凉市烟草专卖局（公司）",
    "highTemp": 62,
    "laser": 63,
    "occHazard": 89,
    "occHazardEmp": 1,
    "dust": 70,
    "noise": 47,
    "poison": 91,
    "shake": 3,
    "uvRay": 38,
    "radiation": 31
  },
  {
    "orgName": "武威市烟草专卖局（公司）",
    "highTemp": 66,
    "laser": 29,
    "occHazard": 73,
    "occHazardEmp": 46,
    "dust": 56,
    "noise": 97,
    "poison": 41,
    "shake": 60,
    "uvRay": 23,
    "radiation": 67
  },
  {
    "orgName": "甘南州烟草专卖局（公司）",
    "highTemp": 70,
    "laser": 23,
    "occHazard": 42,
    "occHazardEmp": 0,
    "dust": 23,
    "noise": 53,
    "poison": 83,
    "shake": 28,
    "uvRay": 63,
    "radiation": 99
  },
  {
    "orgName": "临夏州烟草专卖局（公司）",
    "highTemp": 36,
    "laser": 14,
    "occHazard": 53,
    "occHazardEmp": 8,
    "dust": 20,
    "noise": 6,
    "poison": 1,
    "shake": 37,
    "uvRay": 80,
    "radiation": 77
  },
]);
onMounted(() => {
  // getZywhData();
  popForm.value = false;

});
//职业危害场所接口数据
const getZywhData = () => {
  zywhData.value = []
  getApi({}, "/mosty-jcgl/occupationalHazard/listDisplay").then((res) => {
    zywhData.value = res ? res : []
  })
}

//详情按钮
const handleClick = (index, row) => {
  tableKey.value = 2
  var code = row.cityCode
  listQuery.value.code = code
  popForm.value = true; //显示返回按钮
  getZywhXQData()
};
//职业危害场所详情接口数据
const getZywhXQData = () => {
  zywhData.value = []
  getApi(listQuery.value, "/mosty-jcgl/occupationalHazard/details").then((res) => {
    zywhData.value = res.list ? res.list : [];
  })
}
//单元格双击事件
function editData(e) {
  var val = e.name;
  popForm.value = true; //显示返回按钮
}
//点击返回
const backbtn = () => {
  tableKey.value = 1
  popForm.value = false;
  getZywhData();
};
function demowidth() {
  setTimeout(() => {
    let demo = document.getElementsByClassName("el-table__body-wrapper")[0];
    demo.style = `width:${detailTable._value.bodyWidth}`;
  }, 1e3);
}

//关闭弹窗事件
function closeDialog() {
  emit("changeVi", false)
  popForm.value = false;
}
const exportExcels = () => {
  excelLoading.value = true
  let title = {
    orgName: '企业名称',
    occHazard: "职业危害因素工作场所数量",
    occHazardEmp: "接触职业危害从业人数",
    dust: "粉尘数量",
    noise: "噪声数量",
    highTemp: "高温数量",
    laser: "激光数量",
    poison: "毒物数量",
    shake: "震动数量",
    uvRay: "紫外线数量",
    radiation: "射频辐射数量",
  };
  const param = listQuery.value
  let data = structuredClone(zywhData.value);
  let obj = {
    orgName: '合计',
    occHazard: 0,
    occHazardEmp: 0,
    dust: 0,
    noise: 0,
    highTemp: 0,
    laser: 0,
    poison: 0,
    shake: 0,
    uvRay: 0,
    radiation: 0,
  }
  if (data) {
    for (let i = 0; i < data.length; i++) {
      obj.occHazard += data[i].occHazard;
      obj.occHazardEmp += data[i].occHazardEmp;
      obj.dust += data[i].dust;
      obj.noise += data[i].noise;
      obj.highTemp += data[i].highTemp;
      obj.laser += data[i].laser;
      obj.poison += data[i].poison;
      obj.shake += data[i].shake;
      obj.uvRay += data[i].uvRay;
      obj.radiation += data[i].radiation;
    }
    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";
</style>
