<template>
  <!-- 工作台底部菜单 -->
  <view class="custom-tabbar">
    <view v-for="item in state.list" :key="item.text" @click="handleClick(item)">
      <view>
        <image
        :src="`${url}/static/img/tabbar/${select === item.text ? item.activeIcon : item.icon}`"
        class="custom-img"
      ></image>
      </view>
      <view :class="{'active': select === item.text}">
        {{ item.text }}
      </view>
     
    </view>
    <!-- <view v-for="item in state.list" :key="item.text">
      <image
          :src="`${url}/static/110/tabBar/${item.icon}`"
          class="custom-img"
        ></image>
      <view>
        {{ item.text }}
      </view>
    </view> -->
  </view>
</template>

<script setup lang="ts">
import { onLaunch } from "@dcloudio/uni-app";
import { url } from "@/utils/data";
const props = withDefaults(
  defineProps<{
    select: string;
  }>(),
  {
    select: "首页",
  }
);
type tabBar = {
  text: string;
  icon: string;
  activeIcon: string;
  path: string;
};
const state = reactive({
  list: [
    {
      text: "首页",
      icon: "home.png",
      activeIcon: "home-active.png",
      path: "/pagesHome/index",
    },
    {
      text: "我的",
      icon: "user.png",
      activeIcon: "user-active.png",
      // path: "/pagesLogin/profile/index",
      path: "/pagesHome/profile",
    },
  ],
});
const handleClick = (item: tabBar) => {
  // uni.reLaunch({
  //   url: item.path, // 要跳转到的页面路径
  // });
  uni.switchTab({
    url: item.path, // 要跳转到的页面路径
  });
};

onLaunch(() => {
  //隐藏官方的tabBar
  uni.hideTabBar();
});
</script>

<style lang="scss" scoped>
.custom-tabbar {
  background: #ffffff;
  // box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 56, 93, 0.12);
  border-radius: 13rpx 13rpx 0rpx 0rpx;
  border-top: 1px solid rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-weight: 500;
  font-size: 30rpx;
  color: #999;
  text-align: center;
  padding-top: 20rpx;
  .custom-img {
    width: 48rpx;
    height: 48rpx;
  }
  .active {
    color: $u-primary;
  }
}
</style>
