<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 v-if="!popForm" v-loading="tableloading" id="out-table" show-summary stripe
        :summary-method="getSummaries" ref="detailTable" height="450px" border :data="yhsldata">
        <el-table-column property="orgName" label="企业名称" width="250"></el-table-column>
        <el-table-column property="yhsum" sortable label="隐患总条数"></el-table-column>
        <el-table-column property="zdyh" sortable label="重大隐患"></el-table-column>
        <el-table-column property="aybyh" label="A类一般隐患"></el-table-column>
        <el-table-column property="bybyh" label="B类一般隐患"></el-table-column>
        <el-table-column property="yzg" sortable label="已整改"></el-table-column>
        <el-table-column property="wzg" 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>

      <!-- 详情 -->
      <el-table v-if="popForm" id="out-table" stripe ref="detailTable" height="450px" border :data="detailData">
        <el-table-column property="shortid" label="隐患编号" width="250"></el-table-column>
        <el-table-column property="founderTime" label="发现时间"></el-table-column>
        <el-table-column property="pitfallDescribe" label="问题描述"></el-table-column>
        <el-table-column property="objname" label="检查对象"></el-table-column>
        <el-table-column property="founderName" label="检查人"></el-table-column>
        <el-table-column property="dutyUsername" label="责任人"></el-table-column>
        <el-table-column property="planOvertime" label="限期整改时间"></el-table-column>
        <el-table-column property="verifyTime" label="整改时间"></el-table-column>
        <el-table-column property="pitfallLevel" label="隐患等级" :formatter="yhsample"></el-table-column>
        <el-table-column property="verifyFlag" label="整改落实情况">
          <template #default="scope">{{ scope.row.verifyFlag === 'Y' ? '整改落实' : '未整改落实' }}</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 popForm = ref(false);
const detailTable = ref();
const emit = defineEmits(['changeVi'])
const listQuery = ref({
  ctiycode: ''
});
const props = defineProps({
  visible: false,
  dataTitle: {
    type: String,
    requried: true
  }
});
// 隐患数量
const yhsldata = ref(
  [
    {
      "orgName": "甘肃省烟草专卖局（公司）",
      "yhsum": 1,
      "zdyh": 0,
      "aybyh": 0,
      "bybyh": 1,
      "yzg": 1,
      "wzg": 0
    },
    {
      "orgName": "兰州市烟草专卖局（公司）",
      "yhsum": 2,
      "zdyh": 0,
      "aybyh": 1,
      "bybyh": 1,
      "yzg": 2,
      "wzg": 0
    },
    {
      "orgName": "天水市烟草专卖局（公司）",
      "yzg": 0,
      "wzg": 0,
      "yhsum": 0,
      "zdyh": 0,
      "aybyh": 0,
      "bybyh": 0
    },
    {
      "orgName": "陇南市烟草专卖局（公司）",
      "yzg": 1,
      "wzg": 0,
      "yhsum": 1,
      "zdyh": 0,
      "aybyh": 0,
      "bybyh": 1
    },
    {
      "orgName": "酒泉市烟草专卖局（公司）",
      "yzg": 0,
      "wzg": 0,
      "yhsum": 0,
      "zdyh": 0,
      "aybyh": 0,
      "bybyh": 0
    },
    {
      "orgName": "嘉峪关市烟草专卖局（公司）",
      "yzg": 0,
      "wzg": 0,
      "yhsum": 0,
      "zdyh": 0,
      "aybyh": 0,
      "bybyh": 0
    },
    {
      "orgName": "庆阳市烟草专卖局（公司）",
      "yzg": 0,
      "wzg": 0,
      "yhsum": 0,
      "zdyh": 0,
      "aybyh": 0,
      "bybyh": 0
    },
    {
      "orgName": "白银市烟草专卖局（公司）",
      "yzg": 0,
      "wzg": 0,
      "yhsum": 0,
      "zdyh": 0,
      "aybyh": 0,
      "bybyh": 0
    },
    {
      "orgName": "定西市烟草专卖局（公司）",
      "yzg": 0,
      "wzg": 0,
      "yhsum": 0,
      "zdyh": 0,
      "aybyh": 0,
      "bybyh": 0
    },
    {
      "orgName": "金昌市烟草专卖局（公司）",
      "yzg": 1,
      "wzg": 0,
      "yhsum": 1,
      "zdyh": 0,
      "aybyh": 0,
      "bybyh": 1
    },
    {
      "orgName": "平凉市烟草专卖局（公司）",
      "yzg": 0,
      "wzg": 0,
      "yhsum": 0,
      "zdyh": 0,
      "aybyh": 0,
      "bybyh": 0
    },
    {
      "orgName": "武威市烟草专卖局（公司）",
      "yzg": 0,
      "wzg": 0,
      "yhsum": 0,
      "zdyh": 0,
      "aybyh": 0,
      "bybyh": 0
    },
    {
      "orgName": "甘南州烟草专卖局（公司）",
      "yzg": 0,
      "wzg": 0,
      "yhsum": 0,
      "zdyh": 0,
      "aybyh": 0,
      "bybyh": 0
    },
    {
      "orgName": "临夏州烟草专卖局（公司）",
      "yzg": 0,
      "wzg": 1,
      "yhsum": 1,
      "zdyh": 0,
      "aybyh": 0,
      "bybyh": 1
    },
  ]
);
const detailData = ref([])

onMounted(() => {
  getYhData();
  popForm.value = false;
  // demowidth()

});

// 获取隐患数量接口
const getYhData = () => {
  yhsldata.value = []
  getApi({}, "/mosty-jcgl/yhb/getPageList").then((res) => {
    yhsldata.value = res ? res : []
  })
}
// 隐患详情接口
const getDetails = () => {
  detailData.value = []
  getApi(listQuery.value, "/mosty-jcgl/yhb/getDetails/{cityCode}").then((res) => {
    detailData.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;
}


//详情按钮
const handleClick = (index, row) => {
  var val = row.cityCode;
  listQuery.value.ctiycode = val
  popForm.value = true; //显示返回按钮
  // let demo = document.getElementsByClassName("el-table__body-wrapper")[0];
  //   demo.style = `width:3100px`;
  getDetails();
};
//单元格双击事件
function editData(e) {
  var val = e.name;
  popForm.value = true; //显示返回按钮
}
//点击返回
const backbtn = () => {
  popForm.value = false;
  // demowidth()
};
const exportExcels = () => {
  excelLoading.value = true
  let title = {
    orgName: '企业名称',
    yhsum: "隐患总条数",
    zdyh: "重大隐患",
    aybyh: "A类一般隐患",
    bybyh: "B类一般隐患",
    yzg: "已整改",
    wzg: "未整改",



  };
  const param = listQuery.value
  let data = structuredClone(yhsldata.value);
  let obj = {
    orgName: '合计',
    yzg: 0,
    wzg: 0,
    yhsum: 0,
    zdyh: 0,
    aybyh: 0,
    bybyh: 0
  }
  if (data) {
    for (let i = 0; i < data.length; i++) {
      obj.yzg += data[i].yzg;
      obj.wzg += data[i].wzg;
      obj.yhsum += data[i].yhsum;
      obj.zdyh += data[i].zdyh;
      obj.aybyh += data[i].aybyh;
      obj.bybyh += data[i].bybyh;
    }
    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>
