<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;">
          <el-menu-item index="1">
            <template slot="title">
              <i class="el-icon-house"></i>
              <span>导航栏</span>
            </template>
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/home">首页</router-link>
          </el-menu-item>
          <el-menu-item index="3">
            <router-link to="/books">图书管理</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-form-item>
          </el-form>

          <el-table
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="id"
              label="ID"
              width="80">
            </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 slot-scope="scope">{{ scope.row.storeTime | formatDateTime }}</template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="120">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.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-button type="primary" style="margin-top: 20px;" @click="addDialogVisible = true">新增图书</el-button>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  import axios from 'axios';
   
  export default {
    data() {
      return {
        // 查询表单
        queryForm: {
          name: '',
          // 可以添加其他查询条件，如publisher, author, begin, end等
        },
        // 表格数据
        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() {
        console.log('Sending query request with params:', {
    page: this.currentPage,
    pageSize: this.pageSize,
    name: this.queryForm.name,
    // 添加其他查询参数...
  });
        const response = await axios.get('http://localhost:8080/books', { 
         
          params: {
            page: this.currentPage,
            pageSize: this.pageSize,
            name: this.queryForm.name,
            // 添加其他查询参数...
          },
        
        })
        if (response.data.code === 1) {
          this.tableData = response.data.data.list;
          this.totalRecords = response.data.data.total;
          // 更新总记录数（如果需要的话）
        } else {
          this.$message.error(response.data.msg);
        }
      },
      // 编辑书籍
      async handleEdit(row) {
        this.editForm = { ...row };
        this.editDialogVisible = true;
      },
      // 保存编辑的书籍
      async handleSave() {
        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);
        }
      },
      // 删除书籍
      async handleDelete(id) {
        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);
        }
      },
      // 新增书籍
      async handleAdd() {
        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);
        }
      },
      // 分页大小变化
      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(',');
        const response = await axios.delete(`http://localhost:8080/books/${ids}`);
        if (response.data.code === 1) {
          this.$message.success('批量删除成功');
          this.handleQuery();
        } else {
          this.$message.error(response.data.msg);
        }
      },
      // 格式化日期时间（全局过滤器或方法）
      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; /* 鼠标悬停时文字颜色变为红色 */
}
</style>tableData为什么获取不了数据，页面没有显示书籍