<template>
<!--  <div style="background: linear-gradient(167.96deg, #E6FAE1 0%, #F2E7B7 98.44%) no-repeat;min-height: 100%" >-->
  <div>

    <router-view />

    <van-tabbar route v-model="active" active-color="#F9BF3A">
      <van-tabbar-item v-for="tabBar in tabBarList" :key="tabBar.name" :replace="tabBar.replace" :to="tabBar.to">
<!--        <van-text-ellipsis :content="$t(tabBar.text)" />-->
        <div style="white-space: nowrap;overflow: hidden;text-align: center">{{ $t(tabBar.text) }}</div>
        <template #icon="props">
          <van-icon :color="props.active ? '' : 'rgb(229, 229, 229)'" :name="props.active ? tabBar.active : tabBar.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import {getAssetsImages} from "@/utils";
import { useI18n } from 'vue-i18n';

const { t } = useI18n()
const tabBarList = reactive([
  {
    to: '/home',
    name: 'home',
    text: 'app.home',
    replace: true,
    active: getAssetsImages('tabBar/home-active.png'),
    inactive: getAssetsImages('tabBar/home-inactive.png')
  },
  {
    to: '/serveList',
    name: 'serveList',
    text: 'app.serveList',
    replace: true,
    active: getAssetsImages('tabBar/artificer-active.png'),
    inactive: getAssetsImages('tabBar/artificer-inactive.png')
  },
  {
    to: '/message',
    name: 'message',
    text: 'app.message',
    replace: true,
    active: 'chat',
    inactive: 'chat'
  },
  {
    to: '/my',
    name: 'my',
    text: 'app.my',
    replace: true,
    active: getAssetsImages('tabBar/my-active.png'),
    inactive: getAssetsImages('tabBar/my-inactive.png')
  }
])

const active = ref(0)

</script>


<style lang="scss" scoped>

:deep('.van-tabbar-item__text') {
  text-align: center !important;
}
</style>
