<template>
  <view class="tabbar">
    <view v-for="item in list" :key="item.id" class="bar" @click="switchTab(item)">
      <view class="card" :class="{ active: props.id == item.id }">
        <image class="image" :src="props.id == item.id ? item.selectIcon : item.icon"></image>
        <view class="text">{{ item.text }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lange="ts">
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const url = '../../static/image/tabbar/'
const props = defineProps({
  id: {
    type: Number,
    default: 0
  }
})
const text1 = computed(() => t('tabbar.index'))
const text2 = computed(() => t('tabbar.market'))
const text3 = computed(() => t('tabbar.jiaoyi'))
const text4 = computed(() => t('tabbar.record'))
const text5 = computed(() => t('tabbar.user'))
const list = ref([
  {
    path: '/pages/index/index',
    icon: `${url}index.png`,
    selectIcon: `${url}index_select2.png`,
    text: text1,
    id: 0
  },
  {
    path: '/pages/market/market',
    icon: `${url}market.png`,
    selectIcon: `${url}market_select2.png`,
    text: text2,
    id: 1
  },
  {
    path: '/pages/jiaoyi/jiaoyi',
    icon: `${url}market.png`,
    selectIcon: `${url}market_select2.png`,
    text: text3,
    id: 2
  },
  {
    path: '/pages/record/record',
    icon: `${url}record.png`,
    selectIcon: `${url}record_select2.png`,
    text: text4,
    id: 3
  },
  {
    path: '/pages/user/user',
    icon: `${url}user.png`,
    selectIcon: `${url}user_select2.png`,
    text: text5,
    id: 4
  }
])

const switchTab = (item) => {
  if (item.path) {
    uni.switchTab({
      url: item.path
    })
  }
}
</script>

<style scoped lang="scss">
.isIphoneX {
  padding-bottom: 2.13rem !important;
}
.tabbar {
  width: 100%;
  // height: 5.5rem;
  height: 4.375rem;
  background: #08182b;
  display: flex;
  justify-content: space-around;
  position: fixed;
  z-index: 1000;
  bottom: 0;
  // border-top: 0.03rem solid #1b3224;
  .bar {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .card {
    width: 3.59rem;
    // height: 3.59rem;
    border-radius: 0.63rem;
    // background-color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .image {
      width: 1.875rem;
      height: 1.875rem;
      // margin: 0.38rem auto 0;
    }
    .text {
      font-size: 0.65rem;
      color: #a0a5b0;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      word-break: break-all;
      font-weight: bold;
    }
  }
  .active {
    // background-color: #50aff0;
    .text {
      color: #fff;
    }
  }
}
</style>
