<template>
    <div class="table-view" id="tableView" ref="tableView" :style="{fontSize:`${fontSize}px`}">
      <div class="thead" :style="{height: `${headHeight}px`}">
        <div v-for="(value,key,index) in thead" :key="index" :style="{height: `${headHeight-10}px`,lineHeight:`${headHeight-10}px`,flex:flexs[index]}">{{value}}</div>
      </div>
      <div class="tbodymain" :style="{height: `${bodyHeight}px`}" @mouseenter="bodyMouseEnter" @mouseleave="bodyMouseLeave">
        <div class="tbody b1" ref="tbody1" :style="{height: `${bodyHeight}px`}">
          <div v-for="item in tableDatas1" :key="item.id" class="row" :style="{height: `${cellHeight}px`}">
            <div v-for="(value,key,index) in item" :key="index" :style="{flex:flexs[index]}">
              <!-- <marquee v-if="key=='positon' && value.length>fontScroll" behavior="scroll" scrolldelay="200" @mouseenter="marqueeStop($event)" @mouseleave="marqueeStart($event)">{{value}}</marquee> -->
              <span :class=[timeHandle(key),colorHandle(key,value),scrollHandle(key,value)] :style="{height: `${cellHeight-10}px`,lineHeight:`${cellHeight-10}px`}">{{value}}</span></div>
          </div>
        </div>
        <div class="tbody b2" ref="tbody2" :style="{height: `${bodyHeight}px`}">
          <div v-for="item in tableDatas2" :key="item.id" class="row" :style="{height: `${cellHeight}px`}">
            <div v-for="(value,key,index) in item" :key="index" :style="{flex:flexs[index]}">
              <!-- <marquee v-if="key=='positon' && value.length>fontScroll" behavior="scroll" scrolldelay="200" @mouseenter="marqueeStop($event)" @mouseleave="marqueeStart($event)">{{value}}</marquee> -->
              <span :class=[timeHandle(key),colorHandle(key,value),scrollHandle(key,value)] :style="{height: `${cellHeight-10}px`,lineHeight:`${cellHeight-10}px`}">{{value}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

</template>
<script>
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'baisicTable',
    props: {
      datas:{
        type:Array,
        required: true
      },
      thead:{
        type:Array,
        required: true
      },
      flexs:{
        type:Array,
        default:[1,1,3,2.3]
      },
      fontScroll:{
        type:Number,
        default:14
      },
      headHeight:{
        type:Number,
        default:37
      },
      rowNum:{
        type:Number,
        default:7
      },
      colNum:{
        type:Number,
        default:4
      },
      speed:{
        type:Number,
        default:2
      },
      fontSize:{
        type:Number,
        default:10
      }

    },
    data() {
      return {
        timeOut:null,
        srolltime:null,
        tableDatas1:[],
        tableDatas2:[],
        pageIndex:0,
        isColScroll:true,
        total:0,
        curPage:0,

        cellHeight:26,

        tableDatas:[],

        bodyHeight:182
      }
    },
    watch:{
      datas:{
        handler(newval){
          this.tableDatas = newval;
          this.changDatas();
        },
        deep:true
      }
    },
    created() {
      this.tableDatas = this.datas;
      let len = this.tableDatas.length;
      let row = this.rowNum;
      let doubleRow = parseInt(row*2);
      if(len>=doubleRow){
        this.tableDatas1 = this.tableDatas.slice(0,row);
        this.tableDatas2 = this.tableDatas.slice(row,doubleRow);
      }else if(len>row && len<doubleRow){
        this.tableDatas1 = this.tableDatas.slice(0,row);
        this.tableDatas2 = this.tableDatas.slice(row,len);
        let addData = this.tableDatas.slice(0,row-this.tableDatas2.length);
        this.tableDatas2 = this.tableDatas2.concat(addData);
      }else if(len <= row){
        this.tableDatas1 = this.tableDatas;
      }


    },
    mounted() {
      this.getBodyMainHeight();
      let row = this.rowNum;
      let doubleRow = parseInt(row*2);
      if(this.tableDatas.length>row){
        this.timeIntervalHandle();
      }else{
        this.tableDatas1 = this.tableDatas;
      }
      if(this.tableDatas.length>doubleRow){
        this.changDatas();
      }
    },
    methods: {
      getBodyMainHeight(){
        // debugger;
        let tableDom = document.getElementById("tableView");
        // console.log(tableDom.clientHeight);
        this.bodyHeight = parseInt(tableDom.clientHeight-this.headHeight);
        // console.log(this.bodyHeight);

        this.cellHeight = (this.bodyHeight/this.rowNum).toFixed(6);

        console.log(this.cellHeight);
      },
      changDatas(){
        let len = this.tableDatas.length;
        let row = this.rowNum;
        this.page = Math.ceil(len/row);
        let endNum = len%row;
        if(endNum>0){
          let addNum = row-endNum;
          let addArr = this.tableDatas.slice(0,addNum);
          this.tableDatas = this.tableDatas.concat(addArr);
        }
        this.curPage = 1;
      },
      bodyMouseEnter(){
        this.isColScroll = false;
      },
      bodyMouseLeave(){
        this.isColScroll = true;
        this.srollHandle();
      },
      marqueeStart(e){
        e.currentTarget.start();
      },
      marqueeStop(e){
        e.currentTarget.stop();
      },
      timeIntervalHandle(){
        this.$refs.tbody1.style.top = `${0}px`;
        this.$refs.tbody2.style.top = `${this.bodyHeight}px`;
        setTimeout(this.srollHandle,3000);
      },
      srollHandle(){
        if(!this.isColScroll) return;
        let scrollSpeed = 0;
        let _this = this;
        clearInterval(this.srolltime);
        clearTimeout(this.timeOut);
        this.srolltime = setInterval(function(){
          scrollSpeed += _this.speed;
          if(scrollSpeed>_this.cellHeight){
            // 当前数据滚动完剩余的
            let v = (_this.cellHeight - (scrollSpeed-_this.speed)).toFixed(6);
            // console.log("剩余V：=====" + v);
            // console.log(parseFloat(_this.$refs.tbody1.style.top));
            _this.$refs.tbody1.style.top = (parseFloat(_this.$refs.tbody1.style.top) - v).toFixed(6)+"px";
            _this.$refs.tbody2.style.top = (parseFloat(_this.$refs.tbody2.style.top) - v).toFixed(6)+"px";
          //  console.log(parseFloat(_this.$refs.tbody1.style.top));
          }else{
            _this.$refs.tbody1.style.top = (parseFloat(_this.$refs.tbody1.style.top) - _this.speed).toFixed(6)+"px";
            _this.$refs.tbody2.style.top = (parseFloat(_this.$refs.tbody2.style.top) - _this.speed).toFixed(6)+"px";
            // console.log("执行");
          }
          if(parseFloat(_this.$refs.tbody1.style.top)<=-_this.bodyHeight){
            // debugger;
            _this.$refs.tbody1.style.top = _this.bodyHeight+'px';
            if(_this.page > 2){
              _this.updateData(1);
            }
          }else if(parseFloat(_this.$refs.tbody2.style.top)<=-_this.bodyHeight){
            // debugger;
            _this.$refs.tbody2.style.top = _this.bodyHeight+'px';
            if(_this.page > 2){
              _this.updateData(2);
            }
          }
          if(scrollSpeed>=_this.cellHeight){
           clearInterval(_this.srolltime);

           _this.timeOut = setTimeout(_this.srollHandle,1500);
          }
        },24);
      },
      updateData(id){
        let row = this.rowNum;
        this.curPage++;
        if(this.curPage>=this.page){
          this.curPage = 0;
        }
        let start = parseInt(this.curPage*row);
        let end = start+row;
        let getData = this.tableDatas.slice(start,end);
        if(id==1){
          this.tableDatas1 = getData;
        }else{
          this.tableDatas2 = getData;
        }
      },
      timeHandle(key){
        if(key=="time"){
          return 'time';
        }else{
          return '';
        }
      },
      scrollHandle(index,key,value){
        if(key=='positon' && value.length>this.fontScroll){
          return 'animate';
        }

      },
      colorHandle(key,value){
        if(key=="color"){
          if(value.indexOf('蓝') != -1){
            return 'blue';
          }else if(value.indexOf('黄') != -1){
            return 'yellow';
          }else if(value.indexOf('绿') != -1){
            return 'green';
          }
        }
      }
    }

  })
</script>
<style lang="less" scoped>
  .table-view{
    width: 100%;
    height: 100%;
    border: 1px solid #0E748A;
    color: #FFFFFF;
    background-color: #04465B;
    // font-size: 10px;
    .thead{
      display: flex;
      background-color: #005062;
      border-bottom: 1px solid #0E748A;
      div{
        flex: 1;
        text-align: left;
        flex-wrap:nowrap;
        opacity: 0.85;
        margin: 5px 10px;
        word-break:keep-all;
        white-space:nowrap;
        overflow:hidden;
      }
      .flex0{
        flex:1;
      }
      .flex1{
        flex:1;
      }
      .flex2{
        flex:3;
      }
      .flex3{
        flex:2.3;
      }
    }
    .tbodymain{
      position: relative;
      height: 183px;

      overflow: hidden;
      .tbody{
        position: absolute;
        width: 100%;
        top:0px;
        border-top: none;
        height: 182px;

        .row:nth-child(odd){
          background-color: rgba(0,31,49,0.4);
        }
        .row:nth-child(even){
          background-color: rgba(0,70,105,0.4);
        }
        .row{
          height: 26px;
          display: flex;
          text-align: left;
          flex-wrap:nowrap;
          div{
            flex: 1;//平均份
            margin: 5px 12px;
            text-align: left;
            flex-wrap:nowrap;
            word-break:keep-all;
            white-space:nowrap;
            overflow:hidden;
            span{
              opacity: 0.65;
              // height: 37px;
              // line-height: 37px;
              //   display: flex;
              // // justify-content: center; //水平
              // align-items: center; //
            }
            marquee{
              opacity: 0.65;
            }
            .blue{
              background-color:rgba(87, 208, 235, 0.2);
              color: #57D0EB;
              padding: 0px 5px;
              border:1px solid rgba(87, 208, 235, 0.4);
              border-radius: 1px;
              opacity: 1;
              // font-size: 8px;
              // line-height: 16px;
            }
            .yellow{
              background-color:rgba(235, 211, 87, 0.2);
              color: #EBD357;
              padding: 0px 5px;
              border:1px solid rgba(235, 211, 87, 0.4);
              border-radius: 1px;
              opacity: 1;
              // font-size: 8px;
              // line-height: 16px;
            }
            .green{
              background-color:rgba(87, 235, 155, 0.2);
              color: #57EB9B;
              padding: 0px 5px;
              border:1px solid rgba(87, 235, 155, 0.4);
              border-radius: 1px;
              opacity: 1;
              // font-size: 8px;
              // line-height: 16px;
            }
            .time{
              background-color: #012539;
              border-radius: 2px;
              padding: 5px 10px;
              overflow:hidden;
              opacity: 0.7;
              // font-size: 8px;
              // line-height: 16px;
            }
            .animate {
              display: inline-block;
              animation: 13s wordsLoop linear infinite normal;
            }
            @keyframes wordsLoop {
              0% {
                  transform: translateX(100%);
                  -webkit-transform: translateX(100%);
              }
              100% {
                  transform: translateX(-100%);
                  -webkit-transform: translateX(-100%);
              }
            }
            @-webkit-keyframes wordsLoop {
              0% {
                  transform: translateX(0px);
                  -webkit-transform: translateX(0px);
              }
              100% {
                  transform: translateX(-100%);
                  -webkit-transform: translateX(-100%);
              }
            }
          }
          .flex0{
            flex:1;
          }
          .flex1{
            flex:1;
          }
          .flex2{
            flex:3;
          }
          .flex3{
            flex:2.3;
          }
        }

        box-shadow: 0 0 2px #00667C inset,0 0 0px rgb(0,153,184);
      }
      .b2{
        .row:nth-child(odd){
          background-color: rgba(0,70,105,0.4);
        }
        .row:nth-child(even){
          background-color: rgba(0,31,49,0.4);
        }
      }
      // .b1{
      //   top:0px;
      // }
      // .b2{
      //   top: -40px;
      // }
    }


  }
</style>