<template>
  <div class="app-container">
    <!--搜索区-->
    <el-input v-model="page.data.username" placeholder="请输入姓名" class="margin-left input"></el-input>
    <el-input v-model="page.data.phone" placeholder="请输入手机号" class="margin-left input"></el-input>
    <el-select filterable clearable v-model="page.data.deviceSn" placeholder="请选择设备编号" class="margin-left input">
      <el-option
        v-for="item in machine_list"
        :key="item.sn"
        :label="item.sn"
        :value="item.sn">
      </el-option>
    </el-select>
    <el-button type="primary" icon="el-icon-search" class="margin-left" @click="fetchData" >搜索</el-button>
    <!--主表格-->
    <el-table
      class="table"
      ref="table_form"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" align="center" width="80px">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.username | matchNull}}
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.phone | matchNull}}</span>
        </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.deviceName | matchNull}}
        </template>
      </el-table-column>
      <el-table-column label="下发类型" align="center">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.type === 1">黑名单</el-tag>
          <el-tag type="success" v-else-if="scope.row.type === 2">员工</el-tag>
          <el-tag type="" v-else-if="scope.row.type === 3">访客</el-tag>
          <el-tag v-else>未知类型</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="下发状态" align="center">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.status === 1">下发中</el-tag>
          <el-tag type="success" v-else-if="scope.row.status === 2">成功</el-tag>
          <el-tag type="warning" v-else-if="scope.row.status === 3">失败</el-tag>
          <el-tag v-else>其它</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="下发时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column label="有效期开始时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.startTime }}
        </template>
      </el-table-column>
      <el-table-column label="有效期结束时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.endTime }}
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <pagination :total="total" :page.sync="page.pageNum" :limit.sync="page.pageSize" @pagination="fetchData" />

  </div>
</template>

<script>
  import {doGetFacePass, getFaceDeviceList} from '@/api/old_api_pengwenbing'
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination

  export default {
    components: { Pagination },
    filters: {
      matchNull(str) {
        if (!str) {
          return '未连接'
        } else {
          return str
        }
      },
    },
    data() {
      return {
        // 主表格&主表格加载状态
        list: null,
        listLoading: true,
        // 分页参数
        page: {
          data: {
            username: null,
            phone: null,
            deviceSn: null,
          },
          pageNum: 1,
          pageSize: 10
        },
        total: 0,
        // 设备列表_搜索
        machine_list: [],
      }
    },
    created() {
      this.fetchData();
      this.getFaceDeviceList();
    },
    methods: {
      // 获取列表数据
      fetchData() {
        this.listLoading = true
        doGetFacePass(this.page).then(res => {
          this.list = res.data.list
          this.total = res.data.total
          this.listLoading = false
        })
      },
      // 获取设备列表-搜索
      getFaceDeviceList() {
        getFaceDeviceList().then(res => {
          this.machine_list = res.data
        })
      },
      // 返回列表序号
      indexMethod(index) {
        return (this.page.pageNum-1)*this.page.pageSize+index+1
      },
    }
  }
</script>
<style scoped>
  .table{
    margin-top: 15px;
  }
  .flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .margin-left {
    margin: 10px 0 0 10px;
  }
  .input {
    width: 200px;
  }
</style>
