<template>
  <div class="dashboard-container p-4 bg-gray-50">
    <!-- 统计卡片区域 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
      <!-- 当前行政区 -->
      <el-card class="stat-card">
        <div class="flex items-center gap-2 text-gray-600 text-sm mb-2">
          <MapPin :size="16" class="text-blue-500" />
          <span>当前行政区</span>
        </div>
        <div class="text-3xl font-bold mb-2">湘乡市</div>
        <div class="flex items-center gap-1 text-gray-500 text-xs">
          <Clock :size="12" />
          <span>2025-11-04 15:30:37</span>
        </div>
      </el-card>

      <!-- 承包方总数 -->
      <el-card class="stat-card">
        <div class="flex items-center gap-2 text-gray-600 text-sm mb-2">
          <Users :size="16" class="text-green-500" />
          <span>承包方总数</span>
        </div>
        <div class="flex items-center gap-2 mb-3">
          <TrendingUp :size="24" class="text-green-500" />
          <span class="text-3xl font-bold">193912</span>
        </div>
        <div class="flex items-center justify-between text-sm mb-2">
          <span class="text-gray-600">已上报</span>
          <span class="font-semibold">190448</span>
        </div>
        <el-progress :percentage="98" :show-text="true" />
      </el-card>

      <!-- 已处理APP上报数 -->
      <el-card class="stat-card">
        <div class="flex items-center gap-2 text-gray-600 text-sm mb-2">
          <CheckCircle2 :size="16" class="text-purple-500" />
          <span>已处理APP上报数</span>
        </div>
        <div class="flex items-center gap-2 mb-3">
          <FileCheck :size="24" class="text-purple-500" />
          <span class="text-3xl font-bold">180691</span>
        </div>
        <div class="flex items-center justify-between text-sm mb-2">
          <div class="flex items-center gap-1">
            <Clock :size="14" class="text-gray-400" />
            <span class="text-gray-600">待处理</span>
          </div>
          <span class="font-semibold">2569</span>
        </div>
        <el-progress :percentage="14" :show-text="false" color="#e5e7eb" />
      </el-card>

      <!-- 个人内业数据处理 -->
      <el-card class="stat-card">
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center gap-2 text-gray-600 text-sm">
            <BarChart3 :size="16" class="text-orange-500" />
            <span>个人内业数据处理</span>
          </div>
          <span class="text-3xl font-bold">518</span>
        </div>
        <div class="space-y-2 text-sm">
          <div class="flex items-center justify-between">
            <span class="text-gray-600">今日内业处理</span>
            <span class="font-semibold">39</span>
            <span class="text-gray-600">昨日APP上报处理</span>
            <span class="font-semibold">134</span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-gray-600">昨日内业处理</span>
            <span class="font-semibold">9</span>
            <span class="text-gray-600">昨日外业处理</span>
            <span class="font-semibold">0</span>
          </div>
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-1">
              <span class="text-gray-600">日环比</span>
              <TrendingDown :size="14" class="text-red-500" />
              <span class="text-red-500 font-semibold">433%</span>
            </div>
            <span class="text-gray-600">昨日耕园地处理</span>
            <span class="font-semibold">0</span>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 底部内容区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
      <!-- 承包方上报统计 -->
      <el-card>
        <template #header>
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
              <PieChart :size="20" class="text-blue-500" />
              <span class="font-bold text-lg">承包方上报统计</span>
            </div>
            <el-button type="primary" plain size="small">
              <div class="flex items-center gap-1">
                <RefreshCw :size="14" />
                <span>加载数据</span>
              </div>
            </el-button>
          </div>
        </template>
        <div class="h-300px flex flex-col items-center justify-center text-gray-400">
          <Database :size="48" class="mb-3 opacity-30" />
          <span>暂无数据</span>
        </div>
      </el-card>

      <!-- 更新日志 -->
      <el-card>
        <template #header>
          <div class="flex items-center gap-2">
            <FileText :size="20" class="text-green-500" />
            <span class="font-bold text-lg">更新日志</span>
          </div>
        </template>
        <el-table :data="updateLogs" style="width: 100%" class="update-log-table">
          <el-table-column prop="id" label="#" width="60" align="center" />
          <el-table-column prop="content" label="修改内容" min-width="180" show-overflow-tooltip>
            <template #default="{ row }">
              <div class="flex items-center gap-2">
                <Edit3 :size="14" class="text-gray-400 flex-shrink-0" />
                <span>{{ row.content }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" width="110" align="center">
            <template #default="{ row }">
              <div class="flex items-center gap-1 justify-center">
                <Calendar :size="12" class="text-gray-400" />
                <span>{{ row.updateTime }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="platform" label="更新平台" width="100" align="center">
            <template #default="{ row }">
              <el-tag :type="row.platform === '内业平台' ? 'primary' : 'success'" size="small">
                {{ row.platform }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="" width="80" align="center">
            <template #default>
              <el-button type="primary" size="small">
                <div class="flex items-center gap-1">
                  <Eye :size="14" />
                  <span>查看</span>
                </div>
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="flex justify-end mt-4">
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30, 50]"
              :total="140"
              layout="prev, pager, next, jumper, sizes, total"
              small
              class="custom-pagination"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  MapPin,
  Clock,
  Users,
  TrendingUp,
  TrendingDown,
  CheckCircle2,
  FileCheck,
  BarChart3,
  PieChart,
  RefreshCw,
  Database,
  FileText,
  Edit3,
  Calendar,
  Eye
} from 'lucide-vue-next'

// 分页数据
const currentPage = ref(1)
const pageSize = ref(10)

// 更新日志数据
const updateLogs = ref([
  {
    id: 1,
    content: '内业平台新增"合并地...',
    updateTime: '2025-07-01',
    platform: '内业平台'
  },
  {
    id: 2,
    content: '内业平台新增"上传东...',
    updateTime: '2025-07-01',
    platform: '内业平台'
  },
  {
    id: 3,
    content: '移动端新增发包方管理...',
    updateTime: '2025-06-26',
    platform: '小程序'
  },
  {
    id: 4,
    content: '新增合村对照表下载功...',
    updateTime: '2025-06-23',
    platform: '内业平台'
  },
  {
    id: 5,
    content: '新增小程序发包方签字...',
    updateTime: '2025-06-23',
    platform: '小程序'
  },
  {
    id: 6,
    content: '更新"延包数据统计"功...',
    updateTime: '2025-06-23',
    platform: '内业平台'
  },
  {
    id: 7,
    content: '新增"承包方变更统计"...',
    updateTime: '2025-06-23',
    platform: '内业平台'
  },
  {
    id: 8,
    content: '内业平台"延包数据处...',
    updateTime: '2025-05-07',
    platform: '内业平台'
  },
  {
    id: 9,
    content: '内业平台新增"耕园地...',
    updateTime: '2025-04-28',
    platform: '内业平台'
  },
  {
    id: 10,
    content: '内业平台新增"下载承...',
    updateTime: '2025-04-28',
    platform: '内业平台'
  }
])
</script>

<style scoped>
.dashboard-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.stat-card {
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 移动端适配 */
@media (max-width: 640px) {
  .dashboard-container {
    padding: 0.75rem;
  }

  .stat-card :deep(.el-card__body) {
    padding: 1rem;
  }

  .update-log-table {
    font-size: 12px;
  }

  :deep(.el-table__header-wrapper) {
    font-size: 12px;
  }

  :deep(.el-pagination) {
    flex-wrap: wrap;
    justify-content: center;
  }

  :deep(.el-pagination .el-pagination__sizes) {
    margin: 0.5rem 0;
  }
}

/* 自定义分页样式 */
.custom-pagination {
  margin-top: 1rem;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #00b96b;
  color: #fff;
}
</style>