<script setup lang="ts">
import Panel from "@/components/common/Panel.vue";
import {onMounted, onUnmounted, ref} from "vue";
import * as echarts from "echarts";
import {getThisWeek} from "@/utils/dateUtils.ts";
import {post} from "@/utils/request.ts";
const echart = ref<HTMLElement | null>(null)
let myChart: echarts.ECharts | null = null;
onMounted(()=>{
  initEcharts(dateList.value, vipData.value, commonData.value)
  getPersonPayOverview()
  window.addEventListener('resize', handleResize);
})
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
const handleResize = () => {
  if (myChart) {
    myChart.resize();
  }
  window.removeEventListener('resize', handleResize);
};
const getPersonPayOverview = () => {
  const thisWeek = getThisWeek();
  post("statistics/getPersonPayOverview", {beginTime: thisWeek.start, endTime: thisWeek.end}).then((res: any) => {
    dateList.value = res.dateList
    vipData.value = res.vipPrice
    commonData.value = res.commonPrice
    initEcharts(dateList.value, vipData.value, commonData.value)
  })
}
const dateList = ref([
  '2024-04-01',
  '2024-03-30',
  '2024-03-26',
  '2024-03-22',
  '2024-03-18',
  '2024-03-14',
  '2024-03-10',
  '2024-03-06',
  '2024-03-02',
])
const vipData = ref([120, 132, 101, 134, 90, 230, 210])
const commonData = ref([220, 182, 191, 234, 290, 330, 310])
const initEcharts = (dateList: any[], vipData: any, commonData: any) => {
  if (myChart) {
    myChart.dispose();
  }
  myChart = echarts.init(echart.value);
  myChart.setOption(
      {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['患者', '普通',]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: dateList
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '患者',
            type: 'line',
            stack: 'Total',
            data: vipData
          },
          {
            name: '普通',
            type: 'line',
            stack: 'Total',
            data: commonData
          }
        ]
      }
  );
}
</script>

<template>
  <Panel title="经营概况">
    <div class="tu" ref="echart" style="height: 100%;width: 100%"></div>
  </Panel>
</template>

<style scoped lang="scss">

</style>