<template>
  <div class="library-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title">
        <i class="el-icon-s-comment"></i>
        图书管理
      </h2>
      <el-button type="primary" icon="el-icon-plus" @click="showUploadModal = true">
        添加图书
      </el-button>
    </div>

    <!-- 图书统计 -->
    <div class="book-stats">
      <div class="stat-card blue">
        <div class="stat-number">{{ chartData.total || 0 }}</div>
        <div class="stat-label">总图书数量</div>
      </div>
      <div class="stat-card green">
        <div class="stat-number">{{ chartData.borrowable || 0 }}</div>
        <div class="stat-label">可借阅</div>
      </div>
      <div class="stat-card orange">
        <div class="stat-number">{{ chartData.borrowed || 0 }}</div>
        <div class="stat-label">已借出</div>
      </div>
      <div class="stat-card purple">
        <div class="stat-number">{{ chartData.maintaining || 0 }}</div>
        <div class="stat-label">维护中</div>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="search-section">
      <el-form :model="filters" inline>
        <el-form-item>
          <el-input 
            v-model="filters.keyword" 
            placeholder="搜索书名、作者" 
            clearable
            @clear="handleSearch"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select 
            v-model="filters.category" 
            placeholder="全部分类" 
            clearable
            @clear="handleSearch"
            @change="handleSearch"
          >
            <el-option label="全部分类" value=""></el-option>
            <el-option 
              v-for="category in categoryList" 
              :key="category" 
              :label="category" 
              :value="category"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select 
            v-model="filters.status" 
            placeholder="全部状态" 
            clearable
            @clear="handleSearch"
            @change="handleSearch"
          >
            <el-option label="全部状态" value=""></el-option>
            <el-option label="可借阅" value="0"></el-option>
            <el-option label="已借出" value="1"></el-option>
            <el-option label="维护中" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" icon="el-icon-download" @click="handleExport">导出数据</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="el-icon-upload2" @click="handleImport">批量导入</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 图书列表表格 -->
    <div class="table-container">
      <el-table
        :data="list"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="封面" width="80">
          <template slot-scope="scope">
            <img v-if="scope.row.cover && scope.row.cover.url" :src="scope.row.cover.url" alt="图书封面" class="book-cover">
            <div v-else class="no-cover">无封面</div>
          </template>
        </el-table-column>
        <el-table-column label="图书信息" min-width="250">
          <template slot-scope="scope">
            <div class="book-title">{{ scope.row.title || '未设置标题' }}</div>
            <div class="book-author">
              作者：{{ scope.row.author || '未知' }}
              <span v-if="scope.row.publisher">· 出版社：{{ scope.row.publisher }}</span>
              <span v-if="scope.row.publish_year">· {{ scope.row.publish_year }}年</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="分类" width="100">
          <template slot-scope="scope">
            <el-tag :type="getCategoryTagType(scope.row.category)" size="small">{{ scope.row.category || '未分类' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="ISBN" width="150">
          <template slot-scope="scope">
            {{ scope.row.isbn || '未设置' }}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusTagType(scope.row.status)" size="small">{{ getStatusText(scope.row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" width="150">
          <template slot-scope="scope">
            <div class="time-display">{{ formatDate(scope.row.created_at) }}</div>
            <div class="time-display-secondary">{{ formatTime(scope.row.created_at) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" fixed="right">
          <template slot-scope="scope">
            <div class="action-buttons">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="info" size="mini" icon="el-icon-view" @click="handleView(scope.row)">详情</el-button>
              <el-button
                v-if="scope.row.status !== 1 && scope.row.status !== 2"
                type="success"
                size="mini"
                icon="el-icon-reading"
                @click="handleStatusChange(scope.row, 1)"
              >已借阅</el-button>
              <el-button
                v-if="scope.row.status === 1"
                type="warning"
                size="mini"
                icon="el-icon-refresh-left"
                @click="handleStatusChange(scope.row, 0)"
              >已归还</el-button>
              <el-button
                v-if="scope.row.status === 2"
                type="success"
                size="mini"
                icon="el-icon-upload2"
                @click="handleStatusChange(scope.row, 0)"
              >上架</el-button>
              <el-button
                v-if="scope.row.status !== 2"
                type="danger"
                size="mini"
                icon="el-icon-tools"
                @click="handleStatusChange(scope.row, 2)"
              >维护</el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[10, 20, 50]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 添加/编辑图书弹窗 -->
    <el-dialog
      :title="isEdit ? '编辑图书' : '添加图书'"
      :visible.sync="showUploadModal"
      width="600px"
      :before-close="handleCloseModal"
    >
      <el-form :model="bookForm" :rules="bookRules" ref="bookForm" label-width="100px">
        <!-- 基本信息 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-info"></i>
            基本信息
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="书名" prop="title">
                <el-input v-model="bookForm.title" placeholder="请输入书名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="作者" prop="author">
                <el-input v-model="bookForm.author" placeholder="请输入作者"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="ISBN">
                <el-input v-model="bookForm.isbn" placeholder="978-7-xxx-xxxxx-x"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出版社">
                <el-input v-model="bookForm.publisher" placeholder="请输入出版社"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="出版年份">
                <el-input-number v-model="bookForm.year" :min="1949" :max="2030" placeholder="年份"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分类" prop="category">
                <el-input v-model="bookForm.category" placeholder="请输入分类"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="图书简介">
            <el-input
              type="textarea"
              v-model="bookForm.description"
              :rows="3"
              :maxlength="500"
              placeholder="请输入图书简介"
              show-word-limit
            ></el-input>
          </el-form-item>
        </div>

        <!-- 封面上传 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-picture"></i>
            图书封面
          </div>
          <div class="upload-area" @click="triggerCoverUpload">
            <div v-if="!bookForm.cover" class="upload-placeholder">
              <i class="el-icon-upload" style="font-size: 32px; color: #9ca3af; margin-bottom: 10px;"></i>
              <div style="color: #374151; font-weight: 500;">点击上传图书封面</div>
              <div style="color: #9ca3af; font-size: 12px; margin-top: 5px;">支持 JPG、PNG 格式，建议尺寸 300×400</div>
            </div>
            <img v-else :src="bookForm.cover" alt="封面预览" class="upload-preview">
          </div>
          <input
            ref="coverInput"
            type="file"
            accept="image/*"
            style="display: none;"
            @change="handleCoverUpload"
          >
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showUploadModal = false">取消</el-button>
        <el-button type="primary" @click="saveBook">{{ isEdit ? '更新图书' : '保存图书' }}</el-button>
      </div>
    </el-dialog>

    <!-- 图书详情弹窗 -->
    <el-dialog
      title="图书详情"
      :visible.sync="showDetailModal"
      width="700px"
      :before-close="handleCloseDetailModal"
    >
      <div v-if="currentBook" class="book-detail">
        <!-- 基本信息 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-info"></i>
            基本信息
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="detail-item">
                <label class="detail-label">书名：</label>
                <span class="detail-value">{{ currentBook.title || '未设置' }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <label class="detail-label">作者：</label>
                <span class="detail-value">{{ currentBook.author || '未知' }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="detail-item">
                <label class="detail-label">ISBN：</label>
                <span class="detail-value">{{ currentBook.isbn || '未设置' }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <label class="detail-label">出版社：</label>
                <span class="detail-value">{{ currentBook.publisher || '未设置' }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="detail-item">
                <label class="detail-label">出版年份：</label>
                <span class="detail-value">{{ currentBook.publish_year || '未设置' }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <label class="detail-label">分类：</label>
                <el-tag :type="getCategoryTagType(currentBook.category)" size="small">{{ currentBook.category || '未分类' }}</el-tag>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="detail-item">
                <label class="detail-label">图书状态：</label>
                <el-tag :type="getStatusTagType(currentBook.status)" size="small">{{ getStatusText(currentBook.status) }}</el-tag>
              </div>
            </el-col>
          </el-row>
          <div class="detail-item">
            <label class="detail-label">图书简介：</label>
            <div class="detail-description">{{ currentBook.description || '暂无简介' }}</div>
          </div>
        </div>

        <!-- 图书封面 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-picture"></i>
            图书封面
          </div>
          <div class="cover-display">
            <img v-if="currentBook.cover && currentBook.cover.url" :src="currentBook.cover.url" alt="图书封面" class="detail-cover">
            <div v-else class="no-cover-detail">
              <i class="el-icon-picture-outline" style="font-size: 48px; color: #d1d5db;"></i>
              <div style="color: #9ca3af; margin-top: 10px;">暂无封面</div>
            </div>
          </div>
        </div>

        <!-- 其他信息 -->
        <div class="form-section">
          <div class="section-title">
            <i class="el-icon-document"></i>
            其他信息
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="detail-item">
                <label class="detail-label">创建时间：</label>
                <span class="detail-value">{{ formatDateTime(currentBook.created_at) }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <label class="detail-label">更新时间：</label>
                <span class="detail-value">{{ formatDateTime(currentBook.updated_at) }}</span>
              </div>
            </el-col>
          </el-row>
          <div class="detail-item">
            <label class="detail-label">图书ID：</label>
            <span class="detail-value">{{ currentBook.id }}</span>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDetailModal = false">关闭</el-button>
        <el-button type="primary" @click="handleEdit(currentBook)">编辑图书</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { save, index, destroy } from '@/api/library'
import { uploads } from '@/api/uploads'
export default {
  name: 'Library',
  data() {
    return {
      showUploadModal: false,
      showDetailModal: false,
      isEdit: false,
      editBookId: null,
      filters: {
        keyword: '',
        category: '',
        status: ''
      },
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      },
      multipleSelection: [],
      bookForm: {
        title: '',
        author: '',
        isbn: '',
        publisher: '',
        year: null,
        category: '',
        description: '',
        cover: '',
        cover_id: ''
      },
      currentBook: null,
      bookRules: {
        title: [
          { required: true, message: '请输入书名', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请输入作者', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '请输入分类', trigger: 'blur' }
        ]
      },
      chartData: {
        total: 0,
        borrowable: 0,
        borrowed: 0,
        maintaining: 0
      },
      categoryList: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      try {
        const params = {
          page: this.listQuery.page,
          limit: this.listQuery.limit
        }
        
        // 构建二维数组形式的filter参数
        let filterIndex = 0
        
        // 关键词搜索
        if (this.filters.keyword) {
          params.keyword = this.filters.keyword
        }
        
        if (this.filters.category) {
          params[`filter[${filterIndex}][key]`] = 'category'
          params[`filter[${filterIndex}][op]`] = 'eq'
          params[`filter[${filterIndex}][value]`] = this.filters.category
          filterIndex++
        }
        
        if (this.filters.status !== '') {
          params[`filter[${filterIndex}][key]`] = 'status'
          params[`filter[${filterIndex}][op]`] = 'eq'
          params[`filter[${filterIndex}][value]`] = this.filters.status
          filterIndex++
        }
        
        const res = await index(params)
        // 处理新的API响应结构
        this.list = res.list?.data || []
        this.total = res.list?.total || 0
        this.listQuery.page = res.list?.current_page || 1
        this.chartData = res.chart || {}
        this.categoryList = res.category || []
      } catch (error) {
        console.error('获取图书列表失败:', error)
        this.$message.error('获取图书列表失败')
      }
    },
    handleSearch() {
      this.listQuery.page = 1
      this.getList()
    },
    handleExport() {
      console.log('导出数据')
      this.$message.info('数据导出中...')
    },
    handleImport() {
      console.log('批量导入')
      this.$message.info('批量导入功能')
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getCategoryTagType(category) {
      // 所有分类使用固定颜色
      return 'primary'
    },
    getStatusTagType(status) {
      const statusMap = {
        0: 'success',    // 可借阅
        1: 'warning',    // 已借出
        2: 'danger'      // 维护中
      }
      return statusMap[status] || 'info'
    },
    getStatusText(status) {
      const statusText = {
        0: '可借阅',
        1: '已借出',
        2: '维护中'
      }
      return statusText[status] || '未知状态'
    },
    handleEdit(row) {
      console.log('编辑:', row.id)
      this.isEdit = true
      this.editBookId = row.id
      // 填充表单数据
      this.bookForm = {
        title: row.title || '',
        author: row.author || '',
        isbn: row.isbn || '',
        publisher: row.publisher || '',
        year: row.publish_year ? parseInt(row.publish_year) : null,
        category: row.category || '',
        description: row.description || '',
        cover: row.cover && row.cover.url ? row.cover.url : '',
        cover_id: row.cover_id || ''
      }
      this.showUploadModal = true
    },
    handleView(row) {
      console.log('查看详情:', row.id)
      this.currentBook = row
      this.showDetailModal = true
    },
    handleStatusChange(row, status) {
      const statusText = {
        0: '可借阅',
        1: '已借阅',
        2: '维护'
      }
      let actionText = ''
      if (row.status === 2 && status === 0) {
        actionText = '上架'
      } else {
        actionText = statusText[status]
      }
      this.$confirm(`确认将这本图书状态变更为"${actionText}"吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await save({ id: row.id, status: status })
          this.$message.success('图书状态变更成功！')
          this.getList() // 重新获取列表
        } catch (error) {
          console.error('状态变更失败:', error)
          this.$message.error('状态变更失败，请重试')
        }
      }).catch(() => {
        this.$message.info('已取消变更')
      })
    },
    handleDelete(row) {
      this.$confirm('确定要删除这本图书吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await destroy({ id: row.id })
          this.$message.success('图书删除成功！')
          this.getList() // 重新获取列表
        } catch (error) {
          console.error('删除图书失败:', error)
          this.$message.error('删除失败，请重试')
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleCloseModal() {
      this.resetForm()
      this.isEdit = false
      this.editBookId = null
      this.showUploadModal = false
    },
    handleCloseDetailModal() {
      this.showDetailModal = false
    },
    triggerCoverUpload() {
      this.$refs.coverInput.click()
    },
    async handleCoverUpload(event) {
      const file = event.target.files[0]
      if (file) {
        if (!file.type.match(/^image\/(jpeg|jpg|png)$/)) {
          this.$message.error('请选择 JPG 或 PNG 格式的图片')
          return
        }
        if (file.size > 2 * 1024 * 1024) {
          this.$message.error('图片大小不能超过 2MB')
          return
        }
        // 预览
        const reader = new FileReader()
        reader.onload = (e) => {
          this.bookForm.cover = e.target.result
        }
        reader.readAsDataURL(file)
        // 上传
        const formData = new FormData()
        formData.append('file', file)
        try {
          const res = await uploads(formData)
          this.bookForm.cover_id = res.id
          this.$message.success('封面上传成功')
        } catch (e) {
          this.$message.error('封面上传失败')
        }
      }
    },
    async saveBook() {
      this.$refs.bookForm.validate(async(valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: this.isEdit ? '正在更新...' : '正在保存...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          try {
            const params = {
              title: this.bookForm.title,
              author: this.bookForm.author,
              isbn: this.bookForm.isbn,
              publisher: this.bookForm.publisher,
              publish_year: this.bookForm.year,
              category: this.bookForm.category,
              description: this.bookForm.description,
              cover_id: this.bookForm.cover_id
            }
            
            if (this.isEdit) {
              // 编辑模式，添加ID参数
              params.id = this.editBookId
              await save(params) // 这里可能需要调用不同的API，暂时用save
            } else {
              // 新增模式
              await save(params)
            }
            
            loading.close()
            this.$message.success(this.isEdit ? '图书更新成功！' : '图书添加成功！')
            this.showUploadModal = false
            this.resetForm()
            this.getList() // 重新获取列表
          } catch (e) {
            loading.close()
            this.$message.error((this.isEdit ? '更新' : '添加') + '失败，请重试' + e.message)
          }
        } else {
          this.$message.error('请填写必填字段')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.bookForm.resetFields()
      this.bookForm = {
        title: '',
        author: '',
        isbn: '',
        publisher: '',
        year: null,
        category: '',
        description: '',
        cover: '',
        cover_id: ''
      }
      this.isEdit = false
      this.editBookId = null
    },
    formatDate(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN')
    },
    formatTime(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
    },
    formatDateTime(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN')
    }
  }
}
</script>

<style scoped>
.library-container {
  padding: 20px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e9ecef;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
  display: flex;
  align-items: center;
  margin: 0;
}

.page-title i {
  margin-right: 10px;
  color: #3498db;
  font-size: 28px;
}

.book-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-left: 4px solid;
  text-align: center;
}

.stat-card.blue { border-left-color: #3498db; }
.stat-card.green { border-left-color: #2ecc71; }
.stat-card.orange { border-left-color: #f39c12; }
.stat-card.purple { border-left-color: #9b59b6; }

.stat-number {
  font-size: 24px;
}

.stat-label {
  font-size: 14px;
  color: #7f8c8d;
  margin-top: 5px;
}

.search-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.table-container {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.book-cover {
  width: 50px;
  height: 70px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.book-title {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
  font-size: 14px;
}

.book-author {
  font-size: 12px;
  color: #7f8c8d;
}

.time-display {
  font-size: 12px;
  color: #333;
}

.time-display-secondary {
  font-size: 11px;
  color: #666;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.action-buttons .el-button {
  margin: 0;
}

.pagination-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.form-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.section-title i {
  margin-right: 8px;
  color: #3498db;
  font-size: 18px;
}

.upload-area {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-area:hover {
  border-color: #3498db;
  background: rgba(52, 152, 219, 0.05);
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-preview {
  max-width: 120px;
  max-height: 160px;
  border-radius: 4px;
  object-fit: cover;
}

.dialog-footer {
  text-align: right;
}

/* 详情弹窗样式 */
.book-detail {
  max-height: 70vh;
  overflow-y: auto;
}

.detail-item {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
}

.detail-label {
  font-weight: 600;
  color: #2c3e50;
  min-width: 80px;
  margin-right: 10px;
  line-height: 1.5;
}

.detail-value {
  color: #374151;
  line-height: 1.5;
  flex: 1;
}

.detail-description {
  color: #374151;
  line-height: 1.6;
  background: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  border-left: 3px solid #3498db;
  margin-top: 5px;
  white-space: pre-wrap;
  word-break: break-word;
}

.cover-display {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.detail-cover {
  max-width: 200px;
  max-height: 280px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  object-fit: cover;
}

.no-cover-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 280px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  background: #f8f9fa;
}

.no-cover {
  color: #9ca3af;
  font-size: 12px;
  text-align: center;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px dashed #d1d5db;
}

/* Element UI 表格样式覆盖 */
::v-deep .el-table th {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
}

::v-deep .el-table tbody tr:hover > td {
  background-color: #f8f9fa;
}

::v-deep .el-pagination {
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .book-stats {
    grid-template-columns: 1fr 1fr;
  }
  
  .page-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .search-section .el-form {
    display: block;
  }
  
  .search-section .el-form-item {
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .book-stats {
    grid-template-columns: 1fr;
  }
  .library-container {
    padding: 10px;
  }
  .stat-number {
    font-size: 24px;
  }
}
</style>