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

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

      <section class="button">
        <el-button v-if="!popForm" @click="exportExcels">导出</el-button>
        <el-button v-if="popForm" @click="backbtn">返回</el-button>
        <el-button @click="closeDialog">关闭</el-button>
      </section>

      <!-- 责任书 -->
      <!-- 临时注释 TODO： start -->
      <!-- <div class="binBox">
        <BinManyBar ids="zrs" :barTitle="zrsBartitle" :barNum="zrsBarnum"
          v-if="zrsBartitle.length > 0 & zrsBarnum.length > 0" :loadingshow="binshow" />
      </div> -->
      <!-- 临时注释 end -->


      <!-- 责任书 -->
      <div>
        <el-table v-if="!popForm" show-summary :summary-method="getSummaries" stripe height="333px" border
          :data="controldata" id="out-table" @cell-dblclick="editData">
          <el-table-column property="comName" label="单位名称" width="250"></el-table-column>
          <el-table-column property="yqrs" label="应签人数"></el-table-column>
          <el-table-column property="notsigned" label="未签人数"></el-table-column>
          <el-table-column property="signed" label="已签人数"></el-table-column>
          <!-- <el-table-column property="qdl" label="签订率"></el-table-column> -->
          <el-table-column label="签订率" align="center" prop="qdl">
            <template #default="scope"> {{ scope.row.qdl }}% </template>
          </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>

        <el-table v-else-if="popForm" stripe height="333px" border :data="detailData" id="out-table">
          <el-table-column property="zrsmc" label="责任书名称"></el-table-column>
          <el-table-column property="ryxm" label="人员姓名"></el-table-column>
          <el-table-column property="zrslx" label="责任书类型">
          </el-table-column>
          <el-table-column property="signtype" label="签订分类">
            <template #default="scope">{{ scope.row.signtype === '1' ? '网签' : '线下签订' }}</template>
          </el-table-column>
          <el-table-column property="qdzt" label="签订状态">
          </el-table-column>
          <el-table-column property="qdsj" label="签订时间"></el-table-column>
        </el-table>
      </div>


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

<script setup>
import BinManyBar from "../../charts/binManyBar.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
// import { exportXlsx } from "@/excel/Export2Excel.js";
import { exportXlsx } from "@/excel/Export2Excel.js";
import * as XLSX from "xlsx";
import { ref, defineProps, reactive, onMounted, nextTick, defineEmits } from "vue";

import { fakeZrsData } from "../../fakeData";
const props = defineProps({
  title: String,
  isShow: Boolean,
  num: Number
});
//运行控制的数据
const num = props.num
const controldata = ref([]);
const detailData = ref([])
const loadingShow = ref(false);
const emit = defineEmits(['changeVi'])
// const datalist = ref([]);
const binshow = ref(false);
//饼状图数据
// 责任书柱状图
const zrsBartitle = ref([
]);
const zrsBarnum = ref([
  {
    name: "未签订",
    data: [],
    color: "#7BA87B"
  },
  {
    name: "签订",
    data: [],
    color: "#748EDE"
  }
]);
const popForm = ref(false);
const isShow = ref(false);
const dataTitle = props.title;
const listQuery = ref({
  code: ''
});
const sumData = ref([])
onMounted(() => {

  // 临时注释 TODO: start =======
  controldata.value = fakeZrsData()
  isShow.value = true;
  binshow.value = true;
  var title = props.title
  popForm.value = false;
  return
  // 临时注释 end =======

  //运行控制数据
  getZrsData();
  getBarData();
  isShow.value = true;
  binshow.value = true;
  var title = props.title
  popForm.value = false;

});
const getZrsData = () => {
  controldata.value = []
  getApi({}, "/mosty-jcgl/zrs/getZrsList").then((res) => {
    controldata.value = res ? res : []
  })
}
// 责任书详情
const getDetails = () => {
  detailData.value = []
  getApi(listQuery.value, "/mosty-jcgl/zrs/getCountyList/{cityCode}").then((res) => {
    detailData.value = res.list ? res.list : []
  })
}

// 责任书柱状图
const getBarData = () => {
  getApi({}, "/mosty-jcgl/zrs/getColumn").then((res) => {
    res.forEach((item) => {
      zrsBartitle.value.push(item.comName)
      zrsBarnum.value.forEach((i) => {
        if (i.name === '未签订') {
          i.data.push(item.notsigned)
        }
        if (i.name === '签订') {
          i.data.push(item.signed)
        }
      })
    })
  })
}

//查看详情按钮
const handleClick = (index, row) => {
  popForm.value = true; //显示返回按钮
  var val = row.cityCode;
  listQuery.value.code = val
  getDetails();
};

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

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

//关闭弹窗事件
function closeDialog() {
  emit("changeVi", false)
  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 === 4) {
        sums[index] = parseInt(sums[index] / data.length) + '%'
      }
    } else {
      sums[index] = "N/A";
    }
  });
  sumData.value = sums
  return sums;
}
//导出
function exportExcels() {
  loadingShow.value = true
  let titleObj = {
    comName: "单位名称",
    yqrs: "应签人数",
    notsigned: "未签人数",
    signed: "已签人数",
    qdl: "签订率",
  };
  const sumObj = {
    comName: sumData.value[0], // 合计
    yqrs: sumData.value[1],
    notsigned: sumData.value[2],
    signed: sumData.value[3],
    qdl: sumData.value[4]
  }
  const data = structuredClone([...controldata.value, sumObj])
  exportXlsx(titleObj, data, '责任书', '责任书.xlsx');
  loadingShow.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>
