<template>
  <div class="ele-body ele-body-card" v-loading="loading">
    <el-card shadow="never" :header="title">
      <div v-if="Barheight > 0">
        <v-chart
          ref="barChart"
          :style="'height:' + Barheight + 'px'"
          :option="barChartOption"
          @mousedown="barMousedown"
        />
      </div>
    </el-card>
  </div>
</template>

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

  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: 'SyliveActivityStatisticsRegion',
    components: {
      VChart
    },
    mixins: [echartsMixin(['barChart'])],
    data() {
      return {
        id: '',
        title: '',
        loading: true,
        dataUrl: [],
        // 词云图表配置
        barChartOption: {},
        Barheight: 0
      };
    },
    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;
        getActivityBarchart(this.$route.query)
          .then((data) => {
            this.loading = false;
            this.dataUrl = data.dataUrl;
            this.Barheight = 35 * data.dataValue.length;
            if (this.Barheight < 500) {
              this.Barheight = 500;
            }
            //饼状图
            if (data.dataTitle.length > 0) {
              this.barChartOption = {
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow'
                  }
                },
                xAxis: {
                  type: 'value'
                },
                yAxis: {
                  type: 'category',
                  data: data.dataTitle
                },
                grid: {
                  top: '1%',
                  left: '2%',
                  right: '5%',
                  bottom: '1%',
                  containLabel: true
                },
                series: [
                  {
                    data: data.dataValue,
                    type: 'bar',
                    label: {
                      show: true,
                      position: 'right'
                    },
                    barMaxWidth: 40
                  }
                ]
              };
            }
            // 修改页签标题
            if (this.$route.path === ROUTE_PATH) {
              setPageTabTitle(this.$route.query.title + '柱状图');
            }
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },
      barMousedown(e) {
        //通过鼠标点击事件，获取点击的索引值
        this.$router.replace(this.dataUrl[e.dataIndex] + '&title=' + e.name);
      }
    },
    watch: {
      $route: {
        handler(route) {
          const { path } = route;
          if (path !== ROUTE_PATH) {
            return;
          }
          this.query();
        },
        immediate: true
      }
    }
  };
</script>
