<template>
    <div>
      <div style="width: 50%;height: 110%;float: left">
        <shanxi mode="0" :index="index" :idname="idname" ref="shanxi"></shanxi>
      </div>
      <div class="map-1" style="width: 50%;height: 100%;float: left">
        <div class="map-bar">分公司销售气量</div>
        <div class="map-2" id="sellmap"></div>
      </div>
    </div>
</template>

<script>
  import * as DataSql from '../../../stores/DataSql'
  import co from 'co'
    export default {
        name: "TextShanximap",
      data() {
        return {
          xc: '',
          index:0,
          indexO:0,
          idname:'manageShanxiMap',
          indexflag:false,
          selldata: [
            {name:"西安市",value:600},
            {name:"安康市",value:600},
            {name:"榆林市",value:80},
            {name:"铜川市",value:600},
            {name:"延安市",value:600},
            {name:"宝鸡市",value:600},
            {name:"渭南市",value:600},
            {name:"商洛市",value:600},
            {name:"汉中市",value:600},
            {name:"咸阳市",value:600}
          ],     //销售数据
          timer:'',
        }
      },
      beforeDestroy() {
        //清除定时器
        clearInterval(this.timer);
      },
      methods: {
        //绘图
        setBar() {
          this.xc = this.$echarts.init(document.getElementById('sellmap'))
          console.log('sssss')
          var scale=this.$parent.$parent.scale

          var lname=[]
          var  maxdata=0
          var kdata=[]
          this.selldata.forEach(function (s) {
            if(s.value>maxdata){
              maxdata=s.value
            }
            lname.push(s.name)
          })
          this.selldata.forEach(function () {
            kdata.push(maxdata)
          })
          var option1={
            tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              },
              formatter:function(params, ticket, callback){
                return params[0].marker+'   <span style="font-weight: normal">'+params[0].name+'</span>&nbsp;&nbsp;&nbsp; <span style="color:#e1e52a;font-weight: bolder">'+params[0].value+'</span>';
              },
                textStyle:{
                    fontSize:16*scale
                },
              show: true,
              alwaysShowContent:true,
              backgroundColor:'#01396d',
              // borderColor :'rgba(13, 109, 180)',
              borderWidth:0,
              hideDelay:100,
              triggerOn:'mousemove',
              padding:10*scale,
              enterable:true,
              position: function(point, params, dom, rect, size) {
                //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
                var x = point[0]; //
                var y = point[1];
                var viewWidth = size.viewSize[0];
                var viewHeight = size.viewSize[1];
                var boxWidth = size.contentSize[0];
                var boxHeight = size.contentSize[1];
                var posX = 0; //x坐标位置
                var posY = 0; //y坐标位置
                if (x < boxWidth) { //左边放不开
                  posX = 5;
                } else { //左边放的下
                  posX = x - boxWidth;
                }

                if (y < boxHeight) { //上边放不开
                  posY = 5;
                } else { //上边放得下
                  posY = y - boxHeight;
                }
                posX=posX-20
                return [posX, posY];
              },
              extraCssText:'width: auto;height:auto;',
            },
            grid: {
              left: '3%',
              top: '4%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              scale: true,
              position: 'bottom',
              min: 0,
              nameGap:30,
              splitLine: {
                show: false
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#08738e'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                margin: 8,
                textStyle: {
                  color: '#95bad7'
                }
              },
            },
            yAxis: {
              type: 'category',
              //  name: 'TOP 20',
              axisLine: {
                show: true,
                  lineStyle: {
                  color: '#08738e'
                }
              },
              axisTick: {
                show: false,
                lineStyle: {
                  color: '#ddd'
                }
              },
              axisLabel: {
                interval: 0,
                textStyle: {
                  color: '#95bad7'
                }
              },
              data: lname
            },
            dataZoom: [{
              type: "inside",
              startValue:0,
              endValue:7,
              zoomLock:false,
              throttle:10,
              orient:'vertical',
            }],
            series: [
              {
                name:'',
                type: 'bar',
                barWidth: '30%',
                itemStyle: {
                  barBorderRadius: [0,16,16,0],
                    color:'#6fd9d0',
                },
                emphasis:{
                  itemStyle:{
                    color:'#ffff2c'
                  }
                },
                zlevel:2,
                data: this.selldata
              },
              {
                type: 'bar',
                barGap: '-100%',
                barWidth: '30%',
                itemStyle: {
                  normal: {
                    barBorderRadius: [0,16,16,0],
                    color: '#2a374e'
                  },
                },
                labelLine: {
                  show: true,
                },
                zlevel: 0,
                data: kdata
              }
            ]
          }

          this.xc.setOption(option1);

          // // 轮播
          // let idx = -1;
          // var dataLen=this.selldata.length
          // setInterval(()=>{
          //   var maxidx=0
          //   var minidx=0
          //   // 取消之前选中的图形
          //   oroptionmapjsonr_charts1.dispatchAction({
          //     type: 'downplay',
          //     seriesIndex: 0,
          //     dataIndex: idx,
          //   });
          //
          //   idx = (idx+ 1) % dataLen;
          //   //console.log(app.currentIndex);
          //   // 选中当前图形
          //   oroptionmapjsonr_charts1.dispatchAction({
          //     type: 'highlight',
          //     seriesIndex: 0,
          //     dataIndex: idx
          //   });
          //   maxidx=idx+7
          //   minidx=idx
          //   if(minidx>=dataLen-7){
          //     maxidx=dataLen
          //     minidx=dataLen-8
          //   }
          //   oroptionmapjsonr_charts1.dispatchAction({
          //     type: 'showTip',
          //     seriesIndex: 0,
          //     dataIndex: idx
          //   });
          //
          //   oroptionmapjsonr_charts1.dispatchAction({
          //     type: 'dataZoom',
          //     startValue:minidx,
          //     endValue: maxidx
          //   });
          // }, 3000)

        },
        //请求后台数据
        searchdata() {
          let sqldata = DataSql.getData(this, 'user',{}, 'resdata')
          co(sqldata)
          let sqldatapie = DataSql.getData(this,'useri',{}, 'resdatapie')
          co(sqldatapie)
          let sqldataone = DataSql.getData(this,'userapply',{}, 'resdataapply')
          co(sqldataone)
        },
      },
      watch: {
      'index'(){

        var dataLen=this.selldata.length
        var oroptionmapjsonr_charts1=this.xc
        var self=this
        var flag=false
          if(this.indexflag){
            var maxidx=0
            var minidx=0
            // 取消之前选中的图形
            oroptionmapjsonr_charts1.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: self.indexO
            });

            //console.log(app.currentIndex);
            maxidx=self.index+7
            minidx=self.index
            if(minidx>=dataLen-7){
              maxidx=dataLen
              minidx=dataLen-7
              flag=true
            }else {flag=false}

            if(!flag){
              oroptionmapjsonr_charts1.dispatchAction({
                type: 'dataZoom',
                startValue:minidx,
                endValue: maxidx
              });
              setTimeout(function () {
                oroptionmapjsonr_charts1.dispatchAction({
                  type: 'showTip',
                  seriesIndex: 0,
                  dataIndex: self.index,
                });
                // 选中当前图形
                oroptionmapjsonr_charts1.dispatchAction({
                  type: 'highlight',
                  seriesIndex: 0,
                  dataIndex: self.index,
                });
              },70)
            }else {
              oroptionmapjsonr_charts1.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: self.index,
              });
              // 选中当前图形
              oroptionmapjsonr_charts1.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: self.index,
              });
            }
            this.indexflag=false
          }else {
          // 轮播

         this.timer= setInterval(()=>{
            var maxidx=0
            var minidx=0
            // 取消之前选中的图形
            oroptionmapjsonr_charts1.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: self.indexO
            });

            //console.log(app.currentIndex);
            maxidx=self.index+7
            minidx=self.index
            if(minidx>=dataLen-7){
              maxidx=dataLen
              minidx=dataLen-7
              flag=true
            }else {flag=false}

            if(!flag){
              oroptionmapjsonr_charts1.dispatchAction({
                type: 'dataZoom',
                startValue:minidx,
                endValue: maxidx
              });
              setTimeout(function () {
                oroptionmapjsonr_charts1.dispatchAction({
                  type: 'showTip',
                  seriesIndex: 0,
                  dataIndex: self.index,
                });
                // 选中当前图形
                oroptionmapjsonr_charts1.dispatchAction({
                  type: 'highlight',
                  seriesIndex: 0,
                  dataIndex: self.index,
                });
              },70)
            }else {
              oroptionmapjsonr_charts1.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: self.index,
              });
              // 选中当前图形
              oroptionmapjsonr_charts1.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: self.index,
              });
            }
          },3000)

          }
       }
      },

      ready() {
        // 拼接sql，请求后台
        this.setBar()
        // this.searchdata()
      }
    }
</script>

<style scoped>

</style>
