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

      <!-- 运行控制的数据统计表 -->
      <!-- 岗位达标 -->
      <!-- 临时注释 start ================== -->
      <!-- <div class="binBox" v-if="dataTitle == '岗位达标'">
        <div class="left" v-if="show">
          <BinCharts :binData="gwData" :loadingshow="binshow" />
        </div>
        <div class="right">
          <BinManyBar ids="gwdb" :barTitle="gwBartitle" :barNum="gwBarnum"
            v-if="gwBartitle.length > 0 && gwBarnum.length > 0" :loadingshow="binshow" />
        </div>
      </div> -->
      <!-- 临时注释 end ================== -->
      <br />
      <div>
        <!-- 岗位达标 -->
        <el-table stripe height="450px" border :data="controldata" id="out-table" @cell-dblclick="editData" show-summary
          :summary-method="getSummaries">
          <el-table-column property="comName" label="单位部门名称" width="250"></el-table-column>
          <el-table-column property="joinPersonSum" label="总人数"></el-table-column>
          <el-table-column property="dbPerson" label="达标人数"></el-table-column>
          <el-table-column property="kdbPerson" label="可达标"></el-table-column>
          <el-table-column property="wdbPerson" label="未达标"></el-table-column>
          <el-table-column property="dbl" label="达标率"></el-table-column>
          <!-- <el-table-column label="操作" fixed="right" 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>
  </div>
</template>

<script setup>
import BinManyBar from "../../charts/binManyBar.vue";
import BinCharts from "../../charts/binChart2.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { exportExcel } from "@/utils/tools";
import { ref, defineProps, reactive, onMounted, nextTick } from "vue";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { fakeGwdbData } from "../../fakeData.js"
const props = defineProps({
  title: String,
  isShow: Boolean
});
//运行控制的数据
const controldata = ref([]);
const emit = defineEmits(['changeVi'])
// const datalist = ref([]);
const binshow = ref(false);
const show = ref(false)
// 岗位达标数量得饼图数据
const gwData = ref([
  { value: 282, name: "达标数" },
  { value: 99620, name: "可达标" },
  { value: 7192, name: "未达标" }
]);
// 岗位达标柱状图
const gwBartitle = ref([]);
const gwBarnum = ref([])
// const gwBarnum = ref([
//   {
//     name: "已达标",
//     data: [120, 132, 101],
//     color: "#7BA87B"
//   },
//   {
//     name: "未达标",
//     data: [120, 132, 10],
//     color: "#748EDE"
//   },
//   {
//     name: "不达标",
//     data: [22, 55, 101],
//     color: "rgb(216, 177, 104)"
//   }
// ]);

const controlone = ref([]);
const controldatatwo = ref([]);
//分公司表格数据

const popForm = ref(false);
const isShow = ref(false);
const dataTitle = props.title;
/** 合计数组 */
const sumData = ref([]);
const listQuery = ref({

});
onMounted(() => {
  // 设置假数据1 start=====
  controldata.value = fakeGwdbData()
  isShow.value = true;
  return
  // 设置假数据1 end =====

  // 岗位达标柱状图
  getBarData();
  getGWDBList();
  isShow.value = true;
  popForm.value = false;
});
//查看详情按钮
const handleClick = (index, row) => {
  var val = row.name;
  popForm.value = true; //显示返回按钮
};
const exportExcels = () => {
  const titleObj = {
    comName: '单位名称',
    joinPersonSum: '总人数',
    dbPerson: '达标人数',
    kdbPerson: '可达标',
    wdbPerson: '未达标',
    dbl: '达标率'
  }
  const sumObj = {
    comName: '合计',
    joinPersonSum: sumData.value[1],
    dbPerson: sumData.value[2],
    kdbPerson: sumData.value[3],
    wdbPerson: sumData.value[4],
    dbl: sumData.value[5]
  }
  const exportArr = structuredClone([...controldata.value, sumObj])
  exportXlsx(titleObj, exportArr, '岗位达标', '岗位达标.xlsx')
}
//点击返回
const backbtn = () => {
  controldata.value = controlone.value;
  popForm.value = false;
};

// 合计
function 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
        gwData.value = [
          { value: sums[2], name: "达标数" },
          { value: sums[3], name: "可达标" },
          { value: sums[4], name: "未达标" }
        ];
      }
    } else {
      sums[index] = 'N/A';
    }
  });
  sumData.value = sums // 合计数据方便导出用
  return sums;
}


//关闭弹窗的回调
function handleClose() {
  emit("changeVi", false)
  currentPage.value = 1;
}

// 岗位达标列表
const getGWDBList = () => {
  controldata.value = []
  getApi({}, "/mosty-jcgl/gwdb/getDetails").then((res) => {
    controldata.value = res ? res : []
  })
}
// 岗位达标柱状图
const getBarData = () => {
  gwBartitle.value = []
  getApi({}, "/mosty-jcgl/gwdb/getPost").then((res) => {

    gwBartitle.value = res.map(it => { return it.post == '01' ? '决策岗位' : it.post == '02' ? '管理岗位' : '作业岗位' })
    gwBarnum.value = [
      {
        name: "达标",
        data: res.map(it => { return it.db }),
        color: "#7BA87B"
      },
      {
        name: "可达标",
        data: res.map(it => { return it.kdb }),
        color: "#748EDE"
      },
      {
        name: "未达标",
        data: res.map(it => { return it.wdb }),
        color: "rgb(185, 147, 75)"
      },
    ]

    binshow.value = true;
  })
}


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

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

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

.el-table__header {
  border-top: 1px solid #50bf1d !important;
}

.el-table__header-wrapper {
  border-top: 1px solid #50bf1d !important;
}

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