<template>
  <div class="overall">
    <!-- 搜索等功能那一块 -->
    <div class="title_boxx">
      <span>目标责任书</span>
      <div>
        <el-date-picker v-model="listQuery.year" type="year" placeholder="请选择年份" clearable format="YYYY"
          value-format="YYYY" style="margin-right: 15px" @change="changeTime" />
        <el-button type="primary" @click="getCount">搜索</el-button>
        <el-button type="primary" @click="rebackLast">返回上一级</el-button>
        <el-button type="primary" @click="router.push('/dutyBook/dutyBookList')">新增责任书</el-button>
      </div>
    </div>

    <div style="height: 420px">
      <BarGraph echId="echartZrs" @chooseDep="chooseDep" ref="echartsColum" />
    </div>

    <!-- 列表统计 -->
    <div class="title_boxx" style="margin-bottom: 30px">
      <span>列表统计</span>
      <el-button type="primary" @click="getExcelData" v-loading="loadingshow">
        <el-icon class="el-icon--right">
          <UploadFilled />
        </el-icon> 导出
      </el-button>
    </div>

    <!-- 表格 -->
    <div style="height: calc(100vh - 620px)">
      <el-table ref="multipleUserRef" @selection-change="handleSelectionChange" stripe :data="tableData"
        v-loading="loading" border width="100%" height="100%">
        <el-table-column prop="orgName" align="center" label="部门名称" />
        <el-table-column prop="all" align="center" label="应签订人数" />
        <el-table-column prop="yqd" align="center" label="已签订人数" />
        <el-table-column prop="qdl" align="center" label="签订率" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import BarGraph from "@/components/echarts/BarGraph.vue";
import * as XLSX from "xlsx";
import { onMounted, ref, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { dateFormat, exportXlsx } from "@/utils/tools.js";
import { getApi } from "@/api/tobAcco_api.js";
const echartsColum = ref(null)
const { proxy } = getCurrentInstance();
const router = useRouter();
const multipleSelectionUser = ref(); //列表选中的数据
const tableData = ref([]);
const depList = ref(['']) //存储的部门
const loading = ref(false)
const loadingshow = ref(false)
onMounted(() => {
  getCount();
});
const handleSelectionChange = (val) => {
  multipleSelectionUser.value = val;
};

const listQuery = ref({
  ssbmid: "",
  year: ref(dateFormat().slice(0, 4)) //日期
});

// 时间改变
function changeTime() {
  if (!listQuery.value.year) listQuery.value.year = dateFormat().slice(0, 4);
}

// 返回上一级
function rebackLast() {
  if (depList.value.length > 1) {
    depList.value.pop()
    let len = depList.value.length
    listQuery.value.ssbmid = depList.value[len - 1]
    getCount()
  } else {
    proxy.$message.warning("目前是最高部门");
  }
}

// 选择部门
function chooseDep(dep) {
  let obj = tableData.value.find(item => { return item.orgName == dep })
  if (obj) {
    depList.value.push(obj.orgId) //存储当前点击的部门
    listQuery.value.ssbmid = obj.orgId
    getCount()
  }
}
// 获取统计数据
function getCount() {
  loading.value = true;
  getApi(listQuery.value, "/mosty-jcgl/zrs/echartStatistics")
    .then((res) => {
      tableData.value = res ? res : [];
      tableData.value.forEach(item => {
        item.qdl = item.all ? (Number(item.yqd) / Number(item.all)).toFixed(2) + "%" : '0.00%'
      })
      loading.value = false;
      echartsColum.value.drawLine(tableData.value);
    })
    .catch(() => {
      loading.value = false;
    });
}

//获取导出表格数据
const getExcelData = () => {
  loadingshow.value = true
  let title = {
    orgName: "部门名称",
    all: "应签订人数",
    yqd: "已签订人数",
    qdl: "签订率",
  };
  if (tableData.value.length > 0) {
    exportXlsx(title, tableData.value, XLSX, "责任书");
    loadingshow.value = false
  }
};
</script>

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

.title_boxx {
  display: flex;
  justify-content: space-between;
}
</style>