<template>
  <view class="librarian-workspace">
    <!-- 图书管理员信息头部 -->
    <view class="librarian-header">
      <view class="librarian-info">
        <image class="avatar" :src="librarianInfo.avatar || '/static/default-avatar.png'" />
        <view class="info">
          <text class="name">{{ librarianInfo.name }}</text>
          <text class="department">{{ librarianInfo.department }}</text>
          <text class="position">{{ librarianInfo.position }}</text>
        </view>
      </view>
      <view class="work-status" :class="librarianInfo.status">
        <text class="status-text">{{ getStatusText(librarianInfo.status) }}</text>
      </view>
    </view>

    <!-- 图书馆实时状态 -->
    <view class="library-status">
      <view class="section-title">图书馆状态</view>
      <view class="status-grid">
        <view class="status-card">
          <text class="status-value">{{ libraryData.currentReaders }}</text>
          <text class="status-label">在馆人数</text>
        </view>
        <view class="status-card">
          <text class="status-value">{{ libraryData.availableSeats }}</text>
          <text class="status-label">可用座位</text>
        </view>
        <view class="status-card">
          <text class="status-value">{{ libraryData.todayBorrows }}</text>
          <text class="status-label">今日借阅</text>
        </view>
        <view class="status-card">
          <text class="status-value">{{ libraryData.todayReturns }}</text>
          <text class="status-label">今日归还</text>
        </view>
      </view>
    </view>

    <!-- 快速借还书 -->
    <view class="quick-operations">
      <view class="section-title">快速操作</view>
      <view class="operation-buttons">
        <button class="operation-btn borrow" @click="startQuickBorrow">
          <image class="btn-icon" src="/static/icons/borrow.png" />
          <text class="btn-text">快速借书</text>
        </button>
        
        <button class="operation-btn return" @click="startQuickReturn">
          <image class="btn-icon" src="/static/icons/return.png" />
          <text class="btn-text">快速还书</text>
        </button>
        
        <button class="operation-btn scan" @click="startBookScan">
          <image class="btn-icon" src="/static/icons/scan.png" />
          <text class="btn-text">扫码操作</text>
        </button>
        
        <button class="operation-btn search" @click="goToBookSearch">
          <image class="btn-icon" src="/static/icons/search.png" />
          <text class="btn-text">图书检索</text>
        </button>
      </view>
    </view>

    <!-- 待处理事务 -->
    <view class="pending-tasks">
      <view class="section-header">
        <text class="section-title">待处理事务</text>
        <text class="task-count">{{ pendingTasks.length }}项</text>
      </view>
      
      <view class="task-list">
        <view class="task-item" v-for="task in pendingTasks" :key="task.id" :class="task.priority">
          <view class="task-icon" :class="task.type">
            <image :src="getTaskIcon(task.type)" />
          </view>
          <view class="task-content">
            <text class="task-title">{{ task.title }}</text>
            <text class="task-description">{{ task.description }}</text>
            <text class="task-time">{{ formatTime(task.createTime) }}</text>
          </view>
          <button class="task-action" @click="handleTask(task)">
            {{ getTaskActionText(task.type) }}
          </button>
        </view>
      </view>
    </view>

    <!-- 借阅统计图表 -->
    <view class="borrowing-stats">
      <view class="section-title">借阅统计</view>
      <view class="stats-tabs">
        <text class="tab-item" 
              :class="{ active: activeTab === 'today' }"
              @click="switchTab('today')">今日</text>
        <text class="tab-item" 
              :class="{ active: activeTab === 'week' }"
              @click="switchTab('week')">本周</text>
        <text class="tab-item" 
              :class="{ active: activeTab === 'month' }"
              @click="switchTab('month')">本月</text>
      </view>
      
      <view class="chart-container">
        <view class="chart-item" v-for="item in chartData" :key="item.label">
          <view class="chart-bar">
            <view class="bar-fill" :style="{ height: item.percentage + '%' }"></view>
          </view>
          <text class="chart-label">{{ item.label }}</text>
          <text class="chart-value">{{ item.value }}</text>
        </view>
      </view>
    </view>

    <!-- 热门图书 -->
    <view class="popular-books">
      <view class="section-header">
        <text class="section-title">热门图书</text>
        <text class="view-more" @click="goToBookRanking">查看更多</text>
      </view>
      
      <scroll-view scroll-x="true" class="books-scroll">
        <view class="book-item" v-for="book in popularBooks" :key="book.id">
          <image class="book-cover" :src="book.cover || '/static/default-book.png'" />
          <view class="book-info">
            <text class="book-title">{{ book.title }}</text>
            <text class="book-author">{{ book.author }}</text>
            <view class="book-stats">
              <view class="stat-item">
                <text class="stat-label">借阅</text>
                <text class="stat-value">{{ book.borrowCount }}</text>
              </view>
              <view class="stat-item">
                <text class="stat-label">库存</text>
                <text class="stat-value">{{ book.available }}/{{ book.total }}</text>
              </view>
            </view>
          </view>
          <button class="book-action" @click="viewBookDetails(book)">详情</button>
        </view>
      </scroll-view>
    </view>

    <!-- 最近活动 -->
    <view class="recent-activities">
      <view class="section-title">最近活动</view>
      
      <view class="activity-list">
        <view class="activity-item" v-for="activity in recentActivities" :key="activity.id">
          <view class="activity-time">{{ formatActivityTime(activity.time) }}</view>
          <view class="activity-content">
            <view class="activity-header">
              <text class="user-info">{{ activity.userName }} ({{ activity.userType }})</text>
              <view class="activity-type" :class="activity.type">
                {{ getActivityTypeText(activity.type) }}
              </view>
            </view>
            <text class="book-title">《{{ activity.bookTitle }}》</text>
            <view class="activity-details" v-if="activity.details">
              <text class="detail-text">{{ activity.details }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 管理功能菜单 -->
    <view class="management-functions">
      <view class="section-title">管理功能</view>
      <view class="function-grid">
        <view class="function-item" @click="goToBookCatalog">
          <image class="function-icon" src="/static/icons/catalog.png" />
          <text class="function-text">图书目录</text>
        </view>
        
        <view class="function-item" @click="goToReaderManagement">
          <image class="function-icon" src="/static/icons/readers.png" />
          <text class="function-text">读者管理</text>
        </view>
        
        <view class="function-item" @click="goToOverdueManagement">
          <image class="function-icon" src="/static/icons/overdue.png" />
          <text class="function-text">逾期管理</text>
          <view class="function-badge" v-if="overdueCount > 0">
            {{ overdueCount }}
          </view>
        </view>
        
        <view class="function-item" @click="goToReservationManagement">
          <image class="function-icon" src="/static/icons/reservation.png" />
          <text class="function-text">预约管理</text>
          <view class="function-badge" v-if="reservationCount > 0">
            {{ reservationCount }}
          </view>
        </view>
        
        <view class="function-item" @click="goToInventoryManagement">
          <image class="function-icon" src="/static/icons/inventory.png" />
          <text class="function-text">库存管理</text>
        </view>
        
        <view class="function-item" @click="goToAccessControl">
          <image class="function-icon" src="/static/icons/access.png" />
          <text class="function-text">门禁管理</text>
        </view>
        
        <view class="function-item" @click="goToDataReports">
          <image class="function-icon" src="/static/icons/reports.png" />
          <text class="function-text">数据报表</text>
        </view>
        
        <view class="function-item" @click="goToSystemSettings">
          <image class="function-icon" src="/static/icons/settings.png" />
          <text class="function-text">系统设置</text>
        </view>
      </view>
    </view>

    <!-- 座位管理 -->
    <view class="seat-management">
      <view class="section-header">
        <text class="section-title">座位管理</text>
        <button class="seat-overview-btn" @click="goToSeatOverview">
          座位总览
        </button>
      </view>
      
      <view class="floor-tabs">
        <text class="floor-tab" 
              v-for="floor in floors" 
              :key="floor.id"
              :class="{ active: activeFloor === floor.id }"
              @click="switchFloor(floor.id)">
          {{ floor.name }}
        </text>
      </view>
      
      <view class="seat-stats">
        <view class="seat-stat-item">
          <text class="stat-number">{{ currentFloorData.total }}</text>
          <text class="stat-label">总座位</text>
        </view>
        <view class="seat-stat-item">
          <text class="stat-number">{{ currentFloorData.occupied }}</text>
          <text class="stat-label">已占用</text>
        </view>
        <view class="seat-stat-item">
          <text class="stat-number">{{ currentFloorData.available }}</text>
          <text class="stat-label">可用</text>
        </view>
        <view class="seat-stat-item">
          <text class="stat-number">{{ currentFloorData.reserved }}</text>
          <text class="stat-label">已预约</text>
        </view>
      </view>
    </view>

    <!-- 系统通知 -->
    <view class="system-notifications" v-if="notifications.length > 0">
      <view class="section-title">系统通知</view>
      <view class="notification-list">
        <view class="notification-item" 
              v-for="notification in notifications" 
              :key="notification.id"
              :class="notification.level">
          <view class="notification-icon">
            <image :src="getNotificationIcon(notification.level)" />
          </view>
          <view class="notification-content">
            <text class="notification-title">{{ notification.title }}</text>
            <text class="notification-message">{{ notification.message }}</text>
          </view>
          <text class="notification-time">{{ formatTime(notification.time) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      librarianInfo: {
        name: '陈老师',
        department: '图书馆',
        position: '图书管理员',
        status: 'working',
        avatar: ''
      },
      libraryData: {
        currentReaders: 342,
        availableSeats: 158,
        todayBorrows: 67,
        todayReturns: 52
      },
      pendingTasks: [
        {
          id: 1,
          type: 'overdue',
          title: '逾期图书提醒',
          description: '张小明《数据结构》逾期3天',
          priority: 'high',
          createTime: new Date(Date.now() - 3600000)
        },
        {
          id: 2,
          type: 'reservation',
          title: '预约到书通知',
          description: '李小红预约的《算法导论》已到书',
          priority: 'normal',
          createTime: new Date(Date.now() - 7200000)
        }
      ],
      activeTab: 'today',
      chartData: [
        { label: '借阅', value: 67, percentage: 80 },
        { label: '归还', value: 52, percentage: 62 },
        { label: '续借', value: 23, percentage: 28 },
        { label: '预约', value: 15, percentage: 18 }
      ],
      popularBooks: [
        {
          id: 1,
          title: '数据结构与算法分析',
          author: 'Mark Allen Weiss',
          cover: '',
          borrowCount: 45,
          available: 3,
          total: 10
        },
        {
          id: 2,
          title: '深入理解计算机系统',
          author: 'Randal E. Bryant',
          cover: '',
          borrowCount: 38,
          available: 1,
          total: 8
        }
      ],
      recentActivities: [
        {
          id: 1,
          userName: '张小明',
          userType: '学生',
          type: 'borrow',
          bookTitle: '算法导论',
          time: new Date(Date.now() - 1800000),
          details: '借期30天'
        },
        {
          id: 2,
          userName: '李小红',
          userType: '教师',
          type: 'return',
          bookTitle: '软件工程',
          time: new Date(Date.now() - 3600000),
          details: '准时归还'
        }
      ],
      overdueCount: 15,
      reservationCount: 8,
      floors: [
        { id: 1, name: '1F' },
        { id: 2, name: '2F' },
        { id: 3, name: '3F' }
      ],
      activeFloor: 1,
      currentFloorData: {
        total: 200,
        occupied: 142,
        available: 58,
        reserved: 15
      },
      notifications: [
        {
          id: 1,
          level: 'warning',
          title: '系统维护通知',
          message: '今晚23:00-01:00系统维护，请提前处理相关业务',
          time: new Date(Date.now() - 1800000)
        }
      ]
    }
  },
  onLoad() {
    this.loadLibrarianData()
  },
  onPullDownRefresh() {
    this.refreshData()
  },
  methods: {
    loadLibrarianData() {
      this.loadLibraryStatus()
      this.loadPendingTasks()
      this.loadBorrowingStats()
      this.loadPopularBooks()
      this.loadRecentActivities()
    },
    refreshData() {
      Promise.all([
        this.loadLibrarianData()
      ]).then(() => {
        uni.stopPullDownRefresh()
      })
    },
    loadLibraryStatus() {
      uni.request({
        url: '/api/v1/librarian/library-status',
        success: (res) => {
          this.libraryData = res.data
        }
      })
    },
    loadPendingTasks() {
      uni.request({
        url: '/api/v1/librarian/pending-tasks',
        success: (res) => {
          this.pendingTasks = res.data
        }
      })
    },
    loadBorrowingStats() {
      uni.request({
        url: `/api/v1/librarian/borrowing-stats?period=${this.activeTab}`,
        success: (res) => {
          this.chartData = res.data
        }
      })
    },
    loadPopularBooks() {
      uni.request({
        url: '/api/v1/librarian/popular-books',
        success: (res) => {
          this.popularBooks = res.data
        }
      })
    },
    loadRecentActivities() {
      uni.request({
        url: '/api/v1/librarian/recent-activities',
        success: (res) => {
          this.recentActivities = res.data
        }
      })
    },
    getStatusText(status) {
      const statusMap = {
        working: '工作中',
        break: '休息中',
        off: '下班'
      }
      return statusMap[status] || '未知'
    },
    // 快速操作
    startQuickBorrow() {
      uni.navigateTo({
        url: '/pages/mall/nfc/librarian/quick-borrow'
      })
    },
    startQuickReturn() {
      uni.navigateTo({
        url: '/pages/mall/nfc/librarian/quick-return'
      })
    },
    startBookScan() {
      uni.scanCode({
        success: (res) => {
          this.handleScannedCode(res.result)
        },
        fail: () => {
          uni.showToast({
            title: '扫码失败',
            icon: 'none'
          })
        }
      })
    },
    handleScannedCode(code) {
      // 处理扫码结果
      uni.navigateTo({
        url: `/pages/mall/nfc/librarian/book-operation?code=${code}`
      })
    },
    goToBookSearch() {
      uni.navigateTo({
        url: '/pages/mall/nfc/librarian/book-search'
      })
    },
    // 任务处理
    handleTask(task) {
      switch (task.type) {
        case 'overdue':
          this.handleOverdueTask(task)
          break
        case 'reservation':
          this.handleReservationTask(task)
          break
        default:
          break
      }
    },
    handleOverdueTask(task) {
      uni.navigateTo({
        url: `/pages/mall/nfc/librarian/overdue-detail?taskId=${task.id}`
      })
    },
    handleReservationTask(task) {
      uni.navigateTo({
        url: `/pages/mall/nfc/librarian/reservation-detail?taskId=${task.id}`
      })
    },
    getTaskIcon(type) {
      const icons = {
        overdue: '/static/icons/overdue-task.png',
        reservation: '/static/icons/reservation-task.png',
        maintenance: '/static/icons/maintenance-task.png'
      }
      return icons[type] || icons.overdue
    },
    getTaskActionText(type) {
      const actions = {
        overdue: '处理',
        reservation: '通知',
        maintenance: '维护'
      }
      return actions[type] || '处理'
    },
    // 统计图表
    switchTab(tab) {
      this.activeTab = tab
      this.loadBorrowingStats()
    },
    // 热门图书
    viewBookDetails(book) {
      uni.navigateTo({
        url: `/pages/mall/nfc/librarian/book-details?bookId=${book.id}`
      })
    },
    goToBookRanking() {
      uni.navigateTo({
        url: '/pages/mall/nfc/librarian/book-ranking'
      })
    },
    // 活动记录
    getActivityTypeText(type) {
      const typeMap = {
        borrow: '借阅',
        return: '归还',
        renew: '续借',
        reserve: '预约'
      }
      return typeMap[type] || '未知'
    },
    // 管理功能导航
    goToBookCatalog() {
      uni.navigateTo({ url: '/pages/mall/nfc/librarian/book-catalog' })
    },
    goToReaderManagement() {
      uni.navigateTo({ url: '/pages/mall/nfc/librarian/reader-management' })
    },
    goToOverdueManagement() {
      uni.navigateTo({ url: '/pages/mall/nfc/librarian/overdue-management' })
    },
    goToReservationManagement() {
      uni.navigateTo({ url: '/pages/mall/nfc/librarian/reservation-management' })
    },
    goToInventoryManagement() {
      uni.navigateTo({ url: '/pages/mall/nfc/librarian/inventory-management' })
    },
    goToAccessControl() {
      uni.navigateTo({ url: '/pages/mall/nfc/librarian/access-control' })
    },
    goToDataReports() {
      uni.navigateTo({ url: '/pages/mall/nfc/librarian/data-reports' })
    },
    goToSystemSettings() {
      uni.navigateTo({ url: '/pages/mall/nfc/librarian/system-settings' })
    },
    // 座位管理
    switchFloor(floorId) {
      this.activeFloor = floorId
      this.loadFloorData(floorId)
    },
    loadFloorData(floorId) {
      uni.request({
        url: `/api/v1/librarian/floor-data?floorId=${floorId}`,
        success: (res) => {
          this.currentFloorData = res.data
        }
      })
    },
    goToSeatOverview() {
      uni.navigateTo({
        url: '/pages/mall/nfc/librarian/seat-overview'
      })
    },
    // 通知处理
    getNotificationIcon(level) {
      const icons = {
        info: '/static/icons/info-notification.png',
        warning: '/static/icons/warning-notification.png',
        error: '/static/icons/error-notification.png'
      }
      return icons[level] || icons.info
    },
    // 时间格式化
    formatTime(time) {
      const now = new Date()
      const diff = now - time
      const minutes = Math.floor(diff / 60000)
      
      if (minutes < 1) return '刚刚'
      if (minutes < 60) return `${minutes}分钟前`
      
      const hours = Math.floor(minutes / 60)
      if (hours < 24) return `${hours}小时前`
      
      return time.toLocaleDateString()
    },
    formatActivityTime(time) {
      return time.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit'
      })
    }
  }
}
</script>

<style>
.librarian-workspace {
  padding: 20rpx;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.librarian-header {
  background: linear-gradient(135deg, #6f42c1 0%, #563d7c 100%);
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.librarian-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-right: 20rpx;
}

.info {
  display: flex;
  flex-direction: column;
}

.name {
  color: white;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.department, .position {
  color: rgba(255, 255, 255, 0.8);
  font-size: 24rpx;
  margin-bottom: 4rpx;
}

.work-status {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12rpx;
  padding: 16rpx;
}

.work-status.working {
  background: rgba(40, 167, 69, 0.2);
}

.status-text {
  color: white;
  font-size: 24rpx;
  font-weight: bold;
}

.library-status, .quick-operations, .pending-tasks, .borrowing-stats,
.popular-books, .recent-activities, .management-functions, .seat-management,
.system-notifications {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.status-card {
  text-align: center;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
}

.status-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #6f42c1;
  margin-bottom: 8rpx;
  display: block;
}

.status-label {
  font-size: 24rpx;
  color: #666;
}

.operation-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.operation-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 20rpx;
  border: 2rpx solid;
  border-radius: 12rpx;
  background: none;
  transition: all 0.3s ease;
}

.operation-btn.borrow {
  border-color: #28a745;
  background: #f8fff8;
}

.operation-btn.return {
  border-color: #17a2b8;
  background: #f0f8ff;
}

.operation-btn.scan {
  border-color: #ffc107;
  background: #fffbf0;
}

.operation-btn.search {
  border-color: #6f42c1;
  background: #f8f7ff;
}

.btn-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 16rpx;
}

.btn-text {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

.task-count {
  font-size: 24rpx;
  color: #666;
  background: #f8f9fa;
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.task-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 12rpx;
  border-left: 6rpx solid;
}

.task-item.high {
  border-left-color: #dc3545;
  background: #fff5f5;
}

.task-item.normal {
  border-left-color: #28a745;
  background: #f8fff8;
}

.task-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-icon image {
  width: 24rpx;
  height: 24rpx;
}

.task-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.task-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.task-description {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.task-time {
  font-size: 20rpx;
  color: #999;
}

.task-action {
  background: #6f42c1;
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 12rpx 20rpx;
  font-size: 24rpx;
}

.stats-tabs {
  display: flex;
  margin-bottom: 30rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 8rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 16rpx;
  font-size: 24rpx;
  color: #666;
  border-radius: 8rpx;
  cursor: pointer;
}

.tab-item.active {
  background: #6f42c1;
  color: white;
}

.chart-container {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.chart-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chart-bar {
  width: 60rpx;
  height: 150rpx;
  background: #f0f0f0;
  border-radius: 8rpx;
  overflow: hidden;
  margin-bottom: 16rpx;
  position: relative;
}

.bar-fill {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: linear-gradient(to top, #6f42c1, #8a63d2);
  border-radius: 8rpx;
  transition: height 0.3s ease;
}

.chart-label {
  font-size: 20rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.chart-value {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
}

.view-more {
  font-size: 24rpx;
  color: #6f42c1;
}

.books-scroll {
  white-space: nowrap;
}

.book-item {
  display: inline-block;
  width: 280rpx;
  margin-right: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
  padding: 20rpx;
}

.book-cover {
  width: 100%;
  height: 200rpx;
  border-radius: 8rpx;
  margin-bottom: 16rpx;
}

.book-info {
  margin-bottom: 16rpx;
}

.book-title {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 8rpx;
  display: block;
}

.book-author {
  font-size: 20rpx;
  color: #666;
  margin-bottom: 16rpx;
  display: block;
}

.book-stats {
  display: flex;
  justify-content: space-between;
}

.stat-item {
  text-align: center;
}

.stat-label {
  font-size: 18rpx;
  color: #999;
  margin-bottom: 4rpx;
  display: block;
}

.stat-value {
  font-size: 20rpx;
  color: #333;
  font-weight: bold;
}

.book-action {
  background: #6f42c1;
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 12rpx;
  font-size: 20rpx;
  width: 100%;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
}

.activity-time {
  font-size: 20rpx;
  color: #999;
  min-width: 100rpx;
  margin-right: 20rpx;
}

.activity-content {
  flex: 1;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.user-info {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
}

.activity-type {
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  font-size: 18rpx;
}

.activity-type.borrow {
  background: #d4edda;
  color: #155724;
}

.activity-type.return {
  background: #d1ecf1;
  color: #0c5460;
}

.book-title {
  font-size: 22rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.activity-details {
  font-size: 20rpx;
  color: #999;
}

.function-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.function-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 20rpx;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.function-item:hover {
  border-color: #6f42c1;
  background: #f8f7ff;
}

.function-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 16rpx;
}

.function-text {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

.function-badge {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  background: #dc3545;
  color: white;
  font-size: 18rpx;
  padding: 4rpx 8rpx;
  border-radius: 12rpx;
  min-width: 24rpx;
  text-align: center;
}

.seat-overview-btn {
  background: #6f42c1;
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 12rpx 20rpx;
  font-size: 24rpx;
}

.floor-tabs {
  display: flex;
  margin-bottom: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 8rpx;
}

.floor-tab {
  flex: 1;
  text-align: center;
  padding: 16rpx;
  font-size: 24rpx;
  color: #666;
  border-radius: 8rpx;
  cursor: pointer;
}

.floor-tab.active {
  background: #6f42c1;
  color: white;
}

.seat-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.seat-stat-item {
  text-align: center;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
}

.stat-number {
  font-size: 36rpx;
  font-weight: bold;
  color: #6f42c1;
  margin-bottom: 8rpx;
  display: block;
}

.notification-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.notification-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 12rpx;
  border-left: 6rpx solid;
}

.notification-item.info {
  border-left-color: #17a2b8;
  background: #f0f8ff;
}

.notification-item.warning {
  border-left-color: #ffc107;
  background: #fffbf0;
}

.notification-item.error {
  border-left-color: #dc3545;
  background: #fff5f5;
}

.notification-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-icon image {
  width: 24rpx;
  height: 24rpx;
}

.notification-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.notification-title {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.notification-message {
  font-size: 22rpx;
  color: #666;
}

.notification-time {
  font-size: 20rpx;
  color: #999;
  margin-left: 20rpx;
}
</style>
