<template>
  <a class="card-outlet" :href="`/item/${data.id}`">
    <div class="nft-id">#{{data.id}}</div>
    <div class="card" >
      <img v-if="data.id" class="bg-img" src="@/assets/main/card/card_border.png" alt="">
      <div v-if="data.id" class="anim-border">
        <img class="card-main-img" :src="require(`@/assets/main/card/${data.skelName}.png`)"  alt=""/>
        <div class="info-bar" :class="{'bottom': !data.showBuy}">
          <div class="name-label">{{data.name}}</div>
          <div class="level-label">Lvl {{data.info.level || 1}}</div>
          <div class="info-div" v-if="data.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': data.price !== data.priceDiscount}">{{priceDiscountShow}} {{data.currency}}</span>
              <span v-if="data.price!==data.priceDiscount" class="price-old">{{priceShow}} {{data.currency}}</span>
            </div>
          </div>
        </div>
        <div class="class-div">
          <img :src="require('@/assets/main/card/class_'+data.class+'.png')" alt="">
        </div>
      </div>
    </div>
  </a>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { ISpineData } from '@/utils/SpineRender'
import { AppModule } from '@/store/modules/app'
import { buyBox } from '@/api/Mall'
import { EventBus, PRESALE_BEGIN, PRESALE_ERROR, PRESALE_ORDER_GET } from '@/utils/event-bus'
import { UserModule } from '@/store/modules/user'
import ChainManager from '@/utils/ChainManager'

declare module 'vue/types/vue' {
  interface Vue {
    data: ISpineData
  }
}

@Component({
  name: 'HeroNft',
  components: {
  },
  props: ['data']
})
export default class HeroNft extends Vue {
  chainManger = new ChainManager()

  get walletCollected() {
    return AppModule.walletConnected
  }

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

  get canBuy() {
    return !this.data.stopBuy
  }

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

  get priceShow() {
    const v = Math.pow(10, this.data.decimals!)
    return (this.data.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.data.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.data.directBuy) {
      return
    }
    if (this.data.stopBuy) {
      return
    }
    EventBus.$emit(PRESALE_BEGIN)
    const account = AppModule.accountId
    try {
      const price = this.chainManger.bc.parsePrice(this.data.priceDiscount!, this.data.decimals!)
      const { nonce, signature } = await this.chainManger.bc.signPresale({
        type: this.data.recordId!,
        paymentTokenAddress: this.data.coinAddress!,
        price,
        buyerAddress: account
      })
      const buyData = {
        buyer_address: AppModule.accountId,
        type: this.data.recordId,
        price,
        payment_token_address: this.data.coinAddress,
        nonce,
        signature
      }
      await this.chainManger.bc.increaseAllowance(this.data.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;
}

.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;
  .name-label {
    color: white;
    text-transform:capitalize;
    font-size: $width * 40 / 390;
  }
  .level-label{
    color: yellow;
    margin-bottom: -$height * 20 / 389;
    margin-top: -$height * 5 / 389;
  }
  .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;
}

</style>
