<template>
  <div id="company-2">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__rotateIn">
        <el-col :span="24" class="one">
          <el-col :span="24" class="one_1"> {{ typeInfo.name }} </el-col>
          <el-col :span="24" class="one_2">
            <div id="company2" 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: company_base } = createNamespacedHelpers('company_base');
export default {
  name: 'company-2',
  props: {
    typeInfo: { type: Object },
  },
  components: {},
  data: function () {
    return {
      list: [],
      chart: undefined,
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    ...company_base(['query']),
    // 查询企业类型数量
    async search(data = this.typeInfo) {
      let res = await this.query({ purpose_id: data.purpose_id });
      if (this.$checkRes(res)) {
        let data = res.data.map((i) => ({ value: 1, name: i.company, id: i.id }));
        this.$set(this, `list`, data);
        if (!this.chart) this.init();
        else this.changeData();
      }
    },
    // 更换chart数据
    changeData() {
      if (!this.chart) return;
      let option = this.getOption(this.list);
      this.chart.setOption(option);
    },
    // 组织chart的数据函数
    getOption(data) {
      let option;
      option = {
        legend: { show: false },
        toolbox: {},
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,0.7)',
          textStyle: { color: '#ffffff', fontFamily: 'sans-serif', fontSize: 12 },
          position: 'bottom',
        },
        series: [
          {
            name: '企业类型',
            type: 'pie',
            radius: [10, 70],
            center: ['50%', '50%'],
            roseType: '',
            itemStyle: { borderRadius: 8 },
            label: { color: 'rgba(255,255,255)', fontSize: '12', show: false },
            data,
          },
        ],
      };
      return option;
    },
    async init() {
      var chartDom = document.getElementById('company2');
      var myChart = echarts.init(chartDom);
      let option = this.getOption(this.list);
      option && myChart.setOption(option);
      myChart.on('click', (params) => {
        EventBus.$emit('toCompanyInfo', params.data);
      });
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  // watch: {
  //   typeInfo: {
  //     deep: true,
  //     immediate: true,
  //     handler(val) {
  //       if (val) this.search(val);
  //     },
  //   },
  // },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    .one_1 {
      color: #000;
      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: 19vw !important;
    height: 9vw !important;
  }
}
</style>
