<template>
  <div class="box">
    <header>
      <div>
        <p class="panmen">手术量统计</p>
      </div>
    </header>
    <main>
      <div id="chartBottomLeft" class="h-full"></div>
    </main>
    <section class="sidebar ">
      <div class="top" :class="{ 'active': active == 'week' }" @click="changeActive('week')">
        <span>周</span>
      </div>
      <div class="bottom" :class="{ 'active': active == 'month' }" @click="changeActive('month')">
        <span>月</span>
      </div>
    </section>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { GetMonitorOperationNumber } from '@/api/monitor';
import dayjs from 'dayjs';
export default {
  data() {
    return {
      active: 'week',
      startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
      endDate: dayjs().format('YYYY-MM-DD'),
      renderTimer: null,
      getDataList: [0, 0, 0, 0],
      myChart: null
    };
  },
  methods: {
    changeActive(newActive = '') {
      if (!newActive) {
        if (this.active == 'week') {
          newActive = 'month'
        } else {
          newActive = 'week'
        }
      }
      this.startDate = dayjs().subtract(newActive == 'week' ? 7 : 30, 'day').format('YYYY-MM-DD');
      this.active = newActive;
      this.onGetPageData();
    },
    onGetPageData() {
      GetMonitorOperationNumber({
        startDate: this.startDate,
        endDate: this.endDate,
      }).then(res => {
        this.getDataList = [res['data']['electiveCount'], res['data']['emergencyCount'], res['data']['daySurgeryCount'], res['data']['outSurgeryCount']]
        this.updateChart();
      });
    },
    updateChart() {
      let categories = ['择期手术', '急诊手术', '日间手术', '门诊手术']
      let maxVal = 10
      if (Math.max(...this.getDataList) > 0) {
        maxVal = Math.ceil(Math.max(...this.getDataList) / 10) * 10;
      }
      const option = {
        grid: {
          left: 80,
          right: 50,
          top: 20,
          bottom: 20,
        },
        xAxis: {
          max: maxVal,
          axisLine: { show: true, lineStyle: { color: "rgba(0, 0, 0, 0.3)" } },
          axisLabel: {
            color: `rgba(0, 0, 0, 0.3)`,
            fontSize: 12,
          },
        },
        yAxis: {
          type: "category",
          data: categories,
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            color: `rgba(0, 0, 0, 0.3)`,
            fontSize: 12,
          },
        },
        series: [
          {
            type: "bar",
            data: this.getDataList,
            barWidth: 24,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: "#a066f8" },
                { offset: 1, color: "#6173f7" },
              ]),
              borderRadius: 10,
            },
            z: 2,
          },
          {
            type: "scatter",
            data: this.getDataList,
            symbolSize: 24,
            itemStyle: {
              color: "#fff",
              borderColor: "#8a6df0",
              borderWidth: 1,
              shadowColor: "#fff",
              shadowBlur: 5,
            },
            z: 3,
            label: {
              show: true,
              position: "outside",
              formatter: "{c}",
              color: "#8a6df0",
              fontSize: 14,
              fontWeight: "bold",
            },
          },
        ],
      };

      this.myChart.setOption(option);
    },
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("chartBottomLeft"));
    this.onGetPageData();
    setInterval(() => {
      this.changeActive()
    }, this.$store.getters.intervalTime);
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
};
</script>

<style lang="scss" scoped>
@import './index.scss'
</style>
