<template>
  <div class="tab-layout">
    <div class="tab-content">
      <router-view />
    </div>
    <div class="tab-bar">
      <router-link to="/" class="tab-item" :class="{ active: route.path === '/' }">
        <div class="tab-icon">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
            <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
            <polyline points="9,22 9,12 15,12 15,22"/>
          </svg>
        </div>
        <div class="tab-label">首页</div>
      </router-link>
      <router-link to="/vehicles" class="tab-item" :class="{ active: route.path.startsWith('/vehicles') }">
        <div class="tab-icon">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
            <rect x="1" y="3" width="15" height="13" rx="2" ry="2"/>
            <polygon points="16,8 20,8 23,11 23,16 16,16 16,8"/>
            <circle cx="5.5" cy="18.5" r="2.5"/>
            <circle cx="18.5" cy="18.5" r="2.5"/>
          </svg>
        </div>
        <div class="tab-label">租车</div>
      </router-link>
      <router-link to="/orders" class="tab-item" :class="{ active: route.path.startsWith('/orders') }">
        <div class="tab-icon">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
            <polyline points="14,2 14,8 20,8"/>
            <line x1="16" y1="13" x2="8" y2="13"/>
            <line x1="16" y1="17" x2="8" y2="17"/>
            <polyline points="10,9 9,9 8,9"/>
          </svg>
        </div>
        <div class="tab-label">订单</div>
      </router-link>
      <router-link to="/profile" class="tab-item" :class="{ active: route.path.startsWith('/profile') }">
        <div class="tab-icon">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
            <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/>
            <circle cx="12" cy="7" r="4"/>
          </svg>
        </div>
        <div class="tab-label">我的</div>
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

<style>
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: #FFF7F0;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }

.tab-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.tab-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  border-top: 0.5px solid rgba(0,0,0,0.08);
  z-index: 100;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #9B9B9B;
  transition: color 0.2s;
  gap: 2px;
}

.tab-item.active {
  color: #FF6B00;
}

.tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.tab-label {
  font-size: 10px;
  font-weight: 500;
}
</style>
