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

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '95%'
    },
    height: {
      type: String,
      default: '215px'
    },
     propertyareaType:{
      type:String,
      default:'num'
    },
     distributeCountInfos:{
      type: Array,
      default: function() {
        return []
      }
    }
  },
 data() {
    return {
      chart: null,
      xAxisData:[],
      yAxisDataArea:[],
      yAxisDataAmount:[],
      yAxisData:[]
    }
  },
  watch: {
    propertyareaType:{
     deep:true,
     handler(val){
       if(val=='num'){
         this.yAxisData=this.yAxisDataAmount
       }
       else{ 
         this.yAxisData=this.yAxisDataArea
       }
       this.$nextTick(() => {
          this.setOption()
        })
     }
    },
    distributeCountInfos: {
        deep: true,
        handler(val) {
            if (val) {
              console.log(val)
                let xAxisData=[];
                let yAxisDataArea=[];
                let yAxisDataAmount=[];
                for(var i=0;i<val.length;i++){
                   xAxisData.push(val[i].communityName)
                   yAxisDataAmount.push(val[i].amount)
                   yAxisDataArea.push(val[i].area)
                }
                this.xAxisData=xAxisData;
                this.yAxisDataAmount=yAxisDataAmount;
                this.yAxisDataArea=yAxisDataArea;

            }
            else{
              this.xAxisData=[];
              this.yAxisDataAmount=[];
              this.yAxisDataArea=[];
            }
            if(this.propertyareaType == 'num') {
              this.yAxisData=this.yAxisDataAmount;
            }else {
              this.yAxisData=this.yAxisDataArea;
            }
            // console.log(this.xAxisData)
            // console.log(this.yAxisData)
            this.$nextTick(() => {
                this.setOption()
            })
        }
    }
  },
  mounted() {
    this.$nextTick(() => {
        // console.log(this.chartTitle)
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOption()
    },
    setOption(){
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor: "#0F203E",
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight: 400
          },
        },
        dataZoom: [{
            show: false,//是否显示滑动条
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 9,  // 一次性展示6个。
            handleSize: 8
          },
           {
            type: 'inside',
            start: 0,
            end: 3
          }
        ],
        grid: {
          top: 20,
          left: '2%',
          right: '2%',
          bottom: 0,
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.xAxisData,
          axisTick: {
            alignWithLabel: true,
            //x轴刻度线
            show: false,
          },
          axisLine: {
            show: false,
          },
          // x轴文字倾斜
          axisLabel:{
            interval:0,
            rotate:45,//倾斜度 -90 至 90 默认为0
            margin:6,
            textStyle:{
              color:"#ffffff",
              fontSize: '12px'
            },
          }
        }],
        yAxis: [{
          type: 'value',
          axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#ffffff",
              fontSize: '12px'
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            splitLine: {
              //网格线
              lineStyle: {
                type: "solid", //设置网格线类型 dotted：虚线   solid:实线
                color: 'rgba(91,91,91,0.28)'
              },
            },
            splitArea: { show: false }, //去除网格区域
        }],
        series: [{
          name:this.propertyareaType=='num' ? '物业数量(处)': '物业面积(万㎡)',
          type: 'bar',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color:  '#15AFFF'
              }, {
                offset: 0.6,
                color:' #0D68FF '
              }], false),
              lineStyle: {
                color: ' #15AFFF',
                width: 2
              },
              // barBorderRadius:[15, 15, 0, 0],
            }
          },
          stack: 'vistors',
          barWidth: '10px',
          data: this.yAxisData,
          animationDuration
        }]
      }
      this.chart.setOption(option)

      // 使用刚指定的配置项和数据显示图表。
        setInterval( () => {
            // 每次向后滚动5个，最后一个从头开始。
            if (option.dataZoom[0].endValue == this.yAxisData.length ) {
                option.dataZoom[0].endValue = 9; 
                option.dataZoom[0].startValue = 0;
            }
            else {
                option.dataZoom[0].endValue = option.dataZoom[0].endValue + 5;
                option.dataZoom[0].startValue = option.dataZoom[0].startValue + 5;
            }
            this.chart.setOption(option);
        }, 2000);

  
    }
  }
}
</script>