<template>
  <div>
    <el-container>
<!-- 侧边栏 -->
      <el-aside style="width: 200px;min-height: 100vh;background-color:rgb(254, 64, 74)">
  <div style="height: 60px; display: flex; align-items: center; justify-content: center;">
    <img src="./photo/GH.jpg" alt="Logo" style="width: 100%; height: auto;">
  </div>
        <el-menu class="custom-menu" style="width: 200px; background-color: #fe8f8f;" popper-append-to-body>
          <el-row>
            <el-col :span="12">
              <el-menu class="custom-menu" style="width: 200px; background-color: #fe8f8f;" popper-append-to-body>
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>导航栏</span>
                  </template>
                  <el-menu-item-group>
                    <template slot="title"></template>

                    <el-menu-item index="3">
                      <router-link to="/books#section2">图书管理</router-link>
                    </el-menu-item>

                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </el-menu>
</el-aside>
<el-container>

        <!-- 头部 -->
  <el-header style="font-family: 楷体;text-align: center;font-weight: bold;background-color:rgb(254, 64, 74);color: white;font-size: 50px;">
          红色精神图书管理系统
        </el-header>

        <!-- 主要内容区域 -->
        <el-main>
          <el-form :inline="true" :model="queryForm" class="demo-form-inline" style="margin-bottom: 20px;">
            <el-form-item label="书名">
              <el-input v-model="queryForm.name" placeholder="书名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery">查询</el-button>
              <el-button type="default" @click="resetQuery" style="margin-left: 10px;">刷新</el-button>

            </el-form-item>
          </el-form>
          <el-button type="primary" style="margin-top: 20px;" @click="addDialogVisible = true">新增图书</el-button>
          <el-button type="danger" @click="handleBatchDelete" style="margin-top: 20px;" :disabled="selectedRows.length === 0">批量删除</el-button>
          <el-table
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%; margin-top: 20px;"
              @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="name" label="书名" width="180"></el-table-column>
            <el-table-column prop="publisher" label="出版社" width="180"></el-table-column>
            <el-table-column prop="author" label="作者" width="180"></el-table-column>
            <el-table-column label="数量" prop="quantity" width="100"></el-table-column>
            <el-table-column label="存入时间" width="180">
              <template #default="{ row }">
                {{ formatDateTime(row.storeTime) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template #default="{ row }">
                <el-button size="mini" @click="handleEdit(row)">编辑</el-button>
                <br>
                <br>
                <el-button size="mini" type="danger" @click="handleDelete(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            style="text-align: right; margin-top: 20px;">
          </el-pagination>



          <!-- 编辑对话框 -->
          <el-dialog title="编辑图书信息" :visible.sync="editDialogVisible">
            <el-form :model="editForm">
              <el-form-item label="书名">
                <el-input v-model="editForm.name"></el-input>
              </el-form-item>
              <el-form-item label="出版社">
                <el-input v-model="editForm.publisher"></el-input>
              </el-form-item>
              <el-form-item label="作者">
                <el-input v-model="editForm.author"></el-input>
              </el-form-item>
              <el-form-item label="数量">
                <el-input v-model.number="editForm.quantity" type="number"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="editDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="handleSave">保存</el-button>
            </div>
          </el-dialog>

          <!-- 新增对话框 -->
          <el-dialog title="新增图书信息" :visible.sync="addDialogVisible">
            <el-form :model="addForm">
              <el-form-item label="书名">
                <el-input v-model="addForm.name"></el-input>
              </el-form-item>
              <el-form-item label="出版社">
                <el-input v-model="addForm.publisher"></el-input>
              </el-form-item>
              <el-form-item label="作者">
                <el-input v-model="addForm.author"></el-input>
              </el-form-item>
              <el-form-item label="数量">
                <el-input v-model.number="addForm.quantity" type="number"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="addDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="handleAdd">新增</el-button>
            </div>
          </el-dialog>

          <!-- 新增按钮 -->

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      queryForm: {
        name: '',
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      editDialogVisible: false,
      editForm: {
        id: null,
        name: '',
        publisher: '',
        author: '',
        quantity: 1,
      },
      addDialogVisible: false,
      addForm: {
        name: '',
        publisher: '',
        author: '',
        quantity: 1,
      },
      selectedRows: [],
    };
  },
  methods: {
    async handleQuery() {
      try {
        const response = await axios.get('http://localhost:8080/books', {
          params: {
            page: this.currentPage,
            pageSize: this.pageSize,
            name: this.queryForm.name,
          },
        });
        console.log('Response:', response); // 输出完整响应
        if (response.data.code === 1) {
          this.tableData = response.data.data.rows;

        } else {
          this.$message.error(response.data.msg);
        }
      } catch (error) {
        this.$message.error('查询失败，请重试');
        console.error(error);
      }
    },

    resetQuery() {
      // Reset the query form
      this.queryForm.name = '';
      this.handleQuery(); // Reload the data with default values
    },

    async handleEdit(row) {
      this.editForm = { ...row };
      this.editDialogVisible = true;
    },

    async handleSave() {
      try {
        const response = await axios.put('http://localhost:8080/books', this.editForm);
        if (response.data.code === 1) {
          this.$message.success('保存成功');
          this.editDialogVisible = false;
          this.handleQuery();
        } else {
          this.$message.error(response.data.msg);
        }
      } catch (error) {
        this.$message.error('保存失败，请重试');
        console.error(error);
      }
    },

    async handleDelete() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择至少一行数据进行删除');
        return;
      }
      const hasBorrowed = this.selectedRows.some(row => row.quantity === 0);
      if (hasBorrowed) {
        this.$message.error('部分图书仍在被借阅中，无法删除！');
        return;
      }
      const ids = this.selectedRows.map(row => row.id).join(',');
      try {
        const response = await axios.delete(`http://localhost:8080/books/${ids}`);
        if (response.data.code === 1) {
          this.$message.success('批量删除成功');
          this.handleQuery();
          this.selectedRows = []; // 清空选中行
        } else {
          this.$message.error(response.data.msg);
        }
      } catch (error) {
        this.$message.error('批量删除失败，请重试');
        console.error(error);
      }
    },

    async handleAdd() {
      try {
        const response = await axios.post('http://localhost:8080/books', this.addForm);
        if (response.data.code === 1) {
          this.$message.success('新增成功');
          this.addDialogVisible = false;
          this.handleQuery();
        } else {
          this.$message.error(response.data.msg);
        }
      } catch (error) {
        this.$message.error('新增失败，请重试');
        console.error(error);
      }
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.handleQuery();
    },

    handlePageChange(val) {
      this.currentPage = val;
      this.handleQuery();
    },

    handleSelectionChange(val) {
      this.selectedRows = val;
    },

    async handleBatchDelete() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择至少一行数据进行删除');
        return;
      }
      const ids = this.selectedRows.map(row => row.id).join(',');
      try {
        const response = await axios.delete(`http://localhost:8080/books/${ids}`);
        if (response.data.code === 1) {
          this.$message.success('批量删除成功');
          this.handleQuery();
          this.selectedRows = []; // 清空选中行
        } else {
          this.$message.error(response.data.msg);
        }
      } catch (error) {
        this.$message.error('批量删除失败，请重试');
        console.error(error);
      }
    },

    formatDateTime(value) {
      if (!value) return '';
      return new Date(value).toLocaleString();
    },
  },
  mounted() {
    this.handleQuery();
  },
};
</script>

<style scoped>
.custom-menu.el-menu-item span,
.custom-menu.el-menu-item {
  color: white!important; /* 设置字体颜色为白色 */
  font-weight: bold; /* 设置字体加粗 */
}
.el-menu-item:hover {
  background-color: yellow!important;
  color: red!important; /* 鼠标悬停时文字颜色变为红色 */
}


/* 增加表格行的间距 */
.el-table .el-table__body-wrapper {
  margin-top: 10px; /* 行间距调整 */
}

.el-table .el-table__row {
  margin: 10px 0; /* 行与行之间的间距 */
}

</style>
帮忙加一个账号注销按钮，点击注销按钮，跳回注册登录页面，再加一个清空用户登录状态