<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">
        <span>{{ tabBar.text }}</span>
        <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 {ref} from "vue";
import JGap from "@/components/JGap/JGap.vue";
import {getAssetsImages} from "@/utils";
import {useBackgroundHook} from "@/hooks/useBackgroundHook";

const tabBarList = [
  {
    to: '/home',
    name: 'home',
    text: '首页',
    replace: true,
    active: getAssetsImages('tabBar/home-active.png'),
    inactive: getAssetsImages('tabBar/home-inactive.png')
  },
  {
    to: '/serveList',
    name: 'serveList',
    text: '钱包',
    replace: true,
    active: getAssetsImages('tabBar/artificer-active.png'),
    inactive: getAssetsImages('tabBar/artificer-inactive.png')
  },
  {
    to: '/message',
    name: 'message',
    text: '客服',
    replace: true,
    active: 'chat',
    inactive: 'chat'
  },
  {
    to: '/my',
    name: 'my',
    text: '我的',
    replace: true,
    active: getAssetsImages('tabBar/my-active.png'),
    inactive: getAssetsImages('tabBar/my-inactive.png')
  }
]

const active = ref(0)

// const {setBodyBackground} = useBackgroundHook()
// setBodyBackground()
</script>


<style scoped>

</style>
