import View = Laya.View
import Image = Laya.Image
import HTMLDivElement = Laya.HTMLDivElement
import Sprite = Laya.Sprite
import Box = Laya.Box
/** 公告栏 */
export default class Notice extends View {

    /** 滚动区域 */
    hornBox: Box
    
    /** html对象 */
    html: HTMLDivElement

    /** 滚动框的宽度 */
    defaultX = 1110

    /** 动画是否出于播放状态 */
    isPlayIng:boolean = false

    /** 空格 */
    private space:string = "<span>                          </span>"

    constructor() {
        super()

        this.width = 1200
        this.height = 55
        this.visible = false
        this.pos(565,150)
        this._createHorn()
        this._createBg()
        this._createView()
        this.on(Laya.Event.UNDISPLAY,this,this.stop)
        this.on(Laya.Event.DISPLAY,this,this.play)
    }

    /** 创建滚动区域 */
    _createView() {
        this.hornBox = new Box()
        let _rectangle = new Laya.Rectangle(0,0,this.defaultX,55)
        this.hornBox.scrollRect = _rectangle
        this.hornBox.height = 55
        this.hornBox.pos(70,0)
        this.hornBox.zOrder = 3
        this.html = new HTMLDivElement()
        this.html.x = this.defaultX
        this.html.contextHeight = 55
        this.html.contextWidth = 1180
		this.html.style.fontSize = 34
        this.html.style.wordWrap = false
        this.html.style.lineHeight = 55
        this.html.style.align = "left"
        this.html.style.color = "#fff"
		this.html.innerHTML = ""
        this.hornBox.addChild(this.html)
        this.addChild(this.hornBox)
        
    }

    /** 滚动动画 */
    private _animate(e: Event): void {
        const _w = this.html.width
        const _x = this.html.x
        if (_x < -_w) {
            this.stop(true)
        } else {
            this.html.x -= 2
        }
    }

    /** 添加节点 */
    addItem(html:string) {
        if (typeof html === "undefined") {return }
        this.html.appendHTML(`${this.space}${html}`)
        if (this.isPlayIng === false) {
            this.play()
            this.isPlayIng = true
        }
    }

    /** 开始动画 */
    play() {
        
        if (this.isPlayIng === true) {
            return
        }
        const _w = this.html.width
        const _x = this.html.x
        if (_w === 0) {
            return
        }
        if (_x < -_w) {
            return
        }
        this.visible = true
        this.frameLoop(1, this, this._animate)
    }

    /** 停止播放 */
    stop(type?:boolean) {
        this.isPlayIng = false
        this.visible = false
        this.clearTimer(this,this._animate)
        if (type === true) {
            this.html.x = this.defaultX
            this.html.innerHTML = ""
        }
    }

    /** 创建背景 */
    _createBg() {
        let bg = new Image()
        bg.skin = 'common/bg.png'
        bg.pos(20,0)
        bg.width = 1180
        bg.height = 55
        bg.sizeGrid = "2,2,2,2"
        bg.alpha = 0.7
        bg.zOrder = 1
        this.addChild(bg)
    }

    /** 创建喇叭 */
    _createHorn(){
        let horn = new Image()
        horn.zOrder = 2
        horn.loadImage('common/horn.png',-12,-12)
        this.addChild(horn)
    }
}