<template>
  <section id="top-section" data-anchor="top">
    <div class="slide-banner">
      <div class="banner-wrapper">
        <div class="slide-banner-wrapper" ref="slide">
          <div class="slide-banner-content">
            <a v-for="(img, index) in imgs" :key="index" :href="img.href">
              <img  class="slide-page"  :src="img.img" alt=""/>
            </a>
          </div>
        </div>
        <div class="dots-wrapper" v-if="imgs.length>1">
          <div class="page-icon"
               v-for="(data, index) in imgs"
               @click="toPage(index)"
               :key="index" :class="index===currentPageIndex? 'selected': ''">
            <div class="ctrl-line"></div>
          </div>
        </div>
      </div>
    </div>
    <a class="play-btn" href="https://whitepaper.cebg.games/" v-show="currentPageIndex===0">
      Whitepaper
    </a>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import RImg from '@/components/core/ResponsiveImage.vue'
import BetterScroll from 'better-scroll'

@Component({
  name: 'TopSection',
  components: {
    RImg
  }
})
export default class extends Vue {
  private nums = 2
  private currentPageIndex = 0
  private slide: any

  $refs!: {
    slide: HTMLFormElement
  }

  get imgs() {
    return [{
      href: 'javascript:void(0)',
      img: require('@/assets/202202/banner-b-0.jpg')
    }, {
      href: 'https://www.kucoin.com/spot-nft/project/6263eed0c94d5b000108c972',
      img: require('@/assets/202202/banner-b-2.jpg')
    }
    ]
  }

  mounted() {
    this.nums = this.imgs.length
    this.initScroll()
  }

  toPage(index: number) {
    console.log('toPage:', index)
    this.slide.goToPage(index, 0)
  }

  initScroll() {
    this.slide = new BetterScroll(this.$refs.slide, {
      scrollX: true,
      scrollY: false,
      slide: true,
      momentum: false,
      bounce: false,
      probeType: 3
    })
    this.slide.on('scrollEnd', this._onScrollEnd.bind(this))

    this.slide.on('slideWillChange', (page: any) => {
      this.currentPageIndex = page.pageX
    })

    // v2.1.0
    this.slide.on('slidePageChanged', (page: any) => {
      // console.log('CurrentPage changed to => ', page)
    })
  }

  _onScrollEnd() {
    console.log('CurrentPage => ', this.slide.getCurrentPage())
  }
}
</script>

<style lang="scss" scoped>
#top-section{
  width: 1920px;
  height: 1004px;
  position: relative;
  background-image: url('../../assets/202202/cebg_banner2@2x.png');
  background-repeat: no-repeat;
  background-position: center;
  .play-btn{
    width: 280px;
    height: 68px;
    bottom: 188px;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    cursor: pointer;
    background-image: url('../../assets/202202/button@2x.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    font-size: 24px;
    font-weight: bold;
    color: #404040;
    text-decoration: none;
    text-align: center;
    line-height: 68px;
  }
  .slide-banner {
    .banner-wrapper{
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 1004px;
    }
    .slide-banner-wrapper {
      min-height: 1px;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .slide-banner-content{
      height:  100%;
      white-space: nowrap;
      font-size: 0;
      .slide-page{
        display: inline-block;
        height: 1004px;
        width: 1920px;
      }
    }
    .dots-wrapper{
      position: absolute;
      bottom: 100px;
      width: 100%;
      left: 0;
      display: flex;
      justify-content: center;
      .page-icon {
        width: 60px;
        margin: 10px 20px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        .ctrl-line {
          height: 1px;
          width: 60px;
          background-color: black;
        }

        &.selected {
          .ctrl-line {
            background-color: white;
            height: 2px;
          }
        }
      }
    }
  }

}
</style>
