<template>
  <div class="pubDataBox">

    <!-- 运行控制弹窗 -->
    <el-dialog center ref="dialog" :title="props.title" :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">
        <div class="left" v-if="show">
          <BinCharts :binData="pxslData" :loadingshow="binshow" />
        </div>
        <div class="right">
          <BinLine :barTitle="pxslBartitle" :barNum="pxslBarnum" v-if="pxslBarnum.length > 0" />
        </div>
      </div> -->
      <!-- 临时隐藏 end-->

      <!-- 培训数量 -->
      <div v-if="!popForm">
        <el-table show-summary :summary-method="getSummaries" stripe height="333px" border id="out-table"
          :data="controldata" @cell-dblclick="editData">
          <el-table-column property="comName" label="单位名称" width="250"></el-table-column>
          <el-table-column property="pxjhs" label="培训计划数"></el-table-column>
          <el-table-column label="实施次数">
            <el-table-column property="jhn" label="计划内"></el-table-column>
            <el-table-column property="jhw" label="计划外"></el-table-column>
          </el-table-column>
          <el-table-column label="合计">
            <el-table-column property="zpxs" label="总培训次数"></el-table-column>
            <el-table-column property="zrc" label="总学时"></el-table-column>
            <el-table-column property="zxs" label="总人次"></el-table-column>
          </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>
      <div v-else-if="popForm">
        <!-- 培训数量 -->
        <el-table stripe height="333px" border id="out-table" :data="controldatatwo">
          <el-table-column property="startDate" label="开始时间"></el-table-column>
          <el-table-column property="finshDate" label="结束时间"></el-table-column>
          <el-table-column property="planName" label="培训项目"></el-table-column>
          <el-table-column property="planChargePersonName" label="负责人"></el-table-column>
          <el-table-column property="contactorName" label="联系人"></el-table-column>
          <el-table-column property="planHostsDeptName" label="主办部门"></el-table-column>
          <el-table-column property="type" label="计划类型" :formatter="pxsample"></el-table-column>
          <el-table-column property="state" label="状态"></el-table-column>
        </el-table>

      </div>



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

<script setup>
import BinLine from "../../charts/binline.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import BinCharts from "../../charts/binChart2.vue";
import { dateFormat, exportExcel } from "@/utils/tools.js";
import { ref, defineProps, reactive, onMounted, nextTick, defineEmits } from "vue";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { fakePxslData } from "../../fakeData.js"; // 假数据
const props = defineProps({
  title: String,
  isShow: Boolean
});
//运行控制的数据
const controldata = ref([]);
const controldatatwo = ref([]);
const emit = defineEmits(['changeVi'])
const binshow = ref(false);
//饼状图数据
// 培训数量得饼图数据
const pxslData = ref([]);
//培训数量柱状图
const pxslBartitle = ref([])//标题
const pxslBarnum = ref([]);
const mouthdata = ref(dateFormat({ type: 'month' }))
const popForm = ref(false);
const show = ref(false);
const isShow = ref(false);
const dataTitle = props.title;
const sumData = ref([])
const listQuery = ref({
  ctiycode: ''
});

onMounted(() => {

  //临时假数据 ==========================
  controldata.value = fakePxslData()
  isShow.value = true;
  return
  //临时假数据 ==========================

  //运行控制数据
  getPxslData();
  isShow.value = true;
  popForm.value = false;
  binshow.value = false;
});
const exportExcels = () => {
  const titleObj = {
    'comName': '单位名称',
    'pxjhs': '培训计划数',
    'jhn': '实施次数(计划内)',
    'jhw': '实施次数(计划外)',
    'zpxs': '总培训次数',
    'zrc': '总学时',
    'zxs': '总人次'
  }
  const sumObj = {
    comName: '合计',
    pxjhs: sumData.value[1],
    jhn: sumData.value[2],
    jhw: sumData.value[3],
    zpxs: sumData.value[4],
    zrc: sumData.value[5],
    zxs: sumData.value[6]
  }
  const data = structuredClone([...controldata.value, sumObj])
  exportXlsx(titleObj, data, '培训数量', '培训数量.xlsx')
}
const getData = () => {
  var dataArr = [];
  var data = new Date();
  var year = data.getFullYear();
  var month = data.getMonth() + 1;
  var endDate = year - 1;	 //自定义截止年份时间 例如是2020年
  var rate = year - endDate;
  var monthNum = (rate - 1) * 12 + 7 + month;  //取到的月份	
  data.setMonth(data.getMonth() + 1, 1); //获取到当前月份,设置月份
  for (var i = 0; i < monthNum; i++) {
    data.setMonth(data.getMonth() - 1); //每次循环一次 月份值减1
    var m = data.getMonth() + 1;
    m = m < 10 ? "0" + m : m;
    dataArr.push(data.getFullYear() + "-" + m);
  }
  pxslBartitle.value = dataArr.reverse();
  getLinData()
}
//培训数量柱状图数据
const getLinData = () => {
  getApi({ month: mouthdata.value }, '/mosty-jcgl/training/getHistogram/{month}').then((res) => {
    var arr = [];
    pxslBartitle.value.forEach((item) => {
      arr.push(parseInt(res[item]))
    })
    pxslBarnum.value = arr
  })
}
//培训数量接口
const getPxslData = () => {
  controldata.value = []
  getData()
  getApi({}, '/mosty-jcgl/training/getPageList').then((res) => {
    controldata.value = res ? res : [];
    show.value = true
    binshow.value = true;
  })

}

//详情页柱状图
const getxqLinData = (code) => {
  getApi({ month: mouthdata.value, cityCode: code }, '/mosty-jcgl/training/getHistogramTir/{month}/{cityCode}').then((res) => {
    var arr1 = [];
    pxslBartitle.value.forEach((item) => {
      arr1.push(parseInt(res[item]))
    })
    pxslBarnum.value = arr1
  })
}
function pxsample(row, column, cellvalue) {
  if (cellvalue == '1') {
    return '计划培训'
  } else if (cellvalue == '2') {
    return '计划外培训'
  } else if (cellvalue == '3') {
    return '车辆培训'
  }
}
//查看详情按钮
const handleClick = (index, row) => {
  popForm.value = true; //显示返回按钮
  var code = row.cityCode
  listQuery.value.ctiycode = code
  show.value = false
  binshow.value = false;
  pxslData.value = []
  controldata.value = []
  pxslBarnum.value = []
  getXqtab(code, row)
};
const getXqtab = (code, row) => {
  getXqList();
  getxqLinData(code);
  pxslData.value = [
    { value: row.pxjhs, name: "计划数" },
    { value: row.jhn, name: "计划内培训数" },
    { value: row.jhw, name: "计划外培训数" }
  ];
}
const getXqList = () => {
  controldatatwo.value = []
  getApi(listQuery.value, '/mosty-jcgl/training/getDetails/{cityCode}').then((res) => {
    show.value = true
    binshow.value = true;
    controldatatwo.value = res.list ? res.list : []
    total.value = res.total;
  })
}
//点击返回
const backbtn = () => {
  popForm.value = false;
  show.value = false
  binshow.value = false;
  pxslBarnum.value = []
  getPxslData()
  getSummaries
};

//关闭弹窗的回调
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;
}//表格合计
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 === 1 || index === 2 || index === 3) {
        show.value = true
        pxslData.value = [
          { value: sums[1], name: "计划数" },
          { value: sums[2], name: "计划内培训数" },
          { value: sums[3], 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;
  }
}

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