<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import Setting from '@/layout/tabbar/setting/index.vue'
import appDetail from '@/store/modules/appDetail'
const appInfoStore = appDetail()

// ensure route/router are defined
const route = useRoute()
const router = useRouter()

console.log('appInfoStore', appInfoStore);
const appStatus = computed(() => {
  // guard access and provide fallback
  try {
    return appInfoStore.appDetail?.check_status_text || ''
  } catch (e) {
    return ''
  }
})

const newPath = computed(() => {
  return route.path
})
const toLink = (path) => {
  router.push(path)
}



</script>

<template>
  <div class="tabbar">
    <div class="left">
      <!-- <img src="@/assets/images/logo_1.png" /> -->
       <!-- <el-icon>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tubiaozhizuomoban-"></use>
          </svg>
       </el-icon> -->
       小程序聊天系统
    </div>
    <div class="right">
      <div class="nav" v-if="newPath == '/chat'">
        状态：{{ appStatus }}
       <!-- <ul><li @click="toLink('/dashboard')" :class="{ active: newPath == '/dashboard' }">首页</li></ul> -->
      </div> 

     
    </div>
    <div class="setting">
      <Setting></Setting>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tabbar {
  width: 100%;
  height: $navbar-height;
  line-height: $navbar-height;
  position: relative;
  box-shadow: var(--el-box-shadow-light);
  .left {
   float: left;
    width: $base-menu-width;
    font-size: 20px;
    font-weight: bold;
    height: 100%;
    text-align: center;
    // img{
    //   width: 30px;
    // }
    line-height: $navbar-height;
    background-color: #2b3a4a;
    color: #fff;
    .el-icon{
      font-size: 36px;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .right {
    float: left;
    padding-left: 10px;
    width: calc(100% - 300px);
    .nav{
      padding-left: 10px;
      li{
        display: inline-block;
        padding: 0 12px;
        font-size: 15px;
        cursor: pointer;
        // font-weight: bold;
        &:hover{
          color: var(--el-color-primary);
        }
      }
      .active{
        color: var(--el-color-primary);
      }
    }
   
  }
  .setting{
    position: absolute;
    right: 20px;
    top: 0;
    height: 100%;
    line-height: $navbar-height;
  }
 
}
</style>
