<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 share_list"
        :key="'share' + i"
        :plain="share_act !== i"
        @click="() => share_change(i)"
      >
        {{ item.text }}
      </el-button>
    </el-button-group>
    <br />
    <div ref="share1"></div>
    <br />
    <div ref="share"></div>
  </el-card>
</template>

<script>
// @ is an alias to /src
// import config from "@/config/index";
import * as echarts from "echarts";
import { MediaShare } from "@/api/index.js";
let share1_chart = undefined;
export default {
  name: "AdvertisingEye_tranche",
  data() {
    return {
      share_act: 0,
      share_list: [
        {
          text: "时长",
          proportionType: "timeSize",
          unit: "分",
          type: 2,
        },
        {
          text: "频次",
          proportionType: "pinci",
          unit: "次",
          type: 1,
        },
        {
          text: "费用",
          proportionType: "fee",
          unit: "万",
          type: 3,
        },
        {
          text: "客户数",
          proportionType: "custom",
          unit: "个",
          type: 4,
        },
      ],
    };
  },
  props: {
    title: String,
    industry: Number,
    industryRang: Number,
  },
  watch: {
    industryRang() {
      this.init();
    },
    industry() {
      this.init();
    },
  },
  mounted() {
    share1_chart = undefined;
    this.init();
  },
  computed: {},
  filter: {},
  methods: {
    init() {
      MediaShare({
        industryId: this.industry,
        dataType: this.industryRang + 1,
        type: this.share_list[this.share_act].type,
      }).then(res => {
        let li = (res || { data: [] }).data || [];
        let y = [
            ((li[0].softY || 0) - 0).toFixed(2) - 0,
            ((li[1].hardY || 0) - 0).toFixed(2) - 0,
          ],
          w = [
            ((li[0].softW || 0) - 0).toFixed(2) - 0,
            ((li[1].hardW || 0) - 0).toFixed(2) - 0,
          ],
          t = -1;
        if (y[0] + w[0] === 0) t = 0;
        if (y[1] + w[1] === 0) t = 1;
        let list = [
          {
            name: "央视",
            type: "bar",
            stack: "total",
            label: {
              show: true,
              formatter: item => {
                if (item.value === 0) return "";
                return item.value + "%";
              },
            },
            emphasis: {
              focus: "series",
            },
            data: y,
          },
          {
            name: "卫视",
            type: "bar",
            stack: "total",
            label: {
              show: true,
              formatter: item => {
                if (item.value === 0) return "";
                return item.value + "%";
              },
            },
            emphasis: {
              focus: "series",
            },
            data: w,
          },
        ];
        if (
          t > -1 &&
          this.share_list[this.share_act].proportionType === "fee"
        ) {
          list.push({
            type: "bar",
            stack: "total",
            color: "rgba(255,255,255,1)",
            confine: true,
            tooltip: {
              show: false,
            },
            label: {
              show: true,
              formatter: item => {
                if (item.value === 0) return "";
                if (t === 0) return "硬广无刊例价";
                if (t === 1) return "软广无刊例价";
              },
            },
            data: t === 0 ? [100, 0] : [0, 100],
          });
        }
        this.share1Chart(list);
      });
    },
    share_change(i) {
      this.share_act = i;
      this.init();
    },
    share1Chart(list) {
      if (!this.$refs.share1) return;
      if (share1_chart && share1_chart.dispose) {
        share1_chart.dispose();
        share1_chart = undefined;
      }
      share1_chart = echarts.init(this.$refs.share1);
      share1_chart.resize({
        height: (this.$refs.share1.offsetWidth * 6) / 25,
      });
      var option = {
        tooltip: {
          confine: true,
          trigger: "item",
          axisPointer: {
            type: "shadow",
          },
          formatter: item => {
            return (
              item.name +
              "<br />" +
              item.seriesName +
              "<br />" +
              "占比：" +
              item.value +
              "%"
            );
          },
        },
        legend: {},
        color: ["#1b9ade", "#fd5555"],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLabel: {
            formatter: item => {
              return item + "%";
            },
          },
        },
        yAxis: {
          type: "category",
          data: ["软广", "硬广"],
        },
        series: list,
      };
      option && share1_chart.setOption(option);
    },
  },
  beforeUnmount: function () {
    share1_chart && share1_chart.dispose();
    share1_chart && (share1_chart = undefined);
  },
  components: {},
};
</script>

<style></style>
