<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 v-if="showShart1" />
    <div v-if="showShart1" ref="share"></div>
    <el-empty
      v-if="!showShart1 && showShart2"
      description="此时段内无该行业硬广投放"
    ></el-empty>
    <br v-if="showShart2" />
    <div ref="share1" v-if="showShart2"></div>
    <el-empty
      description="此时段内无该行业软广投放"
      v-if="!showShart2 && showShart1"
    ></el-empty>
  </el-card>
</template>

<script>
// @ is an alias to /src
// import config from "@/config/index";
import * as echarts from "echarts";
import { ChannelDistribution } from "@/api/index.js";

let share_chart = undefined,
  share1_chart = undefined;
export default {
  name: "AdvertisingEye_tranche",
  data() {
    return {
      showShart1: false,
      showShart2: false,
      share_act: 0,
      share_list: [
        {
          text: "时长",
          proportionType: "timeSize",
          unit: "分",
          type: 2,
        },
        {
          text: "频次",
          proportionType: "pinci",
          unit: "次",
          type: 1,
        },
        {
          text: "费用",
          proportionType: "kanlijia",
          unit: "万",
          type: 3,
        },
      ],
    };
  },
  props: {
    title: String,
    industry: Number,
    industryRang: Number,
  },
  watch: {
    industryRang() {
      this.init();
    },
    industry() {
      this.init();
    },
  },
  mounted() {
    share_chart = undefined;
    share1_chart = undefined;
    this.init();
  },
  computed: {},
  filter: {},
  methods: {
    init() {
      ChannelDistribution({
        industryId: this.industry,
        dataType: this.industryRang + 1,
        type: this.share_list[this.share_act].type,
      }).then(all => {
        let hard = all.harddata || [],
          soft = all.softdata || [];
        this.showShart1 = hard.length ? true : false;
        this.showShart2 = soft.length ? true : false;
        this.$nextTick(() => {
          this.shareChart(hard);
          this.share1Chart(soft);
        });
      });
    },
    share_change(i) {
      this.share_act = i;
      this.init();
    },
    shareChart(list) {
      if (!this.$refs.share) return;
      if (share_chart && share_chart.dispose) {
        share_chart.dispose();
        share_chart = undefined;
      }
      share_chart = echarts.init(this.$refs.share);
      share_chart.resize({
        height: (this.$refs.share.offsetWidth * 6) / 16,
      });
      let k = [],
        v = [];
      list.map(item => {
        let value = item[this.share_list[this.share_act].proportionType] || 0;
        if (this.share_list[this.share_act].proportionType === "timeSize")
          value = (value / 60).toFixed(2) - 0;
        k.push(item.channelName);
        v.push(value);
      });
      var option = {
        tooltip: {
          trigger: "item",
          confine: true,
          formatter: obj => {
            let v = obj.value || 0;
            if (!isNaN(v)) v = v - 0;
            return (
              obj.seriesName +
              "<br />" +
              obj.name +
              "<br />" +
              (v.toFixed(2) - 0) +
              this.share_list[this.share_act].unit
            );
          },
        },
        legend: {
          left: "center",
          top: 10,
        },
        xAxis: {
          type: "category",
          data: k,
          axisLabel: {
            interval: 0,
          },
        },
        yAxis: {
          type: "value",
        },
        color: ["#1b9ade", "#fd5555"],
        series: [
          {
            name: "硬广",
            type: "bar",
            barWidth: 30, //柱图宽度
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: v,
          },
        ],
      };

      option && share_chart.setOption(option);
    },
    share1Chart(list) {
      if (!this.$refs.share) 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.share.offsetWidth * 6) / 16,
      });
      let k = [],
        v = [];
      list.map(item => {
        let value = item[this.share_list[this.share_act].proportionType] || 0;
        if (this.share_list[this.share_act].proportionType === "timeSize")
          value = (value / 60).toFixed(2);
        k.push(item.channelName);
        v.push(value);
      });
      var option = {
        tooltip: {
          trigger: "item",
          confine: true,
          formatter: obj => {
            let v = obj.value || 0;
            if (!isNaN(v)) v = v - 0;
            return (
              obj.seriesName +
              "<br />" +
              obj.name +
              "<br />" +
              (v.toFixed(2) - 0) +
              this.share_list[this.share_act].unit
            );
          },
        },
        legend: {
          left: "center",
          top: 10,
        },
        xAxis: {
          type: "category",
          data: k,
          axisLabel: {
            interval: 0,
          },
        },
        yAxis: {
          type: "value",
        },
        color: ["#fd5555"],
        series: [
          {
            name: "软广",
            barWidth: 30, //柱图宽度
            type: "bar",
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: v,
          },
        ],
      };

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

<style></style>
