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

@Component({
  name: 'CardList',
  components: {
    HeroNft,
    NftItem,
    Pagination
  }
})
export default class extends Vue {
  private cardList: ISpineData[] = []

  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: true,
        info: {
          level: 1
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.card-list {
  margin-top: 2.0265em;
}

.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;
}

.card-list .grid .item {
  height: 21em;
  width: 14.375em;
}

.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 .grid {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
    -webkit-column-gap: 1.79em;
    column-gap: 1.79em;
    row-gap: 1.8em;
  }
}
</style>
