<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <router-link class="navbar-brand" :to="{name: 'home'}">Coeditor</router-link>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav ms-auto" >
          <li class="nav-item">
            <router-link v-if="!$store.state.user.is_login" class="nav-link" :to="{name: 'login'}">登录</router-link>
            <router-link v-else class="nav-link" :to="{name: 'userprofile',params:{userId: $store.state.user.id}}">{{ $store.state.user.username }}</router-link>
          </li>
          <li class="nav-item"> 
            <router-link v-if="!$store.state.user.is_login" class="nav-link" :to="{name: 'register'}">注册</router-link>
            <a v-else class="nav-link" style="cursor: pointer" @click="logout">退出</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script>
import { useStore } from 'vuex';
import router from '../router/index.js';

export default ({
    name:"NavBar",
    setup(){
      const store = useStore();
      // store.commit('dd');
      const logout = () => {
        store.commit('logout');
        router.push('/');
        location.reload();
      }
      return {
        store,
        logout,
      }
    }
})
</script>
