<template>
  <div class="flowTable">
    <div class="success_info_body" v-show="showFlag">
      <!-- 参数名称、列数根据实际情况调整 -->
      <div class="table_body">
        <div class="table_th">
          <div class="tr1 th_style">访客姓名</div>
          <div class="tr2 th_style">进入时间</div>
          <div class="tr1 th_style">访问区域</div>
          <div class="tr2 th_style">离开时间</div>
          <div class="tr4 th_style">累计访问次数</div>
          <div class="tr4 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="table_tr" :class="checkCell(item,index)" :key="index">
              <div class="tr1 tr">{{item.visitorName}}</div>
              <div class="tr2 tr">{{item.inTime}}</div>
              <div class="tr1 tr">{{item.visitPosition}}</div>
              <div class="tr2 tr">{{item.outTime}}</div>
              <div class="tr4 tr">{{item.frequency}}</div>
              <div class="tr4 tr">
                <img :src="item.picUri ? `${item.picUri}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.picUri ? `${item.picUri}`: defaultPhoto">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-image class="bottom-big-pic-visitor" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
  </div>
</template>
<script>

import { getCaseListPage } from '@/api/case'
import { repostSocket } from '@/api/common'
import {getVisitListPage} from '@/api/visitor'
import {getDayTime} from '@/utils/dateutils'

export default {
  name: 'VisitorTable',
  components: {},
  data() {
    return {
      picurl: '',
      defaultPhoto: require('@/assets/global_images/photo_error.png'),
      errorImg: require('@/assets/global_images/photo_error.png'),
      showFlag: true,
      tableTimer: null,
      tableTop: 0,
      isbig: false,
      tableList: [],
      tableListSize: 0,
      componentTimer: null,
      visibleSize: 8, // 容器内可视最大完整行数
      lineHeight: 45, // 每行的实际高度（包含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()
  },
  beforeDestroy() {
    clearInterval(this.componentTimer)
    clearInterval(this.tableTimer)
  },
  methods: {
    checkCell(val, index) {
      if (index % 2 === 1) {
        return 'table_tr1'
      }
      return ''
    },
    fetchData() {
      this.picurl = ''
      this.isbig = false
      const today = getDayTime(new Date().getTime()).Format('yyyy-MM-dd')
      const tomorrow = getDayTime(new Date().getTime() + 24 * 1 * 60 * 60 * 1000).Format('yyyy-MM-dd')
      getVisitListPage({
        keywords: '',
        visitReason: '',
        position: '',
        startTime: today,
        endTime: tomorrow,
        offset: 1,
        limit: 200
      }).then(response => {
        if (response.code === 200) {
          this.tableList = response.data.rows
          this.tableActionFun()
        }
      })
    },
    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)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.flowTable {
  width: 100%;
  height: 150px;
  padding: 0px 10px;
}
.table_body {
  width: 100%;
  margin-top: 0px;
}
.table_th {
  width: 100%;
  display: flex;
  height: 15px;
  line-height: 15px;
}
.tr {
  text-overflow: ellipsis;
  box-sizing: border-box;
  padding: 0 5px;
  text-align: center;
  font-size: 13px;
  word-wrap: break-word; /* 允许在单词内换行 */
  overflow-wrap: break-word; /* 同上，现代浏览器推荐使用 */
  white-space: normal; /* 允许自动换行 */
  line-height: 15px;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，如需要 */
}
.tr1 {
  width: 13%;
}
.tr2 {
  width: 18%;
}
.tr3 {
  width: 15%;
  font-size: 13px;
}

.tr4 {
  flex: 1;
}
.tr5 {
  width: 100px;
}

.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: calc(40vh - 140px);
  overflow: hidden;
  position: relative;
  margin-top: 5px;
}
.table_inner_body {
  width: 100%;
  position: absolute;
  left: 0;
  color: #cce9ff;
}

.table_tr {
  display: flex;
  font-size: 13px;
  border: 1px solid rgb(71, 160, 199);
  margin-top: 2px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  :hover{
    background: rgba(255, 153, 51, 0.6);
  }
}
.table_tr0 {
  background: rgba(3, 145, 167, 0.1);
}
.table_tr1 {
  background: rgb(64, 87, 120);
}
.bottom-big-pic-visitor{
  position: fixed;
  bottom: 10px;
  right: 110px;
  height: 220px;
  z-index: 999999999;
}
</style>