<template>
  <up-tabbar
    :value="currentIndex"
    @change="changeEvent"
    :activeColor="activeColor"
    :inactiveColor="inactiveColor"
    :border="border"
    :fixed="fixed"
    :zIndex="zIndex"
    :placeholder="true"
    :safeAreaInsetBottom="true"
    :customStyle="customStyle"
  >
    <up-tabbar-item
      v-for="(item, index) in tabbarList"
      :key="index"
      :text="item.text"
      :icon="item.icon"
      :mid-button="item.midButton"
      :dot="item.dot ? true : false"
      :badge="item.badge ? item.badge : ''"
      :badgeStyle="item.badgeStyle ? item.badgeStyle : ''"
    >
      <template #active-icon v-if="item.customIcon">
        <image class="u-page__item__slot-icon" :src="item.activeIcon"></image>
      </template>
      <template #inactive-icon v-if="item.customIcon">
        <image class="u-page__item__slot-icon" :src="item.inactiveIcon"></image>
      </template>
    </up-tabbar-item>
  </up-tabbar>
</template>

<script setup lang="ts">
import { CSSProperties } from "vue";
interface Props {
  border?: boolean; //是否显示上方边框
  zIndex?: string | number; //元素层级z-index
  activeColor?: string; //选中标签的颜色
  inactiveColor?: string; //未选中标签的颜色
  fixed?: boolean; //是否固定在底部
  placeholder?: boolean; //fixed定位固定在底部时，是否生成一个等高元素防止塌陷
  currentIndex?: string | number; //当前激活的索引
  tabbarList?: itemProps[]; // 响应式变量
  safeAreaInsetBottom?: boolean; // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
  customStyle?: string | CSSProperties;
}
interface itemProps {
  text: string;
  icon?: string;
  [propName: string]: any;
}

const props = withDefaults(defineProps<Props>(), {
  border: true,
  fixed: true,
  currentIndex: 0,
  safeAreaInsetBottom: true,
  tabbarList: () => [
    {
      text: "首页",
      icon: "home",
      badge: 0,
      routeType: "switchTab", // navigateTo, switchTab, redirectTo, reLaunch
      customIcon: true,
      pagePath: "/pages/index",
      activeIcon: "https://cdn.uviewui.com/uview/common/bell-selected.png",
      inactiveIcon: "https://cdn.uviewui.com/uview/common/bell.png",
    },
    {
      text: "我的",
      icon: "account",
      routeType: "switchTab",
      pagePath: "/pages/sys/my",
    },
  ],
});
//切换标签事件
const changeEvent = (index: any) => {
  let routeType = props.tabbarList[index].routeType;
  let pagePath = props.tabbarList[index].pagePath;
  if ("switchTab" == routeType) {
    uni.switchTab({ url: pagePath });
  } else if ("redirectTo" == routeType) {
    uni.redirectTo({ url: pagePath });
  } else if ("reLaunch" == routeType) {
    uni.reLaunch({ url: pagePath });
  } else {
    uni.navigateTo({ url: pagePath });
  }
};
</script>

<style lang="scss" scoped>
.u-page__item__slot-icon {
  width: 32rpx;
  height: 32rpx;
}
</style>
