<template>
  <div class="ios-container min-h-screen bg-gray-50">
    <!-- 顶部状态栏 -->
    <div class="ios-status-bar">
      <div class="ios-status-bar-time">9:41</div>
      <div class="ios-status-bar-icons">
        <div class="ios-signal"></div>
        <div class="ios-wifi"></div>
        <div class="ios-battery"></div>
      </div>
    </div>

    <!-- 顶部导航栏 -->
    <div class="ios-nav-bar">
      <div class="ios-nav-bar-content">
        <button class="ios-nav-button" @click="isMenuOpen = !isMenuOpen">
          <Menu class="w-5 h-5" />
        </button>
        <h1 class="ios-nav-title">iOS Design</h1>
        <button class="ios-nav-button" @click="showSearch = !showSearch">
          <Search class="w-5 h-5" />
        </button>
      </div>
    </div>

    <!-- 搜索栏 -->
    <div v-if="showSearch" class="ios-search-bar">
      <div class="ios-search-input">
        <Search class="w-5 h-5 text-gray-400" />
        <input type="text" placeholder="搜索" class="ios-search-field">
        <button class="ios-search-cancel" @click="showSearch = false">取消</button>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="ios-content">
      <!-- 卡片列表 -->
      <div class="ios-card-list">
        <div v-for="card in cards" :key="card.id" class="ios-card">
          <div class="ios-card-header">
            <div class="ios-avatar" :class="card.avatarClass">
              {{ card.initials }}
            </div>
            <div class="ios-card-info">
              <h3 class="ios-card-title">{{ card.title }}</h3>
              <p class="ios-card-subtitle">{{ card.subtitle }}</p>
            </div>
            <button class="ios-card-action">
              <MoreVertical class="w-5 h-5" />
            </button>
          </div>
          <div class="ios-card-content">
            <p>{{ card.content }}</p>
          </div>
          <div class="ios-card-footer">
            <button class="ios-button">
              <Heart class="w-5 h-5" />
              <span>{{ card.likes }}</span>
            </button>
            <button class="ios-button">
              <MessageSquare class="w-5 h-5" />
              <span>{{ card.comments }}</span>
            </button>
            <button class="ios-button">
              <Share2 class="w-5 h-5" />
            </button>
          </div>
        </div>
      </div>

      <!-- 表单元素 -->
      <div class="ios-form">
        <div class="ios-form-group">
          <label class="ios-label">文本输入</label>
          <input type="text" placeholder="请输入内容" class="ios-input">
        </div>
        <div class="ios-form-group">
          <label class="ios-label">密码输入</label>
          <input type="password" placeholder="请输入密码" class="ios-input">
        </div>
        <div class="ios-form-group">
          <label class="ios-label">下拉选择</label>
          <select class="ios-input">
            <option>选项 1</option>
            <option>选项 2</option>
            <option>选项 3</option>
          </select>
        </div>
        <div class="ios-form-group">
          <label class="ios-switch">
            <input type="checkbox">
            <span class="ios-switch-slider"></span>
            <span class="ios-switch-label">开关</span>
          </label>
        </div>
      </div>

      <!-- 按钮组 -->
      <div class="ios-button-group">
        <button class="ios-button primary">主要按钮</button>
        <button class="ios-button secondary">次要按钮</button>
        <button class="ios-button destructive">危险按钮</button>
      </div>

      <!-- 标签页 -->
      <div class="ios-tabs">
        <div class="ios-tab-header">
          <button 
            v-for="tab in tabs" 
            :key="tab.id"
            class="ios-tab"
            :class="{ active: activeTab === tab.id }"
            @click="activeTab = tab.id"
          >
            {{ tab.label }}
          </button>
        </div>
        <div class="ios-tab-content">
          <div v-if="activeTab === 'tab1'" class="ios-tab-pane">
            <p>标签页 1 的内容</p>
          </div>
          <div v-if="activeTab === 'tab2'" class="ios-tab-pane">
            <p>标签页 2 的内容</p>
          </div>
          <div v-if="activeTab === 'tab3'" class="ios-tab-pane">
            <p>标签页 3 的内容</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部标签栏 -->
    <div class="ios-tab-bar">
      <a href="#" class="ios-tab-bar-item active">
        <Home class="w-6 h-6" />
        <span>首页</span>
      </a>
      <a href="#" class="ios-tab-bar-item">
        <Search class="w-6 h-6" />
        <span>搜索</span>
      </a>
      <a href="#" class="ios-tab-bar-item">
        <Plus class="w-6 h-6" />
        <span>添加</span>
      </a>
      <a href="#" class="ios-tab-bar-item">
        <Bell class="w-6 h-6" />
        <span>通知</span>
      </a>
      <a href="#" class="ios-tab-bar-item">
        <User class="w-6 h-6" />
        <span>我的</span>
      </a>
    </div>

    <!-- 对话框 -->
    <div v-if="showDialog" class="ios-dialog-overlay">
      <div class="ios-dialog">
        <div class="ios-dialog-header">
          <h3 class="ios-dialog-title">对话框标题</h3>
          <p class="ios-dialog-message">这是一个 iOS 风格的对话框示例。</p>
        </div>
        <div class="ios-dialog-actions">
          <button class="ios-dialog-button cancel" @click="showDialog = false">取消</button>
          <button class="ios-dialog-button confirm" @click="showDialog = false">确定</button>
        </div>
      </div>
    </div>

    <!-- 操作表 -->
    <div v-if="showActionSheet" class="ios-action-sheet">
      <div class="ios-action-sheet-content">
        <div class="ios-action-sheet-title">选择操作</div>
        <button class="ios-action-sheet-item">
          <Camera class="w-5 h-5" />
          <span>拍照</span>
        </button>
        <button class="ios-action-sheet-item">
          <Image class="w-5 h-5" />
          <span>从相册选择</span>
        </button>
        <button class="ios-action-sheet-item destructive">
          <Trash2 class="w-5 h-5" />
          <span>删除</span>
        </button>
      </div>
      <button class="ios-action-sheet-cancel" @click="showActionSheet = false">取消</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { 
  Menu, Search, MoreVertical, Home,
  Heart, MessageSquare, Share2, Camera,
  Image, Trash2, Bell, User, Plus
} from 'lucide-vue-next'

const showDialog = ref(false)
const showActionSheet = ref(false)
const showSearch = ref(false)
const isMenuOpen = ref(false)
const activeTab = ref('tab1')

const cards = ref([
  {
    id: 1,
    title: '卡片标题',
    subtitle: '副标题',
    content: '这是卡片的内容，可以包含多行文本。',
    likes: 42,
    comments: 8,
    initials: 'JD',
    avatarClass: 'bg-blue-500'
  },
  {
    id: 2,
    title: '另一个标题',
    subtitle: '另一个副标题',
    content: '这是另一个卡片的内容。',
    likes: 36,
    comments: 5,
    initials: 'AB',
    avatarClass: 'bg-green-500'
  }
])

const tabs = ref([
  { id: 'tab1', label: '标签页 1' },
  { id: 'tab2', label: '标签页 2' },
  { id: 'tab3', label: '标签页 3' }
])
</script>

<style scoped>
.ios-container {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
}

.ios-status-bar {
  @apply fixed top-0 left-0 right-0 h-6 flex justify-between items-center px-4 bg-white;
}

.ios-status-bar-time {
  @apply text-sm font-medium;
}

.ios-status-bar-icons {
  @apply flex items-center space-x-2;
}

.ios-nav-bar {
  @apply fixed top-6 left-0 right-0 h-12 flex items-center justify-center bg-white;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ios-nav-bar-content {
  @apply flex items-center justify-between w-full max-w-md px-4;
}

.ios-nav-title {
  @apply text-lg font-semibold;
}

.ios-nav-button {
  @apply p-2 rounded-full text-gray-600;
}

.ios-search-bar {
  @apply fixed top-[4.5rem] left-0 right-0 p-4 bg-white;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ios-search-input {
  @apply flex items-center bg-gray-100 rounded-full px-4;
}

.ios-search-field {
  @apply flex-1 py-2 px-4 bg-transparent outline-none;
}

.ios-search-cancel {
  @apply ml-4 text-blue-500;
}

.ios-content {
  @apply pt-24 pb-16 px-4;
}

.ios-card-list {
  @apply space-y-4;
}

.ios-card {
  @apply bg-white rounded-xl overflow-hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ios-card-header {
  @apply flex items-center p-4;
}

.ios-avatar {
  @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-medium;
}

.ios-card-info {
  @apply flex-1 ml-4;
}

.ios-card-title {
  @apply font-semibold;
}

.ios-card-subtitle {
  @apply text-sm text-gray-500;
}

.ios-card-action {
  @apply p-2 text-gray-400;
}

.ios-card-content {
  @apply px-4 pb-4;
}

.ios-card-footer {
  @apply flex items-center px-4 py-3 border-t border-gray-100;
}

.ios-button {
  @apply flex items-center space-x-1 text-gray-500;
}

.ios-form {
  @apply space-y-4 mt-6;
}

.ios-form-group {
  @apply space-y-1;
}

.ios-label {
  @apply text-sm text-gray-500;
}

.ios-input {
  @apply w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500;
}

.ios-switch {
  @apply flex items-center;
}

.ios-switch-slider {
  @apply relative inline-block w-12 h-6 rounded-full bg-gray-200;
}

.ios-switch-slider:after {
  content: '';
  @apply absolute w-5 h-5 rounded-full bg-white top-0.5 left-0.5;
  transition: all 0.2s ease;
}

.ios-switch input:checked + .ios-switch-slider {
  @apply bg-green-500;
}

.ios-switch input:checked + .ios-switch-slider:after {
  @apply translate-x-6;
}

.ios-switch-label {
  @apply ml-3 text-gray-600;
}

.ios-button-group {
  @apply space-y-2 mt-6;
}

.ios-button {
  @apply w-full py-3 rounded-xl text-center font-medium;
}

.ios-button.primary {
  @apply bg-blue-500 text-white;
}

.ios-button.secondary {
  @apply bg-gray-100 text-gray-900;
}

.ios-button.destructive {
  @apply bg-red-500 text-white;
}

.ios-tabs {
  @apply mt-6;
}

.ios-tab-header {
  @apply flex border-b border-gray-200;
}

.ios-tab {
  @apply flex-1 py-3 text-center text-gray-500;
}

.ios-tab.active {
  @apply text-blue-500 border-b-2 border-blue-500;
}

.ios-tab-content {
  @apply p-4;
}

.ios-tab-pane {
  @apply bg-white rounded-xl p-4;
}

.ios-tab-bar {
  @apply fixed bottom-0 left-0 right-0 flex justify-around items-center py-2 bg-white;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
}

.ios-tab-bar-item {
  @apply flex flex-col items-center text-gray-500;
}

.ios-tab-bar-item.active {
  @apply text-blue-500;
}

.ios-dialog-overlay {
  @apply fixed inset-0 bg-black/50 flex items-center justify-center;
}

.ios-dialog {
  @apply bg-white rounded-xl w-full max-w-md overflow-hidden;
}

.ios-dialog-header {
  @apply p-4 text-center;
}

.ios-dialog-title {
  @apply text-lg font-semibold;
}

.ios-dialog-message {
  @apply mt-2 text-gray-500;
}

.ios-dialog-actions {
  @apply flex border-t border-gray-200;
}

.ios-dialog-button {
  @apply flex-1 py-3 text-center font-medium;
}

.ios-dialog-button.cancel {
  @apply text-gray-500;
}

.ios-dialog-button.confirm {
  @apply text-blue-500;
}

.ios-action-sheet {
  @apply fixed inset-0 flex flex-col justify-end;
}

.ios-action-sheet-content {
  @apply bg-white rounded-t-2xl overflow-hidden;
}

.ios-action-sheet-title {
  @apply p-4 text-center text-gray-500;
}

.ios-action-sheet-item {
  @apply flex items-center space-x-3 p-4 border-t border-gray-100;
}

.ios-action-sheet-item.destructive {
  @apply text-red-500;
}

.ios-action-sheet-cancel {
  @apply mt-2 p-4 bg-white rounded-2xl text-center font-medium;
}
</style> 