<template>
  <div style="padding: 0 20px 100px; background-color: white; margin: 0 auto">
    <div style="">
      <div style="margin-top: 20px">
        <el-form
          :inline="true"
          :model="searchForm"
          ref="search1"
          class="demo-form-inline"
        >
          <el-form-item label="图书名称">
            <el-input
              v-model="searchForm.bookName"
              placeholder="请输入图书名称"
            />
          </el-form-item>
          <el-form-item label="借阅人">
            <el-input
              v-model="searchForm.borrowPerson"
              placeholder="请输入借阅人姓名"
            />
          </el-form-item>
          <el-form-item label="归还日期">
            <el-date-picker
              v-model="searchForm.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-button style="float: right" type="primary" @click="search"
              ><el-icon> <Search /> </el-icon>搜索</el-button
            >
            <el-button style="float: right" type="" @click="refresh"
              ><el-icon> <RefreshRight /> </el-icon>重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div style="margin-top: 20px">
      <el-table :data="tableData" v-loading="tabLoading" style="width: 100%">
        <el-table-column label="序号" width="80" align="center" type="index">
        </el-table-column>
        <el-table-column
          label="图书名称"
          prop="bookName"
          width="240"
          align="center"
        >
        </el-table-column>
        <el-table-column label="封面" width="100" align="center">
          <template #default="scope">
            <!-- <img :src="scope.row.img" style="width: 100%;" alt="" /> -->
            <el-image
              style="width: 100%"
              :src="scope.row.img"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              z-index="999"
              preview-teleported
              :preview-src-list="[scope.row.img]"
              fit="cover"
            />
          </template>
        </el-table-column>
        <!-- <el-table-column label="借阅数量"  prop="borrowNumber" align="center"></el-table-column> -->
        <el-table-column
          label="借阅人"
          prop="borrowPerson"
          align="center"
        ></el-table-column>
        <el-table-column
          label="归还人"
          prop="returnPerson"
          align="center"
        ></el-table-column>
        <el-table-column
          label="归还时间"
          prop="returnDate"
          align="center"
        ></el-table-column>
        <el-table-column
          label="归还数量"
          prop="returnNumber"
          align="center"
        ></el-table-column>
        <!-- <el-table-column label="借阅期限" align="center">
					<template #default="scope">
						{{scope.row.borrowDate+" 至 "+scope.row.returnDate}}
					</template>
				</el-table-column> -->
        <!-- <el-table-column label="借阅日期"></el-table-column> -->
      </el-table>
      <el-pagination
        style="margin-top: 20px; float: right"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Timer } from "@element-plus/icons-vue";
import { returnList } from "@/api/books/returnDetails";
const { proxy } = getCurrentInstance();
const { book_borrow_state } = proxy.useDict("book_borrow_state");
// 顶部搜索
const searchForm = ref({
  title: null,
  pageSize: 10,
  pageNum: 1,
  start: null,
  end: null,
  borrowPerson: null,
  time: [],
});
const input = ref("");
const value2 = ref("");
const pageSize4 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
//表格相关
const tableData = ref([]);
const total = ref(null);
const tabLoading = ref(false);
// 分页
const handleSizeChange = (val) => {
  searchForm.value.pageNum = val;
  getList();
};
const handleCurrentChange = (val) => {
  searchForm.value.pageNum = val;
  getList();
};
//获取借阅列表
function getList() {
  tabLoading.value = true;
  returnList(searchForm.value).then((res) => {
    tableData.value = res.rows;
    total.value = res.total;
    setTimeout(() => {
      tabLoading.value = false;
    }, 1000);
  });
}
//根据条件查询借阅信息
function search() {
  if (searchForm.value.time.length != 0) {
    searchForm.value.start = searchForm.value.time[0];
    searchForm.value.end = searchForm.value.time[1];
  }
  searchForm.value.pageNum = 1;
  getList();
}
//重置搜索内容
function refresh() {
  searchForm.value = {
    title: null,
    pageSize: 10,
    pageNum: 1,
    start: null,
    end: null,
    borrowPerson: null,
    time: [],
  };
  getList();
}
//
getList();
</script>

<style lang="scss" scoped></style>
