<template>
  <div id="safecheck-barchart" style="height: 100%;width:100%">
  </div>
</template>

<script>
  import {HttpResetClass} from "vue-client";
  // import this.datamanage from './json/this.datamanage.json'
  export default {
    title: '收费',
    data() {
      return{
        xData: [],
        yData1: [],
        yData2: []
      }
    },
    methods: {
      async resize(){
        if(!this.datamanage.checkByMonth){
          let http = new HttpResetClass()
          // 收费
          await http.load('post', '/api/af-revenue/sql/getSafecheckSumByMonth', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
            this.xData = res.data.map(item => item.time)
            this.yData1 = res.data.map(item => item.allnum)
            this.yData2 = res.data.map(item => item.sucnum)
            this.init()
          })
        }else{
          let res = this.datamanage.checkByMonth
          this.xData = res.map(item => item.time)
          this.yData1 = res.map(item => item.allnum)
          this.yData2 = res.map(item => item.sucnum)
          this.init()
        }

      },
      init() {
        var xData = this.xData,
            // ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
          yData1 = this.yData1,
            // [60871, 0, 2, 26946, 108042, 136004, 156401, 164792, 83286],
          yData2 = this.yData2,
            // [35337, 0, 2, 15514, 72138, 78966, 101071, 110397, 58137],
          borderData = [],
          legend = ['计划安检量', '正常入户量'],
          colorArr = [{
            start: 'rgba(242,153,97)',
            mid: 'rgba(242,153,97,0.7)',
            end: 'rgba(0, 0, 0,0.5)'
          },
            {
              end: 'rgba(0, 0, 0,0.5)',
              mid: 'rgba(111,217,208,0.7)',
              start: 'rgba(111,217,208)'
            },
            {
              color: '#00EAFF'
            }
          ]
        let normalColor = 'rgba(8,115,142)'
        let seriesData = []
        var borderHeight = 4
        xData.forEach(element => {
          borderData.push(borderHeight)
        });
        [yData1, yData2].forEach((item, index) => {
          var obj1 = {}
          obj1 = {
            name: legend[index],
            type: 'bar',
            stack: legend[index],
            data: item,
            barWidth: '10%',
            itemStyle: {
              normal: {
                barBorderRadius: [30, 30, 30, 30],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: colorArr[index].start
                  },
                  {
                    offset: 0.5,
                    color: colorArr[index].mid
                  },
                  {
                    offset: 1,
                    color: colorArr[index].end
                  }
                  ],
                  globalCoord: false
                }
              }
            }
          }
          seriesData.push(obj1)
        })
        console.log(seriesData)
        // 更改柱状图位置
        let option = {
          backgroundColor: '#ffffff00',
          grid: {
            left: '2%',
            top: '2%',
            right: '7%',
            bottom: '20%',
            containLabel: true
          },
          legend: {
            show: true,
            icon: 'rect',
            itemWidth: 30,
            itemHeight: 20,
            right: 'center',
            bottom: '7%',
            textStyle: {
              color: '#fff'
            },
            data: legend
          },
          tooltip: {
            position: function (pos, params, dom, rect, size) {
              let yPos = '20%'
              let xPos = 0
              if (pos[0] < size.viewSize[0] / 2) {
                xPos = pos[0] + 10
              } else {
                xPos = pos[0] - dom.offsetWidth - 10
              }
              return [xPos, yPos]
            },
            trigger: 'axis',
            extraCssText: 'width: auto;height: auto;',
            formatter: function (params) {
              var str = ''
              for (var i = 0; i < params.length; i++) {
                if (params[i].seriesName !== '') {
                  str += `<span>${params[i].name}月${params[i].seriesName}</span><span style="color:gold">${params[i].value}</span> <br />`
                }
              }
              return str
            }
          },
          xAxis: [{
            name: '近6月',
            type: 'category',
            data: xData,
            nameTextStyle: {
              color: '#95bad7',
              fontSize: 12
            },
            interval: 0,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              textStyle: {
                color: normalColor,
                fontSize: '1vw'
              }
            },
            axisLine: {
              lineStyle: {
                color: normalColor
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          }],
          yAxis: [{
            type: 'value',
            nameTextStyle: {
              color: normalColor,
              fontSize: 12
            },
            // 'min': 0,
            // 'max': 50,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: normalColor,
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: normalColor
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: normalColor
              }
            }
          }],
          series: seriesData
        }
        console.log(option)
        let barchart = this.$echarts.init(document.getElementById('safecheck-barchart'))
        console.log(option)
        barchart.setOption(option)
        var index = 0
        // var mTime = setInterval(function () {
        //   barchart.dispatchAction({
        //     type: 'showTip',
        //     seriesIndex: 0,
        //     dataIndex: index
        //   })
        //   index++
        //   if (index > xData.length) {
        //     index = 0
        //   }
        // }, 1000)
      }
    },
    ready() {
      this.resize()
    },
    props: ['datamanage']
  }
</script>
<style scoped>
  /*div{*/
  /*height: auto;*/
  /*}*/
</style>

