<template>
    <div class="hidden-sm-and-up tab-bar flex justify-around items-center bg-white w-full fixed bottom-0 pt-2 pb-5 border-t border-gray-100 border-solid">
      <template v-for="(item,index) in list">
        <nuxt-link class="item flex flex-col justify-center items-center hover:text-green-700 block" @click="onLink(item,index)">
          <component :is="item.icon" :style="{ fontSize: '18px',color: currentIndex == index ? '#15803DFF' : '#333333' }" />
          <span :style="{ color: currentIndex == index ? '#15803DFF' : '#333333'}" class="py-1">{{ item.name }}</span>
        </nuxt-link>
      </template>
    </div>
  <div class="hidden-sm-and-up h-[80px]"></div>
</template>

<script lang="ts" setup>
import { HomeOutlined, MessageOutlined, ShopOutlined, AppstoreOutlined, ReadOutlined } from '@ant-design/icons-vue';

const currentIndex = ref<number>()

const list = ref([
  {
    name: '首页',
    icon: HomeOutlined,
    path: '/'
  },
  {
    name: '产品',
    icon: AppstoreOutlined,
    path: '/market'
  },
  {
    name: '文档',
    icon: ReadOutlined,
    path: '/docs'
  },
  {
    name: '店铺',
    icon: ShopOutlined,
    path: '/user'
  }
])

const onLink = (item: any,index: number) => {
  if(item.path == '/'){
    // 回到页面顶部
    window.scrollTo(0, 0)
  }
  currentIndex.value = index
  navigateTo(item.path)
}
</script>

<style lang="scss" scoped>

</style>
