<template>
  <div class="container" :style="cstyle">
    <desktop-header current-section="nft" title="NFT"></desktop-header>
    <top-section></top-section>
    <nft-section @dialog-show="showInfo(0)" ></nft-section>
    <weapon-section @dialog-show="showInfo(1)"></weapon-section>
    <chip-section @dialog-show="showInfo(2)"></chip-section>
    <nft-info :dialog-show="infoShow" :type="infoType" @dialog-show="infoShowStatusChange"></nft-info>
    <base-footer></base-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 TopSection from '@/components/nft/TopSection.vue'
import NftSection from '@/components/nft/NftSection.vue'
import WeaponSection from '@/components/nft/WeaponSection.vue'
import ChipSection from '@/components/nft/ChipSection.vue'
import NftInfo from '@/components/nft/NftInfo.vue'
import BaseFooter from '@/components/layout/BaseFooter.vue'

@Component({
  name: 'Nft',
  components: {
    BaseFooter,
    NftInfo,
    ChipSection,
    WeaponSection,
    NftSection,
    TopSection,
    DesktopFooter,
    DesktopHeader
  }
})
export default class extends Vue {
  private scale = 1.0
  private initWidth = 1920
  private infoShow = false
  private infoType = 0

  get cstyle() {
    return {
      // transform: `scale(${this.scale})`
      zoom: this.scale
    }
  }

  beforeMount() {
    window.addEventListener('resize', this.resizeHandler)
  }

  mounted() {
    this.resizeHandler()
  }

  beforeDestroy() {
    window.removeEventListener('resize', this.resizeHandler)
  }

  showInfo(type: number) {
    this.infoType = type
    this.infoShow = true
  }

  infoShowStatusChange(val: boolean) {
    console.log('infoShowStatusChange: ', val)
    this.infoShow = val
  }

  resizeHandler() {
    const documentWidth = document.body.clientWidth
    if (documentWidth < this.initWidth) {
      this.scale = documentWidth / this.initWidth
    } else {
      this.scale = 1
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  max-width: 1920px;
  margin: 0 auto;
  background-color: #171717;
  transform-origin: top;
}
</style>
