<template>
  <div
    class="h-14 flex bg-tab-bar-bg items-center mx-2.5 overflow-hidden py-3"
    style="border-radius: 19px"
  >
    <div class="flex-row flex justify-around w-full h-full">
      <div
        v-for="item in list"
        class="flex items-center justify-center"
        :class="
          activeTabRouteName === item.routeName ? 'little-grow' : 'flex-grow '
        "
        :key="item.name"
        @click="clickTabItem(item)"
      >
        <TabItem
          :tabName="item.name"
          :iconName="
            activeTabRouteName === item.routeName ? item.icon : item.icon1
          "
          :active="activeTabRouteName === item.routeName"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import TabItem from "./TabItem.vue";
import tabList from "../../tabList";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    TabItem,
  },
  props: ["list", "activeTabRouteName"],
  methods: {
    clickTabItem(item: typeof tabList[0]) {
      this.$router.push({
        name: item.routeName,
      });
    },
  },
});
</script>

<style scoped>
.wrap25 {
  z-index: 39;
  height: 60px;
  align-self: center;
  justify-content: center;
  align-items: flex-start;
}

.box3 {
  z-index: 40;
  height: 35px;
  border-radius: 9px;
  background-color: rgba(255, 255, 255, 1);
  width: 80px;
  justify-content: center;
  align-items: center;
}

.layer5 {
  z-index: auto;
  width: 54px;
  height: 21px;
  justify-content: space-between;
}

.label12 {
  z-index: 68;
  width: 22px;
  height: 21px;
}

.little-grow {
  flex-grow: 0.5;
}

.info12 {
  z-index: 67;
  width: 26px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(62, 79, 175, 1);
  font-size: 10px;
  font-family: PingFangSC-Medium;
  white-space: nowrap;
  line-height: 14px;
  text-align: center;
  margin-top: 4px;
}

.icon8 {
  z-index: 59;
  width: 25px;
  height: 22px;
  margin: 6px 0 0 51px;
}

.label13 {
  z-index: 41;
  width: 22px;
  height: 23px;
  margin: 6px 0 0 54px;
}

.label14 {
  z-index: 48;
  width: 22px;
  height: 22px;
  margin: 6px 0 0 58px;
}
</style>
