<template>
    <div>
      <span class="title-1">固定资产投资完成情况</span>
      <div class="text-1">
       <div class="business-1" id="business" style="text-align: left"></div>
       <div class="business-2">
         <table id="tableId" ref="tableId">
           <thead  class="thead"  style=" border: solid 1px #0093ff;">
           <th>分公司</th>
           <th>系统名称</th>
           <th>投资费用(万/元)</th>
           <th>在建/已建</th>
           </thead>
           <tbody class="scroll-content" :style="{top}" >
           <tr v-for="item in dane"><td>{{item.fen}}</td><td>{{item.name}}</td><td style="color: #ffff2c">{{item.money}}</td><td>{{item.state}}</td></tr>
           </tbody>
         </table>

      </div>
        <img class="img-bottom" src="../../../../static/NewManageHome/2.gif" />
    </div>
    </div>
</template>

<script>
   import * as DataSql from '../../../stores/DataSql'
    import co from 'co'

    export default {
      name: "TextBusiness",
      props: {
        listenheight: String,
      },
      data() {
        return {
          xc: '',
          parentgasname: [{name:'汉投',value:1000},{name:'城燃',value:1000},{name:'安康',value:1000},{name:'商洛',value:1000}],
          childrengasname: [
            {name:'佛坪',parentname:'汉投',value:100},{name:'洋县',parentname:'汉投',value:800},
            {name:'扶风',parentname:'城燃',value:600}, {name:'太白',parentname:'城燃',value:300},
            {name:'紫阳',parentname:'安康',value:200},{name:'汉明',parentname:'安康',value:700},
            {name:'商南',parentname:'商洛',value:600},{name:'洛南',parentname:'商洛',value:77}
            ],
          resdata1: [],
          resdata2: [],
          moveDistance:'25',
          viewHeight:'400px',
          datass:[
            {fen:'汉投',name:'SCADA系统',money:101,state:'在建'},
            {fen:'汉投1',name:'SCADA系统',money:101,state:'在建'},
            {fen:'汉投2',name:'SCADA系统',money:101,state:'在建'},
            {fen:'汉投3',name:'SCADA系统',money:101,state:'在建'},
            {fen:'汉投4',name:'SCADA系统',money:101,state:'在建'},
            {fen:'汉投5',name:'SCADA系统',money:101,state:'在建'},
            {fen:'汉投6',name:'SCADA系统',money:101,state:'在建'},
            {fen:'汉投7',name:'SCADA系统',money:101,state:'在建'},
            {fen:'汉投8',name:'SCADA系统',money:101,state:'在建'},
            {fen:'汉投9',name:'SCADA系统',money:101,state:'在建'},
            {fen:'汉投1',name:'SCADA系统',money:101,state:'在建'},
            {fen:'汉投2',name:'SCADA系统',money:101,state:'在建'},
            {fen:'汉投',name:'SCADA系统',money:101,state:'在建'},
            {fen:'汉投',name:'SCADA系统',money:101,state:'在建'},
            {fen:'汉投',name:'SCADA系统',money:101,state:'在建'},

          ],
          dane:[],
          timer:'',
        }
      },
      computed: {
        top() {
          console.log('ssss')
          return -this.activeIndex * this.moveDistance + "px"; //定义移动的单元高度
        },
      },
      mounted() {

        },
      methods: {
        setBar() {
          this.xc = this.$echarts.init(document.getElementById('business'))
          var scale=this.$parent.$parent.scale*0.8
          let legendname = []
          var parenttotal = 0
          var childrentotal = 0
          this.parentgasname.forEach(function (s) {
            parenttotal = parenttotal + s.value
            legendname.push(s.name)
          })
          this.childrengasname.forEach(function (s) {
            childrentotal = childrentotal + s.value
            legendname.push(s.name)
          })

          let echartsdata = this.childrengasname
          var userdata = this.parentgasname
          this.xc.setOption(
            {
              title: {
                text: '',
                subtext: '',
                x: 'center'
              },
              tooltip: {
                trigger: 'item',
                show: true,
                alwaysShowContent:true,
                backgroundColor:'#01396d',
                // borderColor :'rgba(13, 109, 180)',
                borderWidth:0,
                hideDelay:100,
                padding:10*scale,
                  textStyle:{
                      fontSize:18*scale
                  },
                formatter: function (params) {
                  if (params.name == legendname[0] || params.name == legendname[1] || params.name == legendname[2] || params.name == legendname[3]) {
                    var percentage = (params.value / parenttotal) * 100
                    return params.marker + "  <span style=\"font-weight: normal\"> " + params.name + "</span>  <span style=\"color:#64d8d4;font-weight: bolder\"> &nbsp;&nbsp;" + params.value + "</span>" +
                      " <span style=\"color:#e1e52a;font-weight: bolder\">&nbsp;" + percentage.toString().substring(0, 5) + "%</span>"
                  } else {
                    var percentage = (params.value / childrentotal) * 100
                    return "<div style='text-align: center;height: 1px;font-weight: normal'>"+params.data.parentname + "</div><br/>" + "" + params.marker + " " + params.name + "  <span style=\"color:#64d8d4;font-weight: bolder\">&nbsp;&nbsp;"
                      + params.value + "</span>" + " <span style=\"color:#e1e52a;font-weight: bolder\">&nbsp;" + percentage.toString().substring(0, 5) + "%</span>"
                  }
                },
                extraCssText: 'width: auto;height: auto;'
              },
              series: [
                {
                  // name:'数量',
                  type: 'pie',
                  selectedMode: 'single',
                  color: ['#f7cb32', '#ef7c3d', '#3d7ce5','#f27c79'],
                  radius: [0, '35%'],
                  center: ['50%', '45%'],
                  label: {
                    normal: {
                      position: 'inner'
                    }
                  },
                  labelLine: {
                    normal: {
                      show: false
                    }
                  },
                  data: userdata
                }, {
                  // name:'数量',
                  type: 'pie',
                  color: ['#e5e280', '#6e93e0', '#3bdda9', '#6fd9d0', '#c7e06e', '#e68d8d'],
                  label: {
                    show: false
                  },
                  radius: ['45%', '65%'],
                  center: ['50%', '45%'],
                  data: echartsdata
                }
              ]
            }, true)
          let idx = 0;
          var dataLen=echartsdata.length
          var oroptionmapjsonr_charts=this.xc
          var sidx=0
          var series=oroptionmapjsonr_charts.getOption().series
          var flag=false
        this.timer=  setInterval(()=>{
            if(!flag){
              oroptionmapjsonr_charts.dispatchAction({
                type: 'pieUnSelect',
                seriesIndex:0 ,
                dataIndex: sidx,
              });
            }

            // 取消之前选中的图形
            oroptionmapjsonr_charts.dispatchAction({
              type: 'pieUnSelect',
              seriesIndex:1 ,
              dataIndex: idx,
            });



            idx = (idx+ 1) % dataLen;


           for(var i=0;i<4;i++){
              if(series[1].data[idx].parentname==series[0].data[i].name){
                sidx=i
                flag=true
                break
              }
              flag=false
           }
            oroptionmapjsonr_charts.dispatchAction({
              type: 'pieSelect',
              seriesIndex: 0,
              dataIndex: sidx
            });
            //console.log(app.currentIndex);
            // 选中当前图形
            oroptionmapjsonr_charts.dispatchAction({
              type: 'pieSelect',
              seriesIndex: 1,
              dataIndex: idx
            });
            oroptionmapjsonr_charts.dispatchAction({
              type: 'showTip',
              seriesIndex: 1,
              dataIndex: idx
            });

          }, 3000)
        },
        searchdata(flag) {
          let getGen = getData(this, flag)
          co(getGen)
        },
        linesql(param) {
          // 拼接sql，请求后台
          if (param == '') {
            let getGen = DataSql.getData(this, 'gasdistri',{item:param}, 'resdata1')
            co(getGen)
          } else {
            let getGen = DataSql.getData(this,'gasdistri',{item:param}, 'resdata2')
            co(getGen)
          }
        },
        resize() {
          var self=this
          var index=-1
          setInterval(()=>{
            self.dane.splice(0,self.dane.length)
            index=(index+1)%self.datass.length
            var maxid=0
            if(index>self.datass.length-9){
              maxid=self.datass.length-1
            }else {
              maxid=index+8
            }
            var i=0
            self.datass.forEach(function (s) {
              if(i>=index&&i<=maxid){
                self.dane.push(s)
              }
              i++
            })
            var s=this.dane.length
            if(this.dane.length<9){
              for(var i =0;i<9-s;i++){
                this.dane.push(  {fen:'',name:'',money:'',state:''},)
              }
            }
          }, 3000)

        }
      },
      beforeDestroy() {
        //清除定时器
        clearInterval(this.timer);
      },
      watch: {
        // 监听用户数据并进行绘图
        'parentgasname': {
          deep: true,
          handler(val) {
            if (this.childrengasname.length > 0 && this.parentgasname.length > 0) {
              this.setBar()
              this.$parent.loaddata++
            }
          }
        },
        // 监听用户数据并进行绘图
        'childrengasname': {
          deep: true,
          handler(val) {
            if (this.childrengasname.length > 0 && this.parentgasname.length > 0) {
              this.setBar()
              this.$parent.loaddata++
            }
          }
        },
        //监听浏览器大小变化
        'listenheight': {
          deep: true,
          handler(val) {
            if (this.listenheight !== '' && this.listenheight !== 0) {
              // this.$parent.$parent.changeresize(this.xc)
              this.listenheight = 0
            }
          },
          immediate: true
        },
        'resdata1': {
          deep: true,
          handler(val) {
            var self = this
            this.resdata1.forEach(function (s) {
              let item = {}
              item.name = s.f_gasproperties
              item.value = s.num
              self.parentgasname.push(item)
            })
          },
        },
        'resdata2': {
          deep: true,
          handler(val) {
            var self = this
            this.resdata2.forEach(function (s) {
              let item = {}
              item.name = s.f_price_name
              item.parentname = s.f_gasproperties
              item.value = s.num
              self.childrengasname.push(item)
            })
          },
          immediate: true
        }
      },
      ready() {
        this.resize()
        this.setBar()
        // this.searchdata()
        // this.set()
        // this.linesql('')
        // this.linesql('c.f_price_name,')
      },
    }
</script>

<style scoped>

  .scroll-content {
    position: relative;
    transition: top 0.825s;
  }

</style>
