<template>
  <div class="info-panel" :class="{'mobile': mobile}">
    <road-deck :deck-data="currentDeckData"></road-deck>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { AppModule, DeviceType } from '@/store/modules/app'
import RoadDeck from '@/components/roadmap/RoadDeck.vue'

declare module 'vue/types/vue' {
  interface Vue {
    dataIndex?: number
  }
}

@Component({
  name: 'InfoPanel',
  components: {
    RoadDeck
  },
  props: ['dataIndex']
})
export default class InfoPanel extends Vue {
  private currentIdx = 1
  private img = require('@/assets/202202/roadmap/step1.png')

  private infos = [
    {
      id: 1,
      texts: [
        {
          title: 'Jul. 2021',
          desc: ['Game development kick off']
        }
      ]
    },
    {
      id: 2,
      texts: [
        {
          title: 'Nov. 2021',
          desc: ['Complete Alpha Test']
        }
      ]
    },
    {
      id: 3,
      texts: [
        {
          title: 'Jan. 2022',
          desc: ['Angel round financing']
        },
        {
          title: 'Feb. 2022',
          desc: ['Private round financing', 'Official website & whitepaper']
        },
        {
          title: 'Mar. 2022',
          desc: ['IGO', 'Beta test']
        }
      ]
    },
    {
      id: 4,
      texts: [
        {
          title: 'Apr. 2022',
          desc: ['IDO', 'Official publication, including:', '- Free-to-play ', '- PVP', '- Chatting room ', '- NFT can be leveled up to Lv.10']
        },
        {
          title: 'May. 2022',
          desc: ['New function release:', 'PVE', 'PVP Ranking NFT', 'can be leveled up to Lv.15', 'Mobile version on App Store and Google Play']
        }
      ]
    },
    {
      id: 5,
      texts: [
        {
          title: 'Jun. 2022',
          desc: ['Streaming to 3rd party platform']
        },
        {
          title: 'Jul. 2022',
          desc: ['Endorsement from famous esport player']
        },
        {
          title: 'Aug. 2022',
          desc: ['3D version game available']
        }
      ]
    }
  ]

  get mobile() {
    return AppModule.device === DeviceType.Mobile
  }

  @Watch('dataIndex')
  private indexChange() {
    this.currentIdx = this.dataIndex!
  }

  get currentDeckData() {
    return this.infos[(this.dataIndex || 1) - 1]
  }
}
</script>
<style lang="scss" scoped>
.info-panel{
  width: 472px;
  height: 472px;
  img{
    width: 100%;
    height: 100%;
  }
}
.info-panel.mobile{
  width: 98vw;
  height: 98vw;
}
</style>
