<!-- <template>
    <van-tabbar :fixed="false"  v-model="active" active-color="#775fd9" :border="true" inactive-color="#c54593" :key="tabbarKey">
      <van-tabbar-item v-for="(k, key) in item" replace :to="k.router" :key="key">
        <span>{{ k.title }}</span>
        <template #icon="props">
          <img :src="props.active ? k.icon.active : k.icon.noactive" :alt="k.title" :class="k.class" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
</template>

<script>
import emitter from "@/utils/emitter";
import { getImg } from "@/utils/tools";
export default {
  data() {
    return {
      tabbarKey: 0,
      show: false,
      active: 0,
      item: [
        {
          router: "/Home",
          //   title: '首页',
          title: this.$t("common.tab_bar.tab_home"),
          icon: {
            active: getImg("home_active.png", "footer"),
            noactive: getImg("home_inactive.41093623.png", "footer"),
          },
          class: "small",
        },
        // {
        //     router: '/Game',
        //     //   title: "预约",
        //     title: this.$t('common.tab_bar.tab_reserve'),
        //     icon: {
        //         active: '/img/footer/预约选中.jpg',
        //         noactive: '/img/footer/预约未选中.jpg'
        //     }
        // },
        {
          router: "/guide1",
          //   title: "预约",
          // title: this.$t('认证'),
          title: this.$t("Gemeinschaft"),

          icon: {
            active: getImg("gamecraft_active.8e492d11.png", "footer"),
            noactive: getImg("gamecraft_inactive.6b5fa8e9.png", "footer"),
          },
          class: "small",
        },
        {
          // router: "/Choose",
          router: {
            path: '/Contract/index',
            query: { showBack: false }
          },
          title: "", //this.$t('common.tab_bar.tab_xy')
          icon: {
            active: "/img/footer/beauty.52660ad12.png",
            noactive: "/img/footer/beauty.52660ad12.png",
          },
          class: "tui",
        },
        {
          router: "/guide3",
          //   title: "视频",
          //   title: this.$t("common.tab_bar.tab_video"),
          title: "Hotel",
          icon: {
            active: getImg("hotel_active.91198c7c.png", "footer"),
            noactive: getImg("hotel_inactive.646466ba.png", "footer"),
          },
          class: "small",
        },
        {
          router: "/Mine",
          title: "Mein Konto",
          icon: {
            active: getImg("my_active.ae485b60.png", "footer"),
            noactive: getImg("my_Inactive.1914e00f.png", "footer"),
          },
          class: "small",
        },
      ],
      logined: false,
    };
  },
  methods: {},
  created() {
    this.active = this.item.findIndex(
      (item) => {
        const targetPath = typeof item.router === 'object'
          ? item.router.path
          : item.router;
        return targetPath === this.$route.path;
      }
    );
    emitter.on("token-update", () => { });
  },
};
</script>

<style lang="less" scoped>
@tabbar-height: 110px;
@tabbar-img: 60px;

.van-tabbar {
  height: @tabbar-height;
  z-index: 5;
  background-color: #070404;
}



.van-tabbar-item__icon img {
  height: @tabbar-img;

  &.small {
    height: 50px;
    margin: 3.5px;
  }
}

.van-tabbar-item--active {
  background-color: transparent !important;
}

.van-tabbar-item {
  font-size: 28px;
}

.tui {
  width: 4.3rem;
  height: 4.3rem !important;
  margin-top: -4vw;
  background-color: #9c4646;
  border-radius: 50%;
  border: 1.333vw solid #fff;
  z-index: 10;
}

.van-tabbar-item__text span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  font-weight: 500;
  text-align: center;
}

[class*="van-hairline"]::after {
  border: none !important;
}
</style> -->



<template>
  <div class="footerDiv">
    <nav class="tabbar" role="tablist" aria-label="Main">
      <router-link
        v-for="(k, idx) in item"
        :key="idx"
        :to="k.router"
        replace
        class="tabbar-item"
        :class="[{ active: idx === activeIndex }, k.class]"
        role="tab"
        :aria-selected="idx === activeIndex"
      >
        <div class="icon-wrap">
          <img
            :src="idx === activeIndex ? k.icon.active : k.icon.noactive"
            :alt="k.title"
          />
        </div>
        <span class="label">{{ k.title }}</span>
      </router-link>
    </nav>
  </div>
</template>

<script>
import emitter from '@/utils/emitter'
import { getImg } from '@/utils/tools'

export default {
  name: 'FooterTabs',
  data() {
    return {
      item: [
        {
          router: '/Home',
          title: this.$t('common.tab_bar.tab_home'),
          icon: {
            active: getImg('home_active.png', 'footer'),
            noactive: getImg('home_inactive.41093623.png', 'footer'),
          },
          class: 'small',
        },
        {
          router: '/guide1',
          title: this.$t('Gemeinschaft'),
          icon: {
            active: getImg('gamecraft_active.8e492d11.png', 'footer'),
            noactive: getImg('gamecraft_inactive.6b5fa8e9.png', 'footer'),
          },
          class: 'small',
        },
        {
          router: { path: '/Contract/index', query: { showBack: false } },
          title: '',
          icon: {
            active: '/img/footer/beauty.52660ad12.png',
            noactive: '/img/footer/beauty.52660ad12.png',
          },
          class: 'tui',
        },
        {
          router: '/guide3',
          title: 'Hotel',
          icon: {
            active: getImg('hotel_active.91198c7c.png', 'footer'),
            noactive: getImg('hotel_inactive.646466ba.png', 'footer'),
          },
          class: 'small',
        },
        {
          router: '/Mine',
          title: 'Mein Konto',
          icon: {
            active: getImg('my_active.ae485b60.png', 'footer'),
            noactive: getImg('my_Inactive.1914e00f.png', 'footer'),
          },
          class: 'small',
        },
      ],
    }
  },
  computed: {
    activeIndex() {
      // 按当前 path 找激活项（与原逻辑一致）
      const path = this.$route.path
      return this.item.findIndex((it) => {
        const toPath = typeof it.router === 'object' ? it.router.path : it.router
        return toPath === path
      })
    },
  },
  created() {
    emitter.on('token-update', () => {})
  },
}
</script>

<style lang="less" scoped>
/* ====== 外层容器（受父壳宽度约束） ====== */
.footerDiv {
  position:absolute; left:0; right:0; bottom:0;
  width: 100%;
  /* 如需自身限宽居中，可打开下行（一般由外层壳控制） */
  /* max-width: var(--ex-max-width, 450px); margin: 0 auto; */
}

/* ====== Tabbar 容器 ====== */
.tabbar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 110px;                 /* px：构建期会转 cqw */
  background: #070404;
  z-index: 5;
  /* 圆角/阴影可按需添加 */
}

/* ====== 每个 tab ====== */
.tabbar-item {
  flex: 1 1 0;
  min-width: 0;
  text-decoration: none;
  color: #c54593;                /* 未激活文字色（等同 inactive-color） */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
}

/* 激活态颜色（等同 active-color） */
.tabbar-item.active {
  color: #775fd9;
}

/* 图标区域（默认图标尺寸） */
.icon-wrap img {
  display: block;
  height: 60px;                 /* 原 @tabbar-img=60px */
}

/* 你原来的 small 类：略小一点的图标 */
.tabbar-item.small .icon-wrap img {
  height: 50px;
  margin: 8px;
}

/* 标签文字 */
.label {
  font-size: 22px;              /* 原 2.933vw ≈ 22px（按 750 估算） */
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 桌面（含大多数笔记本/台式机） */
@media (hover: hover) and (pointer: fine) {
  .label {
    font-size: 12px;  /* PC 想要的大小 */
  }
}

/* 中间凸起按钮（tui）——保持你的视觉 */
.tabbar-item.tui .icon-wrap {
  width: 100px;
  height: 100px;
  margin-top: -80px;            /* 往上浮一点 */
  border-radius: 50%;
  background: #9c4646;
  border: 10px solid #fff;      /* 原 1.333vw ≈ 10px */
  display: flex;
  align-items: center;
  justify-content: center;
}
.tabbar-item.tui .icon-wrap img {
  height: 46px;                 /* 放在圆形内的实际图标尺寸，可按需调 */
}
</style>

