<template>
  <div class="info-bg" @click="close">
    <div class="position dropdown anim" @click.stop="">
      <span class="name">SEgGQ58HRlLd</span>
      <div class="divCode">
        <span class="address">{{showAccount}}</span>
        <div v-clipboard:copy="account"
             v-clipboard:success="onCopy"
             v-clipboard:error="onCopyError">
          <svg-icon
            name="copy" class="icCopy"></svg-icon>
        </div>
      </div>
<!--      <span class="label">Balance</span>-->
<!--      <span class="coin">0 WBNB</span>-->
<!--      <span class="money">0 USD</span>-->
      <div class="menu">
        <div class="item">
          <svg-icon class="icon" name="inventory"></svg-icon>
          <a class="itemName" href="/mynft">MyNFT</a>
        </div>
        <div class="item">
          <svg-icon class="icon" name="setting"></svg-icon>
          <a class="itemName" href="javascript:void(0)" @click="comingSoon">Account Setting</a>
        </div>
        <div class="item">
          <svg-icon class="icon" name="wallet"></svg-icon>
          <a class="itemName" href="/wallet" >Wallet</a>
        </div>
        <div class="item">
          <span class="itemName" @click="disconnectWallet">Logout</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { AppModule } from '@/store/modules/app'
import ChainManager from '@/chain/ChainManager'

@Component({
  name: 'TopUserInfo',
  components: {}
})
export default class extends Vue {
  chainManager = new ChainManager()
  close(e: any) {
    console.log(e)
    this.$emit('close-self')
  }

  get walletCollected() {
    return AppModule.walletConnected
  }

  get showAccount() {
    return AppModule.accountShow
  }

  get account() {
    return AppModule.accountId
  }

  async disconnectWallet() {
    return this.chainManager.logout()
  }

  onCopy(e: any) {
    this.$message({
      message: 'You just copied accountId',
      type: 'success',
      duration: 5 * 1000
    })
  }

  onCopyError(e: any) {
    this.$message({
      message: 'Failed to copy texts',
      type: 'error',
      duration: 5 * 1000
    })
  }
}
</script>

<style lang="scss" scoped>
.position {
  top: 84px;
  right: 32px;
  z-index: 9;
}
.container {
  display: flex;
  right: 2.5em;
  position: fixed;
}

.dropdown {
  position: fixed;
  display: flex;
  flex-direction: column;
  cursor: default;
  padding: 1.5em;
  width: 18.875em;
  box-sizing: border-box;
  border-radius: 0.5em;

  z-index: 11;

  transition: all 0.5s;
  opacity: 1;
  overflow: hidden;

  max-height: 37.5em;

  background-color: #261858;
  color: white;

  .name {
    font-size: 1.125em;
    margin-bottom: 0.5em;
  }

  .divCode {
    align-items: center;
    display: flex;
    cursor: pointer;
    margin-bottom: 1em;
  }

  .address {
    color: #bcadf2;
    font-size: 1.125em;
    flex: 1;
    display: inline-block;
    overflow: hidden !important;
    white-space: nowrap;
    text-overflow: ellipsis;

    &:active {
      opacity: 0.6;
    }
  }
  .icCopy {
    margin-left: 0.625em;
    margin-right: 1.5em;
  }
  .coin {
    font-weight: bold;
    font-size: 1.25em;
    line-height: 1.4;
    margin-top: 0.5em;
  }
  .money {
    color: #a346ec;
    font-size: 1em;
    line-height: 1.5;
  }

  .label {
    color: #bcadf2;
    font-size: 1.125em;
  }

  .item {
    display: flex;

    padding: 0.5em 0;
    margin-bottom: 1em;

    font-size: 1.125em;
    line-height: 1.33;
    color: white;

    &:hover {
      background: #563cb8;
      border-radius: 0.25em;
      cursor: pointer;
    }
    .icon {
      padding: 0 0.625em;
      color: white;
      width: 22px;
      height: 22px;
    }

    &:last-child {
      margin-bottom: 0;
    }
    .itemName {
      padding: 0 0.5em;
      text-decoration: none;
      color: white;
    }
  }

  &.hide {
    max-height: 0;
    opacity: 0;
  }

  .menu {
    border-top: 0.063em solid #382873;
    margin-top: 1em;
    padding-bottom: 1em;
    padding-top: 1em;
    border-bottom: 0.063em solid #382873;
  }

  .btnLogout {
    font-size: 1.125em;
    padding: 1.375em 1.375em 0.375em 0;
    cursor: pointer;
  }
}

.navItem {
  font-weight: bolder;
  font-size: 1.125em;
}

.avatar {
  width: 3.125em;
  height: 3.125em;
  border-radius: 1.563em;
  cursor: pointer;
}

@keyframes overlay-anim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.anim {
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
  animation-name: overlay-anim;
  opacity: 0;
}
.info-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
@media (max-width: 767px) {

}
</style>
