<template lang="pug">
.main
  header.header
    .circumscription
      .logo Kana
      nav.navbar
        NuxtLink.navbar-item(to="/") 论坛
        NuxtLink.navbar-item(to="/docs") 文档
        NuxtLink.navbar-item(to="/chat") 聊天室
        NuxtLink.navbar-item(to="/admin") admin
      .online
        .navbar-user(v-if="account.online")
          NuxtLink.userinfo(to="/account")
            img.avatar(:src="account.avatar")
            span.name {{ account.name }}
        .navbar-sign(v-else)
          NuxtLink.button(to="/account/signin") Signin
          NuxtLink.button(to="/account/create") Login
      .websocket(:class="{ on: websocket }")
  Nuxt
</template>

<script>
import "@/assets/sass/main.sass";
import "@/assets/sass/default.sass";

import socket from "@/assets/js/socket.js";

export default {
  data: () => ({
    websocket: false,
  }),
  computed: {
    account() {
      return this.$store.state.account;
    },
  },
  beforeMount() {
    // 如果掉线调用变红, 如果上线调用变绿
    socket.onclose = () => {
      this.websocket = false;
    };
    socket.onopen = () => {
      this.websocket = true;
    };
    let protocol = location.protocol === "https:" ? "wss:" : "ws:";
    socket.init(`${protocol}//${location.host}/api/`);
  },
  mounted() {
    console.log(
      "%c こめいじ さとり %c satori.love ",
      "color: white; background: #e9546b; padding:5px 0;",
      "padding:4px;border:1px solid #e9546b;"
    );
    this.$store.dispatch("account/profile");
  },
};
</script>

<style lang="sass">
.websocket
  background: red
  border-radius: 50%
  width: 1rem
  height: 1rem
  margin: .25rem .5rem
.websocket.on
  background: #00ee00

.main
  >header.header
    z-index: 100
    position: fixed
    top: 0
    left: 0
    width: 100%
    padding: 1rem 0
    >div
      display: flex
      align-items: flex-end
      >.logo
        font-size: 2rem
        font-weight: 900
        margin-right: 1.5rem
      >nav.navbar
        flex: 1
        display: flex
        align-items: center
        //justify-content: center
        .navbar-item
          margin: 0 .25rem
          padding: 0 .75rem
          height: 2rem
          line-height: 2rem
          text-align: center
          font-weight: 600
          white-space: nowrap
      >.online
        .navbar-user
          .userinfo
            font-weight: 600
            display: flex
            align-items: center
            .avatar
              width: 24px
              height: 24px
              border-radius: 50%
              margin-right: .5rem

footer.footer
  text-align: center
  padding: 4rem
  .github
    font-size: 2rem

.admin
  position: relative
.admin::before
  position: absolute
  top: 0
  right: 0
  content: '演示'
  width: 4rem
  height: 2rem
  background: #ff1414
</style>
