<template>
  <div class="vab-avatar" style="display: flex">
    <span
      style="
        height: 54px;
        line-height: 54px;
        margin-right: 30px;
        font-size: 17px;
      "
    >
      {{ time }}
    </span>
    <a-dropdown>
      <span class="ant-dropdown-link">
        <a-avatar :src="avatar" />
        {{ username }}
        <DownOutlined />
      </span>
      <template v-slot:overlay>
        <a-menu>
          <a-menu-item @click="logout">退出登录</a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script>
import { recordRoute } from '@/config'
import { DownOutlined } from '@ant-design/icons-vue'
import { useStore } from 'vuex'

import { mapGetters } from 'vuex'
export default {
  name: 'VabAvatar',
  components: { DownOutlined },
  computed: {
    ...mapGetters({
      avatar: 'user/avatar',
      username: 'user/username',
    }),
  },
  data() {
    return {
      time: '',
    }
  },
  mounted() {
    const store = useStore()
    setInterval(() => {
      store.commit('getTimeAll')
      var time = store.state.Time_All
      this.time =
        time[0] +
        '年' +
        (time[1] < 9 ? '0' + (time[1] + 1) : time[1] + 1) +
        '月' +
        (time[2] < 10 ? '0' + time[2] : time[2]) +
        '日 ' +
        (time[3] < 10 ? '0' + time[3] : time[3]) +
        ':' +
        (time[4] < 10 ? '0' + time[4] : time[4]) +
        ':' +
        (time[5] < 10 ? '0' + time[5] : time[5])
    }, 0)
  },
  methods: {
    async logout() {
      await this.$store.dispatch('user/logout')
      if (recordRoute) {
        const fullPath = this.$route.fullPath
        this.$router.push(`/login?redirect=${fullPath}`)
      } else {
        this.$router.push('/login')
      }
    },
  },
}
</script>
<style lang="less">
.vab-avatar {
  .ant-dropdown-link {
    display: block;
    min-height: @vab-header-height;
    cursor: pointer;
    line-height: @vab-header-height;
  }
}
</style>
