<template>
  <div class="container" >
    <mobile-header current-section="gameplay"></mobile-header>
    <video-section></video-section>
    <data-cell v-for="data in currentCell" :key="data.title" :data="data"></data-cell>
    <mobile-footer></mobile-footer>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import VideoSection from '@/components/gameplay/VideoSection.vue'
import { ITabData } from '@/components/tokennomic/TabBar.vue'
import DataCell from '@/components/gameplay/DataCell.vue'
import MobileHeader from '@/components/mobile/main/MobileHeader.vue'
import MobileFooter from '@/components/mobile/main/MobileFooter.vue'

@Component({
  name: 'MobileGameplay',
  components: {
    MobileFooter,
    MobileHeader,
    DataCell,
    VideoSection
  }
})
export default class MobileGameplay extends Vue {
  private scale = 1.0
  private initWidth = 1920
  private activeTab = ''

  private tabs: ITabData[] = [
    {
      id: 'pvp',
      name: 'PvP'
    },
    {
      id: 'pve',
      name: 'PvE'
    },
    {
      id: 'upgrade',
      name: 'Upgrade'
    },
    {
      id: 'social',
      name: 'Social'
    }
  ]

  private cells: any[] = [
    {
      title: 'BATTLE ROYALE',
      type: 0,
      icon: require('@/assets/202202/gameplay/icon_pvp.png'),
      mainImg: require('@/assets/202202/gameplay/img_pvp.png'),
      desc: ['Quick play and Rank supported, ranked match has season ranking. ',
        'Up to 40 players parachute onto an island and scavenge for weapons',
        'and equipment to kill others while avoiding getting killed',
        'themselves. The last player or team standing wins the round.']
    },
    {
      title: 'Quest-AFK earning',
      type: 1,
      icon: require('@/assets/202202/gameplay/icon_pve.png'),
      mainImg: require('@/assets/202202/gameplay/img_pve.png'),
      desc: ['No operation needed, automatic battle',
        'Players can go AFK after entering PVE, battle last a certain of time',
        'Tokens will be rewarded for winning the battle while failure leads no rewards'
      ]
    },
    {
      title: 'Upgrade NFT to increase reward',
      type: 0,
      icon: require('@/assets/202202/gameplay/icon-upgrade.png'),
      mainImg: require('@/assets/202202/gameplay/img_upgrade.png'),
      desc: ['·Higher level NFT leads to higher level matches that have higher rewards',
        '·Higher level heros and weapons lead to higher win rate',
        '·Higher level heros have higher daily maximum token cap'
      ]
    },

    {
      title: 'Play with your friends',
      type: 1,
      icon: require('@/assets/202202/gameplay/icon_social.png'),
      mainImg: require('@/assets/202202/gameplay/img_social.png'),
      desc: ['Team up with friends in PvP.',
        'Support real-time voice in battle, friend follows, chat room, private',
        'message, live streaming and other funcions'
      ]
    }
  ]

  get currentCell() {
    if (this.activeTab) {
      const idx = this.tabs.findIndex(o => o.id === this.activeTab)
      console.log(idx)
      return [this.cells[idx]]
    } else {
      return this.cells
    }
  }

  tabChange(val:string) {
    console.log('tag change: ', val)
    this.activeTab = val
  }
}
</script>
<style lang="scss" scoped>
.container{
  width: 100vw;
  margin: 10.4vw auto 0;
  background-color: #171717;
  transform-origin: top;
}

</style>
