<template>
  <div ref="barChart" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import { listSubType } from "@/api/conf/subType";
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'


export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'barChart',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '200px',
    },
  },
  data() {
    return {
      chart: null,
      // 数量
      estimate: 0,
      extract: 0,
      denoise: 0,
      fault: 0,
      completion: 0,
      expand: 0
    }
  },
  mounted() {
    // this.getList(1);
    // this.getList(2);
    // this.getList(3);
    // this.getList(4);
    // this.getList(5);
    // this.getList(6);
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      var chartDom = this.$refs.barChart
      // var myChart = echarts.init(chartDom)
      this.chart = echarts.init(chartDom)
      var option
      option = {
        xAxis: {
          type: 'category',
          data: ['补全', '去噪', '扩充', '特征提取', '退化评估', '故障预测'],
          axisLabel: {
            show: true,
            color: '#ffffff',
          }
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [
              {
                // value: this.denoise,
                value: 5,
                itemStyle: {
                  color: '#5470c6',
                },
              },
              {
                value: 3,
                itemStyle: {
                  color: '#5470c6',
                },
              },
              {
                value: 5,
                itemStyle: {
                  color: '#5470c6',
                },
              },
              {
                value: 5,
                itemStyle: {
                  color: '#9fe080',
                },
              },
              {
                value: 5,
                itemStyle: {
                  color: '#ffdc60',
                },
              },
              {
                value: 5,
                itemStyle: {
                  color: '#ff7070',
                },
              }
            ],
            type: 'bar',
            barWidth: 50
          },
        ],
      }
      option && this.chart.setOption(option)
    },
    // 获取
    getList(value) {
      this.queryParams = { pageNum: 1, pageSize: 100, type: value }
      listSubType(this.queryParams).then(response => {
        // this.subTypeList = response.rows;

        if (value === 1) {
          console.log(value);
          console.log(this.estimate);
        } else if (value === 2) {
          this.extract = response.total
        } else if (value === 3) {
          this.denoise = response.total
        } else if (value === 4) {
          this.fault = response.total
        } else if (value === 5) {
          this.completion = response.total
        } else {
          this.expand = response.total
        }
      });
    },
  },
}
</script>
