<template>
  <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
    <!-- 顶部导航 -->
    <div class="bg-white dark:bg-gray-800 shadow">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <div class="flex justify-between items-center">
          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">报表管理</h1>
          <div class="flex space-x-4">
            <button @click="showGenerateReportModal = true" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
              生成报表
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <!-- 报表统计卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
        <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">总报表数</h3>
          <p class="mt-2 text-3xl font-bold text-blue-600 dark:text-blue-400">{{ totalReports }}</p>
        </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">今日生成</h3>
          <p class="mt-2 text-3xl font-bold text-green-600 dark:text-green-400">{{ todayReports }}</p>
        </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">待审核</h3>
          <p class="mt-2 text-3xl font-bold text-yellow-600 dark:text-yellow-400">{{ pendingReports }}</p>
        </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">已归档</h3>
          <p class="mt-2 text-3xl font-bold text-gray-600 dark:text-gray-400">{{ archivedReports }}</p>
        </div>
      </div>

      <!-- 搜索和筛选 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">报表类型</label>
            <select v-model="filters.type" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <option value="">全部</option>
              <option v-for="type in reportTypes" :key="type.value" :value="type.value">{{ type.label }}</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">报表状态</label>
            <select v-model="filters.status" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <option value="">全部</option>
              <option v-for="status in statusTypes" :key="status.value" :value="status.value">{{ status.label }}</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">时间范围</label>
            <select v-model="filters.timeRange" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
              <option value="">全部</option>
              <option v-for="range in timeRanges" :key="range.value" :value="range.value">{{ range.label }}</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">搜索</label>
            <input type="text" v-model="filters.search" placeholder="报表名称/编号" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
          </div>
        </div>
      </div>

      <!-- 报表列表 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
        <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>
              <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="report in filteredReports" :key="report.id">
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ report.number }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ report.name }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ report.type }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ formatDate(report.createdAt) }}</td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span :class="getStatusClass(report.status)" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full">
                  {{ report.status }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                <button @click="viewReport(report)" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">查看</button>
                <button @click="exportReport(report)" class="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300 mr-3">导出</button>
                <button @click="deleteReport(report)" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 生成报表模态框 -->
    <div v-if="showGenerateReportModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full p-6">
        <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">生成报表</h2>
        <form @submit.prevent="generateReport">
          <div class="grid grid-cols-2 gap-4 mb-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">报表类型</label>
              <select v-model="reportForm.type" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                <option v-for="type in reportTypes" :key="type.value" :value="type.value">{{ type.label }}</option>
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">报表名称</label>
              <input type="text" v-model="reportForm.name" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">开始日期</label>
              <input type="date" v-model="reportForm.startDate" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">结束日期</label>
              <input type="date" v-model="reportForm.endDate" required class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">报表说明</label>
            <textarea v-model="reportForm.description" rows="4" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"></textarea>
          </div>
          <div class="flex justify-end space-x-3">
            <button type="button" @click="showGenerateReportModal = false" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
              取消
            </button>
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
              生成
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 报表类型和状态选项
const reportTypes = [
  { value: 'sales', label: '销售报表' },
  { value: 'inventory', label: '库存报表' },
  { value: 'financial', label: '财务报表' },
  { value: 'hr', label: '人事报表' }
]

const statusTypes = [
  { value: 'pending', label: '待审核' },
  { value: 'approved', label: '已审核' },
  { value: 'archived', label: '已归档' }
]

const timeRanges = [
  { value: 'today', label: '今日' },
  { value: 'week', label: '本周' },
  { value: 'month', label: '本月' },
  { value: 'year', label: '本年' }
]

// 筛选条件
const filters = ref({
  type: '',
  status: '',
  timeRange: '',
  search: ''
})

// 报表列表数据
const reports = ref([
  {
    id: 1,
    number: 'RPT-2024-001',
    name: '2024年第一季度销售报表',
    type: 'sales',
    createdAt: '2024-03-31',
    status: 'approved',
    description: '第一季度销售数据分析报告'
  },
  {
    id: 2,
    number: 'RPT-2024-002',
    name: '2024年3月库存报表',
    type: 'inventory',
    createdAt: '2024-03-31',
    status: 'pending',
    description: '3月份库存盘点报告'
  }
])

// 模态框状态
const showGenerateReportModal = ref(false)

// 报表表单
const reportForm = ref({
  type: '',
  name: '',
  startDate: '',
  endDate: '',
  description: ''
})

// 计算属性
const totalReports = computed(() => reports.value.length)
const todayReports = computed(() => reports.value.filter(r => r.createdAt === new Date().toISOString().split('T')[0]).length)
const pendingReports = computed(() => reports.value.filter(r => r.status === 'pending').length)
const archivedReports = computed(() => reports.value.filter(r => r.status === 'archived').length)

// 过滤后的报表列表
const filteredReports = computed(() => {
  return reports.value.filter(report => {
    const matchesType = !filters.value.type || report.type === filters.value.type
    const matchesStatus = !filters.value.status || report.status === filters.value.status
    const matchesTimeRange = !filters.value.timeRange || checkTimeRange(report.createdAt, filters.value.timeRange)
    const matchesSearch = !filters.value.search ||
                         report.number.toLowerCase().includes(filters.value.search.toLowerCase()) ||
                         report.name.toLowerCase().includes(filters.value.search.toLowerCase())
    return matchesType && matchesStatus && matchesTimeRange && matchesSearch
  })
})

// 检查时间范围
const checkTimeRange = (date, range) => {
  const today = new Date()
  const reportDate = new Date(date)
  
  switch (range) {
    case 'today':
      return reportDate.toDateString() === today.toDateString()
    case 'week':
      const weekStart = new Date(today.setDate(today.getDate() - today.getDay()))
      const weekEnd = new Date(today.setDate(today.getDate() - today.getDay() + 6))
      return reportDate >= weekStart && reportDate <= weekEnd
    case 'month':
      return reportDate.getMonth() === today.getMonth() && reportDate.getFullYear() === today.getFullYear()
    case 'year':
      return reportDate.getFullYear() === today.getFullYear()
    default:
      return true
  }
}

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

// 获取状态样式
const getStatusClass = (status) => {
  const classes = {
    pending: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-300',
    approved: 'bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-300',
    archived: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
  }
  return classes[status] || classes.pending
}

// 查看报表
const viewReport = (report) => {
  // 实现查看报表逻辑
  console.log('查看报表:', report)
}

// 导出报表
const exportReport = (report) => {
  // 实现导出报表逻辑
  console.log('导出报表:', report)
}

// 删除报表
const deleteReport = (report) => {
  if (confirm('确定要删除该报表吗？')) {
    reports.value = reports.value.filter(r => r.id !== report.id)
  }
}

// 生成报表
const generateReport = () => {
  const newReport = {
    id: reports.value.length + 1,
    number: `RPT-${new Date().getFullYear()}-${String(reports.value.length + 1).padStart(3, '0')}`,
    name: reportForm.value.name,
    type: reportForm.value.type,
    createdAt: new Date().toISOString().split('T')[0],
    status: 'pending',
    description: reportForm.value.description
  }
  reports.value.push(newReport)
  showGenerateReportModal.value = false
  resetForm()
}

// 重置表单
const resetForm = () => {
  reportForm.value = {
    type: '',
    name: '',
    startDate: '',
    endDate: '',
    description: ''
  }
}
</script> 