<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="tr5 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" @click="JumpDevice(item)">
              <div class="tr1 tr">{{item.levelName}}</div>
              <div class="tr2 tr">{{item.description}}</div>
              <div class="tr1 tr">{{item.statusName}}</div>
              <div class="tr2 tr">{{item.typeName}}</div>
              <div class="tr4 tr">{{item.happenTime}}</div>
              <div class="tr5 tr">
                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
  </div>
</template>
<script>

import { getCaseListPage } from '@/api/case'
import { repostSocket } from '@/api/common'

export default {
  name: 'CaseTable',
  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: 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: {
    checkCell(val, index) {
      if (val.statusName === '未解决' || val.statusName === '解决中') {
        switch (val.levelName) {
          case '重大':
            return 'hard-state'
          case '较大':
            return 'medium-state'
          default:
            return 'low-state'
        }
      } else if (index % 2 === 1) {
        return 'table_tr1'
      }
      return ''
    },
    JumpDevice(item) {
      const params = {
        type: 'force',
        message: item.drawNo
      }
      repostSocket(params).then(response => {
        if (response.code === 200) {
        }
      })
    },
    fetchData() {
      this.picurl = ''
      this.isbig = false
      getCaseListPage({
        offset: 1,
        limit: 15
      }).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>
.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 {
  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: 155px;
  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);
  }
}
.hard-state{
  background:red;
}
.medium-state{
  background: #ea9700;
}
.low-state{
  background: #646464;
}
.table_tr0 {
  background: rgba(3, 145, 167, 0.1);
}
.table_tr1 {
  background: rgb(64, 87, 120);
}
.bottom-big-pic{
  position: fixed;
  bottom: 10px;
  left: calc( 50% - 380px);
  height: 220px;
  z-index: 999999999;
}
</style>