<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" ref="detailTable" stripe show-summary
        :summary-method="getSummaries" height="450px" border :data="wxzyData">
        <el-table-column property="orgName" label="企业名称" width="250"></el-table-column>
        <el-table-column property="hotWork" sortable label="动火作业"></el-table-column>
        <el-table-column property="electrokinetic" sortable label="临时动电作业"></el-table-column>
        <el-table-column property="high" sortable label="高空作业"></el-table-column>
        <el-table-column property="confinedSpaces" sortable label="有限空间作业"></el-table-column>
        <el-table-column property="poisonous" sortable label="有毒有害作业"></el-table-column>
        <el-table-column property="well" sortable label="窖井作业"></el-table-column>
        <!-- <el-table-column property="total" 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 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 wxzyData = ref(
  [
    {
      "orgName": "甘肃省烟草专卖局（公司）",
      "hotWork": 10,
      "electrokinetic": 72,
      "high": 13,
      "confinedSpaces": 23,
      "poisonous": 74,
      "well": 94
    },
    {
      "orgName": "兰州市烟草专卖局（公司）",
      "hotWork": 52,
      "electrokinetic": 38,
      "high": 74,
      "confinedSpaces": 71,
      "poisonous": 0,
      "well": 69
    },
    {
      "orgName": "天水市烟草专卖局（公司）",
      "poisonous": 94,
      "well": 11,
      "hotWork": 36,
      "electrokinetic": 75,
      "high": 89,
      "confinedSpaces": 15
    },
    {
      "orgName": "陇南市烟草专卖局（公司）",
      "poisonous": 94,
      "well": 47,
      "hotWork": 37,
      "electrokinetic": 49,
      "high": 72,
      "confinedSpaces": 76
    },
    {
      "orgName": "酒泉市烟草专卖局（公司）",
      "poisonous": 80,
      "well": 69,
      "hotWork": 91,
      "electrokinetic": 50,
      "high": 43,
      "confinedSpaces": 72
    },
    {
      "orgName": "嘉峪关市烟草专卖局（公司）",
      "poisonous": 8,
      "well": 60,
      "hotWork": 46,
      "electrokinetic": 57,
      "high": 61,
      "confinedSpaces": 79
    },
    {
      "orgName": "庆阳市烟草专卖局（公司）",
      "poisonous": 94,
      "well": 59,
      "hotWork": 58,
      "electrokinetic": 0,
      "high": 10,
      "confinedSpaces": 2
    },
    {
      "orgName": "白银市烟草专卖局（公司）",
      "poisonous": 78,
      "well": 77,
      "hotWork": 49,
      "electrokinetic": 56,
      "high": 74,
      "confinedSpaces": 62
    },
    {
      "orgName": "定西市烟草专卖局（公司）",
      "poisonous": 47,
      "well": 71,
      "hotWork": 38,
      "electrokinetic": 45,
      "high": 17,
      "confinedSpaces": 77
    },
    {
      "orgName": "金昌市烟草专卖局（公司）",
      "poisonous": 84,
      "well": 43,
      "hotWork": 2,
      "electrokinetic": 69,
      "high": 35,
      "confinedSpaces": 93
    },
    {
      "orgName": "平凉市烟草专卖局（公司）",
      "poisonous": 14,
      "well": 69,
      "hotWork": 1,
      "electrokinetic": 56,
      "high": 31,
      "confinedSpaces": 91
    },
    {
      "orgName": "武威市烟草专卖局（公司）",
      "poisonous": 44,
      "well": 70,
      "hotWork": 94,
      "electrokinetic": 23,
      "high": 45,
      "confinedSpaces": 8
    },
    {
      "orgName": "甘南州烟草专卖局（公司）",
      "poisonous": 3,
      "well": 56,
      "hotWork": 61,
      "electrokinetic": 78,
      "high": 71,
      "confinedSpaces": 45
    },
    {
      "orgName": "临夏州烟草专卖局（公司）",
      "poisonous": 39,
      "well": 85,
      "hotWork": 0,
      "electrokinetic": 25,
      "high": 31,
      "confinedSpaces": 0
    },
  ]
);
onMounted(() => {
  // dangerTaskData();
  popForm.value = false;
  // demowidth()

});

// 请求危险作业列表数据
const dangerTaskData = () => {
  wxzyData.value = []
  getApi({}, '/mosty-jcgl/wxzy/listDisplay').then((res) => {
    wxzyData.value = res ? res : []
  })
}

//详情按钮
const handleClick = (index, row) => {
  tableKey.value = 2
  var code = row.cityCode
  listQuery.value.code = code
  popForm.value = true; //显示返回按钮
  document.getElementById('out-table').scrollLeft = 0
  getWxzyXqData()
  let demo = document.getElementsByClassName("el-table__body-wrapper")[0];
  demo.style = `width:1450px`;
};
//危险作业详情数据
const getWxzyXqData = () => {
  getApi(listQuery.value, "/mosty-jcgl/wxzy/details").then((res) => {
    wxzyData.value = res.list ? res.list : [];

  })
}
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;
}
//单元格双击事件
function editData(e) {
  var val = e.name;
  popForm.value = true; //显示返回按钮
}
//点击返回
const backbtn = () => {
  tableKey.value = 1
  popForm.value = false;
  dangerTaskData()

};
const exportExcels = () => {
  excelLoading.value = true
  let title = {
    orgName: '企业名称',
    hotWork: "动火作业",
    electrokinetic: "临时动电作业",
    high: "高空作业",
    confinedSpaces: "有限空间作业",
    poisonous: "有毒有害作业",
    well: "窖井作业",



  };
  const param = listQuery.value
  let data = structuredClone(wxzyData.value);
  let obj = {
    orgName: '合计',
    poisonous: 0,
    well: 0,
    hotWork: 0,
    electrokinetic: 0,
    high: 0,
    confinedSpaces: 0
  }
  if (data) {
    for (let i = 0; i < data.length; i++) {
      obj.poisonous += data[i].poisonous;
      obj.well += data[i].well;
      obj.hotWork += data[i].hotWork;
      obj.electrokinetic += data[i].electrokinetic;
      obj.high += data[i].high;
      obj.confinedSpaces += data[i].confinedSpaces;
    }
    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>
