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

<script>
import * as echarts from 'echarts'
import { fontSize } from '../../util'
export default {
  name: 'ComSettlementChart', //结算柱状图
  props: {
    chartData: {}
  },
  data() {
    return { myChart: null, timeout: null }
  },
  watch: {
    chartData: {
      handler(n, o) {
        this.initialChart()
      }
    }
  },
  mounted() {
    //图表大小自适应
    window.addEventListener('resize', this.onResize)
  },
  methods: {
    destroyChart() {
      if (this.myChart != null) {
        this.myChart.dispose()
        this.myChart = null
      }
    },
    onResize() {
      //   if (this.myChart) {
      //     this.myChart.resize()
      //   }
      this.initialChart()
    },
    initialChart() {
      this.destroyChart()
      const { legendData, totalSta, annualSta } = this.chartData || {}
      let option = {
        tooltip: {
          confine: true,
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              type: 'solid',
              color: 'rgba(255, 255, 255, 0.3)'
            }
          },
          textStyle: {
            color: '#fff'
          },
          borderWidth: 0,
          backgroundColor: 'rgba(50,50,50,0.7)'
        },
        legend: {
          top: '2%',
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            fontSize: fontSize(14),
            fontFamily: 'Source Han Sans CN',
            fontWeight: 400,
            color: '#FFFFFF'
          }
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '25%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: { show: false },
          axisLabel: { show: false },
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            inside: true,
            verticalAlign: 'bottom',
            lineHeight: fontSize(45),
            margin: 0,
            //
            fontSize: fontSize(14),
            fontFamily: 'Source Han Sans CN',
            fontWeight: 500,
            color: '#FFFFFF'
          },
          data: legendData
        },
        series: [
          {
            name: '累计结算',
            type: 'bar',
            barWidth: 8,
            barGap: '80%',
            label: {
              show: true,
              position: [fontSize(280), 0],
              fontSize: fontSize(14),
              fontFamily: 'Source Han Sans CN',
              fontWeight: 500,
              color: ' #FEFFFF',
              formatter: (param) => {
                return param.value + '万元'
              }
            },
            itemStyle: {
              borderRadius: 4,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#D6791F'
                },
                {
                  offset: 1,
                  color: '#FFA44B'
                }
              ])
            },
            data: totalSta
          },
          {
            name: '年度结算',
            type: 'bar',
            barWidth: 8,
            label: {
              show: true,
              position: [fontSize(280), 0],
              fontSize: fontSize(14),
              fontFamily: 'Source Han Sans CN',
              fontWeight: 500,
              color: ' #FEFFFF',
              formatter: (param) => {
                return param.value + '万元'
              }
            },
            itemStyle: {
              borderRadius: 4,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#0A89FF'
                },
                {
                  offset: 1,
                  color: '#05CFE1'
                }
              ])
            },
            data: annualSta
          }
        ]
      }
      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>