<template>
  <div class="pages">
    <div class="logoBox">
      <img src="../../assets/img/logoh.png" class="logo" @click="go('/')" />
      <div class="userInfo">
        <div class="nickName" v-if="!hasToken" @click="go('/login')">登录/注册</div>
        <div class="nickName" v-if="hasToken" @click="go('/myPage')">我的作品</div>
        <div class="userModel" v-if="hasToken">
          <!-- <img
            class="userImg"
            src="../../assets/img/user_black.png"
            @click="go('/myPage')"
          /> -->
          <!-- <img
            class="userImg"
            src="../../assets/img/loginOut.png"
            @click="loginOut()"
          /> -->
          <img class="userImg" src="../../assets/icon/icon-loginout.png" @click="loginOut()" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { mapState, mapActions } from 'vuex';
import { Toast, Dialog } from 'vant';
import { doLoginOut } from '../../api/login';

Vue.use(Toast);
export default {
  data() {
    return {
      hasToken: null
    };
  },
  computed: {
    ...mapState({
      characters: state => state.publicObj.characters
    })
  },

  methods: {
    ...mapActions(['setCharacters']),

    go(url) {
      this.$router.push(url);
    },
    loginOut() {
      Dialog.confirm({
        title: '退出登录',
        message: '您确定要退出登录吗？'
      })
        .then(() => {
          this.goLoginOut();
        })
        .catch(() => {
          return;
        });
    },
    async goLoginOut() {
      try {
        const res = await doLoginOut();
        // this.$router.push('/login');
        this.$router.push('/myPage');
        if (this.$route.name == 'myPage') {
          window.location.reload();
        }
        localStorage.removeItem('AccessToken');
      } catch (error) {
        console.log(error, 'error');
        Toast.fail(error.message);
      }
    }
  },
  created() {
    this.hasToken = localStorage.getItem('AccessToken');
  }
};
</script>

<style lang="scss" scoped>
.pages {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 99;
  .logoBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    background-color: #fff;
    .logo {
      float: left;
      width: 140px;
      height: 40px;
    }
    .userInfo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #000000;
      .nickName {
        position: relative;
        top: 1px;
        font-weight: 600;
        font-size: 13px;
        margin-right: 15px;
        margin-top: 3px;
      }
      .userModel {
        position: relative;
        top: 3px;
        margin-right: 10px;
        .userImg {
          width: 24px;
          height: 24px;
          margin-right: 2px;
        }
      }
    }
  }
}
</style>
