<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   style="width: 200px" v-model="searchForm.title" placeholder="请输入图书名称" />
        </el-form-item>
        <el-form-item label="ISBN码">
          <el-input   style="width: 150px" 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: 150px"
          >
            <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   style="width: 150px" 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>
    <el-row>
      <el-col :span="2">
        <el-button type="primary" @click="click"
          ><el-icon> <Plus /> </el-icon>新增图书信息</el-button
        >
      </el-col>
    </el-row>

    <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"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <!-- <el-button type="warning" size="small" @click="jieyue(scope.$index, scope.row)">借阅</el-button> -->
            <el-button
              type="primary"
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: center"></div>
      <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>
    <!-- 添加编辑弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="type == true ? '添加图书' : '编辑图书内容'"
      width="60%"
      :before-close="close"
    >
      <div>
        <div
          style="display: flex; align-items: center; margin-bottom: 20px"
          v-if="type == true"
        >
          <div style="font-weight: bold">
            查询详细：<el-input
              ref="inputRef"
              style="width: 300px"
              v-model="input"
              clearable
              @keyup.enter="isbnSearch"
              placeholder="请输入ISBN码进行查询"
            />
          </div>
          <div>
            <el-button
              type="primary"
              style="margin-left: 15px"
              @click.prevent="isbnSearch"
              ><el-icon>
                <Search />
              </el-icon>
              搜索</el-button
            >
          </div>
        </div>
        <el-form
          :model="addBook"
          v-loading="addLoading"
          ref="addBooks"
          class="demo-form-inline"
          :rules="addBokesRules"
          :label-position="right"
          label-width="80px"
        >
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="图书封面" prop="img">
                <el-image
                  :src="addBook.img"
                  style="width: 100%; height: 180px"
                  fit="contain"
                ></el-image>
              </el-form-item>
              <el-form-item label="图书名称" prop="title">
                <el-input
                  v-model="addBook.title"
                  placeholder="请输入图书名称"
                />
              </el-form-item>
              <el-form-item label="图书作者" prop="author">
                <el-input
                  v-model="addBook.author"
                  placeholder="请输入图书作者"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出版社" prop="publisher">
                <el-input
                  v-model="addBook.publisher"
                  placeholder="请输入出版社"
                />
              </el-form-item>
              <el-form-item label="出版日期" prop="pubDate">
                <el-input
                  v-model="addBook.pubDate"
                  placeholder="请输入出版日期"
                />
              </el-form-item>
              <el-form-item label="出版地" prop="pubPlace">
                <el-input
                  v-model="addBook.pubPlace"
                  placeholder="请输入出版地"
                />
              </el-form-item>
              <el-form-item label="ISBN码" prop="isbn">
                <el-input v-model="addBook.isbn" placeholder="请输入ISBN码" />
              </el-form-item>
              <el-form-item label="图书简介" prop="gist">
                <el-input
                  v-model="addBook.gist"
                  type="textarea"
                  placeholder="请输入图书简介"
                />
              </el-form-item>
              <el-form-item label="图书价格" prop="price">
                <el-input
                  v-model="addBook.price"
                  placeholder="请输入图书价格"
                />
              </el-form-item>
              <!-- <el-form-item label="主题名" prop="topicName">
								<el-input v-model="addBook.topicName" placeholder="请输入主题名" />
							</el-form-item> -->
            </el-col>
            <el-col :span="8">
              <!-- <el-form-item label="丛书提名" prop="seriesTitle">
								<el-input v-model="addBook.seriesTitle" placeholder="请输入丛书提名" />
							</el-form-item>
							<el-form-item label="并列提名" prop="parallelTitle">
								<el-input v-model="addBook.parallelTitle" placeholder="请输入并列提名" />
							</el-form-item>
							<el-form-item label="种次号" prop="titleNumber">
								<el-input v-model="addBook.titleNumber" placeholder="请输入种次号" />
							</el-form-item> -->

              <el-form-item label="图书版本" prop="bookVersion">
                <el-input
                  v-model="addBook.bookVersion"
                  placeholder="请输入图书版本"
                />
              </el-form-item>
              <el-form-item
                label="库存总量"
                prop="sumNumber"
                v-if="type == false"
              >
                <el-input
                  v-model="addBook.sumNumber"
                  placeholder="请输入库存总量"
                  readonly
                />
              </el-form-item>
              <el-form-item
                label="库存余量"
                prop="bookNumber"
                v-if="type == false"
              >
                <el-input
                  v-model="addBook.bookNumber"
                  placeholder="请输入库存余量"
                  readonly
                />
              </el-form-item>
              <el-form-item label="新增数量" prop="receiptQuantity" v-else>
                <el-input
                  v-model="addBook.receiptQuantity"
                  type="number"
                  placeholder="请输入新增数量"
                />
              </el-form-item>
              <el-form-item
                label="数量"
                prop="operateNumber"
                v-if="type == false"
              >
                <el-input
                  v-model="addBook.operateNumber"
                  placeholder="请输入数量"
                >
                  <template #prepend>
                    <el-select
                      v-model="addBook.isOperate"
                      placeholder="Select"
                      style="width: 80px"
                    >
                      <el-option
                        v-for="v in addtype"
                        :label="v.label"
                        :value="v.value"
                        :key="v.value"
                      />
                    </el-select>
                  </template>
                </el-input>
              </el-form-item>
<!--              <el-button @click="getRoomId">获取id</el-button>-->
              <el-form-item label="书屋名称" prop="roomname">
                <el-select
                  v-model="addBook.roomname"
                  placeholder="请选择书屋名称"
                  value-key="id"
                  @change="selectBookRoom1"
                  style="width: 100%"
                >
                  <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="书架编号" prop="bookShelfId">
                <el-select
                    v-model="mapShelfKey"
                    placeholder="请选择书架编号(请先选择书屋)"
                    style="width: 100%"
                    @change="selectBookRoom2"
                >
                  <el-option
                      v-for="(value, key) in mapShelf"
                      :key="key"
                      :label="key"
                      :value="key"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="详细位置" prop="bookShelfId">
                <el-select
                  v-model="addBook.bookShelfId"
                  placeholder="请选择详细位置"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in bookShelfList"
                    :key="item.id"
                    :label="item.addrInfo"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="submit" :loading="addBtn">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 借阅弹窗 -->
    <el-dialog
      v-model="jyShow"
      title="图书借阅"
      width="60%"
      :before-close="jyClose"
    >
      <div>
        <el-form
          :model="jyForm"
          v-loading="jyLoading"
          ref="jyForm1"
          class="demo-form-inline"
          :rules="jyRules"
          :label-position="right"
          label-width="80px"
        >
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="图书封面" prop="img">
                <el-image
                  :src="jyForm.img"
                  style="width: 100%; height: 180px"
                  fit="contain"
                ></el-image>
              </el-form-item>
              <el-form-item label="图书名称" prop="title">
                <el-input
                  v-model="jyForm.title"
                  placeholder="请输入图书名称"
                  readonly
                />
              </el-form-item>
              <el-form-item label="图书作者" prop="author">
                <el-input
                  v-model="jyForm.author"
                  placeholder="请输入图书作者"
                  readonly
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出版社" prop="publisher">
                <el-input
                  v-model="jyForm.publisher"
                  placeholder="请输入出版社"
                  readonly
                />
              </el-form-item>
              <el-form-item label="出版日期" prop="pubDate">
                <el-input
                  v-model="jyForm.pubDate"
                  placeholder="请输入出版日期"
                  readonly
                />
              </el-form-item>
              <el-form-item label="出版地" prop="pubPlace">
                <el-input
                  v-model="jyForm.pubPlace"
                  placeholder="请输入出版地"
                  readonly
                />
              </el-form-item>
              <el-form-item label="ISBN码" prop="isbn">
                <el-input
                  v-model="jyForm.isbn"
                  placeholder="请输入ISBN码"
                  readonly
                />
              </el-form-item>
              <el-form-item label="图书简介" prop="gist">
                <el-input
                  v-model="jyForm.gist"
                  type="textarea"
                  placeholder="请输入图书简介"
                  readonly
                />
              </el-form-item>
              <el-form-item label="图书价格" prop="price">
                <el-input
                  v-model="jyForm.price"
                  placeholder="请输入图书价格"
                  readonly
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="图书版本" prop="bookVersion">
                <el-input
                  v-model="jyForm.bookVersion"
                  placeholder="请输入图书版本"
                  readonly
                />
              </el-form-item>
              <el-form-item label="库存余量" prop="bookNumber">
                <el-input
                  v-model="jyForm.bookNumber"
                  placeholder="请输入库存余量"
                  readonly
                />
              </el-form-item>
              <el-form-item label="借阅数量" prop="borrowNumber">
                <el-input
                  v-model="jyForm.borrowNumber"
                  type="number"
                  placeholder="请输入借阅数量"
                />
              </el-form-item>
              <el-form-item label="借阅人" prop="borrowPerson">
                <div style="display: flex; align-items: center">
                  <div style="width: 70%">
                    <el-input
                      v-model="jyForm.borrowPerson"
                      placeholder="请输入借阅部门"
                      readonly
                    />
                  </div>
                  <div style="width: 30%">
                    <el-button
                      type="primary"
                      size="default"
                      @click="userShow = true"
                      >选择人员</el-button
                    >
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="借阅部门" prop="borrowDept">
                <el-input
                  v-model="jyForm.borrowDept"
                  placeholder="请输入借阅部门"
                />
              </el-form-item>
              <el-form-item label="借阅期限" prop="time">
                <el-date-picker
                  v-model="jyForm.time"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="jyClose">取消</el-button>
          <el-button type="primary" @click="jySubmit" :loading="jyBtn">
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 人员选择弹窗 -->
    <el-dialog
      v-model="userShow"
      title="借阅人员选择"
      width="50%"
      :before-close="userClose"
    >
      <div>
        <el-row :gutter="20">
          <!--部门数据-->
          <el-col :span="8" :xs="24">
            <div class="head-container">
              <el-input
                v-model="deptName"
                placeholder="请输入部门名称"
                clearable
                prefix-icon="Search"
                style="margin-bottom: 20px"
              />
            </div>
            <div class="head-container">
              <el-tree
                :data="deptOptions"
                :props="{ label: 'label', children: 'children' }"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="deptTreeRef"
                node-key="id"
                highlight-current
                default-expand-all
                @node-click="handleNodeClick"
              />
            </div>
          </el-col>
          <!--用户数据-->
          <el-col :span="16" :xs="24">
            <el-form
              :model="queryParams"
              ref="queryRef"
              :inline="true"
              v-show="showSearch"
              label-width="68px"
            >
              <el-form-item label="用户名称" prop="userName">
                <el-input
                  v-model="queryParams.userName"
                  placeholder="请输入用户名称"
                  clearable
                  style="width: 240px"
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery"
                  >搜索</el-button
                >
                <el-button icon="RefreshRight" @click="resetQuery"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>

            <el-table
              v-loading="userLoading"
              :data="userList"
              @current-change="selectPeo"
            >
              <el-table-column
                label="用户昵称"
                align="center"
                key="nickName"
                prop="nickName"
                v-if="columns[2].visible"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="部门"
                align="center"
                key="deptName"
                prop="dept.deptName"
                v-if="columns[3].visible"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="手机号码"
                align="center"
                key="phonenumber"
                prop="phonenumber"
                v-if="columns[4].visible"
              />
            </el-table>
            <pagination
              v-show="total > 0"
              :total="total"
              v-model:page="queryParams.pageNum"
              v-model:limit="queryParams.pageSize"
              @pagination="getList"
            />
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import {
  getBookList,
  getBookInfo,
  bookSj,
  modifyBook,
  bookInfo,
  delBook,
  searchPeople,
  borrowSubmit,
} from "@/api/books/booksList";
import { listRoom } from "@/api/books/room";
import { Timer } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { listUser, getUser, deptTreeSelect } from "@/api/system/user";

const router = useRouter();
const { proxy } = getCurrentInstance();

const userList = ref([]);
const userLoading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const userTotal = ref(0);
const title = ref("");
const dateRange = ref([]);
const deptName = ref("");
const deptOptions = ref(undefined);
const initPassword = ref(undefined);
const postOptions = ref([]);
const roleOptions = ref([]);
// 列显隐信息
const columns = ref([
  {
    key: 0,
    label: `用户编号`,
    visible: true,
  },
  {
    key: 1,
    label: `用户名称`,
    visible: true,
  },
  {
    key: 2,
    label: `用户昵称`,
    visible: true,
  },
  {
    key: 3,
    label: `部门`,
    visible: true,
  },
  {
    key: 4,
    label: `手机号码`,
    visible: true,
  },
  {
    key: 5,
    label: `状态`,
    visible: true,
  },
  {
    key: 6,
    label: `创建时间`,
    visible: true,
  },
]);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    userName: undefined,
    phonenumber: undefined,
    status: 0,
    deptId: undefined,
  },
});

const { queryParams } = toRefs(data);
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 searchForm = ref({
  title: null,
  bookRoomId: null,
  bookRoomName: null,
  bookShelfId: null,
  mapShelfKey1: null,
  isbn: null,
  pageSize: 10,
  pageNum: 1,
});
const searchShelfList = ref([]);
const searchMapShelf = ref({});

const value = ref("");
//添加书籍弹窗
const type = ref(false);
const addLoading = ref(false);
const dialogVisible = ref(false);
const addtype = [
  {
    label: "新增",
    value: 1,
  },
  {
    label: "减少",
    value: 0,
  },
];
const addBtn = ref(false);
const addBook = ref({
  receiptQuantity: 1,
  title: null,
  author: null,
  publisher: null,
  pubDate: null,
  pubPlace: null,
  isbn: null,
  gist: null,
  img: null,
  smallImg: null,
  price: null,
  bookVersion: null,
  topicName: null,
  subTitle: null,
  seriesTitle: null,
  parallelTitle: null,
  titleNumber: null,
  bookNumber: null,
  bookRoomId: null,
  bookShelfId: null,
  bookRoomName: null,
  bookshelfName: null,
  roomname: null,
  shelfname: null,
  isOperate: null,
  operateNumber: null,
});
const validatePass = (rule, value, callback) => {
  if (value === "" || value === null) {
    callback(new Error("请输入新增数量"));
  } else if (value <= 0) {
    callback(new Error("新增数量需大于0"));
  } else if (value % 1 !== 0) {
    callback(new Error("新增数量需为整数"));
  } else {
    callback();
  }
};
const validatePass2 = (rule, value, callback) => {
  if (value === "" || value === null) {
    callback(new Error("请输入数量"));
  } else if (value < 0) {
    callback(new Error("数量不能小于0"));
  } else if (value % 1 !== 0) {
    callback(new Error("数量需为整数"));
  } else {
    callback();
  }
};
const addBokesRules = {
  title: [
    {
      required: true,
      trigger: "blur",
      message: "请输入图书名称",
    },
  ],
  isbn: [
    {
      required: true,
      trigger: "blur",
      message: "请输入ISBN码",
    },
  ],
  receiptQuantity: [
    {
      required: true,
      validator: validatePass,
      trigger: "blur",
    },
  ],
  operateNumber: [
    {
      required: true,
      validator: validatePass2,
      trigger: "blur",
    },
  ],
};
//借阅相关内容
const userShow = ref(false);
const loading = ref(false);
const jyShow = ref(false);
const peoList = ref([]);
const jyForm = ref({
  bookId: null,
  bookName: null,
  borrowDept: null,
  borrowPerson: null,
  borrowNumber: null,
  borrowDate: null,
  userId: null,
  returnDate: null,
  time: [],
  user: null,
});
const validatePass1 = (rule, value, callback) => {
  if (value === "" || value === null) {
    callback(new Error("请输入借阅数量"));
  } else if (value <= 0) {
    callback(new Error("借阅数量需大于0"));
  } else if (value > jyForm.value.bookNumber) {
    callback(new Error("借阅数量不能大于库存余量"));
  } else if (value % 1 !== 0) {
    callback(new Error("新增数量需为整数"));
  } else {
    callback();
  }
};
const jyRules = {
  borrowPerson: [
    {
      required: true,
      trigger: "blur",
      message: "请输入借阅人姓名",
    },
  ],
  borrowNumber: [
    {
      required: true,
      validator: validatePass1,
      trigger: "blur",
    },
  ],
  time: [
    {
      required: true,
      trigger: "blur",
      message: "请选择借阅期限",
    },
  ],
};
const jyLoading = ref(false);
//书架书屋
const bookRoomList = ref([]);
const bookShelfList = ref([]);
const mapShelf = ref({});
const mapShelfKey = ref("");
const mapShelfKey1 = ref("");
onMounted(() => {});
function click() {
  [dialogVisible.value, type.value] = [true, true];
  // addBook.value.receiptQuantity = null;
  addBook.value.roomname = bookRoomList.value[0];
  addBook.value.bookRoomId = bookRoomList.value[0].id;
  console.log("addBook.value.bookRoomId",addBook.value.bookRoomId)
  setTimeout(function () {
    proxy.$refs["inputRef"].focus();
  }, 500);
}
// 分页
function getRoomId  (){
  console.log("addBook.value.bookRoomId",addBook.value.bookRoomId)
}

// 分页
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
  });
}
//根据id查询书籍详情
function getBookMessage(id) {
  bookInfo(id).then((res) => {
    addBook.value = {
      ...addBook.value,
      ...res.data,
    };
    addBook.value.isOperate = 1;
    addBook.value.operateNumber = 0;
    if (res.data.bookRoomId == null) {
      dialogVisible.value = true;
    } else {
      for (let i in bookRoomList.value) {
        if (res.data.bookRoomId == bookRoomList.value[i].id) {
          addBook.value.roomname = bookRoomList.value[i];
          mapShelf.value = bookRoomList.value[i].mapYBookShelfList;
          dialogVisible.value = true
        }
      }
      console.log("mapShelf.value", mapShelf.value )
      addBook.value.addrInfo={};
      bookShelfList.value =[]
      for (var key in mapShelf.value) {
        for (var sl in mapShelf.value[key]){
          if(mapShelf.value[key][sl]['id']== addBook.value.bookShelfId){
            bookShelfList.value =mapShelf.value[key];
            //书架名称
            mapShelfKey.value=mapShelf.value[key][sl]["shelfCode"]
           //详细位置
            addBook.value.bookShelfId=mapShelf.value[key][sl]['id']
            return false;
          }
        }
      }

    }
  });
}
//表单
const handleEdit = (index, row) => {
  type.value = false;
  getBookMessage(row.id);
};
const handleDelete = (index, row) => {
  ElMessageBox.confirm("是否删除该书籍？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delBook(row.id).then((res) => {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        getList();
      });
    })
    .catch(() => {});
};
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 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 selectBookRoom1 = (e) => {
  addBook.value.bookRoomName = e.roomName;
  addBook.value.bookRoomId = e.id;
  console.log("bookRoomId", e.id)
  addBook.value.bookshelfName = null;
  addBook.value.bookShelfId = null;
  mapShelf.value = e.mapYBookShelfList;
};

const selectBookRoom2 = (e) => {
  addBook.value.bookRoomName = e.roomName;
  addBook.value.bookshelfName = null;
  addBook.value.bookShelfId = null;
  bookShelfList.value =mapShelf.value[mapShelfKey.value];

};

//提交保存书籍
function submit() {
  proxy.$refs.addBooks.validate((valid) => {
    if (valid) {
      addBtn.value = true;
      console.log(addBook.value)
      if (type.value == true) {
        bookSj(addBook.value).then((res) => {
          ElMessage({
            message: "入库成功",
            type: "success",
          });
          addBtn.value = false;
          getList();
          input.value = "";
          proxy.$refs["inputRef"].focus();
        });
      } else {
        modifyBook(addBook.value).then((res) => {
          ElMessage({
            message: "修改成功",
            type: "success",
          });
          addBtn.value = false;
          dialogVisible.value = false;
          getList();
        });
      }
    } else {
    }
  });
}
//根据isbn码查询
function isbnSearch() {
  // addLoading.value = true
  // addBook.value = {
  // 	...addBook.value,
  // 	...obj
  // }
  // setTimeout(()=>{
  // 	addLoading.value = false
  // },1000)
  getBookInfo(input.value).then((res) => {
    ElMessage({
      message: "查询成功",
      type: "success",
    });
   var roomid=  addBook.value.bookRoomId
   var shelid=  addBook.value.bookShelfId
   var roomname=  addBook.value.roomname
    addBook.value = {
      ...res.data,
    };
    addBook.value.bookRoomId=roomid
    addBook.value.bookShelfId=shelid
    addBook.value.roomname=roomname
    if (res.data.bookRoomId == null || res.data.bookRoomId == undefined) {

      dialogVisible.value = true;
    } else {
      for (let i in bookRoomList.value) {
        if (res.data.bookRoomId == bookRoomList.value[i].id) {
          addBook.value.roomname = bookRoomList.value[i];
          addBook.value.bookRoomId  = bookRoomList.value[i].id;
          bookShelfList.value = bookRoomList.value[i].yBookShelfList;
          addLoading.value = false;
          return (dialogVisible.value = true);
        }
      }
    }
  });
}
//查询书架书屋列表
function getBookRoom() {
  listRoom({
    pageSize: 100,
    pageNum: 1,
  }).then((res) => {
    bookRoomList.value = res.rows;

    addBook.value.bookRoomId = bookRoomList.value[0].id;
    console.log(bookRoomList.value[0].id)
    console.log(addBook.value.bookRoomId )
    mapShelf.value = bookRoomList.value[0].mapYBookShelfList;
    bookShelfList.value =mapShelf.value[bookRoomList.value[0].yBookShelfList[0].shelfCode];
    searchMapShelf.value= bookRoomList.value[0].mapYBookShelfList;
  });
}
//弹窗关闭重置表单
function close() {
  addBook.value = {
    title: null,
    author: null,
    publisher: null,
    pubDate: null,
    pubPlace: null,
    isbn: null,
    gist: null,
    img: null,
    smallImg: null,
    price: null,
    bookVersion: null,
    topicName: null,
    subTitle: null,
    seriesTitle: null,
    parallelTitle: null,
    titleNumber: null,
    bookNumber: null,
    bookRoomId: null,
    bookShelfId: null,
    bookRoomName: null,
    bookshelfName: null,
    roomname: null,
    shelfname: null,
  };
  proxy.$refs.addBooks.resetFields();
  dialogVisible.value = false;
}
//根据条件查询书籍
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();
}
//借阅按钮
function jieyue(index, row) {
  jyForm.value = {
    ...jyForm.value,
    ...row,
  };
  jyForm.value.bookName = row.title;
  jyForm.value.bookId = row.id;
  // setTimeout(()=>{
  // 	jyShow.value = true
  // },500)
  jyShow.value = true;
}

//提交借阅
function jySubmit() {
  proxy.$refs.jyForm1.validate((valid) => {
    if (valid) {
      jyForm.value.borrowDate = jyForm.value.time[0];
      jyForm.value.returnDate = jyForm.value.time[1];
      borrowSubmit(jyForm.value).then((res) => {
        ElMessage({
          message: "借阅成功",
          type: "success",
        });
        jyShow.value = false;
        getList();
      });
    } else {
    }
  });
}
//借阅弹窗关闭
function jyClose() {
  jyForm.value = {
    bookId: null,
    bookName: null,
    borrowDept: null,
    borrowPerson: null,
    borrowNumber: null,
    borrowDate: null,
    userId: null,
    returnDate: null,
    time: [],
    user: null,
  };
  proxy.$refs.jyForm1.resetFields();
  jyShow.value = false;
}

/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
/** 根据名称筛选部门树 */
watch(deptName, (val) => {
  proxy.$refs["deptTreeRef"].filter(val);
});
/** 查询部门下拉树结构 */
function getDeptTree() {
  deptTreeSelect().then((response) => {
    deptOptions.value = response.data;
  });
}
/** 查询用户列表 */
function getUserList() {
  userLoading.value = true;
  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
    (res) => {
      userLoading.value = false;
      userList.value = res.rows;
      userTotal.value = res.total;
    }
  );
}
/** 节点单击事件 */
function handleNodeClick(data) {
  queryParams.value.deptId = data.id;
  handleQuery();
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getUserList();
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  queryParams.value.deptId = undefined;
  proxy.$refs.deptTreeRef.setCurrentKey(null);
  handleQuery();
}
//选择用户
function selectPeo(val) {
  jyForm.value.userId = val.userId;
  jyForm.value.borrowPerson = val.nickName;
  jyForm.value.borrowDept = val.dept.deptName;
  // jyForm.value. = val.userId
  userShow.value = false;
}

//
getDeptTree();
getUserList();
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>
