<template>
  <div id="grade-1">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-col :span="24" class="one_1"> 职业等级 </el-col>
          <el-col :span="24" class="one_2">
            <div id="grade1" class="canvas" style="width: 100%; height: 9.8vw"></div>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { EventBus } from '../eventBus';
// 引入基本模板
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: 'grade-1',
  props: {
    typeInfo: { type: Object },
    companyInfo: { type: Object },
  },
  components: {},
  data: function () {
    return {
      numList: [],
      chart: undefined,
    };
  },
  async created() {
    await this.search();
  },
  mounted() {
    this.connectBus();
  },
  methods: {
    ...baoan_statis(['fourQuery']),
    async search({ skip = 0, limit = 10, purpose, company_id, ...info } = {}) {
      if (purpose) info.purpose = purpose;
      if (company_id) info.company_id = company_id;
      let res = await this.fourQuery({ ...info });
      if (this.$checkRes(res)) {
        let data = res.data.list.filter((i) => i.grade != null);
        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('grade1');
        var myChart = echarts.init(chartDom);
        let option = this.getOption(this.numList);
        option && myChart.setOption(option);
        this.chart = myChart;
      }
    },
    // 建立总线监听函数
    connectBus() {
      EventBus.$on('toLinkage', (data) => {
        this.search(data);
      });
      EventBus.$on('backToInit', (data) => {
        this.search(data);
      });
    },
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = undefined;
    }
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    // typeInfo: {
    //   deep: true,
    //   immediate: true,
    //   handler(val, oval) {
    //     let toSearch = false;
    //     if (!oval) toSearch = true;
    //     else {
    //       const okeys = Object.keys(oval);
    //       const keys = Object.keys(val);
    //       if (okeys.length == 0 && keys.length > 0) toSearch = true;
    //       else if (okeys.length > 0 && keys.length === 0) toSearch = true;
    //     }
    //     if (toSearch) this.search({ purpose: val.purpose_id });
    //   },
    // },
    // companyInfo: {
    //   deep: true,
    //   immediate: true,
    //   handler(val, oval) {
    //     let toSearch = false;
    //     if (!oval) toSearch = true;
    //     else {
    //       const okeys = Object.keys(oval);
    //       const keys = Object.keys(val);
    //       if (okeys.length == 0 && keys.length > 0) toSearch = true;
    //       else if (okeys.length > 0 && keys.length === 0) toSearch = true;
    //       else toSearch = !_.isEqual(_.get(val, 'id'), _.get(oval, 'id'));
    //     }
    //     if (toSearch) this.search({ company_id: val.id });
    //   },
    // },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    .one_1 {
      color: #000;
      font-size: 0.9375vw;
      font-weight: 700;
      padding-left: 0.52vw;
      font-size: 2vmin;
      font-weight: 700;
      position: relative;
      border-bottom: 2px solid #2441a9;
      line-height: 2.96875vw;
      text-align: left;
    }
    .one_1:before {
      background: #2441a9;
      border-radius: 50%;
      content: '';
      width: 6px;
      height: 6px;
      position: absolute;
      right: -2px;
      bottom: -4px;
      z-index: 1;
      visibility: visible;
    }
    .one_2 {
      background: #2441a9;
    }
  }
}
.canvas {
  /deep/canvas {
    width: 18.8vw !important;
    max-height: 9vw !important;
  }
}
</style>
