<template>
  <a class="card-outlet" :href="!nftData.hideAttr? `/item/${nftData.id}`: 'javascript:void(0)'">
    <div class="nft-id">#{{nftData.id}}</div>
    <div class="card" >
      <img v-if="nftData.id" class="bg-img" :src="cardBg" alt="">
      <div v-if="nftData.id" class="anim-border">
        <img class="card-main-img" :src="nftData.image"  alt=""/>
        <div class="info-bar" :class="{'bottom': !nftData.showBuy}">
          <div class="name-label">{{nftData.name}}</div>
          <div class="level-label">Lvl {{nftData.level || 1}}</div>
<!--          <div class="info-div" v-if="nftData.showBuy" @click="buyItem" :class="{'gray': !showLight}">-->
<!--            <img class='buy-icon' src="@/assets/main/card/icon_buy.png" alt=""/>-->
<!--            <div class="price-label">-->
<!--              <span :class="{'price': nftData.price !== nftData.priceDiscount}">{{priceDiscountShow}} {{nftData.currency}}</span>-->
<!--              <span v-if="nftData.price!==nftData.priceDiscount" class="price-old">{{priceShow}} {{nftData.currency}}</span>-->
<!--            </div>-->
<!--          </div>-->
        </div>
        <div class="class-div" v-if="nftData.type === 1">
          <img :src="require('@/assets/main/card/class_'+nftData.job+'.png')" alt="">
        </div>
      </div>
    </div>
  </a>
</template>

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

@Component({
  name: 'HeroNft',
  components: {
  }
})
export default class HeroNft extends Vue {
  @Prop() private nftData: INftData
  chainManger = new ChainManager()

  get walletCollected() {
    return AppModule.walletConnected
  }

  get cardBg() {
    if (this.nftData.isGenesis) {
      return require('@/assets/main/card/card_border_s.png')
    } else {
      return require('@/assets/main/card/card_border.png')
    }
  }

  // get showLight() {
  //   return !this.accountId || this.canBuy
  // }
  //
  // get canBuy() {
  //   return !this.nftData.stopBuy
  // }

  // get priceDiscountShow() {
  //   const v = Math.pow(10, this.nftData.decimals!)
  //   return (this.nftData.priceDiscount! / v).toFixed(3)
  // }
  //
  // get priceShow() {
  //   const v = Math.pow(10, this.nftData.decimals!)
  //   return (this.nftData.price! / v).toFixed(3)
  // }

  get accountId() {
    return AppModule.accountId
  }

  get logined() {
    return !!UserModule.token && !!AppModule.step
  }

  // async buyItem(event: any) {
  //   console.log('on click item: ', this.nftData.id)
  //   event.preventDefault()
  //   if (!this.logined) {
  //     await this.chainManger.login()
  //   }
  //   if (!this.canBuy) {
  //     this.$message({
  //       message: 'Can`t buy current time',
  //       type: 'warning',
  //       duration: 5 * 1000
  //     })
  //     return
  //   }
  //   if (!this.nftData.directBuy) {
  //     return
  //   }
  //   if (this.nftData.stopBuy) {
  //     return
  //   }
  //   EventBus.$emit(PRESALE_BEGIN)
  //   const account = AppModule.accountId
  //   try {
  //     const price = parsePrice(this.nftData.priceDiscount!, this.nftData.decimals!)
  //     const { nonce, signature } = await this.chainManger.bc.signPresale({
  //       type: this.nftData.recordId!,
  //       paymentTokenAddress: this.nftData.coinAddress!,
  //       price,
  //       buyerAddress: account
  //     })
  //     const buyData = {
  //       buyer_address: AppModule.accountId,
  //       type: this.nftData.recordId,
  //       price,
  //       payment_token_address: this.nftData.coinAddress,
  //       nonce,
  //       signature
  //     }
  //     await this.chainManger.bc.increaseAllowance(this.nftData.coinAddress!, price)
  //     const res: any = await buyBox(buyData)
  //     const orderId = res.order_id
  //     localStorage.setItem('tmp_presale_order_id', orderId)
  //     EventBus.$emit(PRESALE_ORDER_GET, orderId)
  //   } catch (err) {
  //     console.log('buy error: ', err)
  //     EventBus.$emit(PRESALE_ERROR, err)
  //   }
  // }
}
</script>

<style lang="scss" scoped>
// rect: 297x389
$width: 14em;
$height: 18.33em;
.card-outlet{
  .card{
    position: relative;
    width: $width;
    height: $height;
  }
}
.bg-img {
  width: $width;
  height: $height;
}
.anim-border {
  width: $width;
  height: $height;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.card-main-img {
  position: absolute;
  bottom: 0;
  max-height: 100%;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 100%;
}

.class-div{
  position: absolute;
  top: 8px;
  right: 8px;
  width: $width*42/297;
  height: $height*42/389;
}
.class-div img {
  width: 100%;
}
.name-img {
  height: $height * 39 / 389;
  width: auto;
  position: absolute;
  right: $width * 9 / 297;
  bottom: $height * 100 / 389;
}
.info-bar {
  position: absolute;
  right: $width * 20 / 297;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  div:last-child{
    margin-bottom: 0;
  }
  .name-label {
    color: white;
    text-transform:capitalize;
    font-size: $width * 40 / 390;
    text-shadow: black 0.1em 0.1em 0.2em
  }
  .level-label{
    color: yellow;
    margin-bottom: -$height * 20 / 389;
    margin-top: -$height * 5 / 389;
    text-shadow: black 0.1em 0.1em 0.2em;
  }
  .info-div {
    background-image: url('../../../assets/main/card/name_bg.png');
    width: 100%;
    height: $height * 0.29;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-size: contain;
    background-repeat: no-repeat;
    justify-content: space-between;
    cursor: pointer;
  }
}

.price-label {
  color: black;
  height: $height * 29 / 389;
  font-weight: bold;
  width: $width * 145 / 297;
  background-image: url('../../../assets/main/card/price_bg.png');
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-right: $width * 40 / 297;
  margin-bottom: $width * 10 / 297;
}
.price-label span {
  font-size: $width * 20 / 297;
}
.price-label .price{
  color: red;
  margin-top: 9px;
  text-shadow: black 0.1em 0.1em 0.2em
}
.price-label .price-old{
  text-decoration:line-through;
  font-size: $width * 15 / 297;
  color: white;
  text-shadow: black 0.1em 0.1em 0.2em
}
.buy-icon {
  width: $width * 44 / 297;
  height: $height * 52 / 389;
  margin-left: $width * 40 / 297;
  margin-bottom: $height * 12 / 389;
}

.gray {

  filter: grayscale(100%);
}
.bottom {
  bottom: $height * 10 / 389;
}

.nft-id {
  color: #46E0F4;
  display: unset;
  width: $width;
  margin-bottom: 5px;
}

</style>
