<template>
  <div class="ele-body ele-body-card" v-loading="loading">
    <el-card shadow="never" :header="title">
      <div>
        <v-chart
          ref="barChart"
          style="height: 500px"
          :option="barChartOption"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
  import { setPageTabTitle } from '@/utils/page-tab-util';
  import { getActivitystoreBarchart } from '@/api/sylive/activity';
  const ROUTE_PATH = '/sylive/activity/statistics/storebarchart';

  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { BarChart } from 'echarts/charts';
  import { GridComponent, TooltipComponent } from 'echarts/components';
  import VChart from 'vue-echarts';
  import { echartsMixin } from '@/utils/echarts-mixin';

  use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);

  export default {
    name: 'SyliveActivityStatisticsStore',
    components: {
      VChart
    },
    mixins: [echartsMixin(['barChart'])],
    data() {
      return {
        id: '',
        title: '',
        loading: true,
        // 词云图表配置
        barChartOption: {}
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    methods: {
      //进入加载数据
      query() {
        const id = this.$route.query.id;
        this.id = id;
        this.title = this.$route.query.title;
        this.loading = true;
        getActivitystoreBarchart(this.$route.query)
          .then((data) => {
            this.loading = false;
            //饼状图
            if (data.dataTitle.length > 0) {
              this.barChartOption = {
                tooltip: {
                  trigger: 'axis'
                },
                xAxis: {
                  type: 'category',
                  data: data.dataTitle
                },
                yAxis: {
                  type: 'value'
                },
                series: [
                  {
                    data: data.dataValue,
                    type: 'bar',
                    label: {
                      show: true,
                      position: 'top'
                    },
                    barMaxWidth: 40
                  }
                ]
              };
            }
            // 修改页签标题
            if (this.$route.path === ROUTE_PATH) {
              setPageTabTitle(this.$route.query.title + '柱状图');
            }
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      }
    },
    watch: {
      $route: {
        handler(route) {
          const { path } = route;
          if (path !== ROUTE_PATH) {
            return;
          }
          this.query();
        },
        immediate: true
      }
    }
  };
</script>
