<template>
  <div id="left-2">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <div id="left2" style="width: 100%; height: 17vw"></div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts');
// 引入柱状图组件
require('echarts/lib/chart/bar');
// 引入提示框和title组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
echarts = require('echarts');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: baoan_statis } = createNamespacedHelpers('baoan_statis');
export default {
  name: 'left-2',
  props: {},
  components: {},
  data: function () {
    return {
      numList: [],
      chart: undefined,
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...baoan_statis(['fourQuery']),
    async search({ skip = 0, limit = 10, purpose, company_id, ...info } = {}) {
      let res = await this.fourQuery({ ...info });
      if (this.$checkRes(res)) {
        let data = res.data.list.filter((i) => i.grade != null);
        console.log(data);
        this.$set(this, `numList`, data);
        if (!this.chart) this.init();
        else this.changeData();
      }
    },
    // 更换chart数据
    changeData() {
      if (!this.chart) return;
      let option = this.getOption(this.numList);
      this.chart.setOption(option);
    },
    // 组织chart的数据函数
    getOption(data) {
      let two = data.map((i) => i.grade);
      let thr = data.map((i) => i.num);
      let option;
      option = {
        title: {},
        tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0.7)', textStyle: { color: '#ffffff', fontFamily: 'sans-serif', fontSize: 12 } },
        grid: {
          y2: 30,
        },
        xAxis: {
          type: 'category',
          boundaryGap: [0, 0.01],
          data: two,
          axisLabel: { interval: 0, textStyle: { color: '#ffffff' } },
          axisTick: { show: true, inside: true, length: 3, lineStyle: { color: 'red', width: 1, type: 'solid' } },
        },
        yAxis: {
          axisLabel: { textStyle: { color: '#ffffff' } },
        },
        series: [
          {
            name: '职业等级',
            label: { show: true, position: 'top' },
            type: 'bar',
            itemStyle: {
              normal: {
                // color: function (params) {
                //   var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25'];
                //   return colorList[params.dataIndex];
                // },
              },
            },
            data: thr,
          },
        ],
      };
      return option;
    },
    init() {
      if (this.numList) {
        var chartDom = document.getElementById('left2');
        var myChart = echarts.init(chartDom);
        let option = this.getOption(this.numList);
        option && myChart.setOption(option);
        this.chart = myChart;
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped></style>
