<template>
  <div>
    <!-- 条件搜索区域 -->
    <div class="form-head">
      <span>设备：</span>
      <span class="input-select">
        <el-select
          v-model="listQuery.deviceName"
          size="mini"
          clearable
          @clear="handleChangeFilter"
          placeholder="请选择设备名称"
        >
          <el-option
            v-for="item in groupList"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </span>

      <span>卡号：</span>
      <span class="input">
        <el-input
          v-model="listQuery.cardNumber"
          size="mini"
          placeholder="请输入卡号"
          clearable
          @clear="handleChangeFilter"
          @keyup.enter.native="handleFilter"
        >
        </el-input>
      </span>

      <span>姓名：</span>
      <span class="input">
        <el-input
          v-model="listQuery.userName"
          size="mini"
          placeholder="请输入姓名"
          clearable
          @clear="handleChangeFilter"
          @keyup.enter.native="handleFilter"
        >
        </el-input>
      </span>

      <span>通行时间：</span>
      <el-date-picker
        v-model="listQuery.time"
        size="mini"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="timestamp"
        @change="handleChangeFilter($event)"
      >
      </el-date-picker>

      <el-button type="primary" size="mini" class="button" @click="handleFilter"
        >查询</el-button
      >
      <el-button
        type="primary"
        size="mini"
        class="button"
        @click="refreshGetList"
        >刷新</el-button
      >
    </div>

    <!-- 表格区域 -->
    <div class="form">
      <el-table :data="list">
        <el-table-column label="序号" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column label="卡号" width="250px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.cardNumber }}</span>
          </template>
        </el-table-column>

        <el-table-column label="姓名" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.userName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="身份类型" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.identityName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="设备名称" width="250px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.deviceName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="分组名称" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.groupName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="信息" align="center" width="300px">
          <template slot-scope="{ row }">
            <span>{{ row.message }}</span>
          </template>
        </el-table-column>

        <el-table-column label="通行时间" width="200px" align="center">
          <template slot-scope="{ row }">
            <span>{{ timestampToTime(row.time) }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 底部分页区开始 -->
      <div class="block">
        <template>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            @pagination="getList"
          />
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import { fetchList, searchList, fetchGroupList } from "@/api/accessrecords";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      list: [],
      groupList: [],
      total: 0, //数据的总数//
      listQuery: {
        page: 1,
        limit: 8,
        cardNumber: "",
        deviceName: "",
        groupName: "",
        identityName: "",
        message: "",
        time: "",
        userName: "",
      },
    };
  },
  created() {
    this.getList();
    this.getgroupList();
  },
  methods: {
    getList() {
      if (
        this.listQuery.cardNumber ||
        this.listQuery.deviceName ||
        this.listQuery.userName ||
        this.listQuery.time
      ) {
        searchList(this.listQuery).then((response) => {
          this.list = response.data;
          this.total = response.total;
        });
      } else {
        fetchList({
          page: this.listQuery.page,
          limit: this.listQuery.limit,
        }).then((response) => {
          this.list = response.data;
          this.total = response.total;
        });
      }
    },
    getgroupList() {
      fetchGroupList({ page: this.listQuery.page, limit: "999" }).then(
        (response) => {
          this.groupList = response.data;
        }
      );
    },
    refreshGetList() {
      //刷新页面
      this.$router.go(0);
    },
    handleChangeFilter(e) {
      if (e == null) {
        // 清空时间
        if (
          !this.listQuery.userName &&
          !this.listQuery.cardNumber &&
          !this.listQuery.deviceName &&
          !this.listQuery.time
        ) {
          this.getList();
        } else {
          searchList({
            page: this.listQuery.page,
            limit: this.listQuery.limit,
            cardNumber: this.listQuery.cardNumber,
            deviceName: this.listQuery.deviceName,
            time1: this.listQuery.time === null ? null : this.listQuery.time[0],
            time2: this.listQuery.time === null ? null : this.listQuery.time[1],
            userName: this.listQuery.userName,
          }).then((response) => {
            this.list = response.data;
            this.total = response.total;
          });
        }
      } else {
        // 设置时间
      }
    },
    handleFilter() {
      //搜索数据
      if (
        !this.listQuery.userName &&
        !this.listQuery.cardNumber &&
        !this.listQuery.deviceName &&
        !this.listQuery.time
      ) {
        alert("请输入搜索条件");
      } else {
        searchList({
          page: 1,
          limit: this.listQuery.limit,
          cardNumber: this.listQuery.cardNumber,
          deviceName: this.listQuery.deviceName,
          time1: this.listQuery.time === null ? null : this.listQuery.time[0],
          time2: this.listQuery.time === null ? null : this.listQuery.time[1],
          userName: this.listQuery.userName,
        }).then((response) => {
          this.list = response.data;
          this.total = response.total;
        });
        this.listQuery.page = 1;
      }
    },
    timestampToTime(time) {
      //格式化时间
      var date = new Date(time);
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        "  " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.form-head {
  margin: 0 40px;
  width: 1380px;
  line-height: 118px;
  font-size: 9px;

  .input {
    display: inline-block;
    margin-right: 10px;
    width: 210px;
  }

  .input-select {
    display: inline-block;
    margin-right: 10px;
    width: 148px;
  }

  .button {
    margin-left: 10px;
  }
}

.form {
  margin-left: 40px;
  width: 1400px;

  .button-img {
    img {
      width: 53.5px;
    }
  }

  .button-info {
    margin-top: 39px;
  }

  .button {
    color: red;
  }

  img {
    width: 8.5px;
    margin-right: 8px;
  }

  .block {
    // display: flex;
    float: right;
  }

  .foot-button {
    margin-top: 53px;
  }
}
</style>
