<template>
  <div>
    <el-button-group>
      <el-button
        v-for="(item, i) in tablist"
        :key="i + 'b'"
        size="small"
        @click="() => tab !== i + '' && change(i + '')"
        :type="tab === i + '' ? 'primary' : 'default'"
      >
        {{ item.name }}
      </el-button>
    </el-button-group>
    <div class="bilateralBarChart" ref="bilateralBarChart"></div>
  </div>
</template>

<script>
// import * as echarts from "echarts";

import * as echarts from "echarts/core";
import { BarChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  CanvasRenderer,
]);

export default {
  name: "bilateralBarChart",
  props: ["list", "keyName", "tabs"],
  watch: {
    list() {
      if (this.chart) this.chart.dispose();
      this.createChart();
    },
  },
  data: function() {
    return {
      tablist: [],
      leftList: [],
      rightList: [],
      chart: undefined,
      tab: "0",
    };
  },
  filters: {},
  methods: {
    change(type) {
      this.tab = type;
      if (!this.chart) return;
      let source = this.formatte();
      this.chart.setOption({
        title: [
          {
            text: this.tablist[this.tab].name,
            left: "center",
            textAlign: "center",
          },
        ],
        yAxis: [
          {
            type: "category",
            gridIndex: 0,
            data: source.texts.reverse(),
          },
        ],
        series: [
          {
            data: source.value.reverse(),
            type: "bar",
            label: {
              show: true,
              position: "right",
              formatter: arr => {
                return this.read(arr.value).toFixed(4) + "%";
              },
            },
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      });
    },
    read(v) {
      if (isNaN(v)) return 0;
      let o = v;
      if (v > 10000) {
        o = (v / 10000).toFixed(4) + "万";
      }
      return o;
    },
    formatte() {
      let source = { texts: [], value: [] };
      let list = JSON.parse(JSON.stringify(this.list));
      let key = this.tablist[this.tab] || [];
      let nList = JSON.parse(
        JSON.stringify(list.sort((a, b) => b[key.key] - a[key.key]))
      ).splice(0, 30);

      for (let i = 0; i < nList.length; i++) {
        const v = nList[i];
        source.texts.push(v[this.keyName]);
        source.value.push(v[key.key] * 100);
      }

      return source;
    },
    createChart() {
      if (!this.$refs.bilateralBarChart) return;
      let source = this.formatte();
      this.chart = echarts.init(this.$refs.bilateralBarChart);
      this.chart.resize({
        height: (this.$refs.bilateralBarChart.offsetWidth * 9) / 16,
      });
      var option = {
        title: [
          {
            text: this.tablist[this.tab].name,
            left: "center",
            textAlign: "center",
          },
        ],
        tooltip: {
          formatter: arr => {
            return arr.name + ":" + this.read(arr.value).toFixed(4) + "%";
          },
        },
        yAxis: [
          {
            type: "category",
            gridIndex: 0,
            data: source.texts.reverse(),
            interval: 0,
            axisLabel: {
              color: "#000",
            },
          },
        ],
        xAxis: [
          {
            gridIndex: 0,
            position: "top",
            axisLabel: {
              color: "#000",
            },
          },
        ],
        grid: { left: 150, top: "15%", buttom: 0, right: "10%" },
        series: [
          {
            data: source.value.reverse(),
            type: "bar",
            label: {
              show: true,
              position: "right",
              formatter: arr => {
                return this.read(arr.value).toFixed(4) + "%";
              },
            },
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };

      option && this.chart.setOption(option);
    },
  },
  mounted() {
    this.tablist = [
      {
        name: "收视率",
        key: "tv_ratings",
      },
      {
        name: "占有率",
        key: "market_ratings",
      },
    ];
    if (this.tabs && this.tabs.length) this.tablist = this.tabs;
    this.createChart();
  },
  beforeUnmount: function() {
    this.chart.dispose();
  },
  components: {},
};
</script>
<style></style>
