<template>
  <div class="nav-menu h-full bg-white" style="width: 72px">
    <div>
      <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="mb-1.5">
        <g clip-path="url(#clip0_11765_56929)">
          <path d="M47.8504 31.9362L47.8139 31.8724L47.8112 31.8684L46.4692 29.5327L46.1376 28.9551L43.1691 23.7904L42.5349 22.6857L41.2428 20.5195L40.1181 18.6344C39.3285 17.3117 37.8522 16.4941 36.2523 16.4941H26.0108C23.9317 16.4941 22.1304 17.8641 21.6751 19.7923L21.4411 20.7814L21.1081 22.1872L21.0543 22.4145L20.6369 24.2723L20.3524 25.6103L16.0346 45.9259L16.0226 45.9797C16.0219 45.9824 16.0219 45.9844 16.0213 45.987C16.0073 46.0628 16 46.1413 16 46.2217C16 46.9309 16.575 47.5059 17.2842 47.5059H24.4335C25.0544 47.5059 25.5721 47.0658 25.6918 46.4809L30.2967 24.8174L30.5899 23.4368L30.9574 21.708C31.0179 21.4235 31.2692 21.2201 31.5603 21.2201C31.7817 21.2201 31.985 21.3377 32.0954 21.5292L33.0718 23.2288L33.8229 24.5362L36.3613 28.9551L38.035 31.8691C38.0457 31.887 38.0563 31.905 38.0663 31.9229C38.1653 32.105 38.2211 32.3137 38.2211 32.5351C38.2211 33.2443 37.6462 33.8193 36.937 33.8193H30.9408C30.2316 33.8193 29.6566 34.3942 29.6566 35.1034C29.6566 35.3254 29.7125 35.5335 29.8115 35.7156L29.8428 35.7695L36.1998 46.8339L36.2311 46.8877C36.4564 47.2579 36.8638 47.5059 37.3291 47.5059H44.1435C44.8527 47.5059 45.4277 46.9309 45.4277 46.2217C45.4277 46.003 45.3732 45.7976 45.2768 45.6175L45.2402 45.553L41.4296 38.9214L39.6196 35.7695C39.6083 35.7522 39.5984 35.7342 39.5884 35.7156C39.4894 35.5342 39.4335 35.3254 39.4335 35.1034C39.4335 34.4088 39.9845 33.8432 40.6738 33.8206H46.7816C47.4603 33.7867 48 33.2257 48 32.5384C48 32.3204 47.9462 32.1157 47.8504 31.9362Z" fill="#7262F6"></path>
        </g>
        <defs>
          <clipPath id="clip0_11765_56929">
            <rect width="32" height="31.0117" fill="white" transform="translate(16 16.4941)"></rect>
          </clipPath>
        </defs>
      </svg>
      <div class="menus">
        <div class="menu " :class="$route.path == '/home' && 'menuActive'" @click="routeTo('/home')">
          <i class="icon el-icon-discover"></i>
          <div class="text">发现</div>
        </div>
        <div v-show="haveToken" class="menu" :class="$route.path == '/chat' && 'menuActive'" @click="routeTo('/chat')">
          <i class="icon el-icon-chat-line-round"></i>
          <div class="text">对话</div>
        </div>
        <el-popover
          placement="right"
          width="160"
          v-model="popoverVisible">
          <div class="flex flex-col">
            <div class="submenu w-full text-gray-600 text-center py-2 rounded cursor-pointer"
              @click="() => {
                popoverVisible = false
                routeTo('/createScene')
              }"
            >
              创建场景
            </div>
            <div class="submenu w-full text-gray-600 text-center py-2 rounded cursor-pointer" 
              @click="() => {
                popoverVisible = false
                routeTo('/create')
              }"
            >
              创建角色
            </div>
          </div>
          <div slot="reference" v-show="haveToken" class="menu" 
            :class="($route.path == '/create' || $route.path == '/createScene') && 'menuActive'"
          >
            <i class="icon el-icon-plus"></i>
            <div class="text">创建</div>
          </div>
        </el-popover>

        
        <div v-show="haveToken" class="menu" :class="$route.path == '/profile' && 'menuActive'" @click="routeTo('/profile')">
          <i class="icon el-icon-files"></i>
          <div class="text">个人中心</div>
        </div>
      </div>
    </div>
    <div class="flex flex-col justify-center items-center cursor-pointer">
      <el-tooltip class="item" effect="dark" content="会员" placement="right">
        <v-icon name="crown" class="my-2" scale="1.5"/>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="账户" placement="right">
        <div class="photo my-2 cursor-pointer" @click="toUser">
          <img class="img" src="@/assets/images/default_avatar_user.png" alt="">
        </div>
      </el-tooltip>
      
    </div>
    <div v-if="!haveToken" class="loginTip fixed w-56 h-32 bg-white left-20 bottom-6 z-50 p-3 rounded flex flex-col">
      <div class=" text-base text-black font-semibold">欢迎来到《元宇宙》</div>
      <div class=" text-gray-400">登录畅享所有服务</div>
      <el-button class="w-full mt-6" @click="showLogin">登录</el-button>
    </div>
  </div>
</template>

<script>
// 引入需要的图标
import { getToken, setToken, removeToken } from '@/utils/auth'
import 'vue-awesome/icons/crown'


export default {
  data() {
    return {
      popoverVisible: false,
      haveToken: false,
      getToken, 
    }
  },
  created() {
    if (this.getToken()) {
      this.haveToken = true
    }
  },
  mounted() {
  },
  watch: {
    '$store.state.user.token': function(newVal, oldVal) {
      console.log(newVal, '登录状态变化');
      if (newVal) {
        this.haveToken = true
      } else {
        this.haveToken = false
      }
    }
  },
  methods: {
    toUser() {
      if (this.getToken()) {
        this.$router.push('/user')
      } else {
        this.showLogin()
      }
      
    },
    routeTo(url) {
      this.$router.push(url)
    },
    showLogin() {
      this.$store.commit('app/TOGGLE_POPUP', true)
    },
  }
}
</script>

<style lang="scss" scoped>
.nav-menu {
  position: relative;
  padding-top: 20px;
  padding-bottom: 48px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right-width: 1px;
  border-color: #d3d3d365;
  align-items: center;

  .menus {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    .menu {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 10px 0;
      .icon {
        font-size: 26px;
      }
    }
    .menuActive {
      color: var(--bg-color1);
    }
  }
  .photo {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-color1);
    border: solid 1px #e5e7eb;
    .img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}
.loginTip {
  box-shadow: 1px 1px 4px #bfbfbf;
}
.submenu:hover {
  color: #fff;
  background: var(--bg-color1);
}
</style>