<template>
  <div class="container">
    <div class="echar" ref="echarBox"></div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { getApi } from "@/api/tobAcco_api.js"
import * as echarts from "echarts";

const echarBox = ref();
const id = ref();
// 查询参数
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 10,
  total: 0,
  planid: ''
})
const listQuery2 = ref({
  pageCurrent: 1,
  pageSize: 20,
  total: 0,
  year: new Date().getFullYear() + ""
})
// 渲染列表数据
const getEchartsData = () => {
  getApi(listQuery.value, `/mosty-jcgl/yjyl/countMouth?id=` + listQuery.value.planid).then((res) => {
    if (res) {
      let time = []
      let data1 = []
      let data2 = []
      if (res.length > 0) {
        for (let i = 0; i < res.length; i++) {
          time.push(res[i].month)
          data1.push(res[i].yjcount)
          data2.push(res[i].count)
        }
      }
      let options = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["预计参与", "实际参与"]
        },
        toolbox: {
          show: true,
          feature: {}
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: time
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "预计参与",
            type: "line",
            data: data1
          },
          {
            name: "实际参与",
            type: "line",
            data: data2
          }
        ]
      }
      echarts.init(echarBox.value).setOption(options);
    }
  });
}
// 获取列表信息
function getTableData() {
  // tableloading.value = true;
  getApi(listQuery2.value, `/mosty-jcgl/yjyl/countYjylByYear`).then((res) => {
    if (res.records) {
      // data.tableData = res.records;
      // listQuery2.value.total = res.total;
      if (res.records.length > 0) {
        // id.value = res.records[0].id;
        listQuery.value.planid = res.records[0].id;
        getEchartsData();
      }
    } else {
      // data.tableData = [];
    }
  }).finally(() => {
    // tableloading.value = false;
  });
}
onMounted(() => {
  getTableData()
  // getEchartsData();
})
</script>

<style lang="scss" scope>
.container {
  height: 100%;
}

.echar {
  height: calc(100% - 10px);
  width: 100%;
  border: 1px solid #ECECEC;
  margin-bottom: 20px;
}
</style>