<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
import { fontSize } from '../../util'
export default {
  name: 'ComTriangleBarChart', //末端三角柱状图
  props: {
    chartData: {}
  },
  data() {
    return { myChart: null }
  },
  watch: {
    chartData: {
      handler(n, o) {
        this.$nextTick(() => {
          this.initialChart()
        })
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initialChart()
    })
    //图表大小自适应
    window.addEventListener('resize', this.onResize)
  },
  methods: {
    destroyChart() {
      if (this.myChart != null) {
        this.myChart.dispose()
        this.myChart = null
      }
    },
    onResize() {
      if (this.myChart) {
        this.myChart.resize()
      }
    },
    initialChart() {
      this.destroyChart()
      let data = [
        {
          name: '进度',
          value: 12
        },
        {
          name: '质量',
          value: 9
        },
        {
          name: '安全',
          value: 6
        },
        {
          name: '监测',
          value: 5
        },
        {
          name: '合同',
          value: 3
        }
      ]
      function getArrByKey(data, k) {
        let key = k || 'value'
        let res = []
        if (data) {
          data.forEach(function (t) {
            res.push(t[key])
          })
        }
        return res
      }
      function getSymbolData(data) {
        let arr = []
        for (var i = 0; i < data.length; i++) {
          arr.push({
            value: data[i].value,
            symbolPosition: 'end'
          })
        }
        return arr
      }
      let opt = {
        index: 0
      }
      data = data.sort((a, b) => {
        return b.value - a.value
      })
      let option = {
        grid: {
          top: '10%',
          bottom: -10,
          right: 0,
          left: 50,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          borderWidth: 0,
          textStyle: {
            color: '#fff'
          },
          backgroundColor: 'rgba(50,50,50,0.7)',
          formatter: function (params) {
            return params[1].seriesName + '：' + params[1].marker + params[1].value
          }
        },
        xAxis: {
          show: false
        },
        yAxis: [
          {
            triggerEvent: true,
            show: true,
            inverse: true,
            data: getArrByKey(data, 'name'),
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          {
            triggerEvent: true,
            show: true,
            inverse: true,
            data: getArrByKey(data, 'name'),
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              color: '#fff',
              inside: false,
              fontSize: fontSize(14),
              formatter: function (value, index) {
                return data[index].value + '个'
              }
            }
          }
        ],
        series: [
          {
            type: 'pictorialBar',
            symbol:
              'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAVCAYAAACZm7S3AAABTklEQVQ4jY3UTU7jQBCG4cfGAQkNCht+1swBBoGAQwBiw1m4F8cABEeYFatZgTKjgSROWLgamsZEsdRqt93vV1VdVV3VDyPfPFWMOkaFOWYx5s0CcAUDrMVco8Urxpj0wQlcww8MsR7wC54wQlvCOTjEDg5wjp94xBWmGDcLwF0c4zTmIRps4hmjegF4gLMAt+N/E6EMUDcLwEv8wlYYmMXe1dhfNXEQg1DcDkvn2I91lcHzbP2ew2T1JGI8LEDFOxFDcmUDF+FyCfY+qXJSQewtCyZ4rqucCX7jT3xbGh7rquYad8sKNLpTfNUl/sZHM5SH9kUswRP8DYu3uvJb0eV5JxOscpEmizlZh4eYpzgKD/IQW1lLfieQxFNtT8PDCWZ5Y/QJ3MTG1kdXPelac1a2ZCnQ4h/ufe7n/3r6uRRImei7Sb5YLgVSJnrvsDdqFW7Audo9MQAAAABJRU5ErkJggg==',
            symbolSize: [20, 20],
            symbolOffset: [5, 0],
            z: 12,
            data: getSymbolData(data)
          },
          {
            name: '数量',
            type: 'bar',
            showBackground: false,
            yAxisIndex: 0,
            data: data,
            barWidth: 8,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: '#0A89FF'
                  },
                  {
                    offset: 0.7,
                    color: '#0A89FF'
                  },
                  {
                    offset: 1,
                    color: '#02CEF3'
                  }
                ],
                false
              )
            },
            label: {
              color: '#fff',
              show: true,
              position: ['-40px', '-2px'],
              fontSize: fontSize(14),
              formatter: function (a, b) {
                return a.name
              }
            }
          }
        ]
      }
      this.creatChart(option, this.$refs.chart)
    },
    creatChart(option, ref) {
      this.myChart = echarts.init(ref) //this.$refs.chart
      this.myChart.resize()
      this.myChart.setOption(option, {
        notMerge: true
      })
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize)
    this.destroyChart()
  }
}
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>