<template>
  <el-card class="header" :style="{height:height}">
    <div class="remindHeader topLine">
      <img src="/static/img/zhibiao.png" alt srcset />
      <span>话务指标</span>
      <span>
        <el-date-picker
          v-model="dateTime"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          @change="dateTimeChange">
        </el-date-picker>
      </span>
    </div>
    <!-- 柱状图 -->
    <div ref="pieChart" class="chart" :style="{height:'400px'}" />
  </el-card>
</template>
<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import { debounce, getNowDate } from "@/utils";
import { getTrafficIndexData } from "@/api/dashboard/orderDatas";

export default {
  props: {
    height: {
      type: String,
      default: "470px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      dateTime: "",
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: [],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "进线暂存量",
              "今日新客户进线量",
              "今日老客户进线量",
              "今日回访量",
              "本月进线量",
              "本月回访量",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "数量",
            type: "bar",
            barWidth: 25,
            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: {
    idebarResizeHandler(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 = {
          time: this.dateTime,
        };
        getTrafficIndexData(params).then((response) => {
          if (response.state.toLowerCase() === "success") {
            const res = response.data;
            const sData = [];
            for (let i  in res) {
              sData.push(res[i]);
            }
            this.option.series[0].data = sData;
            this.initChart();
          }
        });
        resolve();
      });
    },
    dateTimeChange () {
      this.getDatas()
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
  margin: 20px 0 0 20px;
  span {
    font-size: 16px;
    font-weight: 700;
    .el-date-editor {
      // width: 90px;
      // height: 33px;
      float: right;
    }
  }
  img {
    vertical-align: middle;
    margin-right: 7px;
  }
  .chart {
    width: 100%;
  }
}
</style>