<script setup lang="ts" name="Footer">
import { ref, computed } from 'vue'
import { storeToRefs } from 'pinia'
import  {useAppStore}  from '../store/modules/app'
// import { showToast, showSuccessToast, allowMultipleToast } from 'vant'
import svgIcon from '../components/SvgIcon/index.vue'

// const appStore = useAppStore()
// const { unReadMessage, todoCount } = storeToRefs(appStore)
const props = withDefaults(defineProps<{
  selected?: number
}>(), {
  selected: 2
})

const footerList = ref([
  {
    title: '消息',
    icon: 'tabbar-message',
    path: '/pages/news/index',
    // unRead: computed(() => unReadMessage.value)
  },
  {
    title: '协作',
    icon: 'tabbar-approve',
    path: '/pages/approve/index',
    // unRead: computed(() => todoCount.value)
  },
  {
    title: '工作台',
    icon: 'tabbar-stage',
    path: '/pages/stage/index',
    unRead: 0
  },
  {
    title: '培训',
    icon: 'tabbar-train',
    path: '/pages/train/index',
    unRead: 0
  },
  {
    title: '我的',
    icon: 'tabbar-mine',
    path: '/pages/mine/index',
    unRead: 0
  }
])
function handleChangePageByIndex(item: any): void {
  uni.switchTab({
    url: item.path
  });
}
// appStore.gettUserNotReadCount() // 有无未读消息
</script>

<template>
  <div class="footer">
    <template v-for="(item, index) in footerList" :key="index">
      <!-- :class="{active: route.path === item.path}" -->
      <div class="footer-item" :class="{active: selected === index}"   @click="handleChangePageByIndex(item)">
        <div class="footer-item-icon">
          <div class="footer-item-icon__inner">
            <!-- <svgIcon
              class="footer-item-icon__inner-svg"
              :icon="item.icon" /> -->
             <text class="iconfont footer-item-icon__inner-svg" :class="`icon-${item.icon}`"></text> 
              <!-- <text class="iconfont footer-item-icon icon-tabbar-stage"></text> -->
          </div>
        </div>
        <!-- <van-badge :dot="item.unRead > 0"> -->
          <div class="footer-item-label">{{ item.title }}</div>
        <!-- </van-badge> -->
      </div>
    </template>
  </div>
</template>

<style lang="less" scoped>
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  height: 20rpx;
  height: calc(20rpx + env(safe-area-inset-bottom));
  background-color: #fff;
  padding-bottom: 12rpx;
  padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
  border-top: thin solid rgba(0, 0, 0, 0.035);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  box-shadow: 0px -1.2rpx 8rpx  rgba(221, 237, 253, 0.54);
  // box-sizing: content-box;
  .footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    width: 20%;
    height: 100%;
    &-icon {
      position: absolute;
      bottom: 36rpx;
      padding: 0;
      font-size: 40rpx;
      background-color: transparent;
      border-radius: 100%;
      transition: all .3s ease;
       color: rgba(137, 150, 171, 1);
      &__inner {
        padding: 0;
        transition: padding .3s ease, backround-color .3s ease;
        border-radius: 100%;
        &-svg {
          display: block;
          font-size: 40rpx;
          color: rgba(137, 150, 171, 1);
        }
      }
    }
    &-label {
      margin-top: 12rpx;
      font-size: 24rpx;
      line-height: 1;
      color: rgba(51, 51, 51, 1);
      transition: color .3s ease;
    }
    &.active {
      .footer-item-icon {
        padding: 14rpx;
        background-color: #fff;
        color: #4773FC;
        border-top: thin solid rgba(0, 0, 0, 0.035);
        &__inner {
          padding: 12rpx 12rpx 12rpx;
          background-color: #4773FC;
          box-shadow:14.7212rpx 20rpx 37.5rpx 5.77rpx rgba(79,129,240,0.35);
          &-svg {
            
            color: #fff;
          }
        }
      }
      .footer-item-label {
        color: #4773FC;
      }
    }
  }
}
</style>
