<template>
  <div>
    <el-container>
<!-- 侧边栏 -->
<el-aside style="width: 200px; min-height: 100vh; background-color: #F95656;">
  <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: #F95656;" popper-append-to-body>
    <el-menu-item index="1">
      <template #title>
        <i class="el-icon-house"></i>
        <span>导航栏</span>
      </template>
    </el-menu-item>
    <el-menu-item index="2">
      <router-link to="/home#section1">首页</router-link>
    </el-menu-item>
    <el-menu-item index="3">
      <router-link to="/books#section2">图书管理</router-link>
    </el-menu-item>
  </el-menu>
</el-aside>
<el-container>

        <!-- 头部 -->
        <el-header style="font-family: '楷体'; text-align: center; font-weight: bold; background-color: #F95656; 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="存入时间" 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(id) {
      try {
        const response = await axios.delete(`http://localhost:8080/books/${id}`);
        if (response.data.code === 1) {
          this.$message.success('删除成功');
          this.handleQuery();
        } 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; /* 设置字体颜色为白色 */
  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>为什么导航栏的字不是白色