<template>
  <div class="opstatisticBox box">
    <header>
      <div>
        <p class="panmen">科室手术量统计（前五）</p>
      </div>
    </header>
    <main>
      <div id="chartBottomRight" 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 { GetMonitorOperationDept } 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,
      pageList: [],
      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() {
      GetMonitorOperationDept({
        startDate: this.startDate,
        endDate: this.endDate,
      }).then(res => {
        this.pageList = res['data']
        this.updateChart();
      });
    },
    updateChart() {
      let categories = ['骨科', '普外科', '内科', '神经外科', '肿瘤科']
      let values = [0, 0, 0, 0, 0]
      let maxVal = 20;
      if (this.pageList.length) {
        categories = this.pageList.map(item => {
          return item['deptName']
        })
        values = this.pageList.map(item => {
          return item['deptCount']
        })
        maxVal = Math.ceil(Math.max(...values) / 20) * 20;
      }
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "shadow" }
        },
        grid: {
          left: "5%",
          right: "10%",
          bottom: "5%",
          top: "10%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: categories,
          axisLine: { lineStyle: { color: "rgba(0, 0, 0, 0.3)" } },
          axisLabel: { color: `rgba(0, 0, 0, 0.3)`, fontSize: 12, }
        },
        yAxis: {
          type: "value",
          axisLine: { show: true, lineStyle: { color: "rgba(0, 0, 0, 0.3)" } },
          axisLabel: { color: `rgba(0, 0, 0, 0.3)`, fontSize: 12, },
          max: maxVal
        },
        series: [
          {
            type: "bar",
            data: values,
            barWidth: 24,
            itemStyle: {
              borderRadius: [8, 8, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#8e5fff" },
                { offset: 1, color: "#4a90e2" }
              ]),
              shadowColor: "rgba(0,0,0,0.1)",
              shadowBlur: 6,
              shadowOffsetY: 3
            },
            label: {
              show: true,
              position: "top",
              color: "#a170ff",
              fontWeight: "bold",
              fontSize: 16,
              formatter: "{c}"
            }
          }
        ]
      };

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