<template>
  <div :class="className" :style="{width:width,height:height}">
    <slot name="title" />
  </div>
</template>

<script>
import echarts from 'echarts3'
// require('echarts/theme/infographic')
// import { debounce } from './../../utils'
import resize from './mixins/resize'
const animationDuration = 6000
export default {
  name: 'BarChart',
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    height: {
      type: String,
      default: '200px'
    },
    width: {
      type: String,
      default: '100%'
    },
    chartBarData: {
      type: Object,
      required: true
    },
    showLegend: {
      type: Boolean,
      default: false
    },
    option: {
      type: Object,
      default: () => {
        return {}
      }
    },
    barWidth: {
      type: [String, Number],
      default: '15%'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartBarData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    // 渲染柱状图
    initChart() {
      this.chart = echarts.init(this.$el, 'infographic')
      this.setOptions(this.chartBarData)
    },
    setOptions({ xAxisData, yAxisDataList, title } = {}) {
      const series = []; const legendList = []; const dataList = []
      const colorArr = [
        {
          start: 'rgba(7,106,103,',
          end: 'rgba(7,106,103,1)'
        },
        {
          start: 'rgba(242,159,143,',
          end: 'rgba(242,159,143)'
        },
        {
          start: 'rgba(254,215,112,',
          end: 'rgba(254,215,112)'
        },
        {
          start: 'rgba(251,117,82,',
          end: 'rgba(251,117,82)'
        }
      ]
      // if(title == undefined){
      //   legendShow = false
      // }else{
      //   legendShow = true
      // }

      if (yAxisDataList.length != 0) {
        yAxisDataList.forEach(item => {
          dataList.push(item.data)
          legendList.push(item.name)
        })
      }
      dataList.forEach((item, index) => {
        let obj = {}
        obj = {
          name: legendList[index],
          type: 'bar',
          stack: legendList[index],
          data: item,
          barWidth: this.barWidth,
          itemStyle: {
            normal: {
              // color: {
              //     type: "linear",
              //     x: 0,
              //     y: 0,
              //     x2: 0,
              //     y2: 1,
              //     colorStops: [{
              //             offset: 0,
              //             color: colorArr[index].start + "1)"
              //         },
              //         {
              //             offset: 1,
              //             color: colorArr[index].end
              //         }
              //     ],
              //     globalCoord: false
              // }
              color: function(params) {
                var colorList = [
                  '#0078d7', '#f04244', '#ff8700', '#00e473', '#ff6a00',
                  '#ff00de', '#0000ff'
                ]
                return colorList[index]
              }
            }
          }
        }
        series.push(obj)
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'cross' // 默认为直线，可选为：'line' | 'shadow'
          },
          textStyle: {
            fontSize: 12
          },
          position: function(point, params, dom, rect, size) {
            // 其中point为当前鼠标的位置
            return [point[0], '12%']
          },
          extraCssText: ''
        },
        title: {
          text: title
        },
        legend: {
          data: legendList,
          left: 'right',
          orient: 'horizontal',
          show: this.showLegend,
          icon: 'rect',
          itemWidth: 12,
          itemHeight: 8,
          right: 10,
          top: 0,
          textStyle: {
            color: '#333',
            fontSize: '12'
          }
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '3%',
          bottom: '8%',
          containLabel: true
        },
        dataZoom: [
          {
            'show': true,
            'height': 10,
            'xAxisIndex': [
              0
            ],
            bottom: '0%',
            'start': 0,
            'end': 90,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: 'rgba(204,187,225,0.5)'
            },
            textStyle: {
              color: 'rgba(204,187,225,0.7)',
              fontSize: 10
            },
            borderColor: 'rgba(204,187,225,0.5)',
            fillerColor: 'rgba(233,232,233,0.6)'
          },
          {
            'type': 'inside',
            'show': true,
            'height': 15,
            'start': 1,
            'end': 35
          }
        ],
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0,
              rotate: 0,
              formatter: function(value) {
                var pattern = new RegExp('[\u4E00-\u9FA5]+')
                var pattern2 = new RegExp('[A-Za-z]+')
                if (pattern.test(value)) {
                  var v = value.substring(0, 6) + '...'
                  return value.length > 6 ? v : value
                } else {
                  var v = value.substring(0, 9) + '...'
                  return value.length > 9 ? v : value
                }
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            }
          }
        ],
        series: series
      }
      if (Object.keys(this.option).length) {
        Object.assign(option, this.option)
      }
      this.chart.setOption(option)
    }
  }
}
</script>
