<template>
  <div class="p-2">
    <div class="searvh">
      <el-input v-model="search.cardNo" clearable size="small" class="w-4 mb-2" placeholder="请输入卡号"></el-input>
      <el-input v-model="search.authName" clearable size="small" class="w-4 mb-2" placeholder="请输入权限名称"></el-input>
      <el-date-picker v-model="search.startTime" clearable size="small" class="w-4 mb-2" type="datetime"
        placeholder="选择开始日期时间">
      </el-date-picker>
      <el-date-picker v-model="search.endTime" clearable size="small" class="w-4 mb-2" type="datetime"
        placeholder="选择结束日期时间">
      </el-date-picker>
      <el-button type="primary" clearable size="small" class="mb-2" @click.native="getCardBindAuthList" style="background: #FA8E00; border: none;">搜索</el-button>
    </div>
    <div>
      <el-table :data="tableData" stripe style="width: 100%" height="600">
        <el-table-column type="index" width="80" label="序号">
        </el-table-column>
        <el-table-column prop="cardNum" label="卡号">
        </el-table-column>
        <el-table-column prop="authName" label="权限名称">
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间">
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间">
        </el-table-column>
        <el-table-column prop="useCount" label="使用次数">
          <template #default="scope">
            <span v-if="scope.row.useCount==255">{{scope.row.useCountStr}}</span>
            <span v-else>{{scope.row.useCount}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import {
    httpPost
  } from "../../api";
  import moment from 'moment'
  export default {
    inject: ['reload'],
    name: "offInCardList",
    data() {
      return {
        search: {
          cardNo: "",
          authName: "",
          endTime: "",
          startTime: ""
        },
        tableData:[]
      }
    },
    created() {
      this.getCardBindAuthList()
    },
    methods: {
      getCardBindAuthList(){
        var data3 = {
          code: "zg/auth/findCardBindAuthList",
          data: {
            authName:this.search.authName
          },
        };
        httpPost(data3, this.$api.sendCommand).then((res) => {
          if(res.code==200){
            this.tableData=res.data.resultList
          }
        });
      },
    }
  }
</script>

<style scoped>

</style>
