<template>
  <card title="招聘统计">
    <div ref="main" style="width: 100%;height:260px;margin-top:10px;"></div>
    <template v-slot:tool>
      <span style="font-size:12px;margin-right:5px;color:#999999">选择年份</span>
      <el-select v-model="year" placeholder="请选择" size="mini" style="width:90px">
        <el-option v-for="item in options" :key="item" :label="item + '年'" :value="item"></el-option>
      </el-select>
    </template>
  </card>
</template>

<script>
import card from "./card";
import Echarts from "echarts";

function getOption (data) {
  const option = {
    color: ["#5d9df8"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "25",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月"
        ],
        axisLabel: {
          show: true,
          textStyle: {
            color: '#999999',  //更改坐标轴文字颜色
          }
        },
        axisLine: {
          lineStyle: {
            color: '#fff', // x坐标轴的轴线bai颜色
            width: 0 //这里是坐标轴的宽度,为0就是不显示
          }
        },
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          show: true,
          textStyle: {
            color: '#999999',  //更改坐标轴文字颜色
          }
        },
        axisLine: {
          lineStyle: {
            color: '#fff', // x坐标轴的轴线bai颜色
            width: 0 //这里是坐标轴的宽度,为0就是不显示
          }
        }
      }
    ],
    series: [
      {
        name: "工资",
        type: "bar",
        barWidth: "20%",
        data: data,
        itemStyle: { barBorderRadius: 25 }
      }
    ]
  };
  return option;
}

export default {
  components: { card },
  data () {
    const options = [];
    const year = new Date().getFullYear();
    for (let index = 0; index < 4; index++) {
      options.push(year - index);
    }
    return {
      options,
      year,
      chart: null,
      sizeInt: null,
      width: 0
    };
  },
  mounted () {
    const main = this.$refs.main;
    this.chart = Echarts.init(main);
    this.width = main.clientWidth;
    this.chart.setOption(getOption());
    this.sizeInt = setInterval(() => {
      if (this.width !== main.clientWidth) {
        this.chart.resize();
      }
    }, 300);
    this.getData();
  },
  methods: {
    getData () {
      // monthPay(this.year).then(resp => {
      //   this.chart.setOption(getOption(resp.data.data));
      // });
      this.chart.setOption(getOption(null));
    }
  },
  beforeDestroy () {
    clearInterval(this.sizeInt);
  },
  watch: {
    year () {
      this.getData();
    }
  }
};
</script>

<style>
</style>
