<template>
  <div class="min-h-screen bg-white">
    <!-- Top Navigation -->
    <header class="bg-[#0052CC] text-white px-4 py-2 flex items-center justify-between">
      <div class="flex items-center space-x-2">
        <div class="w-8 h-8">
        </div>
        <span class="text-lg font-medium">ProductName</span>
      </div>

      <div class="flex-1 max-w-2xl mx-8">
        <div class="relative">
          <input
              type="search"
              placeholder="输入内容查询"
              class="w-full px-4 py-1.5 bg-white/10 rounded text-white placeholder-white/70 outline-none"
          />
          <SearchIcon class="absolute right-3 top-2 h-5 w-5 text-white/70"/>
        </div>
      </div>

      <div class="flex items-center space-x-4">
        <MessageCircleIcon class="h-5 w-5"/>
        <BellIcon class="h-5 w-5"/>
        <SettingsIcon class="h-5 w-5"/>
        <div class="w-8 h-8 rounded-full bg-white/20"></div>
      </div>
    </header>

    <div class="flex">
      <!-- Sidebar -->
      <aside class="w-48 min-h-[calc(100vh-56px)] border-r">
        <nav class="p-2 space-y-1">
          <template v-for="i in 8" :key="i">
            <div class="flex items-center space-x-2 px-3 py-2 rounded hover:bg-gray-100 cursor-pointer">
              <HomeIcon class="h-5 w-5 text-gray-600"/>
              <span class="text-gray-700">系统模块{{ i }}</span>
            </div>
          </template>
        </nav>
      </aside>

      <!-- Main Content -->
      <main class="flex-1 p-6">
        <!-- Breadcrumb -->
        <div class="flex items-center space-x-2 text-sm mb-6">
          <HomeIcon class="h-4 w-4 text-gray-500"/>
          <span class="text-gray-500">首页</span>
          <span class="text-gray-500">/</span>
          <span class="text-blue-600">查询表格</span>
        </div>

        <!-- Search Form -->
        <div class="bg-white p-6 rounded border mb-6">
          <h2 class="text-lg font-medium mb-4">查询表格</h2>
          <div class="grid grid-cols-3 gap-4 mb-4">
            <div class="space-y-1">
              <label class="text-sm text-gray-600">雇员姓名</label>
              <input type="text" placeholder="请输入" class="w-full px-3 py-2 border rounded"/>
            </div>
            <div class="space-y-1">
              <label class="text-sm text-gray-600">证件类型</label>
              <select class="w-full px-3 py-2 border rounded">
                <option>请选择</option>
              </select>
            </div>
            <div class="space-y-1">
              <label class="text-sm text-gray-600">证件号</label>
              <input type="text" placeholder="请输入" class="w-full px-3 py-2 border rounded"/>
            </div>
            <div class="space-y-1">
              <label class="text-sm text-gray-600">手机号</label>
              <input type="text" placeholder="请输入" class="w-full px-3 py-2 border rounded"/>
            </div>
            <div class="space-y-1">
              <label class="text-sm text-gray-600">出生日期</label>
              <input type="date" class="w-full px-3 py-2 border rounded"/>
            </div>
            <div class="space-y-1">
              <label class="text-sm text-gray-600">创建日期</label>
              <input type="date" class="w-full px-3 py-2 border rounded"/>
            </div>
          </div>
          <div class="flex items-center justify-between">
            <div class="space-x-2">
              <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                主按钮
              </button>
              <button class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-50">
                次按钮
              </button>
            </div>
            <button class="text-blue-600 hover:text-blue-700">更多</button>
          </div>
        </div>

        <!-- Table -->
        <div class="bg-white border rounded">
          <div class="p-4 border-b flex items-center justify-between">
            <div class="space-x-2">
              <button class="px-4 py-1.5 bg-blue-600 text-white rounded text-sm">主按钮</button>
              <button class="px-4 py-1.5 border rounded text-sm">次按钮</button>
            </div>
            <button class="px-4 py-1.5 border rounded text-sm">导出</button>
          </div>

          <table class="w-full">
            <thead class="bg-gray-50">
            <tr>
              <th class="px-4 py-3 text-left">
                <input type="checkbox" class="rounded"/>
              </th>
              <th class="px-4 py-3 text-left">标题</th>
              <th class="px-4 py-3 text-left">标题</th>
              <th class="px-4 py-3 text-left">标题</th>
              <th class="px-4 py-3 text-left">标题</th>
              <th class="px-4 py-3 text-left">标题</th>
              <th class="px-4 py-3 text-left">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="i in 10" :key="i" class="border-t">
              <td class="px-4 py-3">
                <input type="checkbox" class="rounded"/>
              </td>
              <td class="px-4 py-3">表格内容</td>
              <td class="px-4 py-3">
                <div class="flex items-center space-x-2">
                  <div class="w-8 h-8 rounded-full bg-gray-200"></div>
                  <span>用户名</span>
                </div>
              </td>
              <td class="px-4 py-3">表格内容</td>
              <td class="px-4 py-3 text-blue-600">标签文字</td>
              <td class="px-4 py-3">
                  <span class="inline-flex items-center">
                    <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span>
                    通知事项
                  </span>
              </td>
              <td class="px-4 py-3 text-blue-600">
                <button class="hover:text-blue-700">操作</button>
              </td>
            </tr>
            </tbody>
          </table>

          <!-- Pagination -->
          <div class="flex items-center justify-center space-x-2 py-4">
            <button class="p-1 rounded hover:bg-gray-100">
              <ChevronLeftIcon class="h-5 w-5 text-gray-600"/>
            </button>
            <button class="px-3 py-1 rounded hover:bg-gray-100">1</button>
            <button class="px-3 py-1 bg-blue-50 text-blue-600 rounded">2</button>
            <button class="px-3 py-1 rounded hover:bg-gray-100">3</button>
            <button class="px-3 py-1 rounded hover:bg-gray-100">4</button>
            <button class="px-3 py-1 rounded hover:bg-gray-100">5</button>
            <span>...</span>
            <button class="px-3 py-1 rounded hover:bg-gray-100">80</button>
            <button class="p-1 rounded hover:bg-gray-100">
              <ChevronRightIcon class="h-5 w-5 text-gray-600"/>
            </button>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import {
  SearchIcon,
  MessageCircleIcon,
  BellIcon,
  SettingsIcon,
  HomeIcon,
  ChevronLeftIcon,
  ChevronRightIcon
} from 'lucide-vue-next'
</script>

<style>
/* Add any custom styles here if needed */
</style>