<template>
    <div ref="onlinePayBar" class="online-pay-bar"></div>
  </template>
<script>
import * as echarts from 'echarts'

export default {
  name: 'bar',
  props:{
    xAxisData: {
      type: Array,
      default: () => []
    },
    seriesData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      barInstance: null
    }
  },
  watch: {
    xAxisData: {
      handler (newVal, oldVal) {
        if (newVal.length) {
          this.initChart()
        }
      },
      deep: true
    },
    seriesData: {
      handler (newVal, oldVal) {
        if (newVal.length) {
          this.initChart()
        }
      },
      deep: true
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener("resize", this.handleResize)
  },
  beforeDestroy() {
    if (this.barInstance) {
      this.barInstance.dispose()
    }
    window.removeEventListener("resize", this.handleResize)
  },
  methods: {
    /**
     * 获取一个和max最接近的能被5整除的无零头整数
     */
    getMax (max) {
      if (max <= 10) return 10

      let pow = max.toString().length - 2
      pow = Math.pow(10, pow)
      max = Math.ceil(max / pow / 10) * 10 * pow
      return max
    },
    initChart () {
      this.barInstance = echarts.init(this.$refs.onlinePayBar)
      const xAxisData = this.xAxisData
      const seriesData = this.seriesData
      // let max = 0
      // max = seriesData.reduce((max, num) => {
      //   return Math.max(Number(max), Number(num))
      // })
      // max = this.getMax(max)
      const option = {
        tooltip: {},
        legend: {
          right: '0',
          top: '0',
          textStyle: {
            color: '#fff',
            padding: 6
          }
        },
        grid: {
          top: '50px',
          bottom: '10px',
          left: '0px',
          right: '0px',
          containLabel: true
        },
        xAxis: {
          axisLabel: {
            color: '#fff',
            margin: 15,
            fontSize: 14,
            formatter: function (val, idx) {
              let value = xAxisData[idx]
              return value
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#666',
              opacity: 1,
              cap: 'round'
            }
          },
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true,
            length: 7,
            lineStyle: {
              width: 3,
              color: '#fff',
              opacity: 0.5
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.3,
              cap: 'round',
              type: [5, 10]
            }
          },
          max: function (value) { // x轴左侧留白
            return value.max + 0.3
          },
          min: function (value) { // x轴左侧留白
            return -0.3
          },
          data: xAxisData
        },
        yAxis: [
          {
            axisLabel: {
              color: '#fff',
              margin: 25,
              fontSize: 14
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              length: 14,
              lineStyle: {
                width: 2,
                fontSize: 16
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#fff',
                opacity: 0.3,
                cap: 'round',
                type: 'dashed',
                dashOffset: 5
              }
            }
          },
          {
            type: 'value',
            position: 'right',
            axisLabel: {
              show: false
            },
            axisTick: {
              show: true,
              length: 14,
              lineStyle: {
                width: 2,
                fontSize: 16
              }
            },
            axisLine: {
              show: false
            }
          }
        ],
        series: [{
          name: '项目体量（户数）',
          type: 'bar',
          barWidth: '20%',
          labelLine: {
            show: false
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#8E4CB7' },
              { offset: 1, color: '#3BB6FE' }
            ])
          },
          data: seriesData
        }]
      }
      this.barInstance.setOption(option)
      this.barInstance.resize()
    },
    handleResize() {
      if (this.barInstance) {
        this.barInstance.resize()
      }
    },
  }
}
</script>
<style lang="scss">
@import '@/assets/css/function.scss';
.online-pay-bar {
  width: 100%;
  height: halfH(280);
}
.online-pay {
  .total{
    height: halfH(24);
    line-height: halfH(24);
    padding: halfH(18) halfW(18);
    color: #fff;
    float: left;
    font-size: halfW(14);
    border-radius: 5px;
    background-color: rgba(17, 28, 48, 1);
    text-align: center;
    border: 1px solid rgba(0, 123, 211, 0.2);
  }
  .img{
    width: halfW(40);
    height: halfH(40);
    margin-right: halfW(27);
    margin-top: halfH(-7);
    padding: halfH(8) halfW(8);
    box-sizing: border-box;
    background: #12223C;
    border-radius: 50%;
    .icon{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
