<template>
     <div class="warp" :id="warpId" style="height: calc(100% - 0.9rem);">
        <ul class="item warpItem">
        <li v-for="(item, index) in showData" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
            <div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
            <div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{item.seq}}</div> 
            </div>
            <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
        </li>
        </ul>
    </div>
</template>
<script>
export default {
    props:{
        rcitem:{},
        warpId:'',
        pageSize:0,
        switchSpeed:0,
    },
    data() {
        return {
            nowPgae:0,
            showData:[],
            allData:[],
            timer:null,
        }
    },
    mounted(){
        console.log('mounted')
        this.rcitem.data.forEach((item,index) => {
            item.seq = index+1;
        })
        for(let i=0;i<this.rcitem.data.length;i += this.pageSize){
            this.allData.push(this.rcitem.data.slice(i,i+this.pageSize));
        }
        // this.allData = this.rcitem.data;
        // let warpbox = window.document.querySelector('#'+this.warpId);
        // let warpItem = window.document.querySelector('#'+this.warpId+' .warpItem');
        // let warpboxHeight = warpbox.clientHeight;
        // let warpItemHeight = warpItem.clientHeight;
        let warpPageNumber = this.allData.length;
        let that = this;
        that.showData = that.allData[0];
        if(warpPageNumber>1){
        this.timer = setInterval(()=>{
            // that.pageNext(warpItem,warpPageNumber,warpboxHeight);
            that.pageNext(warpPageNumber)
        },this.switchSpeed*1000)
        }
       
    },
    methods:{
        pageNext(allPage){
            if(this.nowPgae<(allPage-1)){
                // Node.style.transform = `translateY(${-height*this.nowPgae}px)`;
                this.nowPgae++;
                this.showData = this.allData[this.nowPgae];
               
            }else{
                this.nowPgae = 0;
                this.showData = this.allData[this.nowPgae];
                // Node.style.transform = `translateY(${-height*this.nowPgae}px)`;
            }
        }
    },
    beforeDestroy(){
        console.log('beforeUnmount')
        clearInterval(this.timer)
    }
}
</script>
<style lang="less">
     .warp {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      li,a {
        display: block;
        // height: 0.5rem;
        line-height: 0.5rem;
        display: flex;
        justify-content: space-between;
        font-size: 0.2rem;
      }
      .rowStyle1{
        background-color: rgba(10, 29, 50, 0.8);
      }
      .rowStyle2{
        background-color: rgba(0, 44, 81, 0.8);
      }
    }
  }
</style>