class ZhuanMainView extends BaseView {

private _zhuanActivity: ZhuanMainActivity;
private _levelJsonObj;

private _oneSelectImageIndex = -1;
private _zhuanSliceBitmapList: Array<ZhuanSliceBean>;
private _zhuanBitmapGroup: eui.Group;

private row: number;
private column: number;

protected getBgName(): string {
    return "bg1_png";
}

public createView() {
    this._zhuanActivity = this._scene as ZhuanMainActivity;
    this._levelJsonObj = this._zhuanActivity.currentLevelJsonObject;

    //退出
    let exitToMain = Main.createBitmapByName("exit_to_main_png");
    exitToMain.x = 74;
    exitToMain.y = 47;
    exitToMain.touchEnabled = true;
    exitToMain.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onExitToMain, this);
    this.addChild(exitToMain);

    //砖的背景 
    this.drawZhuanBitmapToScreen();


    //等级背景
    let gameLevelGroup = new eui.Group();
    gameLevelGroup.y = 46;
    gameLevelGroup.x = 1151;
    gameLevelGroup.width = 49;
    gameLevelGroup.height = 217;
    this.addChild(gameLevelGroup);

    let gameLevel = Main.createBitmapByName("zuan_level_png");
    gameLevelGroup.addChild(gameLevel);

    let levelLable = new eui.Label(this._levelJsonObj.levelIndexName);
    levelLable.size = 28;
    levelLable.width = 30;
    levelLable.horizontalCenter = 0;
    levelLable.verticalCenter = 0;
    levelLable.textColor = 0xffffff;
    levelLable.lineSpacing = 10;
    gameLevelGroup.addChild(levelLable);

    //当前砖的名称
    let levelNameLabel = new eui.Label("•" + this._levelJsonObj.levelName + "•");
    levelNameLabel.width = 30;
    levelNameLabel.x = 1092;
    levelNameLabel.y = 46;
    levelNameLabel.size = 29;
    levelNameLabel.textAlign = egret.HorizontalAlign.CENTER;
    levelNameLabel.textColor = 0X90795B;
    levelNameLabel.lineSpacing = 10;
    this.addChild(levelNameLabel);

    //垂直功能组
    let functionGroup = new eui.Group();
    functionGroup.x = 1141;
    functionGroup.y = 530;
    functionGroup.width = 61;
    functionGroup.height = 217;
    this.addChild(functionGroup);

    var vLayout: eui.VerticalLayout = new eui.VerticalLayout();
    vLayout.gap = 20;
    vLayout.horizontalAlign = egret.HorizontalAlign.CENTER;
    functionGroup.layout = vLayout;

    let ckBox1 = new eui.CheckBox();
    ckBox1.width = 67;
    ckBox1.height = 61;
    ckBox1.skinName = "resource/eui_skins/CheckFun1BoxSkin.exml";//引入地址
    functionGroup.addChild(ckBox1);

    let ckBox2 = new eui.CheckBox();
    ckBox2.width = 67;
    ckBox2.height = 61;
    ckBox2.skinName = "resource/eui_skins/CheckFun2BoxSkin.exml";//引入地址
    functionGroup.addChild(ckBox2);

    let ckBox3 = new eui.CheckBox();
    ckBox3.width = 67;
    ckBox3.height = 61;
    ckBox3.skinName = "resource/eui_skins/CheckFun3BoxSkin.exml";//引入地址
    functionGroup.addChild(ckBox3);
}

private drawZhuanBitmapToScreen() {
    //底部的背景图
    let contentBg = Main.createBitmapByName("zuan_content_dt_png");
    this.addChild(contentBg);
    if (this._levelJsonObj.pictureHeight > this._levelJsonObj.pictureWidth) {
        contentBg.height = this.height * 0.98;
        contentBg.width = contentBg.height;
    } else {
        contentBg.width = this.width * 0.75;
    }
    LayoutUtil.center(contentBg, this._scene);


    //砖头的图片相关
    this.row = this._levelJsonObj.pictureRow;
    this.column = this._levelJsonObj.pictureColumn;

    this._zhuanBitmapGroup = new eui.Group();
    this._zhuanBitmapGroup.width = this._levelJsonObj.pictureWidth;
    this._zhuanBitmapGroup.height = this._levelJsonObj.pictureHeight;
    this.addChild(this._zhuanBitmapGroup);
    LayoutUtil.center(this._zhuanBitmapGroup, this._scene);

    var tLayout: eui.TileLayout = new eui.TileLayout();
    tLayout.horizontalGap = 3;
    tLayout.verticalGap = 3;
    this._zhuanBitmapGroup.layout = tLayout;

    //将背景图片拆分成多个小模块
    let zhuanContentBitmap = Main.createBitmapByName(this._levelJsonObj.pictureRes);
    zhuanContentBitmap.width = this._zhuanBitmapGroup.width;
    zhuanContentBitmap.height = this._zhuanBitmapGroup.height;

    const itemSliceWidth = zhuanContentBitmap.width / this.column - tLayout.horizontalGap;
    const itemSliceHeight = zhuanContentBitmap.height / this.row;

    console.log("this.row 数量 ", this.row, "this.column ", this.column);

    this._zhuanSliceBitmapList = [];
    for (let rowIndex = 0; rowIndex < this.row; rowIndex++) {
        for (let columnIndex = 0; columnIndex < this.column; columnIndex++) {
            let x = columnIndex * itemSliceWidth;
            let y = rowIndex * itemSliceHeight;

            // console.log("x ", x, "y ", y);
            let rec: egret.Rectangle = new egret.Rectangle(x, y, itemSliceWidth, itemSliceHeight);
            const sliceBitmap = CutAtlasTools.Instance.getSlice2Atlas(zhuanContentBitmap, rec);
            let img: eui.Image = new eui.Image();
            img.source = sliceBitmap;

            let zhuanSliceBean = new ZhuanSliceBean();
            zhuanSliceBean.image = img;
            zhuanSliceBean.coordinate = rowIndex + "," + columnIndex;
            this._zhuanSliceBitmapList.push(zhuanSliceBean);
        }
    }

    //将list数据打乱
    this._zhuanSliceBitmapList.sort(function () { return 0.5 - Math.random(); });

    let isVerfiyPass = this.checkIsPuzzleSuccess();
    if (isVerfiyPass) {//如果开始就验证通过,则调换两个位置
        let temp = this._zhuanSliceBitmapList[0];
        this._zhuanSliceBitmapList[0] = this._zhuanSliceBitmapList[1];
        this._zhuanSliceBitmapList[1] = temp;
    }

    //添加到地图上
    for (let index = 0; index < this._zhuanSliceBitmapList.length; index++) {
        let imgView = this._zhuanSliceBitmapList[index].image;
        imgView.touchEnabled = true;
        // imgView.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onClickSelectImage.bind(this, index), this);

        imgView.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.mouseDown, this);
        imgView.addEventListener(egret.TouchEvent.TOUCH_END, this.mouseUp, this);
        this._zhuanBitmapGroup.addChild(imgView);
    }
}
private _touchStatus: boolean = false;
private _distance: egret.Point = new egret.Point();
private targetImage: eui.Image;

private mouseDown(evt: egret.TouchEvent) {
    console.log("Mouse Down.");
    this.targetImage = evt.target;

    this._touchStatus = true;
    this._distance.x = evt.stageX - this.targetImage.x;
    this._distance.y = evt.stageY - this.targetImage.y;
    this._scene.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.mouseMove, this);
}

private mouseMove(evt: egret.TouchEvent) {
    if (this._touchStatus) {
        console.log("moving now ! Mouse: [X:" + evt.stageX + ",Y:" + evt.stageY + "]");
        this.targetImage.x = evt.stageX - this._distance.x;
        this.targetImage.y = evt.stageY - this._distance.y;
    }
}

private mouseUp(evt: egret.TouchEvent) {
    console.log("Mouse Up.");
    this._touchStatus = false;
    this._scene.removeEventListener(egret.TouchEvent.TOUCH_MOVE, this.mouseMove, this);
}

private checkIsPuzzleSuccess(): boolean {
    var isVerfiyPass = true;
    var listIndex = 0;
    for (let rowIndex = 0; rowIndex < this.row; rowIndex++) {
        for (let columnIndex = 0; columnIndex < this.column; columnIndex++) {
            let itemSliceBean = this._zhuanSliceBitmapList[listIndex];
            if (itemSliceBean.coordinate != rowIndex + "," + columnIndex) {
                isVerfiyPass = false;
                break;
            }
            listIndex++;
        }
    }
    return isVerfiyPass;
}

private onClickSelectImage(index: number, e: TouchEvent) {
    var _clickImage: eui.Image = (e.target as any) as eui.Image;
    index = this._zhuanBitmapGroup.getChildIndex(_clickImage);

    if (this._oneSelectImageIndex == -1) {
        this._oneSelectImageIndex = index;
        console.log("选择的index" + index);

    } else {
        if (this._oneSelectImageIndex == index) {
            console.log("无效选择");
            return;
        }
        console.log("交换位置", this._oneSelectImageIndex, index);


        let img1 = this._zhuanSliceBitmapList[this._oneSelectImageIndex].image;
        let img2 = this._zhuanSliceBitmapList[index].image;
        //一种方式是点击交换
        // this._zhuanBitmapGroup.swapChildren(img1, img2);

        //一种方式是移动交换
        var img1GlobalPoint: egret.Point = this._zhuanBitmapGroup.localToGlobal(img1.x, img1.y);
        var img2GlobalPoint: egret.Point = this._zhuanBitmapGroup.localToGlobal(img2.x, img2.y);

        console.log("img1 世界坐标" + img1GlobalPoint);
        console.log("img2 世界坐标" + img2GlobalPoint);

        let fillBitmap = new eui.Image();
        // fillBitmap.source = RES.getRes("egret_icon_png");
        this._zhuanBitmapGroup.removeChild(img1);
        this._zhuanBitmapGroup.addChildAt(fillBitmap, this._oneSelectImageIndex);

        img1.x = img1GlobalPoint.x;
        img1.y = img1GlobalPoint.y;
        this._scene.addChild(img1);

        let temp = this._zhuanSliceBitmapList[this._oneSelectImageIndex];
        this._zhuanSliceBitmapList[this._oneSelectImageIndex] = this._zhuanSliceBitmapList[index];
        this._zhuanSliceBitmapList[index] = temp;

        egret.Tween.get(img1).to({ x: img2GlobalPoint.x, y: img2GlobalPoint.y, alpha: 1 }, 600, egret.Ease.quintIn)
            .call(() => {
                egret.Tween.removeAllTweens();
                this._scene.removeChild(img1);

                this._zhuanBitmapGroup.swapChildren(img2, fillBitmap);
                this._zhuanBitmapGroup.removeChild(fillBitmap);
                this._zhuanBitmapGroup.addChildAt(img1, index);

                //通过之后的动作
                let isVerifyPass = this.checkIsPuzzleSuccess();
                if (isVerifyPass) {
                    console.log("验证通过");
                } else {
                    console.log("继续加油");
                }
            });
        this._oneSelectImageIndex = -1;
    }
}

private onExitToMain(e: TouchEvent) {
    SceneManager.Instance.changeScene(GameStartActivity.instance());
}

}