<template>
  <div class="ele-body ele-body-card" v-loading="loading">
    <el-card shadow="never" :header="title">
      <div style="margin: 0 auto">
        <v-chart
          ref="pieChart"
          style="height: 700px"
          :option="pieChartOption"
          @mousedown="pieMousedown"
        />
      </div>
    </el-card>
  </div>
</template>

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

  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { PieChart } from 'echarts/charts';
  import { TooltipComponent, LegendComponent } from 'echarts/components';
  import VChart from 'vue-echarts';
  //import { getBrowserCountList } from '@/api/dashboard/monitor';
  import { echartsMixin } from '@/utils/echarts-mixin';

  use([CanvasRenderer, PieChart, TooltipComponent, LegendComponent]);

  export default {
    name: 'SyliveActivityStatisticsPie',
    components: {
      VChart
    },
    mixins: [echartsMixin(['pieChart'])],
    data() {
      return {
        id: '',
        title: '',
        loading: true,
        pieChartArr: [],
        // 词云图表配置
        pieChartOption: {}
      };
    },
    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;
        getActivityPiechart(this.$route.query)
          .then((data) => {
            this.loading = false;
            this.pieChartArr = data;
            //饼状图
            if (data.length > 0) {
              this.pieChartOption = {
                tooltip: {
                  trigger: 'item',
                  formatter: '{b}: {c} ({d}%)'
                },
                series: [
                  {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    itemStyle: {
                      borderWidth: 0
                    },
                    labelLine: {
                      fontSize: 5,
                      length: 10
                    },
                    label: {
                      formatter: '{b|  {b}  }{abg|}\n{hr|}\n{c|  {c}({d}%)  }',
                      backgroundColor: '#F6F8FC',
                      borderColor: '#8C8D8E',
                      borderWidth: 1,
                      borderRadius: 4,
                      rich: {
                        hr: {
                          borderColor: '#8C8D8E',
                          width: '100%',
                          borderWidth: 1,
                          height: 0
                        },
                        b: {
                          color: '#4C5058',
                          fontSize: 12,
                          lineHeight: 20,
                          align: 'center'
                        },
                        c: {
                          color: '#4C5058',
                          fontSize: 12,
                          lineHeight: 20,
                          align: 'center'
                        }
                      }
                    },
                    data: data
                  }
                ]
              };
            }
            // 修改页签标题
            if (this.$route.path === ROUTE_PATH) {
              setPageTabTitle(this.$route.query.title + '饼状图');
            }
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },
      pieMousedown(e) {
        //通过鼠标点击事件，获取点击的索引值
        this.$router.replace(
          this.pieChartArr[e.dataIndex].url + '&title=' + e.name
        );
      }
    },
    watch: {
      $route: {
        handler(route) {
          const { path } = route;
          if (path !== ROUTE_PATH) {
            return;
          }
          this.query();
        },
        immediate: true
      }
    }
  };
</script>
