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

<script>
export default {
  props: {
    xAxis: {
      type: Array,
      default: () => [
        "办公费",
        "印刷费",
        "水费",
        "水费",
        "邮电费",
        "物业管理费",
        "差旅费",
        "因公出国（境）费用",
        "维修（护）费",
        "会议费",
        "租聘费",
        "培训费",
        "取暖费",
        "公务接待费",
        "公务用车运行",
        "其他交通费用",
        "房屋建筑物购建",
        "办公设备购置",
        "大型修缮",
        "信息网络及软件购置更新",
        "公务用车购置",
        "咨询费",
        "手续费",
        "劳务费",
        "委托业务费",
        "其他商品和服务支出",
        "专用设备购置",
        "基础设施建设",
        "其他交通工具购置",
        "其他资本性支出",
      ],
    },
    series: {
      type: Array,
      default: () => [
        {
          name: "CPU",
          data: [
            17931.63,
            2420.69,
            399.4,
            2581.2,
            1571.79,
            3028.14,
            8041.46,
            1616.08,
            7159.78,
            3122.55,
            2211.05,
            10573.26,
            1325.09,
            1290.44,
            2301.95,
            3344.42,
            5687.6,
            2117.72,
            442.4,
            14853.71,
            96.25,
            170.19,
            40.74,
            3947.28,
            12558.87,
            12546.87,
            6945.36,
            683.28,
            73.17,
            169.15,
          ],
        },
        {
          name: "内存",
          data: [
            17931.63,
            2420.69,
            399.4,
            2581.2,
            1571.79,
            3028.14,
            8041.46,
            1616.08,
            7159.78,
            3122.55,
            2211.05,
            10573.26,
            1325.09,
            1290.44,
            2301.95,
            3344.42,
            5687.6,
            2117.72,
            442.4,
            14853.71,
            96.25,
            170.19,
            40.74,
            3947.28,
            12558.87,
            12546.87,
            6945.36,
            683.28,
            73.17,
            169.15,
          ],
        },
        {
          name: "数据盘",
          data: [
            17931.63,
            2420.69,
            399.4,
            2581.2,
            1571.79,
            3028.14,
            8041.46,
            1616.08,
            7159.78,
            3122.55,
            2211.05,
            10573.26,
            1325.09,
            1290.44,
            2301.95,
            3344.42,
            5687.6,
            2117.72,
            442.4,
            14853.71,
            96.25,
            170.19,
            40.74,
            3947.28,
            12558.87,
            12546.87,
            6945.36,
            683.28,
            73.17,
            169.15,
          ],
        },
        {
          name: "容器组",
          data: [
            17931.63,
            2420.69,
            399.4,
            2581.2,
            1571.79,
            3028.14,
            8041.46,
            1616.08,
            7159.78,
            3122.55,
            2211.05,
            10573.26,
            1325.09,
            1290.44,
            2301.95,
            3344.42,
            5687.6,
            2117.72,
            442.4,
            14853.71,
            96.25,
            170.19,
            40.74,
            3947.28,
            12558.87,
            12546.87,
            6945.36,
            683.28,
            73.17,
            169.15,
          ],
        },
      ],
    },
  },
  methods: {
    getHistogramOption(_xAxisData, _series) {
      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: ["CPU", "内存", "数据盘", "容器组"],
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              textStyle: {
                color: "#0d1847",
                fontSize: 12,
                lineHeight: 20,
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#e3e5ef",
              },
            },
            splitLine: {
              show: false,
            },
            /* splitArea: {
              show: true,
              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", start: 0, end: 20 },
          {
            show: true,
            type: "slider",
            height: 20,
            bottom: 0,
            start: 0,
            end: 100,
            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>
