
<template>
  <nut-tabbar class="nuttabbar" @tab-switch="tabSwitch"  
     bottom active-color="#2BB5ECFF" unactive-color="rgba(0,0,0,0.24)" v-model="activee">
      <nut-tabbar-item 
      v-for="item in list"
      :tab-title="item.text"
      :to="item.to"  
    >
    <template #icon="props">
        <img :src="props.active ? item.active : item.unactive" alt="" :style="{width:'24px',height:'24px'}"/> 
     </template>
    </nut-tabbar-item>
    </nut-tabbar>
</template>
<script setup>
import edu from "../assets/edu.png";
import edun from "../assets/edun.png";
import My from "../assets/myn.png";
import SMy from "../assets/my.png";
import department from '@/assets/department.png'
import departmentn from '@/assets/departmentn.png'
import interact from '@/assets/interact.png'
import interactn from '@/assets/interactn.png'
import { ref,onMounted } from 'vue'; 
import { useRouter } from 'vue-router'
const router = useRouter();
const cur_path=ref(router.currentRoute.value.path)
// const props = defineProps({  
//   departmentType: {  
//     type: String,  
//     required: false  
//   }  
// });  
// const active = (cur_path.value=='/my-tools')?ref(1):ref(0);
const activee = active();
const list = ref([ 
  { text: '宣教中心', active:edu,unactive:edun,to:'/education-centre',name:'/education-centre'},
  {  text: '科室服务', active:department,unactive: departmentn,to:'/department',name:'/department'},
  {  text: '健康互动', active:interact,unactive: interactn,to:'/interact',name:'/interact'},
  {  text: '我的', active:SMy,unactive: My,to:'/my',name:'/my'},
  ]);
  const tabSwitch= (item,index)=> {

  //  console.log(activee);
 }
  function active()
  {
    if(cur_path.value=='/education-centre')
    {
      return ref(0);
    }
    else if(cur_path.value=='/department')
    {
      return ref(1);
    }
    else if(cur_path.value=='/interact')
    {
      return ref(2);
    }
    else if(cur_path.value=='/my')
    {
      return ref(3);
    }
    else
    {
      return ref(0);
    }
  }
  onMounted(() => {  
      document.title = list.value[activee.value].text;  
    }); 
</script>
<style scoped>
.nuttabbar{
  --nut-tabbar-border-top: #fff;
  --nut-tabbar-border-bottom: #ffffff;
  --nut-tabbar-item-text-font-size:12px;
  --nut-tabbar-box-shadow:0px -4px 16px 0px rgba(0,0,0,0.04);
  --nut-tabbar-height:73px;
 
}
/deep/.nut-tabbar.nut-tabbar-bottom{
  box-shadow: 0px -9px 28px 2px rgba(0,30,69,0.04);
border-radius: 24px 24px 0px 0px;
} 

</style>