<template>
  <div class="card-list">
    <div class="grid">
      <nft-info v-for="c in cardList" :key="c.id" :data="c"></nft-info>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import Pagination from '@/components/market/Pagination.vue'
import Card from '@/components/market/Card.vue'
import NftInfo from '@/components/market/NftInfo.vue'
import { ISpineData } from '@/utils/SpineRender'

declare module 'vue/types/vue' {
  interface Vue {
    nftDatas?: ISpineData[]
  }
}

@Component({
  name: 'NftList',
  components: {
    NftInfo,
    Card,
    Pagination
  },
  props: ['nftDatas']
})
export default class extends Vue {
  private cardList: ISpineData[] = []

  // @Watch('nftDatas')
  // private onNftDataChange() {
  //   if (!this.nftDatas) {
  //     return
  //   }
  //   this.cardList.length = 0
  //   for (const data of this.nftDatas) {
  //     this.cardList.push(data)
  //   }
  // }

  created() {
    for (let i = 0; i < 10; i++) {
      this.cardList.push({
        id: '10000000000' + i,
        type: 0,
        skelName: 'n_aoi',
        name: 'miffy',
        price: 10,
        priceDiscount: 10,
        decimals: 0,
        currency: 'BNB',
        class: 0,
        repeat: false,
        showBuy: false,
        info: {
          level: 1
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.card-list {
  margin-top: 2.0265em;
  width: 100%;
  margin-bottom: 2em;
}

.card-list .grid {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
  -webkit-column-gap: 1.875em;
  column-gap: 1.875em;
  row-gap: 1.3125em;
}

.spinner {
  height: 100vh;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}

.empty {
  padding-top: 7.375em;
}

.empty img {
  width: 14.625em;
  height: auto;
}

@media (max-width: 1023px) {
  .card-list .grid {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .card-list{
    margin-top: 76px;
    padding: 26px 0;
  };
  .card-list .grid {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .card-list{
    font-size: 15px;
  }
}

@media (min-width: 1439px) {
  .card-list{
    font-size: 16px;
  }
}

</style>
