<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" :key="index">
              <div class="tr1 tr" :style="{color: item.levelName ==='重大' ? 'red' : item.levelName ==='较大' ? 'orange' : '#b8dffd'}">{{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'

export default {
  name: 'InoutTable',
  components: {},
  data() {
    return {
      picurl: '',
      defaultPhoto: require('@/assets/global_images/photo_offline.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等）
    }
  },

  // 如果没有父元素传值，将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: {
    fetchData() {
      this.picurl = ''
      this.isbig = false
      getCaseListPage({
        offset: 1,
        limit: 5
      }).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: '-'
      })
    }
  }
}
</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>