<template>
    <div>
      <div style="width: 100%;height: 110%;float: left">
<!--        <shanxi mode="0" :index="index" :idname="idname" ref="shanxi"></shanxi>-->
        <baoding mode="0" :index="index" :idname="idname" v-ref:baoding></baoding>
      </div>
<!--      <div class="map-1" style="width: 50%;height: 100%;float: left">-->
<!--&lt;!&ndash;        <div class="map-bar">分公司销售气量</div>&ndash;&gt;-->
<!--        <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)
        },
          resize() {
            console.log('刷新地图')
              this.$refs.baoding.searchdata()
          },
      },
      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>
