<template>
    <div>
      <span class="title-1">年累销售气量</span>
      <div class="text-1">

       <table>
         <tr>
           <td>
             <span style="color: #ffff2c;" :class="{'font-res':j0}">{{Stringdata[0].f_pregas}}</span>
             <br/>
             <img :class="{'sell-img0':!j0,'sell-img1':j0}" src="../../../../../static/NewManageHome/01.png"/>
             <br/>
             <p :class="{'sell-font':j0}">{{Stringdata[0].f_gas_type}}</p>
           </td>
           <td>
             <span style="color: #dead25;" :class="{'font-res':j1}">{{Stringdata[1].f_pregas}}</span>
             <br/>
             <img :class="{'sell-img0':!j1,'sell-img1':j1}"  src="../../../../../static/NewManageHome/02.png"/>
             <br/>
             <p :class="{'sell-font':j1}">{{Stringdata[1].f_gas_type}}</p>
           </td>
         </tr>
         <tr>
           <td>
             <span style="color: #66fade;" :class="{'font-res':j2}">{{Stringdata[2].f_pregas}}</span>
             <br/>
             <img :class="{'sell-img0':!j2,'sell-img1':j2}"  src="../../../../../static/NewManageHome/03.png"/>
             <br/>
             <p :class="{'sell-font':j2}">{{Stringdata[2].f_gas_type}}</p>
           </td>
           <td>
             <span style="color: #f29961;" :class="{'font-res':j3}">{{Stringdata[3].f_pregas}}</span>
             <br/>
             <img :class="{'sell-img0':!j3,'sell-img1':j3}"  src="../../../../../static/NewManageHome/04.png"/>
             <br/>
             <p :class="{'sell-font':j3}">{{Stringdata[3].f_gas_type}}</p>
           </td>
         </tr>
       </table>
      </div>
      <img class="img-bottom" src="../../../../../static/NewManageHome/2.gif" />
    </div>
</template>

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

    export default {
        name: "TextSellgas",
      data(){
          return{
            j0:false,
            j1:false,
            j2:false,
            j3:false,
            timer:'',
            resdata:[],
            // Stringdata:[],
            Stringdata : [
               {f_pregas :22 ,f_gas_type :'民用'},
               {f_pregas :33 ,f_gas_type :'非民用'},
               {f_pregas :44 ,f_gas_type :'气站'},
               {f_pregas :55 ,f_gas_type :'加气站'}
            ],
              flag:true
      }
      },
      methods:{
          timeTask(){
            var t=0
            var self=this
            this.timer=setInterval(()=>{
              self['j'+t]=false
              t=(t+1)%4
              self['j'+t]=true
            },3000)
          },
          searchdata() {
              let sqldataone = DataSql.getData(this,'getSortgas',{}, 'resdata')
              co(sqldataone)
          },
          resize() {
              console.log('刷新售气分类')
              this.resdata.splice(0,this.resdata.length)
              this.Stringdata.splice(0,this.Stringdata.length)
              this.searchdata()
          },
      },
      beforeDestroy() {
        //清除定时器
        clearInterval(this.timer);
      },
        watch: {
            // 监听用户数据并进行绘图
            'resdata': {
                deep: true,
                handler(val) {
                    if(this.resdata.length<0){
                        return
                    }
                    this.Stringdata.splice(0,this.Stringdata.length)
                    this.Stringdata=JSON.parse(JSON.stringify(this.resdata))
                    // console.log(this.resdata,'测试')
                    // console.log(this.Stringdata,'测试')
                    this.Stringdata.forEach(function (s) {
                        s.f_pregas=DataSql.dataunit(s.f_pregas,2)
                    })
                    if(this.flag){
                        this.timeTask()
                        // var slef=this
                        // setInterval(function () {
                        //     var datt=JSON.parse(JSON.stringify(slef.resdata))
                        //     datt[0].f_pregas=eval(datt[0].f_pregas+'+1000')
                        //     datt[1].f_pregas=eval(datt[1].f_pregas+'+1000')
                        //     datt[2].f_pregas=eval(datt[2].f_pregas+'+200')
                        //     datt[3].f_pregas=eval(datt[3].f_pregas+'+4000')
                        //     // console.log(slef.resdata,datt,'sadasdasdas')
                        //     slef.resdata.splice(0,slef.resdata.length)
                        //     slef.resdata=datt
                        //     // clearInterval(slef.timer)
                        // },15000)
                    }
                    this.flag=false
                    this.$parent.loadnum++

                }
            },
        },
      ready(){
          console.log(  this.Stringdata[0])

          // this.searchdata()
      }
    }
</script>

<style scoped>

</style>
