import { _decorator, Component, Node, tween, v3 } from 'cc';
import { aa, UIElement } from 'db://assets/scripts/aa';
import { GameUILayers } from 'db://assets/scripts/GameUILayers';
import { ani_ui } from '../../util/Customize_Ani';
const { ccclass, property } = _decorator;


export class UI_Dialog extends aa.UIcontroller {
    @UIElement()
    close_btn: Node
    @UIElement({ type: Node, prefix: "" ,path:"bg"})
    bg: Node
    @UIElement({ type: Node, prefix: "" ,path:"Root"})
    Root: Node
    private state = 0
    public get layer(): number {
        return GameUILayers.ALERT
    }


    protected onCreated(): void {
        this.state = 0
        if (this.close_btn) {
            this.close_btn.on(Node.EventType.TOUCH_END,this.onClose,this)
            
        }
        // if (this.bg) {
        //     this.bg.on(Node.EventType.TOUCH_END, this.onClose, this)
            
        // }
        this.start()
        this.dlg_Show()
    }

    start(){

    }
    onClose() {
        this.close()
    }

    close() {
        if (this.state != 0) {
            return
        }
        this.node.off(Node.EventType.TOUCH_END)
        this.state = 1
        this.dlg_Close(() => {
            this.state = 0
            super.close()
        })

    }
    dlg_Close(cb?) {
        let dlg = this.Root || this.node;
        tween(dlg)
            .to(0.2, { scale: v3(0, 0, 0) }, { easing: "sineOut" }).call(() => {
                cb && cb()
            }).start();
    }

    dlg_Show() {
        let dlg = this.Root || this.node;
        ani_ui(dlg);
        // dlg.scale = v3(0, 0, 0);

        // tween(dlg)
        //     .to(0.15, { scale: v3(1.2, 1.2, 1) }, { easing: "sineOut" })
        //     .to(0.1, { scale: v3(1, 1, 1) }, { easing: "sineOut" })
        //     .start();

    }
}