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

    <!-- 运行控制弹窗 -->
    <el-dialog center ref="dialog" :title="dataTitle" modal :before-close="closeDialog" class="dialogClass"
      :append-to-body="true" width="90%" custom-class="custom-dialog" v-model="isShow">
      <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>

      <!-- 运行控制的数据统计表 -->
      <!-- 综合检查 -->
      <div class="binBox" style="justify-content: space-around">
        <div class="square" v-for="(item, index) in typeData" :key="index">
          <h3>{{ item.name }}</h3>
          <h1>{{ item.num }}</h1>
        </div>
      </div>

      <!-- 综合检查 -->
      <div>
        <el-table :key="tableKey" show-summary :summary-method="getSum" stripe height="450px" border :data="controldata"
          id="out-table" @cell-dblclick="editData">
          <el-table-column property="comName" label="单位名称" width="250"></el-table-column>
          <el-table-column property="zhCurls" label="综合检查"></el-table-column>
          <el-table-column property="zxCheck" label="专项检查"></el-table-column>
          <el-table-column property="qtCheck" label="其他检查"></el-table-column>
          <el-table-column property="totalCheckNum" label="总数"></el-table-column>
          <el-table-column v-if="popForm" property="jccs" label="检查此书"></el-table-column>
          <el-table-column v-if="popForm" property="jd" label="季度"></el-table-column>
          <el-table-column v-if="popForm" property="bn" label="半年"></el-table-column>
          <el-table-column v-if="popForm" property="yd" label="月度"></el-table-column>
          <el-table-column v-if="popForm" property="zx" label="专项"></el-table-column>
          <el-table-column v-if="popForm" property="nz" label="年终"></el-table-column>
          <el-table-column v-if="popForm" property="af" label="暗访"></el-table-column>
          <!-- 临时注释 start -->
          <!-- <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> -->
          <!-- 临时注释 end -->
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>

import { getApi, postApi } from "@/api/tobAcco_api.js";
import { getSummaries } from "@/utils/tools";
import { exportXlsx } from "@/excel/Export2Excel.js";
import * as XLSX from "xlsx";
import { ref, defineProps, reactive, onMounted, nextTick, defineEmits } from "vue";

const props = defineProps({
  title: String,
  isShow: Boolean
});
//运行控制的数据
const controldata = ref([]);
const tableKey = ref(1)
const emit = defineEmits(['changeVi'])
// const datalist = ref([]);
const binshow = ref(false);
const loadingShow = ref(false);
// 不同类型检查数据
const typeData = ref([
  {
    name: "专项",
    num: "0"
  },
  {
    name: "季度",
    num: "0"
  },
  {
    name: "半年",
    num: "0"
  },
  {
    name: "年终",
    num: "0"
  },
  {
    name: "月度",
    num: "0"
  }
]);

//分公司表格数据
const popForm = ref(false);
const isShow = ref(false);
const key = ref("");
// const num=ref(0)    //0为总数，1为使用，作为标记
const msg = ref("");
const dataTitle = props.title;
// const pagers=ref(0)
const vmId = ref("0");
const tableData = reactive([]);
const tableColumn = ref([]);
const code = ref(0)
const sumData = ref([])
onMounted(() => {
  // 临时注释 TODO: start ========
  typeData.value[0].num = 13;
  typeData.value[1].num = 21;
  typeData.value[2].num = 40;
  typeData.value[3].num = 90;
  typeData.value[4].num = 8;
  getZhjcData();
  isShow.value = true;
  binshow.value = true;
  popForm.value = false;
  return // 临时注释 TODO: end========

  //运行控制数据
  getNum();
  getZhjcData();
  isShow.value = true;
  binshow.value = true;
  popForm.value = false;

});
const getSum = (...arg) => {
  sumData.value = getSummaries(...arg)
  return sumData.value
}

//综合检查数据
const getZhjcData = () => {
  controldata.value = []
  getApi({}, "/mosty-jcgl/overallcheck/getZhjcList").then((res) => {
    controldata.value = res ? res : []
  })
}

//导出
function exportExcels() {
  loadingShow.value = true
  let title = {
    comName: "单位名称",
    zhCurls: "综合检查",
    zxCheck: "专项检查",
    qtCheck: "其他检查",
    totalCheckNum: "总数",
  };
  const sumObj = {
    comName: '合计',
    zhCurls: sumData.value[1],
    zxCheck: sumData.value[2],
    qtCheck: sumData.value[3],
    totalCheckNum: sumData.value[0]
  }
  const data = structuredClone([...controldata.value, sumObj])
  exportXlsx(title, data, '综合检查', '综合检查.xlsx');
  loadingShow.value = false
}
// 综合检查详情
const getDetails = () => {
  controldata.value = []
  getApi({ cityCode: code.value }, "/mosty-jcgl/overallcheck/getDetailsCounty/{cityCode").then((res) => {
    controldata.value = res ? res : []
  })
}

// 综合检查数字块
const getNum = () => {
  getApi({}, "/mosty-jcgl/overallcheck/getZhjcPicg").then((res) => {
    var {
      '1': zx,
      '2': jd,
      '3': bn,
      '4': nz,
      '5': yd,
      '9': af,
    } = res
    typeData.value.forEach((item) => {
      if (item.name == '专项') {
        item.num = zx
      }
      if (item.name == '季度') {
        item.num = jd
      }
      if (item.name == '半年') {
        item.num = bn
      }
      if (item.name == '年终') {
        item.num = nz
      }
      if (item.name == '月度') {
        item.num = yd
      }
      if (item.name == '暗访') {
        item.num = af
      }
    })
  })
}
//查看详情按钮
const handleClick = (index, row) => {
  tableKey.value = 2
  code.value = row.cityCode
  popForm.value = true; //显示返回按钮
  getDetails();
};

//点击返回
const backbtn = () => {
  popForm.value = false;
  tableKey.value = 1
  getZhjcData();
};


//关闭弹窗的回调
function handleClose() {
  emit("changeVi", false)
  currentPage.value = 1;
}
//公司名称双击事件
function editData(row, column) {
  //双击单位名称获取城市编号
  if (column.property == 'comName') {
  }
  // popForm.value = true; //显示返回按钮
}

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


</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;
  }
}

.el-dialog--center .el-dialog__body {
  padding: 0px;
}

.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>
