const {ccclass, property} = cc._decorator;
import('../JCEvent')

@ccclass
export default class NewClass extends cc.Component {
// @property({ type: cc.Node })
// snode: cc.Node = null
    @property({type: [cc.Node]})
    pages: cc.Node[] = []
    @property({type: cc.Node})
    content: cc.Node = null
    private currentPage = 0
    private isScrolling = false

    start () {
        cc.zevent.on('top_btn_change', (index: number) => {
            this.showPage(index)
        })
        this.node.on(cc.Node.EventType.MOUSE_WHEEL, this.mouseScroll, this)
    }

    showPage(index: number) {
        console.log(`current: ${this.currentPage}, to: ${index}`)
        if (this.isScrolling) {
            return
        }
        if (index > this.pages.length || index < 0) {
            return
        }
        let self = this
        this.isScrolling = true
        const pageSize = 1037
        let y = index < 1 ? pageSize * index : pageSize * (index - 1)
        cc.tween(this.content)
          .to(1, {position: cc.v3(0, y, 0)}, { easing: 'sineOut'})
          .call(() => {
              self.isScrolling = false
              self.currentPage = index
          })
          .start()
    }

    mouseScroll(e: cc.Event.EventMouse) {
        if (e.getScrollY() > 0) {
            this.showPage(this.currentPage + 1)
        } else {
            this.showPage(this.currentPage - 1)
        }
    }
}