//此页面为引导页面，后续更新成模板，暂时偷懒复制主游戏场景代码进来

const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
    // LIFE-CYCLE CALLBACKS:
    @property(cc.Node)
    dialog: cc.Node = null;
    @property(cc.Node)
    ball: cc.Node = null;
    @property(cc.Prefab)
    qiu1: cc.Prefab = null;
    @property(cc.Prefab)
    linePrefab: cc.Prefab = null;
    clickNow:number;
    custom: number;
    Pos_Array: any;
    ball_Array: any;
    begin: boolean;
    tip: cc.Node;
    // onLoad () {}

    start () {
        cc.fx.GameConfig.GM_INFO.custom = 0;
        this.init();
        this.startGuide(0);
    }
    //初始化数据
    init(){
        this.custom = 1;
        this.ball.zIndex = 100;
        this.Pos_Array = [];
        this.ball_Array = [];
        this.begin = false;
        this.clickNow = 0;
        this.tip = null;
    }
    //开始引导方法
    startGuide(type){
        let num = this.custom;
        let time = 0.5;
        let name = "tip" + num;
        if(type!=0){
            cc.tween(this.node)
            .to(time,{opacity:255})
            .call(() =>{
                this.custom += 1;
                if(type != 0) this.custom = 2;
                if( this.custom == 2)  this.createSun(true);
                else if( this.custom == 3)  this.createSun(false);
                else if( this.custom == 4)  this.begin = true;
                else if( this.custom == 5) cc.director.loadScene("GameScene");
            })
            .start();
        }
        else{
            this.tip = this.dialog.getChildByName(name);
            this.tip.active = true; this.tip.opacity = 0;
            cc.tween(this.tip)
            .to(time,{opacity:255})
            .start();
        }
    }
    //清除所有太阳
    beginClick(){
        for(let i=0; i<this.ball_Array.length; i++){
            this.ball_Array[i].getComponent("Sun").move = false;
        }
    }
    //点击开始游戏，或者点击跳过引导
    clickBtn(){
        cc.director.loadScene("GameScene");
    }
    //点击下一步按钮
    next(){
        let time = 0.5;
        cc.tween(this.tip)
        .to(time,{opacity:0})
        .call(() =>{
            this.custom += 1;
            if( this.custom == 2)  this.createSun(true);
            else if( this.custom == 3)  this.createSun(false);
            else if( this.custom == 4)  this.begin = true;
            else if( this.custom == 5) cc.director.loadScene("GameScene");

        })
        .start();
    }
    //创建太阳
    createSun(type){
        if(type == true){
            this.ball_Array = [];
            this.Pos_Array.push(cc.v2(-250,-216),cc.v2(200,-115),cc.v2(-35,-500));
            let time1 = this.calculateDistance(this.ball.x,this.ball.y,this.Pos_Array[0].x,this.Pos_Array[0].y)
            this.ball.opacity = 0;
            cc.tween(this.ball)
            .to(time1,{position:this.Pos_Array[0]})
            .call(() =>{
                this.createBall(0,0,0,false);
            })
            .delay(1)
            .call(() =>{
                this.startGuide(0);
            })
            .start();
        }
        else{
            let time2 = this.calculateDistance(this.Pos_Array[0].x,this.Pos_Array[0].y,this.Pos_Array[1].x,this.Pos_Array[1].y)
            let time3 = this.calculateDistance(this.Pos_Array[1].x,this.Pos_Array[1].y,this.Pos_Array[2].x,this.Pos_Array[2].y)
            this.ball.opacity = 255;
            this.createLine(cc.v2(this.ball.x,this.ball.y),cc.v2(this.Pos_Array[1].x,this.Pos_Array[1].y),
            0.5);
            cc.tween(this.ball)
            .to(time2,{position:this.Pos_Array[1]})
            .call(() =>{
                this.createBall(1,0,0,false);
            })
            .delay(0.5)
            .call(() =>{
                this.createLine(cc.v2(this.ball.x,this.ball.y),cc.v2(this.Pos_Array[2].x,this.Pos_Array[2].y),
                0.5);
            })
            .to(time3,{position:this.Pos_Array[2]})
            .call(() =>{
                this.createBall(2,0,0,false);
                this.ball.opacity = 0;
            })
            .delay(0.2)
            .call(() =>{
                this.destroyLine();
                this.startGuide(0);
            })
            .start();
        }

    }
    //创建太阳
    createBall(number,color,speed,repeat){
        let ball = null;
        ball = cc.instantiate(this.qiu1);
        ball.parent = this.node.getChildByName("Sun");
        ball.zIndex = this.Pos_Array.length - number;
        ball.setPosition(this.ball.x,this.ball.y);
        ball.getComponent("Sun").init(number,color,speed,repeat);
        ball.getComponent("Sun").move = true;
        this.ball_Array.push(ball);
    }
    //获取两点之间角度创建连线用
    calculateDistance(x1, y1, x2, y2) {
        const dx = x2 - x1;
        const dy = y2 - y1;
        var distance = Math.sqrt(dx*dx + dy*dy);
        if(distance > 800) distance = 800;
        const time = distance/800 * 0.8;
        return time;
    }

    //引导成功
    passLevel(){
        let win = this.node.getChildByName("Win");
        win.active = true; win.setScale(0);
        cc.tween(win)
        .delay(0.4)
        .to(0.01,{scale:2.5})
        .to(0.35,{scale:1})
        .delay(0.6)
        .call(() =>{
            win.active = false;
            setTimeout(() => {
                this.destroyLine();
                let timeArray = [];
                let timeCount = 0;
                let ball = this.ball_Array[0];
                for(let i=1; i< this.ball_Array.length; i++){
                    let time = this.calculateDistance(this.ball_Array[i].x,this.ball_Array[i].y,
                        this.ball_Array[i-1].x,this.ball_Array[i-1].y);
                    timeArray.push(time);
                }
                for(let k=1; k< this.ball_Array.length; k++){
                    setTimeout(() => {
                        cc.tween(ball)
                        .to(timeArray[k-1],{x:this.ball_Array[k].x,y:this.ball_Array[k].y})
                        .call(() =>{
                            this.ball_Array[k].active = false;
                            if(k == this.ball_Array.length-1){
                                setTimeout(() => {
                                    this.ball.opacity = 255;
                                    this.ball.position = cc.v3(ball.x,ball.y,0);
                                    this.ball.active = false;
                                    this.startGuide(0);
                                }, 200);
                            }
                        })
                        .start();
                    }, timeCount*1000);
                    timeCount += (timeArray[k-1]+0.1);
                }
            }, 400);
        })
        .start();
    }
    //点击太阳执行方法
    clickSun(data){
        if(this.begin == true){
            if(data == this.clickNow){
                cc.fx.AudioManager._instance.playAudioButton();
                if(this.clickNow > 0){
                    this.createLine(cc.v2(this.ball_Array[this.clickNow-1].x,this.ball_Array[this.clickNow-1].y),
                    cc.v2(this.ball_Array[this.clickNow].x,this.ball_Array[this.clickNow].y),
                    0.2);
                }
                this.clickNow += 1;
                cc.fx.GameConfig.GM_INFO.total += 1;
                setTimeout(() => {
                    if(this.ball_Array[this.clickNow-1])
                        this.ball_Array[this.clickNow-1].getChildByName("guang").active = false;
                }, 200);
                if(this.clickNow == 3){
                    this.passLevel();
                }
            }
            else{
                this.loseLevel();
            }
        }
    }
    //失败事件
    loseLevel(){
        this.begin = false;
        cc.fx.AudioManager._instance.playWarning();
        this.destroyLine();
        let ball = this.ball_Array[0];
        for(let k=1; k< this.ball_Array.length; k++){
            cc.tween(this.ball_Array[k])
            .to(0.6,{x:ball.x,y:ball.y})
            .call(() =>{
                this.ball_Array[k].active = false;
                if(k == this.ball_Array.length-1){
                    this.ball.opacity = 0;
                    this.ball.position = cc.v3(ball.x,ball.y,0);
                    this.clearSun();
                    this.custom = 1;
                    this.startGuide(1);
                }
            })
            .start()
        }
        //结束页面动画
        let over = this.node.getChildByName("Over");
        cc.tween(over)
        .to(0.25,{opacity:255})
        .delay(0.1)
        .to(0.2,{opacity:0})
        .delay(0.1)
        .to(0.15,{opacity:255})
        .delay(0.1)
        .to(0.1,{opacity:0})
        .start();
    }
    //点击太阳事件
    clearSun(){
        for(let k=0; k< this.ball_Array.length; k++){
            this.ball_Array[k].removeFromParent();
            this.ball_Array[k] = null;
        }
        this.ball_Array = [];
    }

    //创造连线，参数起点，终点，连线时间
    createLine(start,end,time){
        let line = cc.instantiate(this.linePrefab);
        line.parent = this.node.getChildByName("Line");
        line.setPosition(start.x,start.y);
    
        const dx = end.x - start.x;
        const dy = end.y - start.y;
        var distance = Math.sqrt(dx*dx + dy*dy);
        line.height = distance;
        line.getComponent(cc.Sprite).fillRange = 0;
        line.angle = -this.calculateAngle(start.x,start.y,end.x,end.y);
        cc.tween(line.getComponent(cc.Sprite))
        .to(time,{fillRange:1})
        .start();
    }
    //摧毁连线
    destroyLine() {
        for(let i =0; i< this.node.getChildByName("Line").children.length;i++){
            if(this.node.getChildByName("Line").children[i]){
                this.node.getChildByName("Line").children[i].removeFromParent();
                this.node.getChildByName("Line").children[i] = null;
            }
        }
        this.node.getChildByName("Line").removeAllChildren();
    }
    //获取两个点之间的角度 用于写连线 确定连线方向
    calculateAngle(x1, y1, x2, y2) {
        var angle = Math.atan2(y2-y1,x2-x1)*180 / Math.PI - 90;
        return -angle;
    }
    onEnable () {
        cc.fx.Notifications.on("clickSun", this.clickSun, this);
    }
    onDisable () {
        cc.fx.Notifications.off("clickSun", this.clickSun);
    }

}
