<template>
  <div class="personTable">
    <div class="success_info_body" v-show="showFlag">
      <!-- 参数名称、列数根据实际情况调整 -->
      <div class="table_body">
        <div class="table_th">
          <div class="tr4 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="index%2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
              <div class="tr4 tr">{{item.staffName}}</div>
              <div class="tr4 tr">{{item.staffGenderName}}</div>
              <div class="tr4 tr">
                <img :src="item.picture ? `${item.picture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import { getStaffListPage, hikPic } from '@/api/person'
import { repostSocket } from '@/api/common';
import { getDate } from '@/utils/calendarUtil'

export default {
  name: 'PersonTable',
  components: {},
  data() {
    return {
      defaultPhoto: require('@/assets/global_images/photo_error.png'),
      errorImg: require('@/assets/global_images/photo_error.png'),
      showFlag: true,
      tableTimer: null,
      tableTop: 0,
      wallList: '',
      tableList: [],
      tableListSize: 0,
      componentTimer: null,
      visibleSize: 5, // 容器内可视最大完整行数
      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: {
    JumpDevice(item) {
      const params = {
        facePicUrl: item.picture, // 图片url
        startTime: getDate(-31, 'SECOND'), // 开始时间
        endTime: getDate(0, 'SECOND'), // 结束时间
        minSimilarity: '50' // 相似度
      }
      hikPic(params).then(response => {
        if (response.code === 200) {
          this.wallList = JSON.stringify(response.data)
          if (response.data.length === 0) {
            this.$message.warning('该人员近一个月无记录!')
            return
          } else {
            this.onwall(item)
          }
        }
      })
    },
    // 轨迹上墙
    onwall(item) {
      const params = {
        type: 'onwall-' + item.staffName,
        message: this.wallList
      }
      repostSocket(params).then(response => {
        if (response.code === 200) {
        }
      })
    },
    fetchData() {
      const params = {
        staffType: '2',
        offset: 1,
        limit: 50,
        keywords: '',
        cardNum: '',
        phone: ''
      }
      getStaffListPage(params).then(response => {
        if (response.code === 200) {
          this.tableList = response.data.rows
          this.tableActionFun()
        }
      })
      // this.tableList = [
      //   {
      //     id: '',
      //     drawNo: 'YQ-001',
      //     levelName: '一般',
      //     description: '保安脱岗',
      //     status: '0',
      //     statusName: '未解决',
      //     typeName: '临时事件',
      //     devName: '视频监控摄像机5',
      //     positionName: '一期主楼',
      //     areaName: '3F',
      //     isKeyAreaName: '否',
      //     detailLocation: '详细位置',
      //     happenTime: '2022-05-06 21:55:00'
      //   }
      // ]
    },
    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>
.personTable {
  width: 100%;
  height: 100%;
  padding: 0px 10px;
}
.table_body {
  width: 100%;
  height: 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: 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: 200px;
  overflow: hidden;
  position: relative;
  margin-top: 5px;
}
.table_inner_body {
  width: 100%;
  position: absolute;
  left: 0;
}
.table_tr {
  display: flex;
  height: 40px;
  line-height: 40px;
  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: 44px;
  line-height: 44px;
  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>