<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- 顶部导航栏 -->
    <nav class="bg-white dark:bg-gray-800 shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex items-center">
            <h1 class="text-xl font-bold text-gray-800 dark:text-white">评价管理</h1>
          </div>
          <div class="flex items-center space-x-4">
            <button 
              @click="handleExportReport"
              class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 flex items-center space-x-2"
            >
              <DownloadIcon class="h-5 w-5" />
              <span>导出报表</span>
            </button>
            <button class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
              <SettingsIcon class="h-6 w-6" />
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <!-- 搜索和筛选区域 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div class="relative">
            <input
              v-model="searchText"
              @input="handleSearch"
              type="text"
              placeholder="搜索商品名称/用户名..."
              class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
            />
            <SearchIcon class="absolute left-3 top-2.5 h-5 w-5 text-gray-400 dark:text-gray-500" />
          </div>
          <select 
            v-model="reviewType"
            @change="handleTypeChange"
            class="border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
          >
            <option value="">所有类型</option>
            <option value="text">文字评价</option>
            <option value="image">图片评价</option>
            <option value="video">视频评价</option>
          </select>
          <select 
            v-model="reviewStatus"
            @change="handleStatusChange"
            class="border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
          >
            <option value="">所有状态</option>
            <option value="pending">待审核</option>
            <option value="approved">已通过</option>
            <option value="rejected">已拒绝</option>
          </select>
          <select 
            v-model="timeRange"
            @change="handleTimeRangeChange"
            class="border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
          >
            <option value="">所有时间</option>
            <option value="today">今天</option>
            <option value="week">本周</option>
            <option value="month">本月</option>
            <option value="quarter">本季度</option>
          </select>
        </div>
      </div>

      <!-- 评价统计卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <div class="flex items-center">
            <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900">
              <MessageSquareIcon class="h-6 w-6 text-blue-600 dark:text-blue-400" />
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-600 dark:text-gray-400">总评价数</p>
              <p class="text-2xl font-semibold text-gray-900 dark:text-white">1,234</p>
            </div>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <div class="flex items-center">
            <div class="p-3 rounded-full bg-green-100 dark:bg-green-900">
              <ImageIcon class="h-6 w-6 text-green-600 dark:text-green-400" />
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-600 dark:text-gray-400">图片评价</p>
              <p class="text-2xl font-semibold text-gray-900 dark:text-white">456</p>
            </div>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <div class="flex items-center">
            <div class="p-3 rounded-full bg-yellow-100 dark:bg-yellow-900">
              <VideoIcon class="h-6 w-6 text-yellow-600 dark:text-yellow-400" />
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-600 dark:text-gray-400">视频评价</p>
              <p class="text-2xl font-semibold text-gray-900 dark:text-white">78</p>
            </div>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <div class="flex items-center">
            <div class="p-3 rounded-full bg-purple-100 dark:bg-purple-900">
              <StarIcon class="h-6 w-6 text-purple-600 dark:text-purple-400" />
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-600 dark:text-gray-400">平均评分</p>
              <p class="text-2xl font-semibold text-gray-900 dark:text-white">4.8</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 评价分析图表 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">评分分布</h3>
          <div ref="ratingDistributionChartRef" class="h-64"></div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">评分趋势</h3>
          <div ref="ratingTrendChartRef" class="h-64"></div>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">关键词分析</h3>
        <div ref="keywordAnalysisChartRef" class="h-64"></div>
      </div>

      <!-- 评价列表 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead class="bg-gray-50 dark:bg-gray-700">
              <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">商品信息</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">用户信息</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">评价内容</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">评分</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">操作</th>
              </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
              <tr v-for="review in paginatedReviews" :key="review.id" class="hover:bg-gray-50 dark:hover:bg-gray-700">
                <td class="px-6 py-4">
                  <div class="flex items-center">
                    <img :src="review.productImage" :alt="review.productName" class="h-10 w-10 rounded object-cover" />
                    <div class="ml-4">
                      <div class="text-sm font-medium text-gray-900 dark:text-white">{{ review.productName }}</div>
                      <div class="text-sm text-gray-500 dark:text-gray-400">{{ review.productSpec }}</div>
                    </div>
                  </div>
                </td>
                <td class="px-6 py-4">
                  <div class="flex items-center">
                    <img :src="review.userAvatar" :alt="review.userName" class="h-10 w-10 rounded-full object-cover" />
                    <div class="ml-4">
                      <div class="text-sm font-medium text-gray-900 dark:text-white">{{ review.userName }}</div>
                      <div class="text-sm text-gray-500 dark:text-gray-400">{{ review.userLevel }}</div>
                    </div>
                  </div>
                </td>
                <td class="px-6 py-4">
                  <div class="text-sm text-gray-900 dark:text-white">{{ review.content }}</div>
                  <div v-if="review.images && review.images.length > 0" class="mt-2 flex space-x-2">
                    <img 
                      v-for="(image, index) in review.images" 
                      :key="index"
                      :src="image"
                      class="h-16 w-16 rounded object-cover cursor-pointer hover:opacity-75"
                      @click="handleViewImage(image)"
                    />
                  </div>
                  <div v-if="review.video" class="mt-2">
                    <video 
                      :src="review.video"
                      class="h-16 w-16 rounded object-cover cursor-pointer hover:opacity-75"
                      @click="handleViewVideo(review.video)"
                    />
                  </div>
                </td>
                <td class="px-6 py-4">
                  <div class="flex items-center">
                    <div class="flex">
                      <StarIcon 
                        v-for="star in 5" 
                        :key="star"
                        class="h-5 w-5"
                        :class="star <= review.rating ? 'text-yellow-400' : 'text-gray-300 dark:text-gray-600'"
                      />
                    </div>
                    <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">{{ review.rating }}分</span>
                  </div>
                </td>
                <td class="px-6 py-4 text-sm font-medium">
                  <button 
                    @click="handleViewReview(review)"
                    class="action-button view-button"
                  >
                    <EyeIcon class="h-4 w-4 inline-block mr-1" />
                    查看
                  </button>
                  <button 
                    v-if="review.status === 'pending'"
                    @click="handleApproveReview(review)"
                    class="action-button approve-button"
                  >
                    <CheckIcon class="h-4 w-4 inline-block mr-1" />
                    通过
                  </button>
                  <button 
                    v-if="review.status === 'pending'"
                    @click="handleRejectReview(review)"
                    class="action-button reject-button"
                  >
                    <XIcon class="h-4 w-4 inline-block mr-1" />
                    拒绝
                  </button>
                  <button 
                    @click="handleDeleteReview(review)"
                    class="action-button delete-button"
                  >
                    <Trash2Icon class="h-4 w-4 inline-block mr-1" />
                    删除
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 分页 -->
      <div class="bg-white dark:bg-gray-800 px-4 py-3 flex items-center justify-between border-t border-gray-200 dark:border-gray-700 sm:px-6 mt-4">
        <div class="flex-1 flex justify-between sm:hidden">
          <button 
            @click="handlePageChange(currentPage - 1)"
            :disabled="currentPage === 1"
            class="pagination-button"
          >
            上一页
          </button>
          <button 
            @click="handlePageChange(currentPage + 1)"
            :disabled="currentPage === totalPages"
            class="pagination-button"
          >
            下一页
          </button>
        </div>
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
          <div>
            <p class="text-sm text-gray-700 dark:text-gray-300">
              显示 <span class="font-medium">{{ (currentPage - 1) * pageSize + 1 }}</span> 到 
              <span class="font-medium">{{ Math.min(currentPage * pageSize, filteredReviews.length) }}</span> 条，共 
              <span class="font-medium">{{ filteredReviews.length }}</span> 条
            </p>
          </div>
          <div>
            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
              <button 
                @click="handlePageChange(currentPage - 1)"
                :disabled="currentPage === 1"
                class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600"
              >
                <ChevronLeftIcon class="h-5 w-5" />
              </button>
              <button 
                v-for="page in totalPages"
                :key="page"
                @click="handlePageChange(page)"
                :class="[
                  'relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium',
                  currentPage === page ? 'bg-blue-600 text-white border-blue-600' : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600'
                ]"
              >
                {{ page }}
              </button>
              <button 
                @click="handlePageChange(currentPage + 1)"
                :disabled="currentPage === totalPages"
                class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600"
              >
                <ChevronRightIcon class="h-5 w-5" />
              </button>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart, BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import { 
  SearchIcon, 
  SettingsIcon, 
  ChevronLeftIcon, 
  ChevronRightIcon,
  MessageSquareIcon,
  ImageIcon,
  VideoIcon,
  StarIcon,
  DownloadIcon,
  EyeIcon,
  CheckIcon,
  XIcon,
  Trash2Icon
} from 'lucide-vue-next'

// 注册必要的组件
echarts.use([
  CanvasRenderer,
  LineChart,
  PieChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// 默认图片
const defaultImages = {
  avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop&auto=format',
  product: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=200&h=200&fit=crop&auto=format'
}

// 图表相关
const ratingTrendChartRef = ref(null)
const ratingDistributionChartRef = ref(null)
const keywordAnalysisChartRef = ref(null)
let ratingTrendChart = null
let ratingDistributionChart = null
let keywordAnalysisChart = null

// 初始化评分趋势图表
const initRatingTrendChart = () => {
  if (!ratingTrendChartRef.value) return
  
  if (ratingTrendChart) {
    ratingTrendChart.dispose()
  }
  
  ratingTrendChart = echarts.init(ratingTrendChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      boundaryGap: false
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 5
    },
    series: [
      {
        name: '平均评分',
        type: 'line',
        data: [4.2, 4.5, 4.3, 4.6, 4.4, 4.7, 4.5],
        smooth: true,
        areaStyle: {
          opacity: 0.3
        },
        lineStyle: {
          width: 3
        },
        itemStyle: {
          color: '#4F46E5'
        }
      }
    ]
  }
  ratingTrendChart.setOption(option)
}

// 初始化评分分布图表
const initRatingDistributionChart = () => {
  if (!ratingDistributionChartRef.value) return
  
  if (ratingDistributionChart) {
    ratingDistributionChart.dispose()
  }
  
  ratingDistributionChart = echarts.init(ratingDistributionChartRef.value)
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}条 ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '评分分布',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 600, name: '5星' },
          { value: 400, name: '4星' },
          { value: 150, name: '3星' },
          { value: 50, name: '2星' },
          { value: 34, name: '1星' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        itemStyle: {
          borderRadius: 5,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}: {c}条'
        }
      }
    ]
  }
  ratingDistributionChart.setOption(option)
}

// 初始化关键词分析图表
const initKeywordAnalysisChart = () => {
  if (!keywordAnalysisChartRef.value) return
  
  if (keywordAnalysisChart) {
    keywordAnalysisChart.dispose()
  }
  
  keywordAnalysisChart = echarts.init(keywordAnalysisChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      name: '出现次数'
    },
    yAxis: {
      type: 'category',
      data: ['质量好', '性价比高', '物流快', '服务好', '包装精美', '外观漂亮', '使用方便', '功能强大'],
      axisLabel: {
        interval: 0
      }
    },
    series: [
      {
        name: '关键词',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130, 90],
        itemStyle: {
          color: '#4F46E5'
        }
      }
    ]
  }
  keywordAnalysisChart.setOption(option)
}

// 监听窗口大小变化
const handleResize = () => {
  if (ratingTrendChart) ratingTrendChart.resize()
  if (ratingDistributionChart) ratingDistributionChart.resize()
  if (keywordAnalysisChart) keywordAnalysisChart.resize()
}

// 状态管理
const isLoading = ref(false)
const searchText = ref('')
const reviewType = ref('')
const reviewStatus = ref('')
const timeRange = ref('')
const currentPage = ref(1)
const pageSize = ref(10)

// 模拟数据
const mockReviews = ref([
  {
    id: 'R1001',
    productId: 'P1001',
    productName: 'iPhone 15 Pro Max',
    productSpec: '256GB 石墨色',
    productImage: defaultImages.product,
    userId: 'U1001',
    userName: '张三',
    userLevel: '钻石会员',
    userAvatar: defaultImages.avatar,
    content: '手机很好用，拍照效果很棒，运行流畅，电池续航也不错。',
    rating: 5,
    images: [
      defaultImages.product,
      defaultImages.product
    ],
    video: null,
    type: 'image',
    status: 'approved',
    createTime: '2024-03-20 10:30:00'
  },
  {
    id: 'R1002',
    productId: 'P1002',
    productName: 'MacBook Pro 14',
    productSpec: 'M3 Pro 18GB 512GB',
    productImage: defaultImages.product,
    userId: 'U1002',
    userName: '李四',
    userLevel: '黄金会员',
    userAvatar: defaultImages.avatar,
    content: '性能很强，屏幕显示效果很好，键盘手感也不错。',
    rating: 4,
    images: [],
    video: 'https://example.com/reviews/macbook.mp4',
    type: 'video',
    status: 'pending',
    createTime: '2024-03-20 11:15:00'
  },
  {
    id: 'R1003',
    productId: 'P1003',
    productName: 'AirPods Pro 2',
    productSpec: '第二代',
    productImage: defaultImages.product,
    userId: 'U1003',
    userName: '王五',
    userLevel: '白银会员',
    userAvatar: defaultImages.avatar,
    content: '降噪效果很好，音质也不错，佩戴舒适。',
    rating: 5,
    images: [],
    video: null,
    type: 'text',
    status: 'approved',
    createTime: '2024-03-20 14:20:00'
  },
  {
    id: 'R1004',
    productId: 'P1004',
    productName: 'Apple Watch Series 9',
    productSpec: '45mm GPS',
    productImage: defaultImages.product,
    userId: 'U1004',
    userName: '赵六',
    userLevel: '普通会员',
    userAvatar: defaultImages.avatar,
    content: '功能很全，续航也不错，就是价格有点贵。',
    rating: 3,
    images: [
      defaultImages.product
    ],
    video: null,
    type: 'image',
    status: 'rejected',
    createTime: '2024-03-20 16:45:00'
  },
  {
    id: 'R1005',
    productId: 'P1005',
    productName: 'iPad Pro 12.9',
    productSpec: 'M2 256GB',
    productImage: defaultImages.product,
    userId: 'U1005',
    userName: '钱七',
    userLevel: '铂金会员',
    userAvatar: defaultImages.avatar,
    content: '屏幕很大，显示效果很好，适合办公和娱乐。',
    rating: 5,
    images: [],
    video: null,
    type: 'text',
    status: 'approved',
    createTime: '2024-03-20 18:30:00'
  }
])

// 评价统计数据
const reviewStats = ref({
  totalReviews: 1234,
  imageReviews: 456,
  videoReviews: 78,
  averageRating: 4.8
})

// 评价分布数据
const reviewDistribution = ref([
  { rating: 5, count: 600, percentage: 48 },
  { rating: 4, count: 400, percentage: 32 },
  { rating: 3, count: 150, percentage: 12 },
  { rating: 2, count: 50, percentage: 4 },
  { rating: 1, count: 34, percentage: 3 }
])

// 评价趋势数据
const reviewTrends = ref([
  { date: '2024-03-01', count: 120, rating: 4.7 },
  { date: '2024-03-02', count: 150, rating: 4.8 },
  { date: '2024-03-03', count: 180, rating: 4.9 },
  { date: '2024-03-04', count: 200, rating: 4.8 },
  { date: '2024-03-05', count: 220, rating: 4.7 },
  { date: '2024-03-06', count: 250, rating: 4.8 },
  { date: '2024-03-07', count: 280, rating: 4.9 }
])

// 计算属性
const filteredReviews = computed(() => {
  let result = [...mockReviews.value]
  
  // 搜索过滤
  if (searchText.value) {
    result = result.filter(review => 
      review.productName.includes(searchText.value) ||
      review.userName.includes(searchText.value)
    )
  }
  
  // 类型过滤
  if (reviewType.value) {
    result = result.filter(review => review.type === reviewType.value)
  }
  
  // 状态过滤
  if (reviewStatus.value) {
    result = result.filter(review => review.status === reviewStatus.value)
  }
  
  // 时间范围过滤
  if (timeRange.value) {
    const now = new Date()
    result = result.filter(review => {
      // 这里可以根据实际需求添加时间过滤逻辑
      return true
    })
  }
  
  return result
})

const paginatedReviews = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredReviews.value.slice(start, end)
})

const totalPages = computed(() => {
  return Math.ceil(filteredReviews.value.length / pageSize.value)
})

// 方法
const handleSearch = () => {
  currentPage.value = 1
}

const handleTypeChange = () => {
  currentPage.value = 1
}

const handleStatusChange = () => {
  currentPage.value = 1
}

const handleTimeRangeChange = () => {
  currentPage.value = 1
}

const handlePageChange = (page) => {
  currentPage.value = page
}

const handleViewReview = (review) => {
  console.log('查看评价:', review)
}

const handleApproveReview = (review) => {
  console.log('通过评价:', review)
}

const handleRejectReview = (review) => {
  console.log('拒绝评价:', review)
}

const handleDeleteReview = (review) => {
  console.log('删除评价:', review)
}

const handleViewImage = (image) => {
  console.log('查看图片:', image)
}

const handleViewVideo = (video) => {
  console.log('查看视频:', video)
}

const handleExportReport = () => {
  console.log('导出报表')
}

// 生命周期钩子
onMounted(() => {
  // 初始化图表
  initRatingTrendChart()
  initRatingDistributionChart()
  initKeywordAnalysisChart()
  
  // 添加窗口大小变化监听
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  // 移除窗口大小变化监听
  window.removeEventListener('resize', handleResize)
  
  // 销毁图表实例
  if (ratingTrendChart) ratingTrendChart.dispose()
  if (ratingDistributionChart) ratingDistributionChart.dispose()
  if (keywordAnalysisChart) keywordAnalysisChart.dispose()
})
</script>

<style scoped>
@media (max-width: 475px) {
  .grid {
    @apply grid-cols-1;
  }
  table {
    @apply block overflow-x-auto whitespace-nowrap;
  }
}

/* 操作按钮样式 */
.action-button {
  @apply text-sm font-medium mr-3;
}

.view-button {
  @apply text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300;
}

.approve-button {
  @apply text-green-600 dark:text-green-400 hover:text-green-900 dark:hover:text-green-300;
}

.reject-button {
  @apply text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300;
}

.delete-button {
  @apply text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300;
}

/* 分页样式 */
.pagination-button {
  @apply relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600;
}

.pagination-button-active {
  @apply bg-blue-600 text-white border-blue-600;
}

/* 加载动画 */
.loading-spinner {
  @apply animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600;
}
</style> 