<template>
  <section id="weapon-section" data-anchor="weapon">
    <div class="section-container">
      <title-bar
        :title-img="require('@/assets/202202/nft/weapon.png')"
        @dialog-show="showInfo"
      ></title-bar>
      <div class="nft-list">
        <img v-for="c in datas" :key="c.name" :src="c.img" class="weapon" :alt="c.name"/>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Message } from 'element-ui'
import TitleBar from '@/components/nft/TitleBar.vue'
import { IHeroData } from '@/components/index/HeroScroller.vue'

@Component({
  name: 'NftSection',
  components: {
    TitleBar
  }
})
export default class extends Vue {
  private heroNames = [
    'assault',
    'shotgun',
    'sniper'
  ]

  private datas:IHeroData[] = []

  mounted() {
    for (let i = 0; i < this.heroNames.length; i++) {
      this.datas.push({
        name: this.heroNames[i],
        img: require(`@/assets/202202/nft/${this.heroNames[i]}.png`)
      })
    }
  }

  showInfo() {
    console.log('show info')
    this.$emit('dialog-show', true)
  }

  comingSoon() {
    Message({
      message: 'coming soon',
      type: 'info',
      duration: 5 * 1000
    })
  }
}
</script>

<style lang="scss" scoped>
#weapon-section{
  box-sizing: border-box;
  width: 1920px;
  position: relative;
  display: flex;
  justify-content: center;
  .section-container{
    width: 1340px;
    padding: 36px 60px;
    .nft-list{
      margin-top: 46px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      justify-items: center;
      align-items: center;
      justify-content: center;
      align-content: center;
      grid-row-gap: 80px;
      .card{
        width: 600px;
        height: 340px;
      }
    }
  }

}

</style>
