<template>
  <div class="space-y-6">
    <!-- 页面头部 -->
    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-2xl font-semibold text-gray-900">数据报表</h1>
        <p class="mt-1 text-sm text-gray-500">查看平台运营数据和业务报表</p>
      </div>
      <div class="flex space-x-3">
        <button
          @click="exportReport"
          class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700"
        >
          导出报表
        </button>
      </div>
    </div>

    <!-- 时间范围选择 -->
    <div class="bg-white shadow rounded-lg">
      <div class="p-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div>
            <label for="start-date" class="block text-sm font-medium text-gray-700 mb-1">开始日期</label>
            <input
              id="start-date"
              v-model="startDate"
              type="date"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            />
          </div>
          <div>
            <label for="end-date" class="block text-sm font-medium text-gray-700 mb-1">结束日期</label>
            <input
              id="end-date"
              v-model="endDate"
              type="date"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            />
          </div>
          <div>
            <label for="report-type" class="block text-sm font-medium text-gray-700 mb-1">报表类型</label>
            <select
              id="report-type"
              v-model="reportType"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            >
              <option value="overview">综合概览</option>
              <option value="orders">订单报表</option>
              <option value="users">用户报表</option>
              <option value="finance">财务报表</option>
            </select>
          </div>
          <div class="flex items-end">
            <button
              @click="generateReport"
              class="w-full px-4 py-2 text-sm font-medium text-white bg-green-600 border border-transparent rounded-md hover:bg-green-700"
            >
              生成报表
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据概览卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
                <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
              </div>
            </div>
            <div class="ml-5 w-0 flex-1">
              <dl>
                <dt class="text-sm font-medium text-gray-500 truncate">总订单数</dt>
                <dd class="text-lg font-medium text-gray-900">{{ reportData.totalOrders.toLocaleString() }}</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"/>
                </svg>
              </div>
            </div>
            <div class="ml-5 w-0 flex-1">
              <dl>
                <dt class="text-sm font-medium text-gray-500 truncate">总收入</dt>
                <dd class="text-lg font-medium text-gray-900">¥{{ reportData.totalRevenue.toLocaleString() }}</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center">
                <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
                </svg>
              </div>
            </div>
            <div class="ml-5 w-0 flex-1">
              <dl>
                <dt class="text-sm font-medium text-gray-500 truncate">活跃用户</dt>
                <dd class="text-lg font-medium text-gray-900">{{ reportData.activeUsers.toLocaleString() }}</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center">
                <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                </svg>
              </div>
            </div>
            <div class="ml-5 w-0 flex-1">
              <dl>
                <dt class="text-sm font-medium text-gray-500 truncate">完成率</dt>
                <dd class="text-lg font-medium text-gray-900">{{ reportData.completionRate }}%</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- 订单趋势图 -->
      <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
          <h3 class="text-lg font-medium text-gray-900">订单趋势</h3>
        </div>
        <div class="p-6">
          <div class="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
            <div class="text-center">
              <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
              </svg>
              <p class="mt-2 text-sm text-gray-500">订单趋势图表</p>
              <p class="text-xs text-gray-400">可集成 Chart.js 或其他图表库</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 收入分析图 -->
      <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
          <h3 class="text-lg font-medium text-gray-900">收入分析</h3>
        </div>
        <div class="p-6">
          <div class="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
            <div class="text-center">
              <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"/>
              </svg>
              <p class="mt-2 text-sm text-gray-500">收入分析图表</p>
              <p class="text-xs text-gray-400">可集成 Chart.js 或其他图表库</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 详细报表数据 -->
    <div class="bg-white shadow rounded-lg overflow-hidden">
      <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">详细数据</h3>
      </div>
      
      <!-- 订单报表 -->
      <div v-if="reportType === 'orders'" class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">新增订单</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">完成订单</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">取消订单</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">完成率</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="row in orderReportData" :key="row.date" class="hover:bg-gray-50">
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ row.date }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ row.newOrders }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">{{ row.completedOrders }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">{{ row.cancelledOrders }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ row.completionRate }}%</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 用户报表 -->
      <div v-else-if="reportType === 'users'" class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">新增用户</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">活跃用户</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">留存率</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="row in userReportData" :key="row.date" class="hover:bg-gray-50">
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ row.date }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600">{{ row.newUsers }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">{{ row.activeUsers }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ row.retentionRate }}%</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 财务报表 -->
      <div v-else-if="reportType === 'finance'" class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">收入</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">支出</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">净利润</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="row in financeReportData" :key="row.date" class="hover:bg-gray-50">
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ row.date }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">¥{{ row.revenue.toLocaleString() }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">¥{{ row.expenses.toLocaleString() }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium" :class="row.profit >= 0 ? 'text-green-600' : 'text-red-600'">
                ¥{{ row.profit.toLocaleString() }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 综合概览 -->
      <div v-else class="p-6">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div class="bg-gray-50 p-4 rounded-lg">
            <h4 class="text-sm font-medium text-gray-900 mb-2">订单统计</h4>
            <div class="space-y-2">
              <div class="flex justify-between text-sm">
                <span class="text-gray-600">总订单数:</span>
                <span class="font-medium">{{ reportData.totalOrders }}</span>
              </div>
              <div class="flex justify-between text-sm">
                <span class="text-gray-600">已完成:</span>
                <span class="font-medium text-green-600">{{ reportData.completedOrders }}</span>
              </div>
              <div class="flex justify-between text-sm">
                <span class="text-gray-600">进行中:</span>
                <span class="font-medium text-blue-600">{{ reportData.pendingOrders }}</span>
              </div>
            </div>
          </div>

          <div class="bg-gray-50 p-4 rounded-lg">
            <h4 class="text-sm font-medium text-gray-900 mb-2">用户统计</h4>
            <div class="space-y-2">
              <div class="flex justify-between text-sm">
                <span class="text-gray-600">总用户数:</span>
                <span class="font-medium">{{ reportData.totalUsers }}</span>
              </div>
              <div class="flex justify-between text-sm">
                <span class="text-gray-600">活跃用户:</span>
                <span class="font-medium text-green-600">{{ reportData.activeUsers }}</span>
              </div>
              <div class="flex justify-between text-sm">
                <span class="text-gray-600">新增用户:</span>
                <span class="font-medium text-blue-600">{{ reportData.newUsers }}</span>
              </div>
            </div>
          </div>

          <div class="bg-gray-50 p-4 rounded-lg">
            <h4 class="text-sm font-medium text-gray-900 mb-2">财务统计</h4>
            <div class="space-y-2">
              <div class="flex justify-between text-sm">
                <span class="text-gray-600">总收入:</span>
                <span class="font-medium text-green-600">¥{{ reportData.totalRevenue.toLocaleString() }}</span>
              </div>
              <div class="flex justify-between text-sm">
                <span class="text-gray-600">总支出:</span>
                <span class="font-medium text-red-600">¥{{ reportData.totalExpenses.toLocaleString() }}</span>
              </div>
              <div class="flex justify-between text-sm">
                <span class="text-gray-600">净利润:</span>
                <span class="font-medium" :class="reportData.netProfit >= 0 ? 'text-green-600' : 'text-red-600'">
                  ¥{{ reportData.netProfit.toLocaleString() }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="!reportData.totalOrders" class="text-center py-12">
        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
        </svg>
        <h3 class="mt-2 text-sm font-medium text-gray-900">暂无报表数据</h3>
        <p class="mt-1 text-sm text-gray-500">请选择日期范围并生成报表</p>
      </div>
    </div>
  </div>
</template>

<script setup>
// 页面元数据 - 确保使用默认布局
definePageMeta({
  middleware: 'auth',
  layout: 'default'  // 明确指定使用默认布局
})

// 页面标题
useHead({
  title: '数据报表 - 翻译管理系统'
})

// 日期范围
const startDate = ref('')
const endDate = ref('')
const reportType = ref('overview')

// 报表数据
const reportData = ref({
  totalOrders: 0,
  totalRevenue: 0,
  activeUsers: 0,
  completionRate: 0,
  completedOrders: 0,
  pendingOrders: 0,
  totalUsers: 0,
  newUsers: 0,
  totalExpenses: 0,
  netProfit: 0
})

// 订单报表数据
const orderReportData = ref([])

// 用户报表数据
const userReportData = ref([])

// 财务报表数据
const financeReportData = ref([])

// 生成报表
const generateReport = async () => {
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 模拟报表数据
    reportData.value = {
      totalOrders: 1250,
      totalRevenue: 850000,
      activeUsers: 320,
      completionRate: 92.5,
      completedOrders: 1156,
      pendingOrders: 94,
      totalUsers: 450,
      newUsers: 28,
      totalExpenses: 320000,
      netProfit: 530000
    }

    // 根据报表类型生成相应数据
    if (reportType.value === 'orders') {
      orderReportData.value = [
        { date: '2024-01-15', newOrders: 45, completedOrders: 42, cancelledOrders: 2, completionRate: 93.3 },
        { date: '2024-01-14', newOrders: 38, completedOrders: 35, cancelledOrders: 1, completionRate: 92.1 },
        { date: '2024-01-13', newOrders: 52, completedOrders: 48, cancelledOrders: 3, completionRate: 92.3 },
        { date: '2024-01-12', newOrders: 41, completedOrders: 39, cancelledOrders: 1, completionRate: 95.1 },
        { date: '2024-01-11', newOrders: 47, completedOrders: 44, cancelledOrders: 2, completionRate: 93.6 }
      ]
    } else if (reportType.value === 'users') {
      userReportData.value = [
        { date: '2024-01-15', newUsers: 12, activeUsers: 89, retentionRate: 85.2 },
        { date: '2024-01-14', newUsers: 8, activeUsers: 92, retentionRate: 87.1 },
        { date: '2024-01-13', newUsers: 15, activeUsers: 95, retentionRate: 84.6 },
        { date: '2024-01-12', newUsers: 10, activeUsers: 88, retentionRate: 86.3 },
        { date: '2024-01-11', newUsers: 14, activeUsers: 91, retentionRate: 85.8 }
      ]
    } else if (reportType.value === 'finance') {
      financeReportData.value = [
        { date: '2024-01-15', revenue: 45000, expenses: 18000, profit: 27000 },
        { date: '2024-01-14', revenue: 38000, expenses: 15000, profit: 23000 },
        { date: '2024-01-13', revenue: 52000, expenses: 21000, profit: 31000 },
        { date: '2024-01-12', revenue: 41000, expenses: 16000, profit: 25000 },
        { date: '2024-01-11', revenue: 47000, expenses: 19000, profit: 28000 }
      ]
    }
    
    alert('报表生成成功！')
  } catch (error) {
    alert('生成报表失败，请重试')
  }
}

// 导出报表
const exportReport = () => {
  // 这里可以实现导出功能
  alert('导出功能开发中...')
}

// 初始化日期
onMounted(() => {
  const today = new Date()
  const lastWeek = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000)
  
  endDate.value = today.toISOString().split('T')[0]
  startDate.value = lastWeek.toISOString().split('T')[0]
})
</script> 