<template>
  <div>
    <el-table v-loading="loading" border :data="tableData" max-height="550px" tooltip-effect="dark"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        align="center"
        width="55">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="userName" align="center" label="申请人">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="applyTime" align="center" label="申请时间">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="className" align="center" label="门类名称">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="returnDate" align="center" label="归还时间">
      </el-table-column>
      <el-table-column prop="useStyle" align="center" label="借阅目的">
      </el-table-column>
      <el-table-column prop="borrowStatus" align="center" label="借阅状态">
        <template slot-scope="scope">
          <el-tag effect="dark" v-if="scope.row.borrowStatus === '1'" type="warning" size="mini">借阅中</el-tag>
          <el-tag effect="dark" v-if="scope.row.borrowStatus === '2'" type="success" size="mini">已归还</el-tag>
          <el-tag effect="dark" v-if="scope.row.borrowStatus === '3'" type="danger" size="mini">逾期未还</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" style="color: #409eff; font-weight:700" v-if="showButtons.look" @click="look(scope.row)">查看
          </el-button>
          <el-divider v-if="scope.row.borrowStatus!='2'&& showButtons.return" direction="vertical"></el-divider>
          <el-button v-if="scope.row.borrowStatus!='2'&& showButtons.return" type="text" style="color: #13CE66; font-weight:700"
            @click="returnClick(scope.row)">归还
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
      layout="total, prev, pager, next, sizes" :page-size="pagination.pageSize" :page-sizes="[10, 20, 30, 50]"
      :current-page="pagination.pageNum" :total="pagination.total">
    </el-pagination>
  </div>
</template>
<script>
  export default {
    props: {
      loading: {
        type: Boolean,
        default: () => {},
      },
      tableData: {
        type: Array,
        default: () => [],
      },
      pagination: {
        type: Object,
        default: () => {},
      },
      showButtons: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {

      }
    },
    methods: {
      handleSelectionChange(val) {
        this.$emit('handleSelectionChange', val)
      },
      handleCurrentChange(val) {
        this.pagination.pageNum = val;
        this.$emit("refreshTable");
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val;
        this.pagination.pageNum = 1;
        this.$emit("refreshTable");
      },
      look(val) {
        this.$emit("look", val, 0)
      },
      returnClick(val) {
        this.$emit("returnClick", val)
      }
    },
    created() {

    }
  }

</script>
