<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";
import { employedCount } from "@/api/tenant/index";

function getOption (data) {
  const option = {
    color: ["#5d9df8"],
    tooltip: {},
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "25",
      containLabel: true
    },
    xAxis: [
      {
        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就是不显示
          }
        }
      }
    ],
    yAxis: [
      {
        axisLabel: {
          show: true,
          textStyle: {
            color: '#999999',  //更改坐标轴文字颜色
          }
        },
        axisLine: {
          lineStyle: {
            color: '#fff', // x坐标轴的轴线bai颜色
            width: 0 //这里是坐标轴的宽度,为0就是不显示
          }
        }
      }
    ],
    series: [
      {
        name: "人数",
        type: "line",
        data: data,
        symbolSize: 15,
        areaStyle: {
          color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(93,157,248,255)"
            },
            {
              offset: 1,
              color: "rgba(93,157,248,0)"
            }
          ])
        }
      }
    ]
  };

  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 () {
      employedCount(this.year).then(resp => {
        this.chart.setOption(getOption(resp.data.data));
      });
    }
  },
  beforeDestroy () {
    clearInterval(this.sizeInt);
  },
  watch: {
    year () {
      this.getData();
    }
  }
};
</script>

<style>
</style>
