<template>
  <div>
    <top-menu class="desk-top"></top-menu>
    <div class="root">
      <nft-detail :data="nftData"></nft-detail>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import ItemDetail from '@/components/market/ItemDetail.vue'
import TopMenu from '@/components/market/TopMenu.vue'
import NftDetail from '@/components/market/NftDetail.vue'
import { INftAttr, ISpineData } from '@/utils/SpineRender'
import { defaultINftAttr, getNftDetail } from '@/api/Mall'
import { AppModule } from '@/store/modules/app'

@Component({
  components: {
    NftDetail,
    ItemDetail,
    TopMenu
  }
})
export default class Item extends Vue {
  nftId = ''
  nftData: ISpineData = { info: defaultINftAttr() }
  created() {
    this.nftId = this.$route.params.id
    if (this.accountId) {
      this.fetchData()
    }
  }

  get accountId() {
    return AppModule.accountId
  }

  @Watch('accountId')
  private accountChange() {
    console.log('account change: ', AppModule.accountId)
    if (this.accountId) {
      this.fetchData()
    }
  }

  async fetchData() {
    const reqData = {
      account: this.accountId,
      token_id: this.nftId
    }
    const res: any = await getNftDetail(reqData)
    const data = res.info
    const nftInfo: INftAttr = data.info
    nftInfo.mintTime = data.mint_time
    nftInfo.owner = data.owner_address
    nftInfo.advancedCount = data.info?.advanced_count || 0
    nftInfo.successRate = data.info?.success_rate || 0
    const nftData: any = {
      name: data.info.name,
      class: ((data.info?.job || '') + '').toLowerCase(),
      recordId: data.token_id,
      id: data.token_id,
      skelName: `n_${(data.info?.name || '').toLowerCase()}`,
      directBuy: false,
      showBuy: false
    }
    if (data.currency_list && data.currency_list.length > 0) {
      const priceData: any = data.currency_list[0]
      nftData.discount = priceData.discount_rate
      nftData.price = priceData.original_price
      nftData.priceDiscount = priceData.discount_price
      nftData.currency = priceData.name
      nftData.coinAddress = priceData.contract_address
    }
    nftData.info = nftInfo
    this.nftData = nftData
    // this.$forceUpdate()
    console.log(this.nftData)
  }
}
</script>
<style lang="scss" scoped>
@import '../../scss/breakpoints.scss';
.root {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.banner {
  position: absolute;
  width: 100%;
}
.mobile-top {
  display: none;
}

// Tablet & Phone
@include media('<desktop') {
  .banner {
    position: relative;
  }
  .mobile-top {
    display: block;
  }

}
@include media('>=desktop', '<wide'){
  .root {
    font-size: 11px;
  }
  .root .container {
    width: 1024px;
    max-width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .root {
    font-size: 20px;
  }
  .container {
    width: 768px;
  }
}

@media (max-width: 767px) {
  .root {
    font-size: 11px;
  }
}

@media (max-width: 767px) and (max-width: 320px) {
  .root {
    font-size: 9px;
  }
}

@media (max-width: 767px) {
  .container {
    width: 375px;
  }
  .searchResult {
    padding: 26px 20px;
  }
  .mobile-top {
    display: block;
  }

  .show{
    display: flex!important;
  }
}
</style>
