<template>
  <div class="app-container">
    <!-- 返回 -->
    <el-page-header content="详情" @back="goBack" />
    <!-- 搜索 -->
    <el-date-picker
      v-model="data.startTime"
      type="datetime"
      placeholder="选择通行开始时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      class="margin-left"
    />
    <el-date-picker
      v-model="data.endTime"
      type="datetime"
      placeholder="选择通行结束时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      class="margin-left"
    />
    <el-button
      type="primary"
      icon="el-icon-search"
      class="margin-left"
      @click="fetchData"
    >搜索</el-button>

    <!--主表格-->
    <el-table
      ref="table_form"
      v-loading="listLoading"
      class="table"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" align="center" width="80px">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="现场照片" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            fit="cover"
            :src="scope.row.photo"
            :preview-src-list="[scope.row.photo]"
          />
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.name | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="证件号" align="center">
        <template slot-scope="scope">
          {{ scope.row.cardid | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="设备编号" align="center">
        <template slot-scope="scope">
          {{ scope.row.deviceSn | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="进出时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.faceTime | matchNull }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="进出次数（10天内）" align="center">
        <template slot-scope="scope">
          {{ scope.row.name | matchNull }}
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
import { getFaceLogList } from '@/api/exception_model'
export default {
  name: '',
  components: {},
  filters: {
    matchNull(str) {
      if (!str) {
        return '暂无数据'
      } else {
        return str
      }
    }
  },
  props: {
    userCattleId: {
      type: Number
    }
  },
  data() {
    return {
      // 分页参数
      data: {
        startTime: null,
        endTime: null,
        userCattleId: this.userCattleId
      },
      list: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.fetchData()
  },
  mounted() {},
  methods: {
    // 返回
    goBack() {
      this.$emit('showDetails', false)
    },
    // 获取列表数据
    fetchData() {
      this.listLoading = true
      getFaceLogList(this.data).then((res) => {
        this.list = res.data
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.el-page-header {
  color: #409eff;
  margin-bottom: 20px;
}
.table {
  margin-top: 15px;
}
.margin-left {
  margin: 10px 0 0 10px;
}
.input {
  width: 200px;
}
</style>
