<template>
  <div
    style="
      padding: 0px 20px 100px 20px;
      background-color: white;
      margin: 0 auto;
    "
  >
    <!-- <div style="font-weight: 700; font-size: 23px">图书管理 - 图书信息列表</div> -->
    <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.title" placeholder="请输入图书名称" />
        </el-form-item>
        <el-form-item label="ISBN码">
          <el-input v-model="searchForm.isbn" placeholder="请输入ISBN码" />
        </el-form-item>
        <el-form-item label="书屋名称">
          <el-select
            v-model="searchForm.bookRoomName"
            value-key="id"
            placeholder="请选择书屋"
            @change="selectBookRoom"
            style="width: 300px"
          >
            <el-option
              v-for="item in bookRoomList"
              :key="item.id"
              :label="item.roomName"
              :value="item"
            >
              <span style="float: left">{{ item.roomName }}</span>
              <span
                style="
                  float: right;
                  color: var(--el-text-color-secondary);
                  font-size: 13px;
                "
                >{{ item.roomAddr }}</span
              >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="书架编号">
          <el-select   style="width: 150px"    @change="selectSearchBookRoom2" v-model="searchForm.mapShelfKey1" placeholder="请选择书架">
            <el-option
                v-for="(value, key) in searchMapShelf"
                :key="key"
                :label="key"
                :value="key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="详细位置">
          <el-select v-model="searchForm.bookShelfId" placeholder="请详细位置">
            <el-option
                v-for="item in searchShelfList"
                :key="item.id"
                :label="item.addrInfo"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button style="float: right" type="primary" @click="searchBook"
            ><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 style="margin-top: 20px">
      <el-table :data="tableData" v-loading="tabLoading" style="width: 100%">
        <el-table-column label="序号" width="80" type="index" align="center">
        </el-table-column>
        <el-table-column
          label="图书名称"
          width="200"
          prop="title"
          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="作者"
          align="center"
          prop="author"
          width="100"
        ></el-table-column>
        <el-table-column
          label="出版社"
          align="center"
          prop="publisher"
        ></el-table-column>
        <el-table-column
          label="图书位置"
          prop="addressInfo"
          align="center"
          width="300"
        ></el-table-column>
        <el-table-column
          label="ISBN码"
          prop="isbn"
          align="center"
        ></el-table-column>
        <!-- <el-table-column label="图书总量" prop="sumNumber" align="center"></el-table-column> -->
        <el-table-column label="图书余量" prop="bookNumber" align="center">
          <template #default="scope">
            {{ scope.row.bookNumber + "/" + scope.row.sumNumber }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px; float: right"
        :total="total"
        v-model:page-size="searchForm.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {
  getBookList,
  getBookInfo,
  bookSj,
  modifyBook,
  bookInfo,
  delBook,
  searchPeople,
  borrowSubmit,
  localBook,
} from "@/api/books/booksList";
import { listRoom } from "@/api/books/room";
import { Timer } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
const input = ref("");
const currentPage4 = ref(4);
const total = ref(0);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const tableData = ref([]);
const tabLoading = ref(false);
const searchMapShelf = ref({});
const searchForm = ref({
  title: null,
  bookRoomId: null,
  bookRoomName: null,
  bookShelfId: null,
  isbn: null,
  pageSize: 10,
  pageNum: 1,
  mapShelfKey1:null,
});
const searchShelfList = ref([]);
const value = ref("");
//书架书屋
const bookRoomList = ref([]);
const bookShelfList = ref([]);
const mapShelf = ref({});
// 分页
const handleSizeChange = (val) => {
  searchForm.value.pageNum = val;
  getList();
};
const handleCurrentChange = (val) => {
  searchForm.value.pageNum = val;
  getList();
};
//查询图书列表
function getList() {
  tabLoading.value = true;
  getBookList(searchForm.value).then((res) => {
    tableData.value = res.rows;
    total.value = res.total;
    setTimeout(() => {
      tabLoading.value = false;
    }, 1000);
    // tabLoading.value = false
  });
}
const selectBookRoom = (e) => {
  searchForm.value.bookRoomId = e.id;
  // searchForm.value.bookRoomName = e.roomName
  searchForm.value.bookShelfId = null;
  searchShelfList.value = e.yBookShelfList;
  searchMapShelf.value = e.mapYBookShelfList;
};
const selectBookRoom1 = (e) => {
  addBook.value.bookRoomName = e.roomName;
  addBook.value.bookRoomId = e.id;
  addBook.value.bookshelfName = null;
  addBook.value.bookShelfId = null;
  mapShelf.value = e.mapYBookShelfList;
};
const selectSearchBookRoom2 = (e) => {
  searchForm.value.bookRoomId = e.id;
  searchForm.value.bookShelfId = null;
  searchShelfList.value = searchMapShelf.value[e];
  console.log(searchMapShelf.value[e][0].id)
  searchForm.value.bookShelfId=searchMapShelf.value[e][0].id
  setTimeout(() => {
  }, 500);
};
const selectBookRoom2 = (e) => {
  addBook.value.bookshelfName = e.addrInfo;
  addBook.value.bookShelfId = e.id;
};
//查询书架书屋列表
function getBookRoom() {
  listRoom({
    pageSize: 100,
    pageNum: 1,
  }).then((res) => {
    bookRoomList.value = res.rows;
    mapShelf.value = bookRoomList.value[0].mapYBookShelfList;
    searchMapShelf.value= bookRoomList.value[0].mapYBookShelfList;
  });
}
//根据条件查询书籍
function searchBook() {
  searchForm.value.pageNum = 1;
  getList();
}
//重置搜索框
function refresh() {
  searchForm.value = {
    title: null,
    bookRoomId: null,
    bookRoomName: null,
    bookShelfId: null,
    isbn: null,
    pageSize: 20,
    pageNum: 1,
  };
  getList();
}
getList();
getBookRoom();
</script>

<style lang="scss" scoped>
.demo-image__error {
  // padding: 30px 0;
  text-align: center;
  // border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  vertical-align: top;
  height: 200px;
}

.demo-image__error .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #444444;
  color: #fff;
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
</style>
