<template>
  <div class="mobile-layout">
    <div class="mobile-header" v-if="!hideHeader">
      <button v-if="canGoBack" class="back-btn" @click="$router.back()">←</button>
      <h1>{{ $route.meta.title || 'HealthLink' }}</h1>
    </div>
    <div class="mobile-content" :class="{ 'no-header': hideHeader }">
      <router-view />
    </div>
    <div class="mobile-tabs" v-if="showTabs">
      <div v-for="tab in tabs" :key="tab.path" class="tab-item" :class="{ active: $route.path === tab.path }" @click="$router.push(tab.path)">
        <span class="tab-icon">{{ tab.icon }}</span>
        <span class="tab-label">{{ tab.label }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const canGoBack = computed(() => route.path !== '/mobile/home')
const hideHeader = computed(() => ['/mobile/login'].includes(route.path))
const showTabs = computed(() => route.path.startsWith('/mobile/'))
const tabs = [
  { path: '/mobile/home', icon: '🏠', label: '首页' },
  { path: '/mobile/tasks', icon: '📋', label: '任务' },
  { path: '/mobile/patients', icon: '👥', label: '患者' },
  { path: '/mobile/mine', icon: '👤', label: '我的' }
]
</script>

<style scoped>
.mobile-layout { display: flex; flex-direction: column; height: 100vh; background: #f5f5f5; }
.mobile-header { height: 48px; background: #1890ff; color: #fff; display: flex; align-items: center; padding: 0 16px; position: sticky; top: 0; z-index: 10; }
.mobile-header h1 { font-size: 18px; margin: 0; flex: 1; text-align: center; }
.back-btn { background: none; border: none; color: #fff; font-size: 20px; position: absolute; left: 16px; }
.mobile-content { flex: 1; overflow-y: auto; }
.mobile-content.no-header { padding-bottom: 56px; }
.mobile-tabs { position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: #fff; display: flex; border-top: 1px solid #e8e8e8; z-index: 10; padding-bottom: env(safe-area-inset-bottom); }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12px; color: #999; }
.tab-item.active { color: #1890ff; }
.tab-icon { font-size: 20px; margin-bottom: 2px; }
</style>
