<template>
  <view class="tab-bar">
    <view
      v-for="(item, index) in list"
      :key="index"
      class="tab-bar-item"
      @click="switchTab(item, index)"
    >
      <view class="tab-box">
        <image
          class="tab_img"
          :src="currentIndex === index ? item.selectedIconPath : item.iconPath"
        ></image>
        <text v-if="notice && item.text === '我的'" class="notice"></text>
      </view>

      <view class="tab_text" :style="{ color: currentIndex === index ? selectedColor : color }">{{
        item.text
      }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { bindApplyStore } from '@/store'
import router from '@/router/router'

import db from '@/utils/db'

const props = withDefaults(
  defineProps<{
    selectedIndex: number
  }>(),
  { selectedIndex: 0 },
)
const { getApplyBindInfoList } = bindApplyStore()

const currentIndex = ref(0)
const list = ref([])
const color = ref<string>('#8E8D9D')
const selectedColor = ref<string>('#625EFF')
const notice = ref(false)
function switchTab(item, index) {
  currentIndex.value = index
  let url = item.pagePath
  router.redirectTo({ path: url })
}

onMounted(async () => {
  currentIndex.value = props.selectedIndex
  // 家长
  await getApplyBindInfoList()
  notice.value = db.get('applyBindMsg')
  list.value = [
    {
      pagePath: '/pages/home/index',
      iconPath: '/static/tabBar/homeno.png',
      selectedIconPath: '/static/tabBar/home.png',
      text: '首页',
    },
    {
      pagePath: '/pages/academicReport/index',
      iconPath: '/static/tabBar/studyReportNo.png',
      selectedIconPath: '/static/tabBar/studyReport.png',
      text: '学情报告',
    },
    {
      pagePath: '/pages/applicationManagement/index',
      iconPath: '/static/tabBar/applicationNo.png',
      selectedIconPath: '/static/tabBar/application.png',
      text: '应用管控',
    },
    {
      pagePath: '/pages/mine/index',
      iconPath: '/static/tabBar/mineno.png',
      selectedIconPath: '/static/tabBar/mine.png',
      text: '我的',
    },
  ]

  // let adminType = getCache('userInfo').adminType;
  // if (adminType === 16) {
  //   // 家长
  //   await getApplyBindInfoList();
  //   notice.value = getCache('applyBindMsg');
  //   list.value = [
  //     {
  //       pagePath: '/pages/home/index',
  //       iconPath: '/static/tabBar/homeno.png',
  //       selectedIconPath: '/static/tabBar/home.png',
  //       text: '首页',
  //     },
  //     {
  //       pagePath: '/pages/academicReport/index',
  //       iconPath: '/static/tabBar/studyReportNo.png',
  //       selectedIconPath: '/static/tabBar/studyReport.png',
  //       text: '学情报告',
  //     },
  //     {
  //       pagePath: '/pages/applicationManagement/index',
  //       iconPath: '/static/tabBar/applicationNo.png',
  //       selectedIconPath: '/static/tabBar/application.png',
  //       text: '应用管控',
  //     },
  //     {
  //       pagePath: '/pages/mine/index',
  //       iconPath: '/static/tabBar/mineno.png',
  //       selectedIconPath: '/static/tabBar/mine.png',
  //       text: '我的',
  //     },
  //   ];
  // } else if (adminType === 6) {
  //   // 督学
  //   uni.reLaunch({
  //     url: '/pages/inspector/schedule/index',
  //   });
  //   list.value = [
  //     {
  //       pagePath: '/pages/inspector/schedule/index',
  //       iconPath: '/static/tabBar/scheduleNo.png',
  //       selectedIconPath: '/static/tabBar/schedule.png',
  //       text: '课表',
  //     },
  //     {
  //       pagePath: '/pages/inspector/student/index',
  //       iconPath: '/static/tabBar/studentNo.png',
  //       selectedIconPath: '/static/tabBar/student.png',
  //       text: '学员',
  //     },
  //     {
  //       pagePath: '/pages/inspector/mine/index',
  //       iconPath: '/static/tabBar/mineno.png',
  //       selectedIconPath: '/static/tabBar/mine.png',
  //       text: '我的',
  //     },
  //   ];
  // }
})
</script>

<style lang="scss" scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1rpx solid #eee;
  padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
  z-index: 99999;

  .tab-bar-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .tab-box {
      position: relative;
      width: 50rpx;
      height: 50rpx;

      .notice {
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        background-color: red;
        width: 14rpx;
        height: 14rpx;
        border-radius: 50%;
      }
      .tab_img {
        width: 50rpx;
        height: 50rpx;
      }
    }

    .tab_text {
      font-size: 22rpx;
      margin-top: 12rpx;
    }
  }
}
</style>
