<template>
  <v-app>
    <v-app-bar
      app
      color="blue"
      dark
    >
      <v-container class="py-0 fill-height">
        <v-toolbar-title
          class="hidden-sm-and-down ml-0 pl-4"
          style="width: 60px"
        >
          <span style="cursor:pointer" @click="goToHome()">{{ this.$store.state.webInfo.name }}</span>
        </v-toolbar-title>
        <router-link v-for="item in items" :key="item.text" :to="item.link">
          <v-list-item
            link
          >
            <v-list-item-action>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>
                {{ item.text }}
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </router-link>
        <v-spacer />
        <SearchInput />
        <v-spacer />
        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <v-btn
              icon
              v-bind="attrs"
              v-on="on"
              @click="goToPublish"
            >
              <v-icon>mdi-video-plus</v-icon>
            </v-btn>
          </template>
          <span>发布</span>
        </v-tooltip>
        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <v-btn
              icon
              v-bind="attrs"
              v-on="on"
              @click="goToMessage"
            >
              <v-icon>mdi-bell</v-icon>
            </v-btn>
          </template>
          <span>通知</span>
        </v-tooltip>
        <Head v-if="this.$store.state.user.userInfo" />
        <!-- 未登录 -->
        <v-btn
          v-if="this.$store.state.user.userInfo == null"
          outlined
          @click="goToLoginPage"
        >
          <v-icon left dark>mdi-account</v-icon> 登录
        </v-btn>
      </v-container>
    </v-app-bar>
    <v-main>
      <v-container>
        <!--根据 router/index.js 中的路由渲染页面-->
        <router-view />
      </v-container>
    </v-main>
    <!--
    <v-footer app>
          <v-col
            class="text-center"
            cols="12"
          >
            {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
          </v-col>
        </v-footer>-->
  </v-app>
</template>

<script>
import Head from '@/layout/components/head.vue'
import SearchInput from '@/layout/components/search-input.vue'

export default {
  components: {
    Head,
    SearchInput
  },
  data: () => ({
    userInfo: {},
    drawer: true,
    keyword: '',
    items: [
      /* { icon: 'mdi-trending-up', text: '视频', link: '/video' },
      { icon: 'mdi-trending-up', text: '图片', link: '/picture' },
      { icon: 'mdi-trending-up', text: '音频', link: '/audio' },
      { icon: 'mdi-trending-up', text: '文章', link: '/article' },*/
      { icon: 'mdi-youtube-subscription', text: '直播', link: '/live' },
      { icon: 'mdi-trending-up', text: '状态', link: '/mblog' }
    ],
    links: [
      '直播',
      '状态'
      /* '知乎',
      '草榴'*/
    ]
    /*,
    headItem: [
      { icon: 'mdi-head', text: '个人中心', link: '/user/:userId', id: 0 },
      { icon: 'mdi-wrench', text: '创作中心', link: '/studio', id: 1 },
      { icon: 'mdi-logout', text: '退出', link: '/logout', id: 2 }
    ]*/
  }),
  mounted() {
  },
  created() {
    this.userInfo = this.$store.state.user.userInfo
    this.$vuetify.theme.dark = this.$store.state.darkThemOpen
  },
  methods: {
    goToLink() {
      console.log('跳转到页面')
      // this.$router.push('/studio1')
    },
    /* headClick(value) {
      if (value === 0) {
        this.$router.push('/user/' + this.userInfo.userId)
      } else if (value === 1) {
        this.$router.push('/studio')
      } else {
        this.logout()
      }
    },*/
    logout() {
      // 调用 store/modules/user.js 中的 login 方法
      this.$store.dispatch('user/logout').then(() => {
        if (this.$route.path === '/') {
          location.reload()
        } else {
          this.$router.push('/')
        }
      }).catch(() => {
        console.log('用户登录失败')
      })
    },
    goToLoginPage() {
      this.$router.push('/login')
    },
    goToMessage() {
      this.$router.push('/message')
    },
    goToPublish() {
      this.$router.push('/studio/upload')
    },
    goToHome() {
      if (this.$route.path === '/') {
        return
      }
      this.$router.push('/')
    },
    goToUserHome() {
      if (this.$route.path === '/user/' + this.$store.state.user.userInfo.userId) {
        return
      }
      this.$router.push('/user/' + this.$store.state.user.userInfo.userId)
    }
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
}
</style>
