<template>
  <div class="min-h-screen bg-gray-50">
    <!-- Header -->
    <header class="bg-[#0A2B6F] text-white px-4 py-2 flex items-center justify-between">
      <div class="flex items-center space-x-2">
        <div class="text-2xl">⬡</div>
        <span class="text-lg font-medium">ProductName</span>
      </div>

      <div class="flex-1 max-w-xl mx-4">
        <div class="relative">
          <input
              type="search"
              placeholder="输入内容查询"
              class="w-full px-4 py-1.5 bg-[#1a3d87] rounded text-white placeholder-gray-300"
          >
          <search-icon class="absolute right-3 top-2 h-5 w-5 text-gray-300" />
        </div>
      </div>

      <div class="flex items-center space-x-4">
        <message-circle-icon class="h-5 w-5" />
        <bell-icon class="h-5 w-5" />
        <settings-icon class="h-5 w-5" />
        <div class="w-8 h-8 rounded-full bg-gray-300"></div>
      </div>
    </header>

    <div class="flex">
      <!-- Sidebar -->
      <aside class="w-48 bg-white h-[calc(100vh-56px)] border-r">
        <nav class="p-4">
          <div class="text-gray-500 mb-4">菜单类别标题</div>
          <div class="space-y-2">
            <a v-for="i in 5" :key="i"
               class="flex items-center space-x-2 p-2 rounded hover:bg-blue-50 text-gray-600">
              <layout-icon class="h-5 w-5" />
              <span>系统模块{{ i }}</span>
            </a>
          </div>
        </nav>
      </aside>

      <!-- Main Content -->
      <main class="flex-1 p-6">
        <div class="text-sm text-gray-500 mb-6">
          <home-icon class="inline h-4 w-4 mr-1" />
          一级页面 / 仪表盘 / xxx业务工作台
        </div>

        <!-- Basic Info Form -->
        <div class="bg-white rounded-lg p-6">
          <h2 class="text-lg font-medium mb-6">基本信息</h2>

          <div class="grid grid-cols-3 gap-6">
            <div class="space-y-1">
              <label class="text-sm text-gray-600">
                会员姓名
                <span class="text-red-500">*</span>
              </label>
              <input
                  type="text"
                  v-model="form.name"
                  class="w-full border rounded px-3 py-2"
              >
            </div>

            <div class="space-y-1">
              <label class="text-sm text-gray-600">
                性别
                <span class="text-red-500">*</span>
              </label>
              <select v-model="form.gender" class="w-full border rounded px-3 py-2">
                <option value="女">女</option>
                <option value="男">男</option>
              </select>
            </div>

            <div class="space-y-1">
              <label class="text-sm text-gray-600">
                出生日期
                <span class="text-red-500">*</span>
              </label>
              <input
                  type="date"
                  v-model="form.birthDate"
                  class="w-full border rounded px-3 py-2"
              >
            </div>

            <div class="space-y-1">
              <label class="text-sm text-gray-600">
                证件类型
                <span class="text-red-500">*</span>
              </label>
              <select v-model="form.idType" class="w-full border rounded px-3 py-2">
                <option value="身份证">身份证</option>
              </select>
            </div>

            <div class="space-y-1">
              <label class="text-sm text-gray-600">
                证件号码
                <span class="text-red-500">*</span>
              </label>
              <input
                  type="text"
                  v-model="form.idNumber"
                  class="w-full border rounded px-3 py-2"
              >
            </div>
          </div>

          <!-- Contact Info -->
          <h2 class="text-lg font-medium mb-6 mt-8">通讯信息</h2>

          <div class="grid grid-cols-3 gap-6">
            <div class="space-y-1">
              <label class="text-sm text-gray-600">
                手机号
                <span class="text-red-500">*</span>
              </label>
              <input
                  type="tel"
                  v-model="form.phone"
                  class="w-full border rounded px-3 py-2"
              >
            </div>

            <div class="space-y-1">
              <label class="text-sm text-gray-600">
                电子邮箱
                <span class="text-red-500">*</span>
              </label>
              <input
                  type="email"
                  v-model="form.email"
                  class="w-full border rounded px-3 py-2"
              >
            </div>

            <div class="space-y-1">
              <label class="text-sm text-gray-600">
                紧急联系人
                <span class="text-red-500">*</span>
              </label>
              <select v-model="form.emergency" class="w-full border rounded px-3 py-2">
                <option value="父亲">父亲</option>
                <option value="母亲">母亲</option>
              </select>
            </div>
          </div>

          <!-- File Upload Section -->
          <h2 class="text-lg font-medium mb-6 mt-8">其他补充资料</h2>

          <div class="grid grid-cols-4 gap-6">
            <div v-for="field in ['个人简历', '个人证件照', '身份证扫描件', '护照扫描件']"
                 :key="field"
                 class="border-2 border-dashed rounded-lg p-4 text-center">
              <upload-cloud-icon class="h-8 w-8 mx-auto text-gray-400 mb-2" />
              <div class="text-sm text-gray-600">{{ field }}</div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  Search as SearchIcon,
  MessageCircle as MessageCircleIcon,
  Bell as BellIcon,
  Settings as SettingsIcon,
  Layout as LayoutIcon,
  Home as HomeIcon,
  UploadCloud as UploadCloudIcon
} from 'lucide-vue-next'

const form = ref({
  name: '张三',
  gender: '女',
  birthDate: '2023/06/13',
  idType: '身份证',
  idNumber: '370803198905282724',
  phone: '13966667777',
  email: 'zhangsan@163.com',
  emergency: '父亲'
})
</script>

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