<template>
  <div class="bottom-nav">
    <div class="nav-content">
      <div
        v-for="tab in tabs"
        :key="tab.key"
        class="nav-item"
        :class="{ active: isActive(tab.path) }"
        @click="handleClick(tab)"
      >
        <van-icon :name="tab.icon" class="nav-icon" />
        <span class="nav-label">{{ tab.label }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { Toast } from "vant";

const props = defineProps({
  activeTab: {
    type: String,
    default: "home"
  }
});

const router = useRouter();
const route = useRoute();

const tabs = [
  { key: "home", label: "首页", icon: "home-o", path: "/Home" },
  { key: "map", label: "地图", icon: "location-o", path: "/map" },
  { key: "scan", label: "", icon: "scan", path: "/clockInPage", isCenter: true },
  { key: "video", label: "监控", icon: "video-o", path: "/video-monitor" },
  { key: "profile", label: "我的", icon: "user-o", path: "/my" }
];

function isActive(path) {
  return route.path === path;
}

function handleClick(tab) {
  if (tab.key === "scan") {
    openScanner();
  } else {
    router.push(tab.path);
  }
}

// 打开扫码功能
function openScanner() {
  try {
    if (window.bridge && window.bridge.scan) {
      window.bridge.scan();
    } else if (window.ws && window.ws.scanQRCode) {
      window.ws.scanQRCode();
    } else {
      Toast("扫码功能开发中...");
    }
  } catch (err) {
    console.error("打开扫码失败:", err);
    Toast("扫码功能暂不可用");
  }
}
</script>

<style lang="scss" scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #e5e5e5;
  padding: 8px 16px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 100;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  max-width: 500px;
  margin: 0 auto;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  color: #999;
  transition: color 0.2s;

  &.active {
    color: #2563eb;
  }

  &:nth-child(3) {
    position: relative;
    margin-top: -24px;

    .nav-icon {
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 28px;
      box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
    }

    .nav-label {
      margin-top: 4px;
    }
  }
}

.nav-icon {
  font-size: 24px;
}

.nav-label {
  font-size: 12px;
}
</style>