<template>
  <div style="width: 100%;height: 100%;">
    <el-tabs v-model="activeName" @tab-click="changeBuilding" style="margin: 0 20px">
      <el-tab-pane label="全 部 " name="全部"/>
      <el-tab-pane label="一期主楼" name="一期主楼"/>
      <el-tab-pane label="录制楼" name="录制楼"/>
      <el-tab-pane label="二期主楼" name="二期主楼"/>
    </el-tabs>
<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('一期主楼')" style="margin-left: 3px">一期主楼</el-button>-->
<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('录制楼')">录制楼</el-button>-->
<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('二期主楼')">二期主楼</el-button>-->
<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('')">全 部</el-button>-->
    <div class="success_info_body" style="margin: 0 10px;flex: 1">
      <div class="table_body">
        <div class="table_th">
          <div class="tr1 th_style">员工姓名</div>
          <div class="tr3 th_style">卡号</div>
          <div class="tr2 th_style">门禁区域</div>
          <div class="tr1 th_style">进/出</div>
          <div class="tr1 th_style">通过方式</div>
          <div class="tr2 th_style" style="width: 20%">通过时间</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">{{item.staffName}}</div>
              <div class="tr3 tr">{{item.cardNum}}</div>
              <div class="tr2 tr">{{item.doorArea}}</div>
              <div class="tr1 tr">{{item.inoutTypeName}}</div>
              <div class="tr1 tr">{{item.passWayName}}</div>
              <div class="tr2 tr" style="width: 20%">{{item.passTime}}</div>
              <div class="tr5 tr">
                <img :src="item.picture ? `${item.picture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.picture ? `${item.picture}`: defaultPhoto">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-pagination layout="prev, pager, next" :total="tableListSize" style="width: 100%;text-align: center" @current-change="handleCurrentChange"/>
  </div>
</template>

<script>
import { getInoutListPage } from '@/api/person'
export default {
  name: 'InoutList',
  data() {
    return {
      defaultPhoto: require('@/assets/global_images/photo.png'),
      errorImg: require('@/assets/global_images/photo_error.png'),
      tableTimer: null,
      tableTop: 0,
      tableList: [],
      tableListSize: 0,
      componentTimer: null,
      visibleSize: 7, // 容器内可视最大完整行数
      lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
      componentTimerInterval: 3600000, //  刷新数据的时间间隔
      tableTimerInterval: 50, //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
      activeName: '全部',
      listQuery: {
        staffKeywords: '',
        doorKeywords: '',
        inoutType: '',
        passWay: '',
        startTime: '',
        endTime: '',
        offset: 1,
        limit: 7
      }, // 筛选条件
      columns: [
        {
          text: '员工姓名',
          value: 'staffName',
          align: 'center'
        },
        {
          text: '卡号',
          value: 'cardNum',
          align: 'center'
        },
        {
          text: '门禁区域',
          value: 'doorArea',
          align: 'center'
        },
        {
          text: '进/出',
          value: 'inoutTypeName',
          width: 80,
          align: 'center'
        },
        {
          text: '通过方式',
          value: 'passWayName',
          width: 80,
          align: 'center'
        },
        {
          text: '通过时间',
          value: 'passTime',
          align: 'center'
        }
      ], // 显示列
      dialogFormVisible: false, // 是否显示编辑框
      timeRange: [], // 时间范围
      multipleSelection: [], // 多选选中项
      list: [], // 列表数据
      colorRow: {
        isColor: false,
        isPop: true
      },
      inoutTypeList: [],
      passWayList: [],
      total: 0, // 数据总数
      listLoading: true // 列表加载动画
    }
  },
  created() {
    const today = new Date()
    const day = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
    this.listQuery.startTime = day + ' 00:00:00'
    this.listQuery.endTime = day + ' 23:59:59'
    this.fetchData()
  },
  methods: {
    changeBuilding() {
      this.listQuery.doorKeywords = this.activeName
      if (this.listQuery.doorKeywords === '全部') {
        this.listQuery.doorKeywords = ''
      }
      this.fetchData(false)
    },
    fetchData(isNowPage = true) {
      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
        this.listQuery.offset = 1
      }
      getInoutListPage(this.listQuery).then(response => {
        if (response.code === 200) {
          this.tableList = response.data.rows
          this.tableListSize = parseInt(response.data.total)
        }
      })
    },
    handleCurrentChange(val) {
      this.listQuery.offset = val
      this.fetchData()
    },
    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
    changePage(val) {
      if (val && val.size) {
        this.listQuery.limit = val.size
      }
      if (val && val.page) {
        this.listQuery.offset = val.page
      }
      this.fetchData()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep(.el-tabs__item){
  color: #b8dffd !important;
}
.casebar-btn {
  height: 30px;
  padding-top: 8px;
  margin-top: 5px;
}
.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: 300px;
  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);
}

::v-deep .el-pagination {
  .el-pagination__total {
    color: white !important;
  }
  .el-pagination__jump {
    color: white !important;
  }
  // 两个输入框
  .el-input__inner {
    background-color: #092546;
    border: 1px solid rgba(192, 192, 192, 0.479);
    color: white !important;
  }
  // 左右按键和里面的图标
  button {
    background-color: #092546;
    .el-icon::before {
      color: white;
    }
  }
  // 分页数字
  ul {
    color: white;
    .el-icon::before {
      color: white !important;
    }
  }
  // 分页数字的背景色
  ul > li {
    background-color: #092546;
  }
}
::v-deep .el-loading-mask {
  background-color: rgba(0, 0, 0, 0.479);
}

</style>