<template>
  <br />
  <el-card style="margin: 0 1em;">
    <div class="title_card" v-text="title"></div>
    <br />
    <el-button-group style="margin-left: 1.5em">
      <el-button
        size="small"
        type="primary"
        v-for="(item, i) in industry_list"
        :key="'industry' + i"
        :plain="industry_act !== i"
        @click="() => industry_change(i)"
      >
        {{ item.text }}
      </el-button>
    </el-button-group>
    <br />
    <div ref="industry"></div>
  </el-card>
</template>

<script>
// @ is an alias to /src
// import config from "@/config/index";
import * as echarts from "echarts";
import { industryList } from "@/api/index.js";
let industry_chart = undefined;
export default {
  name: "AdvertisingEye_structure",
  data() {
    return {
      industry_act: 0,
      industry_list: [
        {
          text: "时长",
          proportionType: "timeSize",
          unit: "分",
          type: 2,
        },
        {
          text: "频次",
          proportionType: "pinci",
          unit: "次",
          type: 1,
        },
        {
          text: "客户数",
          proportionType: "custom",
          unit: "个",
          type: 4,
        },
      ],
    };
  },
  props: {
    title: String,
    industry: Number,
    industryRang: Number,
  },
  watch: {
    industryRang() {
      this.init();
    },
    industry() {
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  computed: {},
  filter: {},
  methods: {
    init() {
      Promise.all([
        industryList({
          tableType: 3,
          dataType: this.industry_list[this.industry_act].type,
          indexTime: this.industryRang + 1,
        }),
        industryList({
          tableType: 4,
          dataType: this.industry_list[this.industry_act].type,
          indexTime: this.industryRang + 1,
        }),
      ]).then(all => {
        let r = all[0] || [],
          y = all[1] || [];
        r = r.map(v => {
          let value = v[this.industry_list[this.industry_act].proportionType];
          if (!isNaN(value)) value = (value - 0).toFixed(2) - 0;
          return {
            name: v.name,
            value,
          };
        });
        y = y.map(v => {
          let value = v[this.industry_list[this.industry_act].proportionType];
          if (!isNaN(value)) value = (value - 0).toFixed(2) - 0;
          return {
            name: v.name,
            value,
          };
        });
        Math.max(r.length, y.length) && this.industryChart(r, y);
      });
    },
    industry_change(i) {
      this.industry_act = i;
      this.init();
    },
    industryChart(r, y) {
      if (!this.$refs.industry) return;
      if (industry_chart && industry_chart.dispose) {
        industry_chart.dispose();
        industry_chart = undefined;
      }
      industry_chart = echarts.init(this.$refs.industry);
      industry_chart.resize({
        height: (this.$refs.industry.offsetWidth * 6) / 16,
      });
      var option = {
        legend: {
          left: "center",
          bottom: 10,
        },
        title: [
          {
            text: "硬广行业结构",
            left: "20%",
          },
          {
            text: "软广行业结构",
            left: "70%",
          },
        ],
        tooltip: {
          trigger: "item",
          confine: true,
          //   formatter: '{b} {d}%'
          formatter: item => {
            return (
              item.name +
              " " +
              (Number(item.value).toFixed(2) - 0) +
              (this.industry_list[this.industry_act].unit || "")
            );
          },
        },
        series: [
          {
            type: "pie",
            center: ["25%", "45%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: y,
          },
          {
            type: "pie",
            center: ["75%", "45%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: r,
          },
        ],
      };

      option && industry_chart.setOption(option);
    },
  },
  beforeUnmount: function() {
    industry_chart && industry_chart.dispose();
    industry_chart && (industry_chart = undefined);
  },
  components: {},
};
</script>

<style></style>
