<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 week_list"
        :key="'share' + i"
        :plain="week_act !== i"
        @click="() => week_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 { LastWeekTrend } from "@/api/index.js";
let week_chart = undefined;
export default {
  name: "AdvertisingEye_week",
  data() {
    return {
      week_act: 0,
      week_list: [
        {
          text: "时长",
          proportionType: "timeSize",
          unit: "分",
          type: 2,
        },
        {
          text: "频次",
          proportionType: "pinci",
          unit: "次",
          type: 1,
        },
        {
          text: "费用",
          proportionType: "fee",
          unit: "万",
          type: 3,
        },
      ],
    };
  },
  props: {
    title: String,
    industry: Number,
    industryRang: Number,
  },
  watch: {
    industryRang() {
      this.init();
    },
    industry() {
      this.init();
    },
  },
  mounted() {
    week_chart = undefined;
    this.init();
  },
  computed: {},
  filter: {},
  methods: {
    init() {
      LastWeekTrend({
        industryId: this.industry,
        dataType: this.industryRang + 1,
        type: this.week_list[this.week_act].type,
      }).then(all => {
        let hard = all.hardData || [],
          soft = all.softData || [];
        this.shareChart([hard, soft]);
      });
    },
    week_change(i) {
      this.week_act = i;
      this.init();
    },
    shareChart(list) {
      if (!this.$refs.share) return;
      if (week_chart && week_chart.dispose) {
        week_chart.dispose();
        week_chart = undefined;
      }
      week_chart = echarts.init(this.$refs.share);
      week_chart.resize({
        height: (this.$refs.share.offsetWidth * 6) / 16,
      });
      let o = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      let k = list[0].map(item => {
        return o[item.week];
      });
      let key = this.week_list[this.week_act].proportionType || "";
      var option = {
        tooltip: {
          trigger: "axis",
          confine: true,
          textStyle: {
            color: "#000000",
          },
          backgroundColor: "rgba(255,255,255,.8)",
          borderColor: "#1b9ade",
          borderWidth: 1,
          formatter: li => {
            let out = "";
            for (let i = 0; i < li.length; i++) {
                const v = li[i];
                let val = isNaN(v.value) ? 0 : (v.value/60).toFixed(2);
                if(val > 100000000) val = (val/100000000).toFixed(2) - 0 + '亿';
                if(val > 10000) val = (val/10000).toFixed(2) - 0 + '万';
                out += v.seriesName + "： " + val + this.week_list[this.week_act].unit + '<br />';
            }
            return out
          },
        },
        legend: {
          left: "center",
          top: 10,
        },
        color: ["#1b9ade", "#fd5555"],
        xAxis: {
          type: "category",
          data: k,
        },
        yAxis: {
          type: "value",
          name: '单位：' + this.week_list[this.week_act].unit
        },
        series: list.map((v, i) => {
          return {
            name: i === 1 ? "软广" : "硬广",
            type: "bar",
            barWidth: 30, //柱图宽度
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: v.map(item => item[key] || 0),
          };
        }),
      };
      option && week_chart.setOption(option);
    },
  },
  beforeUnmount: function() {
    week_chart && week_chart.dispose();
    week_chart && (week_chart = undefined);
  },
  components: {},
};
</script>

<style></style>
