<template>
  <CellWrapper title="大客户分析" :cellContentHeight="cellContentHeight">
    <template v-slot:header>
      <span class="el-icon-refresh" title="刷新"></span>
      <span class="el-icon-more" title="操作"></span>
    </template>

    <div class="chart-container">
      <div class="chart-operate">
        <i class="el-icon-arrow-up"></i>
        <i class="el-icon-arrow-down"></i>
      </div>
      <div class="chartWrapper">
        <div class="chart"></div>
      </div>
    </div>
  </CellWrapper>
</template>

<script>
import CellWrapper from "../common/CellWrapper.vue";
import * as echarts from "echarts";

export default {
  name: "CustomerAnalyse",
  props: ["cellContentHeight"],
  components: { CellWrapper },
  data() {
    return {
      echartInstance: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.loadCharts();
      this.loadChartsBind = this.loadCharts.bind(this);
      window.addEventListener("resize", this.loadChartsBind);
    });
  },
  methods: {
    loadCharts() {
      if (this.echartInstance) {
        this.echartInstance.dispose();
      }
      this.echartInstance = echarts.init(
        this.$el.querySelector(".chart-container .chartWrapper .chart")
      );
      const option = {
        title: {
          // text: "Test Demo",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          bottom: "2%",
        },
        grid: {
          left: "1%",
          right: "6%",
          top: "1%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: [
            "海康威视",
            "春晖指控",
            "苏奥传感",
            "东方财富",
            "隆基股份",
            "贵州茅台",
          ],
        },
        series: [
          {
            name: "业务量（万美元）",
            type: "bar",
            data: [18203, 23489, 29034, 104970, 131744, 230230],
          },
          {
            name: "融资量（万美元）",
            type: "bar",
            data: [19325, 23438, 31000, 121594, 134141, 381807],
          },
          {
            name: "费用收益（千美元）",
            type: "bar",
            data: [49325, 53438, 11000, 221594, 43241, 455807],
          },
        ],
      };
      this.echartInstance.setOption(option);
    },
  },
  destroyed() {
    window.removeEventListener("resize", this.loadChartsBind);
  },
};
</script>

<style scoped>
.chart-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 5px;
}
.chart-operate {
  margin-left: 20px;
  height: 20px;
}
.chart-operate i {
  cursor: pointer;
}
.chartWrapper {
  flex: 1;
}
.chartWrapper .chart {
  width: 100%;
  height: 100%;
}
</style>
