<template>
  <div class="card-info-outlet">
  <div class="card-root">
    <hero-nft :nft-data="nftData" class="item" @activate-clicked="onActivateClick"></hero-nft>
    <div class="attr-div" v-if="!nftData.hideAttr && nftData.type === 1">
      <div class="two-col-info">
        <div class="one-info">
          <div class="info-title">Level</div>
          <div class="info-val">{{nftData.level}}</div>
        </div>
        <div class="one-info"></div>
      </div>
      <div class="two-col-info">
        <div class="one-info">
          <div class="info-title">HP</div>
          <div class="info-val">{{attr('hp')}}</div>
        </div>
        <div class="one-info">
          <div class="info-title">Speed</div>
          <div class="info-val">{{attr('speed')}}</div>
        </div>
      </div>
      <div class="two-col-info">
        <div class="one-info">
          <div class="info-title">Attack</div>
          <div class="info-val">{{attr('atk')}}</div>
        </div>
        <div class="one-info">
          <div class="info-title">Defence</div>
          <div class="info-val">{{attr('def')}}</div>
        </div>
      </div>
      <div class="two-col-info">
        <div class="one-info">
          <div class="info-title">Advanced</div>
          <div class="info-val">{{attr('advanced_count')}}</div>
        </div>
        <div class="one-info">
          <div class="info-title">Lucky</div>
          <div class="info-val">{{attr('lucky')}}</div>
        </div>
      </div>
    </div>
    <div class="attr-div weapon" v-if="!nftData.hideAttr && nftData.type === 2">
      <div class="two-col-info">
        <div class="one-info">
          <div class="info-title">Level</div>
          <div class="info-val">{{nftData.level}}</div>
        </div>
        <div class="one-info">
        </div>
      </div>
      <div class="two-col-info">
        <div class="one-info">
          <div class="info-title">Attack</div>
          <div class="info-val">{{attr('atk')}}</div>
        </div>
        <div class="one-info">
          <div class="info-title">Clip</div>
          <div class="info-val">{{attr('clip_volume')}}</div>
        </div>
      </div>
      <div class="two-col-info">
        <div class="one-info">
          <div class="info-title">Reload</div>
          <div class="info-val">{{attr('reload_time')}}</div>
        </div>
        <div class="one-info">
          <div class="info-title">Rate</div>
          <div class="info-val">{{attr('fire_rate')}}</div>
        </div>
      </div>
      <div class="two-col-info">
        <div class="one-info">
          <div class="info-title">Speed</div>
          <div class="info-val">{{attr('bullet_speed')}}</div>
        </div>
        <div class="one-info">
          <div class="info-title">Range</div>
          <div class="info-val">{{attr('range')}}</div>
        </div>
      </div>
      <div class="two-col-info">
        <div class="one-info">
          <div class="info-title">Advanced</div>
          <div class="info-val">{{attr('advanced_count') || 0}}</div>
        </div>
        <div class="one-info">
          <div class="info-title">Lucky</div>
          <div class="info-val">{{attr('lucky')}}</div>
        </div>
      </div>
    </div>
    <div class="attr-div" v-if="nftData.hideAttr">
      <div class="coming">-- COMING SOON --</div>
    </div>
  </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import NftItem from '@/components/market/NftItem.vue'
import HeroNft from '@/components/market/nft/HeroNft.vue'
import { INftData } from '@/types/Nft'

@Component({
  name: 'NftInfo',
  components: {
    HeroNft,
    NftItem
  }
})
export default class extends Vue {
  @Prop() private nftData: INftData

  attr(key: string) {
    return this.nftData.attrMap.get(key)
  }

  hasAttr(key: string) {
    return this.nftData?.attrMap?.has(key)
  }

  onActivateClick(nftId: string) {
    this.$emit('activate-clicked', nftId)
  }
}
</script>

<style lang="scss" scoped>
.card-info-outlet{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  .nft-id {
    //display: none;
  }
}
  .card-root{
    text-decoration: none;
    display: flex;
    flex-direction: column;
    width: 14em;
    .card{
      height: 18em;
      width: 100%;
      position: relative;
    }
    .nft-id {
      color: #46E0F4;
      display: unset;
    }
    .attr-div{
      border: 10px solid #211638;
      background-color: #211638;
      border-image-source: url('../../assets/main/detail/border-attr.png');
      border-image-slice: 10;
      margin-top: 12px;
      display: flex;
      color: white;
      flex-direction: column;
      font-size: 11px;
      box-sizing: border-box;
      .coming{
        width: 100%;
        height: 55px;
        color: #6B6E91;
        text-align: center;
        line-height: 55px;
        font-size: 1.5em;
      }
      .two-col-info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        div {
          width: 50%;
        }
      }
      .one-col-info {
        display: flex;
        flex-direction: row;
        width: 100%;
        .one-info{
          width: 100%;
          justify-content: flex-start;
          .info-title{
            width: auto;
            text-transform: capitalize;
          }
          .info-val{
            width: auto;
            margin-left: 10px;
          }
        }
        &.nft-id-mobile{
          display: none;
        }
      }
      .one-info{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .info-title {
          width: 60%;
          text-transform: capitalize;
        }
        .info-val {
          color: #3CF562;
          width: 40%;
          text-align: right;
          padding-right: 14px;
        }
      }
      .all-col-info {
        display: flex;
        flex-wrap: wrap;
        .half-info{
          width: 50%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .info-title{
            width: 60%;
            text-transform: capitalize;
          }
          .info-val{
            width: 40%;
            margin-left: 10px;
            color: #3CF562;
          }
        }
      }
    }
  }
  @media (max-width: 767px) {
    .card-info-outlet{
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100vw;
      .nft-id {
        width: 100%;
        color: #46E0F4;
        text-decoration: none;
        margin-bottom: 5px;
        display: unset;
      }
    }
    .card-root{
      width: 85vw;
      flex-direction: row;
      justify-content: space-between;
      .card{
        width: 50vw;
      }
      .nft-id{
        display: none;
      }
      .attr-div{
        width: 35vw;
        margin-top: 16px;
        margin-left: 0;
        .two-col-info {
          display: flex;
          flex-direction: column;
          div{
            width: 100%;
          }
        }
        .one-col-info {
          &.nft-id-mobile {
            display: flex;
          }
        }
        .all-col-info {
          .half-info{
            width: 100%;
            margin-bottom: 8px;
            .info-title{
              width: 60%;
            }
            .info-val{
              width: 40%;
            }
          }
        }
        .coming{
          color: #6B6E91;
          text-align: center;
          line-height: 55px;
          margin-top: auto;
          margin-bottom: auto;
        }
        .one-info{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .info-title {
            width: 40%;
            margin-bottom: 8px
          }
          .info-val {
            color: #3CF562;
            width: 60%;
            padding-left: 5px;
          }
        }
        &.weapon{
          .one-info {
            .info-title{
              margin-bottom: 6px;
            }
          }
        }
      }
    }
    .token-color{
      color: #46E0F4!important;
    }
  }
.w50 {
  width: 50%!important;
}
</style>
