<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'

const route = useRoute()
const router = useRouter()
const active = ref('home')

watch(() => route.name, (n) => {
  if (n) {
    const nm = n.toLowerCase()
    if (['home', 'meal', 'grow', 'my'].includes(nm)) active.value = nm
  }
}, { immediate: true })

function go(name) {
  router.push({ name: name.charAt(0).toUpperCase() + name.slice(1) })
}

function onCall() {
  showToast({ message: '如需帮助请联系前台工作人员 📞', position: 'bottom', duration: 2000 })
}
</script>

<template>
  <div class="layout">
    <router-view />
    <div class="tabbar">
      <div class="tab-item" :class="{ active: active === 'home' }" @click="go('home')">
        <van-icon name="home-o" size="23" />
        <span>首页</span>
      </div>
      <div class="tab-item" :class="{ active: active === 'meal' }" @click="go('meal')">
        <van-icon name="fire-o" size="23" />
        <span>用膳</span>
      </div>
      <!-- 中央呼叫按钮 -->
      <div class="tab-center">
        <div class="center-btn" @click="onCall">
          <van-icon name="phone-o" size="25" color="white" />
        </div>
      </div>
      <div class="tab-item" :class="{ active: active === 'grow' }" @click="go('grow')">
        <van-icon name="flower-o" size="23" />
        <span>成长</span>
      </div>
      <div class="tab-item" :class="{ active: active === 'my' }" @click="go('my')">
        <van-icon name="contact-o" size="23" />
        <span>我的</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.layout {
  min-height: 100vh;
  padding-bottom: 72px;
}
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 68px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 999;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 0 0;
  transition: color 0.2s;
}
.tab-item.active { color: #f43f5e; }
.tab-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 14px;
}
.center-btn {
  width: 54px;
  height: 54px;
  background: linear-gradient(145deg, #f87171, #f43f5e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(244, 63, 94, 0.45);
  cursor: pointer;
  position: relative;
  bottom: 8px;
  transition: transform 0.15s;
}
.center-btn:active { transform: scale(0.93); }
</style>
