<template>
  <div class="container" >
    <mobile-header current-section="tokennomic"></mobile-header>
    <img class="top-bg" src="@/assets/mobile/tokennomic/cebg_banner4.png" alt="top bg"/>
    <tab-bar
      :select-tab="activeTab"
      :tab-datas="tabs"
      @tab-change="tabChange"
    ></tab-bar>
    <tab-cec v-show="activeTab==='cec'"></tab-cec>
    <tab-ceg v-show="activeTab==='ceg'"></tab-ceg>
    <tab-allocation v-show="activeTab==='allocation'" ></tab-allocation>
    <mobile-footer></mobile-footer>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import DesktopHeader from '@/components/index/DesktopHeader.vue'
import DesktopFooter from '@/components/index/DesktopFooter.vue'
import TabCec from '@/components/tokennomic/TabCec.vue'
import TabCeg from '@/components/tokennomic/TabCeg.vue'
import TabBar, { ITabData } from '@/components/tokennomic/TabBar.vue'
import TabAllocation from '@/components/tokennomic/TabAllocation.vue'
import MobileHeader from '@/components/mobile/main/MobileHeader.vue'
import MobileFooter from '@/components/mobile/main/MobileFooter.vue'
import { AppModule, DeviceType } from '@/store/modules/app'

@Component({
  name: 'MobileTokennomic',
  components: {
    MobileFooter,
    MobileHeader,
    TabAllocation,
    TabCeg,
    TabCec,
    DesktopFooter,
    DesktopHeader,
    TabBar
  }
})
export default class MobileTokennomic extends Vue {
  private activeTab = 'cec'

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

  private tabs: ITabData[] = [
    {
      id: 'cec',
      name: 'CEC'
    },
    {
      id: 'ceg',
      name: 'CEG'
    },
    {
      id: 'allocation',
      name: 'Release & Allocation'
    }
  ]

  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;
  .top-bg{
    width: 100%;
    margin-bottom: 5vw;
  }
}
.tab-bar{
  width: 84vw;
  height: 8vw;
  line-height: 8vw;
}
footer{
  margin-top: 13vw;
}

</style>
