<template>
  <div class="app-container">
    <div class="box">
      <div>试题解析使用总量：{{ total.analysis }}</div>
      <div class="chart" ref="chartRef"></div>
      <div>试题使用总量：{{ total.title }}</div>
      <div class="chart" ref="chartRef1"></div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { nextTick, onMounted, reactive } from "vue";
import { getUsageStatistics } from "@/api";
import * as echarts from "echarts";
import dayjs from "dayjs";

const total = reactive({
  analysis: 0,
  title: 0,
});

const chartRef = ref();
const chart = ref();

const chartRef1 = ref();
const chart1 = ref();

async function getData() {
  const { data: res } = await getUsageStatistics();
  total.analysis = res.analysisTotalUsageNum;
  chart.value.setOption({
    xAxis: {
      data: res.analysisDailyUsageList.map((i) => {
        const date = dayjs(i.Key).format("MM-DD");
        return date;
      }),
    },
    series: [
      {
        data: res.analysisDailyUsageList.map((i) => i.Value),
      },
    ],
  });
  total.title = res.titleTotalUsageNum;
  chart1.value.setOption({
    xAxis: {
      data: res.titleDailyUsageList.map((i) => {
        const date = dayjs(i.Key).format("MM-DD");
        return date;
      }),
    },
    series: [
      {
        data: res.titleDailyUsageList.map((i) => i.Value),
      },
    ],
  });
}

onMounted(() => {
  chart.value = echarts.init(chartRef.value);
  chart.value.setOption({
    xAxis: {
      type: "category",
      data: [],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [],
        type: "line",
        smooth: true,
        label: {
          show: true,
          position: "outside",
          formatter: "{c}",
        },
      },
    ],
  });

  chart1.value = echarts.init(chartRef1.value);
  chart1.value.setOption({
    xAxis: {
      data: [],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [],
        type: "line",
        smooth: true,
        label: {
          show: true,
          position: "outside",
          formatter: "{c}",
        },
      },
    ],
  });

  getData();
});
</script>
<style scoped lang="scss">
.app-container {
  position: relative;
  form {
    margin: 0 auto;
  }
  .box {
    background: #fff;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    .chart {
      height: 400px;
    }
  }
}
</style>
