<template>
  <uv-tabbar :value="current" @change="change" activeColor="#6eb657">
    <uv-tabbar-item v-for="item in currList" :text="item.text" :key="item.text" :name="item.name">
      <template v-slot:active-icon>
        <image class="icon" :src="item.selectedIconPath"></image>
      </template>
      <template v-slot:inactive-icon>
        <image class="icon" :src="item.iconPath"></image>
      </template>
    </uv-tabbar-item>
  </uv-tabbar>
</template>

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { useTabbar } from '@/store/tabbar'
const tabbar = useTabbar()
const listA = [
  {
    text: '工作台',
    name: 'work',
    path: '/pages/index/index',
    iconPath: '/static/images/common/tabbar/work.png',
    selectedIconPath: '/static/images/common/tabbar/workAct.png'
  },
  {
    text: '资讯',
    name: 'news',
    path: '/pages/news/index',
    iconPath: '/static/images/common/tabbar/news.png',
    selectedIconPath: '/static/images/common/tabbar/newsAct.png'
  },
  {
    text: '我的',
    name: 'mine',
    path: '/pages/mine/index',
    iconPath: '/static/images/common/tabbar/mine.png',
    selectedIconPath: '/static/images/common/tabbar/mineAct.png'
  }
]
const listB = [
  {
    text: '工作台',
    name: 'work',
    path: '/pages/index/index',
    iconPath: '/static/images/common/tabbar/work.png',
    selectedIconPath: '/static/images/common/tabbar/workAct.png'
  },
  {
    text: '我的',
    name: 'mine',
    path: '/pages/mine/index',
    iconPath: '/static/images/common/tabbar/mine.png',
    selectedIconPath: '/static/images/common/tabbar/mineAct.png'
  }
]

const currList = ref(listA)

const current = ref()
onShow(() => {
  if (tabbar.roleType === 0) {
    currList.value = listA
  } else {
    currList.value = listB
  }
  current.value = tabbar.currentTabbar
})

const change = (name: string) => {
  if (name === current.value) return
  const curr = currList.value.find((item) => item.name === name)
  tabbar.setCurrentTabbar(name)
  if (curr) {
    const path = curr.path
    uni.switchTab({
      url: path
    })
  }
}
</script>

<style lang="scss" scoped>
.icon {
  width: 36rpx;
  height: 36rpx;
}
</style>
