<template>
  <el-card shadow="never" v-if="watchOrderOption.legend.data.length > 0">
    <div>
      <v-chart
        ref="watchOrder"
        style="width: 100%; height: 500px"
        :option="watchOrderOption"
      />
    </div>
  </el-card>
</template>

<script>
  import { getStatisticsStackedWatchOrder } from '@/api/sylive/activity';
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { LineChart } from 'echarts/charts';
  import {
    LegendComponent,
    GridComponent,
    ToolboxComponent,
    TooltipComponent
  } from 'echarts/components';
  import VChart from 'vue-echarts';
  import 'echarts-wordcloud';
  import { echartsMixin } from '@/utils/echarts-mixin';
  use([
    CanvasRenderer,
    GridComponent,
    TooltipComponent,
    LegendComponent,
    ToolboxComponent,
    LineChart
  ]);

  export default {
    components: { VChart },
    mixins: [echartsMixin(['watchOrder'])],
    data() {
      return {
        watchOrderOption: {
          legend: {
            data: []
          }
        } //折线图
      };
    },
    methods: {
      //区域统计折线图
      getStatisticsStackedWatchOrder() {
        this.watchOrderOption = { legend: { data: [] } };
        const activityId = this.$route.query.id;
        const type = 1;
        getStatisticsStackedWatchOrder({
          activityId,
          type
        }).then((res) => {
          this.watchOrderOption = {
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              padding: [13, 260, 0, 40],
              data: res.legendData
            },
            grid: {
              left: '3%',
              right: '4%',
              top: '10%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: res.xAxisData
            },
            yAxis: {
              type: 'value'
            },
            series: res.yAxisSeries
          };
        });
      }
    },
    watch: {
      $route: {
        handler(route) {
          const { path } = route;
          if (path !== '/sylive/activity/statistics-team') {
            return;
          }
          this.getStatisticsStackedWatchOrder();
        },
        immediate: true
      }
    }
  };
</script>
