<template>
  <div class="position dropdown anim">
    <span class="name">SEgGQ58HRlLd</span>
    <div class="divCode">
      <span class="address">{{showAccount}}</span>
      <img
        class="icCopy" width="24" height="24"
        v-clipboard:copy="account"
        v-clipboard:success="onCopy"
        v-clipboard:error="onCopyError"
        src="data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M20 9H11C9.89543 9 9 9.89543 9 11V20C9 21.1046 9.89543 22 11 22H20C21.1046 22 22 21.1046 22 20V11C22 9.89543 21.1046 9 20 9Z' stroke='%23BCADF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e %3cpath d='M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5' stroke='%23BCADF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e">
    </div>
    <span class="label">Balance</span>
    <span class="coin">0 WBNB</span>
    <span class="money">0 USD</span>
    <div class="menu">
      <div class="item">
        <img class="icon" src="data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cg clip-path='url(%23clip0)'%3e %3cpath d='M8.39289 16.2647L10.5253 21.7961H0.770458L2.84474 16.2647H8.39289Z' stroke='white' stroke-width='1.5' /%3e %3cpath d='M13.474 21.7961L15.6063 16.2647H21.0965L23.2289 21.7961H13.474ZM21.0849 16.2345L21.085 16.2349L21.0849 16.2345Z' stroke='white' stroke-width='1.5' /%3e %3cpath d='M7.14497 13.3584L9.21925 7.827H14.6036L16.8507 13.3584H7.14497Z' stroke='white' stroke-width='1.5' /%3e %3cpath d='M12.7031 3.56334V2.15706C12.7031 1.76841 12.3887 1.45392 12 1.45392C11.6114 1.45392 11.2969 1.76841 11.2969 2.15706V3.56334C11.2969 3.95199 11.6114 4.26648 12 4.26648C12.3887 4.26648 12.7031 3.95199 12.7031 3.56334Z' fill='white' /%3e %3cpath d='M14.9584 4.85562C15.3156 5.00351 15.7293 4.83508 15.8772 4.47451L16.4141 3.17534C16.5624 2.81622 16.3921 2.40559 16.0337 2.25727C15.6739 2.10825 15.2619 2.27926 15.115 2.63837L14.578 3.93755C14.4296 4.29671 14.5999 4.7073 14.9584 4.85562Z' fill='white' /%3e %3cpath d='M9.03678 4.85562C9.39519 4.7073 9.56549 4.29531 9.41718 3.93685L8.87885 2.63772C8.73054 2.27997 8.32267 2.10901 7.96008 2.25732C7.60166 2.40564 7.43136 2.81763 7.57968 3.1761L8.11801 4.47527C8.2689 4.83762 8.68169 5.00267 9.03678 4.85562Z' fill='white' /%3e %3cpath d='M20.4376 4.26443C20.0489 4.26443 19.7344 4.57893 19.7344 4.96758V5.67072H19.0313C18.6426 5.67072 18.3281 5.98521 18.3281 6.37386C18.3281 6.76251 18.6426 7.077 19.0313 7.077H19.7344V7.78015C19.7344 8.1688 20.0489 8.48329 20.4376 8.48329C20.8262 8.48329 21.1407 8.1688 21.1407 7.78015V7.077H21.8438C22.2325 7.077 22.547 6.76251 22.547 6.37386C22.547 5.98521 22.2325 5.67072 21.8438 5.67072H21.1407V4.96758C21.1407 4.57893 20.8262 4.26443 20.4376 4.26443Z' fill='white' /%3e %3cpath d='M3.56133 7.077C3.17268 7.077 2.85819 7.39149 2.85819 7.78014V8.48328H2.15505C1.7664 8.48328 1.4519 8.79777 1.4519 9.18642C1.4519 9.57507 1.7664 9.88956 2.15505 9.88956H2.85819V10.5927C2.85819 10.9813 3.17268 11.2958 3.56133 11.2958C3.94998 11.2958 4.26447 10.9813 4.26447 10.5927V9.88956H4.96761C5.35626 9.88956 5.67075 9.57507 5.67075 9.18642C5.67075 8.79777 5.35626 8.48328 4.96761 8.48328H4.26447V7.78014C4.26447 7.39149 3.94998 7.077 3.56133 7.077Z' fill='white' /%3e %3c/g%3e %3cdefs%3e %3cclipPath id='clip0'%3e %3crect width='24' height='24' fill='white' /%3e %3c/clipPath%3e %3c/defs%3e %3c/svg%3e">
        <span class="itemName">Inventory</span>
      </div>
      <div class="item">
        <img class="icon" src="data:image/svg+xml,%3csvg width='20' height='22' viewBox='0 0 20 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.8067 6.62358L18.1842 5.54349C17.6577 4.62957 16.4907 4.31429 15.5755 4.83869V4.83869C15.1399 5.09531 14.6201 5.16812 14.1307 5.04106C13.6413 4.91399 13.2226 4.59749 12.9668 4.16134C12.8023 3.88412 12.7139 3.56836 12.7105 3.24601V3.24601C12.7254 2.72919 12.5304 2.22837 12.17 1.85764C11.8096 1.48691 11.3145 1.27783 10.7975 1.27805H9.5435C9.03697 1.27804 8.55131 1.47988 8.194 1.83891C7.83669 2.19795 7.63717 2.68456 7.63961 3.19109V3.19109C7.6246 4.23689 6.77248 5.07678 5.72657 5.07667C5.40421 5.07332 5.08846 4.98491 4.81123 4.82038V4.82038C3.89606 4.29598 2.72911 4.61126 2.20254 5.52519L1.53435 6.62358C1.00841 7.53636 1.3194 8.70258 2.23 9.23228V9.23228C2.8219 9.57401 3.18653 10.2056 3.18653 10.889C3.18653 11.5725 2.8219 12.204 2.23 12.5458V12.5458C1.32056 13.0719 1.00923 14.2353 1.53435 15.1453V15.1453L2.16593 16.2346C2.41265 16.6798 2.8266 17.0083 3.31619 17.1474C3.80578 17.2866 4.33064 17.2249 4.77462 16.976V16.976C5.21108 16.7213 5.73119 16.6515 6.21934 16.7822C6.70749 16.9128 7.12324 17.233 7.37416 17.6716C7.5387 17.9489 7.62711 18.2646 7.63046 18.587V18.587C7.63046 19.6435 8.48696 20.5 9.5435 20.5H10.7975C11.8505 20.5 12.7055 19.6491 12.7105 18.5961V18.5961C12.7081 18.088 12.9089 17.6 13.2682 17.2407C13.6275 16.8814 14.1155 16.6806 14.6236 16.6831C14.9452 16.6917 15.2596 16.7797 15.5389 16.9394V16.9394C16.4517 17.4653 17.6179 17.1543 18.1476 16.2437V16.2437L18.8067 15.1453C19.0618 14.7075 19.1318 14.186 19.0012 13.6963C18.8706 13.2067 18.5502 12.7893 18.111 12.5366V12.5366C17.6718 12.2839 17.3514 11.8665 17.2208 11.3769C17.0902 10.8873 17.1603 10.3658 17.4154 9.92793C17.5812 9.63831 17.8214 9.39817 18.111 9.23228V9.23228C19.0161 8.70286 19.3264 7.54346 18.8067 6.63274V6.63274V6.62358Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3ccircle cx='10.175' cy='10.889' r='2.63616' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e">
        <span class="itemName">Account Setting</span>
      </div>
      <div class="item">
        <img class="icon" src="data:image/svg+xml,%3csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M20.6389 12.3958H16.5906C15.1042 12.3949 13.8993 11.1909 13.8984 9.70449C13.8984 8.21804 15.1042 7.01413 16.5906 7.01321H20.6389' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3cpath d='M17.0485 9.64288H16.7369' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.74766 1H15.3911C18.2892 1 20.6388 3.34951 20.6388 6.24766V13.4247C20.6388 16.3229 18.2892 18.6724 15.3911 18.6724H6.74766C3.84951 18.6724 1.5 16.3229 1.5 13.4247V6.24766C1.5 3.34951 3.84951 1 6.74766 1Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3cpath d='M6.03564 5.53816H11.4346' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e">
        <span class="itemName">Wallet</span>
      </div>
      <div class="item">
        <span class="itemName" @click="disconnectWallet">Logout</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { BlockChain } from '@/utils/blockchain'
import { AppModule } from '@/store/modules/app'
import { UserModule } from '@/store/modules/user'
import { Message } from 'element-ui'

@Component({
  name: 'TopUserInfo',
  components: {}
})
export default class extends Vue {
  bc = new BlockChain();

  get walletCollected() {
    return AppModule.walletConnected
  }

  get showAccount() {
    return UserModule.accountShow
  }

  get account() {
    return UserModule.account
  }

  async disconnectWallet() {
    return this.bc.disconnect()
  }

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

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

<style lang="scss" scoped>
.position {
  top: 116px;
  right: 59px;
  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;
    font-family: 'Oxanium', monospace;
  }

  .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;
    }

    &:last-child {
      margin-bottom: 0;
    }
    .itemName {
      padding: 0 0.5em;
    }
  }

  &.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;
}

@media (max-width: 767px) {

}
</style>
