<template>
  <div class="shanxijiaoao">
    <el-row v-if="allPlatform" class="titleNum">
      <el-col :span="6">
        <div class="num" style="color: #ffbb44;">
          {{ formateNum(allPlatform.total_pv || 0) }}
        </div>
        浏览量
      </el-col>
      <el-col :span="6">
        <div class="num" style="color: #f47f92;">
          {{ formateNum(allPlatform.total_ori || 0) }}
        </div>
        原创量
      </el-col>
      <el-col :span="6">
        <div class="num" style="color: #11a0f8;">
          {{ formateNum(allPlatform.total_digg || 0) }}
        </div>
        点赞量
      </el-col>
      <el-col :span="6">
        <div class="num" style="color: #f47f92;">
          {{ formateNum(allPlatform.total_comment || 0) }}
        </div>
        评论量
      </el-col>
      <el-col :span="6">
        <div class="num">{{ formateNum(allPlatform.total_forward || 0) }}</div>
        转发量
      </el-col>
      <el-col :span="6">
        <div class="num" style="color: #11a0f8;">
          {{ formateNum(allPlatform.live_uv || 0) }}
        </div>
        直播观看人数
      </el-col>
      <el-col :span="6">
        <div class="num" style="color: #ffbb44;">
          {{ formateNum(allPlatform.live_add_fans || 0) }}
        </div>
        新增粉丝量
      </el-col>
      <el-col :span="6">
        <div class="num">
          {{ formateNum(allPlatform.live_comment || 0) }}
        </div>
        直播评论量
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-col :span="12">
        <div class="chart">
          <div class="subtitle">平台传播量</div>
          <el-divider></el-divider>
          <div
            class="pieChart"
            ref="pieChart"
            style="width: 100%;min-height: 100px"
          ></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart">
          <div class="subtitle">词云</div>
          <el-divider></el-divider>
          <div
            class="cloudChart"
            ref="cloudChart"
            style="width: 100%;min-height: 100px"
          ></div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="chart">
          <div class="subtitle">直播观众性别比例</div>
          <el-divider></el-divider>
          <div
            class="sexChart"
            ref="sexChart"
            style="width: 100%;min-height: 100px"
          ></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart">
          <div class="subtitle">排行top10</div>
          <el-divider></el-divider>

          <el-carousel :height="h + 'px'">
            <el-carousel-item v-for="item in 3" :key="item">
              <div
                :class="'platformChart' + item"
                :ref="'platformChart' + item"
                style="width: 100%;min-height: 100px"
              ></div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
    </el-row>
    <br />
    <br />
    <br />
    <el-table
      :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
      :data="platformLi"
      style="width: 100%"
    >
      <el-table-column align="center" label="子活动名称" prop="alias_name">
      </el-table-column>
      <el-table-column align="center" label="浏览量" prop="total_pv">
        <template #default="scope">
          {{ formateNum(scope.row.total_pv || 0) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="原创量" prop="total_ori">
        <template #default="scope">
          {{ formateNum(scope.row.total_ori || 0) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="点赞数" prop="total_digg">
        <template #default="scope">
          {{ formateNum(scope.row.total_digg || 0) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="评论数" prop="total_comment">
        <template #default="scope">
          {{ formateNum(scope.row.total_comment || 0) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="转发量" prop="total_forward">
        <template #default="scope">
          {{ formateNum(scope.row.total_forward || 0) }}
        </template>
      </el-table-column>
    </el-table>
    <br />
  </div>
</template>

<script>
// @ is an alias to /src
import { defaultAjax } from "@/api/index";

import * as echarts from "echarts/core";
import { PieChart, BarChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  ToolboxComponent,
  VisualMapComponent,
  LegendComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  PieChart,
  BarChart,
  CanvasRenderer,
  ToolboxComponent,
  VisualMapComponent,
  LabelLayout,
  UniversalTransition,
  LegendComponent,
]);
import "echarts-wordcloud";
export default {
  name: "shanxijiaoao",
  props: ["item"],
  data() {
    return {
      platform: [],
      channelList: [],
      platformLi: [],
      words: [],
      sex: [],
      h: 0,
      allPlatform: { digg: 0, comment: 0, publish: 0, read: 0, share: 0 },
      oriData: {},
    };
  },
  mounted() {
    defaultAjax({
      url: "https://bigdata.smcic.net/overview?season=2",
    }).then(res => {
      // 总概览数
      this.platformLi = res || [];
      this.allPlatform = this.platformLi.shift();
      defaultAjax({
        url:
          "https://bigdata.smcic.net/platform?topic_name=" +
          this.allPlatform.topic_name +
          "&season=2",
      }).then(platform => {
        this.platform = platform || [];
        this.pieChartFun();
      });

      defaultAjax({
        url:
          "https://bigdata.smcic.net/name?topic_name=" +
          this.allPlatform.topic_name +
          "&platform=ALL&type=all&season=2",
      }).then(res => {
        this.channelList = res || [];
        this.platformChartFun(1);
        this.platformChartFun(2);
        this.platformChartFun(3);
      });

      defaultAjax({
        url:
          "https://bigdata.smcic.net/live-result?topic=" +
          this.allPlatform.topic_name +
          "&platform=douyin&type=all&season=2",
      }).then(res => {
        let l = res ? res.gender || [] : [];
        this.sex = l.map(v => {
          return {
            name: v.key === "1" ? "男" : "女",
            ...v,
          };
        });
        this.smailChart();
      });
    });
    defaultAjax({
      url: "https://djweb.smcic.net/dj/static/sxja.json?t=" + Date.now(),
    }).then(res => {
      this.cloudChart(res || []);
    });
  },
  computed: {},
  methods: {
    formateNum(n) {
      if (n === -1) return 0;
      let num = n;
      if (isNaN(n)) num = "0";
      else if (n >= 100000000) num = ((n / 100000000).toFixed(2) - 0 + "").replace(/\B(?=(?:\d{3})+\b)/g, ",") + "亿";
      else if (n >= 10000) num = ((n / 10000).toFixed(2) - 0 + "").replace(/\B(?=(?:\d{3})+\b)/g, ",") + "万";
      else num = (num + "").replace(/\B(?=(?:\d{3})+\b)/g, ",");
      return num;
    },
    pieChartFun() {
      this.chart0 = echarts.init(this.$refs.pieChart);
      this.chart0.resize({
        height: (this.$refs.pieChart.offsetWidth * 9) / 16,
      });
      var option = {
        tooltip: {
          confine: true,
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        series: [
          {
            name: "发稿量",
            type: "pie",
            radius: ["30%", "50%"],
            labelLine: {
              length: 30,
            },
            label: {
              formatter: " {b|{b}：} {per|{d}%}  ",
              rich: {
                b: {
                  color: "#4C5058",
                  fontSize: 14,
                  fontWeight: "bold",
                  padding: [3, 0],
                  lineHeight: 33,
                },
                per: {
                  color: "#000",
                  fontSize: 14,
                  padding: [3, 0],
                },
              },
            },
            data: this.platform.map(v => {
              return {
                name: v.platform,
                value: v.total_pv,
              };
            }),
          },
        ],
      };

      option && this.chart0.setOption(option);
    },
    platformChartFun(num) {
      const li = [],
        liKey = [];
      let title = ["点赞排行", "评论排行", "转发排行"];
      let titlekdy = ["digg_count", "comment_count", "forward_count"];

      let l = JSON.parse(JSON.stringify(this.channelList)).sort(
        (b, a) => a[titlekdy[num - 1]] - b[titlekdy[num - 1]]
      );
      for (let i = 0; i < 10; i++) {
        const v = l[i];
        li.push(v[titlekdy[num - 1]]);
        liKey.push(v.nickname);
      }
      li.reverse();
      liKey.reverse();

      this.chart1 = echarts.init(this.$refs["platformChart" + num]);
      this.h = (this.$refs["platformChart" + num].offsetWidth * 9) / 16;
      this.chart1.resize({
        height: this.h,
      });
      var option = {
        title: {
          text: title[num - 1],
        },
        tooltip: {
          formatter: "{b} : {c}",
          trigger: "axis",
          confine: true,
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: liKey,
        },
        series: [
          {
            type: "bar",
            label: {
              show: true,
              position: "right",
              formatter: "{c}",
            },
            // itemStyle: {
            //   color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            //     { offset: 0, color: "#83bff6" },
            //     { offset: 0.5, color: "#188df0" },
            //     { offset: 1, color: "#188df0" },
            //   ]),
            // },
            // emphasis: {
            //   itemStyle: {
            //     color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            //       { offset: 0, color: "#2378f7" },
            //       { offset: 0.7, color: "#2378f7" },
            //       { offset: 1, color: "#83bff6" },
            //     ]),
            //   },
            // },
            data: li,
          },
        ],
      };

      option && this.chart1.setOption(option);
    },
    cloudChart(li) {
      this.chart3 = echarts.init(this.$refs.cloudChart);
      this.chart3.resize({
        height: (this.$refs.cloudChart.offsetWidth * 9) / 16,
      });
      this.chart3.setOption({
        series: [
          {
            type: "wordCloud",

            // The shape of the "cloud" to draw. Can be any polar equation represented as a
            // callback function, or a keyword present. Available presents are circle (default),
            // cardioid (apple or heart shape curve, the most known polar equation), diamond (
            // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.

            shape: "alias of square",
            // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
            // Default to be put in the center and has 75% x 80% size.
            width: "100%",
            height: "100%",

            // Text size range which the value in data will be mapped to.
            // Default to have minimum 12px and maximum 60px size.

            sizeRange: [12, 60],

            // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45

            rotationRange: [-90, 90],
            rotationStep: 45,

            // size of the grid in pixels for marking the availability of the canvas
            // the larger the grid size, the bigger the gap between words.

            gridSize: 8,

            // set to true to allow word being draw partly outside of the canvas.
            // Allow word bigger than the size of the canvas to be drawn
            drawOutOfBound: false,

            // If perform layout animation.
            // NOTE disable it will lead to UI blocking when there is lots of words.
            layoutAnimation: true,

            // Global text style
            textStyle: {
              fontFamily: "sans-serif",
              fontWeight: "bold",
              // Color can be a callback function or a color string
              color: function() {
                // Random color
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                  ].join(",") +
                  ")"
                );
              },
            },
            emphasis: {
              focus: "self",

              textStyle: {
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            data: li,
          },
        ],
      });
    },
    smailChart() {
      this.chart3 = echarts.init(this.$refs.sexChart);
      this.chart3.resize({
        height: (this.$refs.sexChart.offsetWidth * 9) / 16,
      });
      var option = {
        tooltip: {
          trigger: "item",
          confine: true,
          formatter: "{b} : {d}%",
        },
        series: [
          {
            type: "pie",
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 5,
            },
            label: {
              formatter: "{b}:{d}%",
            },
            data: this.sex.map(v => {
              return {
                name: v.name,
                value: v.count,
              };
            }),
          },
        ],
      };

      option && this.chart3.setOption(option);
    },
  },
  beforeUnmount: function() {},
  components: {},
};
</script>

<style>
.shanxijiaoao {
  min-width: 1200px;
}
</style>
