<template>
  <el-card class="header" :style="{height:height}">
    <div class="remindHeader topLine">
      <img src="/static/img/media.png" alt srcset />
      <span>媒体进线量排名</span>
      <el-date-picker
        v-model="dateTime"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        placeholder="选择日期"
        @change="dateTimeChange">
      </el-date-picker>
      <el-select v-model="type" placeholder="请选择" @change="typeChange">
        <el-option label="未接通" value="0"></el-option>
        <el-option label="已接通" value="1"></el-option>
      </el-select>
    </div>
    <!-- 折线图 -->
    <div ref="pieChart" class="chart" />
  </el-card>
</template>
<script>
import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme
import { debounce, getNowDate } from '@/utils'
import { getRankingMediaAccessData } from "@/api/dashboard/orderDatas"
export default {
  props: {
    height: {
      type: String,
      default: "350px"
    },
    autoResize: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dateTime: [],
      type: "",
      option: {
        title: {
          text: ""
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: [
            "进线量",
          ]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: []
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "进线量",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: []
          },
        ]
      }
    };
  },
  created() {
    this.getDatas();
  },
  mounted() {
    this.initChart();
    if (this.autoResize) {
      this.__resizeHandler = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHandler)
    }
    // 监听侧边栏的变化
    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.__resizeHandler)
    }

    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)

    this.chart.dispose()
    this.chart = null
  },
  methods: {
    sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        if (this.__resizeHandler) {
          this.__resizeHandler()
        }
      }
    },
    // 初始化数据
    initChart() {
      this.chart = echarts.init(this.$refs.pieChart, "macarons");
      this.chart.clear();
      this.chart.setOption(this.option);
    },
    getDatas() {
      return new Promise(resolve => {
        const params = {
          type: this.type,
          starttime: this.dateTime[0],
          endtime: this.dateTime[1],
        };
        getRankingMediaAccessData(params).then(response => {
          if (response.state.toLowerCase() === "success") {
            const res = response.data;
            if (res && res.length > 0) {
              const sData = [];
              const xData = [];
              res.forEach((v, i) => {
                xData.push(v.key)
                sData.push(v.value);
              });
              this.option.series[0].data = sData
              this.option.xAxis[0].data = xData
              this.initChart();
            }
            this.initChart()
          }
        });
        resolve();
      });
    },
    dateTimeChange () {
      this.getDatas()
    },
    typeChange () {
      this.getDatas()
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  position: relative;
  margin-top: 20px;
  span {
    font-size: 17px;
    font-weight: 400;
  }
  img {
    vertical-align: middle;
    margin-right: 7px;
  }
}
.el-date-editor {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 350px !important;
}
.el-select {
  position: absolute;
  top: 10px;
  right: 370px;
}
.chart{
  width: 100%;
  height: 310px;
}
</style>