<template>
  <!-- 运行控制数据 -->
  <div class="pubDataBox">

    <!-- 运行控制弹窗 -->
    <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="isShow">
      <!-- 这里是导出excel列表的内容 -->
      <section class="button">
        <el-button @click="exportExcels">导出</el-button>
        <el-button v-if="popForm" @click="backbtn">返回</el-button>
        <el-button @click="closeDialog">关闭</el-button>
      </section>

      <!-- 隐患数量 临时注释1 ========================== -->
      <!-- <div class="binBox" v-if="show">
        <div class="left">
          <BinBar :barTitle="yhslBartitle" :barNum="yhslBarnum" :loadingshow="binshow" />
        </div>
        <div class="right">
          <BinCharts :binData="yhslData" :loadingshow="binshow" />
        </div>
      </div> -->
      <!-- 隐患数量 ========================== -->
      <div v-if="!popForm">
        <el-table show-summary :summary-method="getSummaries" height="333px" stripe border id="out-table"
          :data="controldata" @cell-dblclick="editData">
          <el-table-column property="comName" label="单位名称" width="250"></el-table-column>
          <el-table-column property="yhsum" label="隐患总数"></el-table-column>
          <el-table-column property="zdyh" 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" label="已整改"></el-table-column>
          <el-table-column property="wzg" label="未整改"></el-table-column>
          <!-- 临时注释2 ========================== -->
          <!-- <el-table-column label="操作" v-if="!popForm" fixed="right">
            <template #default="scope">
              <span class="operesee" @click="handleClick(scope.$index, scope.row)"><el-icon>
                  <View />
                </el-icon>详情</span>
            </template>
</el-table-column> -->
          <!-- 临时注释2end ========================== -->
        </el-table>
      </div>
      <!-- 详情 -->
      <div class="itemTrading" v-else-if="popForm">
        <el-table id="out-table" ref="detailTable" height="333px" border :data="controldatatwo" stripe
          @cell-dblclick="editData">
          <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="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-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>
      </div>

    </el-dialog>
  </div>
</template>

<script setup>
import BinBar from "../../charts/binBar.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import BinCharts from "../../charts/binChart2.vue";
import { exportExcel } from "@/utils/tools";
import { ref, defineProps, reactive, onMounted, nextTick, defineEmits } from "vue";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { fakeYhslData } from "../../fakeData.js"
const props = defineProps({
  title: String,
  isShow: Boolean
});
//运行控制的数据
const controldata = ref([]);
const controldatatwo = ref([]);
const detailTable = ref();
const emit = defineEmits(['changeVi'])
const binshow = ref(false);
//饼状图数据
// 隐患数量柱状图
const yhslBartitle = ref(["重大隐患", "A类一般隐患", "B类一般隐患"]);
const yhslBarnum = ref([]);
// 隐患数量得饼图数据
const yhslData = ref([]);
const popForm = ref(false);
const show = ref(false);
const isShow = ref(false);
const dataTitle = props.title;
const listQuery = ref({
  ctiycode: ''
});
/** 合计数组 */
const sumData = ref([])
onMounted(() => {

  // 假数据 ========================
  controldata.value = fakeYhslData() // 假数据 TODO:
  isShow.value = true;
  return // ============

  //运行控制数据
  getYhslData();
  isShow.value = true;
  popForm.value = false;
  show.value = false;
  binshow.value = false;
});
/** 导出excel */
const exportExcels = () => {
  const titleObj = {
    'comName': '单位名称',
    'yhsum': '隐患总数',
    'zdyh': '重大隐患',
    'aybyh': 'A类一般隐患',
    'bybyh': 'B类一般隐患',
    'yzg': '已整改',
    'wzg': '未整改'
  }
  const sumObj = {
    comName: '合计',
    yhsum: sumData.value[1],
    zdyh: sumData.value[2],
    aybyh: sumData.value[3],
    bybyh: sumData.value[4],
    yzg: sumData.value[5],
    wzg: sumData.value[6]
  }
  const data = structuredClone([...controldata.value, sumObj])
  exportXlsx(titleObj, data, '隐患数量', '隐患数量.xlsx')
}
//隐患数据接口
const getYhslData = () => {
  controldata.value = []
  getApi({}, "/mosty-jcgl/yhb/getPageList").then((res) => {
    controldata.value = res ? res : []
    show.value = true
    binshow.value = true;
  })
}
function yhsample(row, column, cellvalue) {
  if (cellvalue == 'A') {
    return '一般隐患A类'
  } else if (cellvalue == 'B') {
    return '一般隐患B类'
  } else if (cellvalue == 'C') {
    return '重大隐患'
  } else if (cellvalue == 'D') {
    return '不确定'
  }
}
//查看详情按钮
const handleClick = (index, row) => {
  popForm.value = true; //显示返回按钮
  var code = row.cityCode
  listQuery.value.ctiycode = code
  show.value = false
  binshow.value = false;
  yhslBarnum.value = []
  yhslData.value = []
  controldata.value = []
  getxqData()
  //柱状图图表数据
  getApi({ cityCode: code }, "/mosty-jcgl/yhb/getDetailsHistogram/{cityCode}").then((res) => {
    show.value = true
    binshow.value = true;
    yhslBarnum.value = [res[0].zdyh, res[0].aybyh, res[0].bybyh]
    yhslData.value = [
      { value: res[0].yzg, name: "已整改" },
      { value: res[0].wzg, name: "未整改" },
      { value: res[0].wzg, name: "整改中" },
    ]
  })
};

const getxqData = () => {
  controldatatwo.value = []
  getApi(listQuery.value, "/mosty-jcgl/yhb/getDetails/{cityCode}").then((res) => {
    controldatatwo.value = res.list ? res.list : []
  })
}
//点击返回
const backbtn = () => {
  popForm.value = false;
  show.value = false
  binshow.value = false;
  getYhslData()
};


//公司名称双击事件
function editData(row, column) {
  //双击单位名称获取城市编号
  if (column.property == 'comName') {
  }
  // popForm.value = true; //显示返回按钮
}

//关闭弹窗事件
function closeDialog() {
  emit("changeVi", false)
  popForm.value = false;
}
//表格合计
const getSummaries = (param) => {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "甘肃省局(合计)";
      return;
    }
    const values = data.map((item) => Number(item[column.property]));
    if (!values.every((value) => isNaN(value))) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0);
      if (index === 2 || index === 3 || index === 4) {
        show.value = true
        yhslBarnum.value = [sums[2], sums[3], sums[4]]
      } else if (index === 5 || index === 6) {
        yhslData.value = [
          { value: sums[5], name: "已整改" },
          { value: sums[6], name: "未整改" },
          { value: sums[6], name: "整改中" },
        ]
      }
    } else {
      sums[index] = "N/A";
    }
  });
  sumData.value = sums // 合计数据方便导出用
  return sums;
}

</script>
<style lang="scss" scoped>
@import "~@/assets/css/element-plus.scss";
@import "~@/assets/css/system/yxkztab.scss";

.binBox .right {
  width: 50%;
  position: relative;

  .rate {
    position: absolute;
    top: 50%;
    left: 70%;
    color: #fff;
    font-size: 20px;
  }
}

.excel-btn {
  position: absolute;
  top: 19px;
  right: 5%;
  background: #025c29;
  color: #0ecd0f;
  border-color: #025c29;
}

.square {
  width: 180px;
  height: 180px;
  background-color: rgb(43, 100, 62);
  border-radius: 20px;
  text-align: center;
  color: #fff;

  h3 {
    font-size: 18px;
    line-height: 1;
    padding: 0;
  }

  h1 {
    font-size: 100px;
    line-height: 1;
    margin: 0;
    padding: 0;
  }
}
</style>
