<template>
  <div>
    <!-- 条件搜索区域 -->
    <div class="form-head">
      <span>
        <el-input
          v-model="listQuery.key"
          size="mini"
          placeholder="设备名称,姓名或手机号"
          clearable
        />
      </span>

      <span style="margin-left: 15px">学院：</span>
      <el-select
        v-model="listQuery.college"
        clearable
        size="mini"
        placeholder="请选择学院"
      >
        <el-option
          v-for="(item, index) in collegeList"
          :key="index"
          :label="item.name"
          :value="item.name"
        />
      </el-select>

      <span style="margin-left: 15px">专业：</span>
      <el-select
        v-model="listQuery.professor"
        clearable
        size="mini"
        placeholder="请选择专业"
      >
        <el-option
          v-for="(item, index) in professorList"
          :key="index"
          :label="item.name"
          :value="item.name"
        />
      </el-select>

      <span style="margin-left: 15px">年级：</span>
      <el-select
        v-model="listQuery.nj"
        clearable
        size="mini"
        placeholder="请选择年级"
      >
        <el-option
          v-for="(item, index) in njList"
          :key="index"
          :label="item.name"
          :value="item.name"
        />
      </el-select>

      <span style="margin-left: 15px">班级：</span>
      <el-select
        v-model="listQuery.className"
        clearable
        size="mini"
        placeholder="请选择班级"
      >
        <el-option
          v-for="(item, index) in classNameList"
          :key="index"
          :label="item.name"
          :value="item.name"
        />
      </el-select>

      <span style="margin-left: 15px">通行时间：</span>
      <el-date-picker
        v-model="listQuery.time"
        size="mini"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="timestamp"
      />

      <el-button
        style="margin-left: 20px"
        type="primary"
        size="mini"
        class="button"
        @click="handleFilter"
      >
        查询
      </el-button>
    </div>

    <!-- 导出按钮区域 -->
    <el-button
      type="primary"
      size="mini"
      class="button_down"
      :disabled="!listQuery.time"
      @click="handleDownLoad"
    >
      导出
    </el-button>
    <span class="button_text">选择通行时间后可导出</span>

    <!-- 表格区域 -->
    <div class="form">
      <el-table
        v-loading="loading"
        height="550px"
        :data="list"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column label="序号" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.id }}</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.mobile ? row.mobile : "未知" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="卡号" align="center" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span>{{ row.cardNumber }}</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="学院" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.groupName ? row.groupName : "未知" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="专业" align="center" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span>{{ row.profession ? row.profession : "未知" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="年级" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.nj ? row.nj : "未知" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="班级" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.classname ? row.classname : "未知" }}</span>
          </template>
        </el-table-column>

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

        <el-table-column label="分组名称" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.zu ? row.zu : "未知" }}</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="handleChangePage"
          />
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { searchList, exportExcel } from '@/api/accessrecords'
import { getChooseList } from '@/api/usermanagement'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      collegeList: [],
      njList: [],
      professorList: [],
      classNameList: [],
      // 表格数据
      list: [],
      // 设备数组
      groupList: [],
      // 总条数
      total: 0,
      // 表格加载状态
      loading: false,
      listQuery: {
        // 当前页
        page: 1,
        // 每页多少条
        limit: 8,
        //  通行时间选择框绑定数据
        time: '',
        key: '', // 关键字 设备名称 手机号 卡号
        college: '', // 学院
        nj: '', // 年级
        professor: '', // 专业
        className: '' // 班级
      }
    }
  },
  created() {
    this.getList()
    // this.getgroupList();
    // 获取学院
    this.getCollege(1)
    // 获取专业
    this.getProfessor(3)
    // 获取年级
    this.getNj(2)
    // 获取班级
    this.getClassName(4)
  },
  methods: {
    // 获取表格数据
    getList() {
      this.loading = true
      searchList({
        page: this.listQuery.page,
        limit: this.listQuery.limit,
        key: this.listQuery.key,
        groupName: this.listQuery.groupName,
        nj: this.listQuery.nj,
        profession: this.listQuery.profession,
        className: this.listQuery.className,
        time1: this.listQuery.time === null ? null : this.listQuery.time[0],
        time2: this.listQuery.time === null ? null : this.listQuery.time[1]
      }).then((response) => {
        // console.log(response);

        this.list = response.data
        this.total = response.total
        this.loading = false
      })
    },
    // 获取设备数组
    // getgroupList() {
    //   fetchGroupList({ page: 1, limit: 999 }).then((response) => {
    //     this.groupList = response.data;
    //   });
    // },
    getCollege(name) {
      getChooseList({ name }).then((response) => {
        // console.log(response);
        this.collegeList = response.data
      })
    },
    getProfessor(name) {
      getChooseList({ name }).then((response) => {
        // console.log(response);
        this.professorList = response.data
      })
    },
    getNj(name) {
      getChooseList({ name }).then((response) => {
        // console.log(response);
        this.njList = response.data
      })
    },
    getClassName(name) {
      getChooseList({ name }).then((response) => {
        // console.log(response);
        this.classNameList = response.data
      })
    },
    // 查询按钮回调
    handleFilter() {
      this.list = []
      this.total = 0
      this.listQuery.page = 1
      this.getList()
    },

    // 分页器改变分页回调
    handleChangePage(e) {
      // console.log(e);
      this.list = []
      this.listQuery.page = e.page
      this.listQuery.limit = e.limit
      this.getList()
    },

    // 导出按钮回调
    handleDownLoad() {
      exportExcel({
        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,
        groupName: this.listQuery.college,
        profession: this.listQuery.major
      }).then((response) => {
        // console.log(response);
        location.href = `https://chtech.ncjti.edu.cn/access-control${response.downurl}`
      })
    },

    // 时间格式转化函数
    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 {
  display: flex;
  align-items: center;
  margin: 0 40px;
  line-height: 118px;
  font-size: 9px;
}

.button_down {
  margin-left: 40px;
}

.button_text {
  font-size: 14px;
  margin-left: 20px;
  color: #ccc;
}

.form {
  margin: 0 40px;

  .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>
