<template>
  <chart
    ref="adminHistogram"
    :options="getHistogramOption()"
    style="width:100%;height:100%;"
  />
</template>

<script>
export default {
  props: {
    xAxis: {
      type: Array,
      default: () => [],
    },
    series: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    getHistogramOption() {
      let _self = this;

      return {
        tooltip: {
          trigger: "axis",
          backgroundColor: "#242c43",
          textStyle: {
            fontSize: 12,
            lineHeight: 20,
            color: "#fff",
          },
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 25,
          top: 45,
          containLabel: true,
        },
        color: ["#525e98", "#90b7c1", "#d06d1f", "#e4aa4f"],
        legend: {
          right: "center",
          top: 0,
          itemWidth: 10,
          itemHeight: 10,
          icon: "roundRect",
          orient: "horizontal",
          backgroundColor: "#f8f9fd",
          textStyle: {
            fontSize: 12,
            lineHeight: 20,
            color: "#a9aec0",
          },
          data: _self.series.map((item) => item.name),
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              textStyle: {
                color: "#0d1847",
                fontSize: 12,
                lineHeight: 20,
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#e3e5ef",
              },
            },
            splitLine: {
              show: false,
            },
            splitArea: {
              show: true,
              interval: 0,
              areaStyle: {
                color: ["#f4f5fd", "#fff"],
                opacity: 0.5,
              },
            },
            axisPointer: {
              type: "shadow",
            },
            data: _self.xAxis,
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#a9aec0",
                fontSize: 12,
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#e3e5ef",
              },
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: ["#f2f2f2"],
                width: 1,
              },
            },
          },
        ],
        series: _self.series.map((item) => ({
          ...item,
          type: "bar",
          barMaxWidth: 12,
          itemStyle: {
            normal: {
              barBorderRadius: [6, 6, 6, 6],
            },
          },
        })),
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: Math.min(_self.xAxis.length, 6),
          },
          {
            show: true,
            type: "slider",
            height: 20,
            bottom: 0,
            startValue: 0,
            endValue: _self.xAxis.length,
            fillerColor: "#e6ebfe",
            handleStyle: { color: "#b4c0f5" },
            backgroundColor: "#f8f9fd",
            borderColor: "#f8f9fd",
            textStyle: { color: "transparent", fontSize: "12px" },
            dataBackground: {
              lineStyle: { color: "transparent" },
              areaStyle: { color: "transparent" },
            },
          },
        ],
      };
    },
    resizeColumn() {
      if (this.$refs.adminHistogram) {
        this.$refs.adminHistogram.resize();
      }
    },
  },
  mounted() {
    window.addEventListener("resize", this.resizeColumn);
  },
  destroyed() {
    window.removeEventListener("resize", this.resizeColumn);
  },
};
</script>
