<template>
  <div class="flowTable">
    <div class="success_info_body" v-show="showFlag">
      <!-- 参数名称、列数根据实际情况调整 -->
      <div class="table_body">
        <div class="table_th">
          <div class="tr3 th_style">设备名称</div>
          <div class="tr3 th_style">设备编号</div>
          <div class="tr3 th_style">总维修次数</div>
          <div class="tr3 th_style">总维修时间</div>
        </div>
        <div class="table_main_body">
          <div class="table_inner_body" :style="{top: tableTop + 'px'}">
            <div v-for="(item,index) in tableList" :class="index%2==1?'table_tr':'table_tr1'" :key="index">
              <div class="tr3 tr">{{item.name}}</div>
              <div class="tr3 tr">{{item.code}}</div>
              <div class="tr3 tr">{{item.num}}</div>
              <div class="tr3 tr">{{item.time}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import { getCaseList } from '@/api/case'

export default {
  name: 'ReqairTable',
  components: {},
  data() {
    return {
      showFlag: true,
      tableTimer: null,
      tableTop: 0,
      tableList: [],
      tableListSize: 0,
      componentTimer: null,

      // 需要根据情况设置的参数
      title: '排产进度',
      visibleSize: 5, // 容器内可视最大完整行数
      lineHeight: 35, // 每行的实际高度（包含margin-top/bottom,border等）
      componentTimerInterval: 3600000, //  刷新数据的时间间隔
      tableTimerInterval: 50 //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
    }
  },

  // 如果没有父元素传值，将watch内的内容搬至mounted中即可
  props: ["activeFactoryId"],
  watch: {
    activeFactoryId(val, oldVal) {
      clearInterval(this.componentTimer)
      this.fetchData()
      this.componentTimerFun()
    }
  },
  mounted() {
    clearInterval(this.tableTimer)
    this.fetchData()
    this.tableActionFun()
  },
  beforeDestroy() {
    clearInterval(this.componentTimer)
    clearInterval(this.tableTimer)
  },
  methods: {
    fetchData() {
      // getCaseList({}).then(response => {
      //   if (response.code === 200) {
      //     this.tableList = response.data
      //   }
      // })
      this.tableList = [
        {
          id: '',
          code: 'YQ-001',
          name: '一期主楼西门',
          num: '1',
          time: '93'
        }
      ]
      for ( let i = 0; i < 10; i++) {
        this.tableList.push(this.tableList[0])
      }
    },
    tableActionFun() {
      this.tableListSize = this.tableList.length
      if (this.tableListSize > this.visibleSize) {
        this.tableList = this.tableList.concat(this.tableList)
        this.tableTimerFun()
      } else {
        this.fillTableList()
      }
    },
    //  当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
    fillTableList() {
      var addLength = this.visibleSize - this.tableListSize
      for (var i = 0; i < addLength; i++) {
        this.tableList.push({
          planNo: '-',
          type: '-',
          startDate: '-',
          endDate: '-',
          process: '-'
        })
      }
    },
    tableTimerFun() {
      var count = 0
      this.tableTimer = setInterval(() => {
        if (count < (this.tableList.length / 2) * this.lineHeight) {
          this.tableTop -= 1
          count++
        } else {
          count = 0
          this.tableTop = 0
        }
      }, this.tableTimerInterval)
    },
    componentTimerFun() {
      this.componentTimer = setInterval(() => {
        this.fetchData()
      }, this.componentTimerInterval)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.flowTable {
  width: 100%;
  height: 160px;
  padding: 0px 10px;
}
.table_body {
  width: 100%;
  margin-top: 0px;
}
.table_th {
  width: 100%;
  display: flex;
  height: 15px;
  line-height: 15px;
}
.tr {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 5px;
  text-align: center;
  font-size: 13px;
}
.tr1 {
  width: 15%;
}
.tr2 {
  width: 18%;
}
.tr3 {
  width: 25%;
  font-size: 13px;
}

.tr4 {
  flex: 1;
}

.th_style {
  color: #b8dffd;
  font-size: 13px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  text-align: center;
}
.table_main_body {
  width: 100%;
  height: 155px;
  overflow: hidden;
  position: relative;
  margin-top: 5px;
}
.table_inner_body {
  width: 100%;
  position: absolute;
  left: 0;
}
.table_tr {
  display: flex;
  height: 25px;
  line-height: 25px;
  color: #cce9ff;
  font-size: 13px;
  background: rgba(3, 145, 167, 0.1);
  border: 1px solid rgb(71, 160, 199);
  margin-top: 2px;
  cursor: pointer;
  :hover{
    background: rgba(255, 153, 51, 0.6);
  }
}
.table_tr1 {
  display: flex;
  height: 25px;
  line-height: 25px;
  color: #cce9ff;
  font-size: 13px;
  background: rgb(64, 87, 120);
  border: 1px solid rgb(71, 160, 199);
  margin-top: 2px;
  cursor: pointer;
  :hover{
    background: rgba(255, 153, 51, 0.6);
  }
}
</style>