document.getElementsByTagName("body")[0].oncontextmenu = () => {
    return false;
}
const app = Vue.createApp({
    data() {
        return {
            // 面板模块
            // 步数，标记数，开始时间，已操作时间，开启空格数，计时器。
            step: 0,
            marked: 0,
            // startTime: "",
            // time: "0",
            rightNum: 0,
            // timer: "",

            css: {
                blockCss: {
                    // 默认格子样式
                    block: true,
                    blockClicked: false,
                },
                blockCssClicked: {
                    // 打开后样式
                    block: true,
                    blockClicked: true,
                },
            },
            termSelected: "normal",
            selectedDifValue: "",
            difValues: {
                // 三级难度
                normal: {
                    row: 6,
                    column: 6,
                    mine: 5,
                },
                middle: {
                    row: 10,
                    column: 10,
                    mine: 10,
                },
                tough: {
                    row: 16,
                    column: 12,
                    mine: 16*12*0.15,
                },
            },

            existMine: [],
            // 存在的地雷坐标
            rowAndColumn: [],
            // 二维数组声明.
            // rowAndColumn [y][x]
        };
    },
    computed: {
        getUpText() {
            return (pxy) => {
                let t = this.rowAndColumn;

                let y = pxy[1];
                let x = pxy[0];

                if (!t[y][x].isOpen) {
                    if (!t[y][x].isMark) {
                        return "☺";

                    } else {
                        return "?"
                    }
                } else {
                    let num = 0
                    num = this.roundMineNum(pxy);
                    // 获取周围雷的数量

                    if (t[y][x].isMine) {
                        return "☠";
                    }
                    else if (num !== 0) {
                        return num;
                    }
                    else {
                        return " ";
                    }
                }

            }
        },
        getClass() {
            return (pxy) => {
                //   通过传入坐标修改对应二维数组中类的isOpen
                if (!this.rowAndColumn[pxy[1]][pxy[0]].isOpen) {
                    return this.css.blockCss;
                } else {
                    return this.css.blockCssClicked;
                }
            };
        },
    },
    methods: {
        roundMineNum(pxy) {
            // 传入[x,y]
            let t = this.rowAndColumn;
            let dif = this.difValues[this.selectedDifValue]

            let y = pxy[1];
            let x = pxy[0];

            let num = 0;

            if (x == 0) {
                // 格子在最左侧

                let a = (y > 0) ? (t[y - 1][x].isMine + t[y - 1][x + 1].isMine) : 0
                let b = (t[y][x + 1].isMine) ? 1 : 0;
                let c =
                    (y < dif.column - 1) ? (t[y + 1][x].isMine + t[y + 1][x + 1].isMine) : 0
                num = a + b + c;

                // ↑↗(可能没有)
                // →
                // ↓↘(可能没有)
            } else if (x == dif.row - 1) {
                // 最右侧
                let a = (y > 0) ? (t[y - 1][x].isMine + t[y - 1][x - 1].isMine) : 0;
                let b = (t[y][x - 1].isMine) ? 1 : 0;
                let c = (y < dif.column - 1) ? (t[y + 1][x - 1].isMine + t[y + 1][x].isMine) : 0

                num = a + b + c;
                // ↑↖(可能没有)
                // ←
                // ↓↙(可能没有)

            }
            else {
                let a =
                    (y > 0) ? (t[y - 1][x - 1].isMine + t[y - 1][x].isMine + t[y - 1][x + 1].isMine) : 0;
                let b =
                    (t[y][x - 1].isMine) ? 1 : 0 + (t[y][x + 1].isMine) ? 1 : 0;
                let c =
                    (y < dif.column - 1) ? (t[y + 1][x - 1].isMine + t[y + 1][x].isMine + t[y + 1][x + 1].isMine) : 0;
                num = a + b + c;

                //↖↑↗(可能没有)
                //←   →
                //↙↓↘(可能没有)

            }
            return num;
        },

        isEnterable(pxy, dire) {
            // 0右 1下 2左 3上

            let upAndDown = 0, leftAndRight = 0;

            switch (dire) {
                case 0: {
                    leftAndRight = 1;
                    break;
                }
                case 1: {
                    upAndDown = 1;
                    break;
                }
                case 2: {
                    leftAndRight = -1
                    break;
                }
                case 3: {
                    upAndDown = -1;
                    break;
                }
                default: {
                    break;
                }
            }

            let x = pxy[0] + leftAndRight;
            let y = pxy[1] + upAndDown;

            try {
                let t = this.rowAndColumn[y][x];
                if (!t.isMine) {
                    if (!t.isOpen) {
                        return true;
                    }
                }
            } catch (error) {
                return false;
            }
            return false;
        },


        roundOpen(pxy) {
            let n = 0;
            this.rowAndColumn[pxy[1]][pxy[0]].isOpen = true;
            if(this.roundMineNum(pxy)==0)
            {
                console.log(pxy);
                console.log("右")
                if (this.isEnterable(pxy, 0)) {
                    // 往右
                    n++;
                    console.log(n);
                    this.roundOpen([pxy[0] + 1, pxy[1]]);
                }
                console.log("下")
                if (this.isEnterable(pxy, 1)) {
                    // 向下
                    n++;
                    console.log(n);
                    this.roundOpen([pxy[0], pxy[1] + 1]);
                }
                console.log("左");
                if (this.isEnterable(pxy, 2)) {
                    //往左
                    n++;
                    console.log(n);
                    this.roundOpen([pxy[0] - 1, pxy[1]]);
                }
                console.log("上")
                if (this.isEnterable(pxy, 3)) {
                    // 往上
                    n++;
                    console.log(n);
                    this.roundOpen([pxy[0], pxy[1] - 1]);
                }
            }
            return;
        },

        // startATimer() {
        //     this.timer = "";
        //     this.startTime = Date.now();
        //     this.timer = setInterval(() => {
        //         this.time = parseInt((Date.now() - this.startTime) / 1000);
        //     }, 1000)

        // },

        okBT() {
            this.selectedDifValue = this.termSelected;
            // this.startATimer();

        },

        leftClick(pxy) {
            //   选择，
            let t = this.rowAndColumn;
            let y = pxy[1];
            let x = pxy[0];
            // if (this.timer == "") {
            //     this.startATimer();
            // }

            if (!t[y][x].isOpen) {
                t[y][x].isOpen = true;
                if (t[y][x].isMark) {
                    // 有标记-1
                    this.marked--;
                }
                if (t[y][x].isMine) {
                    // 选着雷了
                    alert("Boom!!!!!")
                    this.existMine.forEach((item) => {
                        // 全开
                        this.rowAndColumn[item[1]][item[0]].isOpen = true;
                        clearInterval(this.timer);
                    })
                }
                else {
                    if(this.roundMineNum(pxy)===0){
                        this.roundOpen(pxy);
                    }
                    this.step++;
                    this.rightNum++;
                    //步数加
                }
            }
        },
        rightClick(pxy) {
            // 右键标记
            let t = this.rowAndColumn;
            let x = pxy[0];
            let y = pxy[1];

            if (this.marked < this.difValues[this.selectedDifValue].mine) {
                if (!t[y][x].isOpen) {
                    // 未打开时，有无标记进行切换。
                    if (t[y][x].isMark && this.marked > 0) {
                        // 有标记
                        t[y][x].isMark = false;
                        this.marked--;
                    }
                    else {

                        t[y][x].isMark = true;
                        this.marked++;
                    }
                }
            }
        },

        find(arr, value) {
            // 对象数组查找；
            // value 是否在arr中，
            return arr.findIndex(
                (term) => {
                    return JSON.stringify(term) == JSON.stringify(value)
                });
        },
        getMines(difValues) {
            // 随机生成 mine 个雷
            let mineNum = difValues.mine;
            let y = difValues.column;
            let x = difValues.row;
            let blockNum = x * y;
            let mines = [];

            for (let index = 0; index < mineNum;) {
                var term = (Math.floor((Math.random()) * 1000) % blockNum);
                // 1~blockNum 的随机数
                if (!mines.includes(term)) {
                    mines.push(term);
                    index++;
                }
            }

            let finMines = [];
            // 得到的是随机数，转换为坐标
            mines.forEach((element) => {
                finMines.push([element % x, Math.floor(element / x)]);
            });
            return finMines;
        },
    },
    watch: {
        rightNum(newV) {
            let t = this.difValues[this.selectedDifValue];

            if (newV == t.row * t.column - t.mine) {
                alert("Congratulations! You");
            }
        },

        selectedDifValue(newV) {
            if (newV != "") {
                this.rowAndColumn.length = 0;
                this.step = 0;
                this.marked = 0;
                this.time = 0;
                // 雷区初始化
                this.existMine = this.getMines(this.difValues[newV]);
                // 随机雷的坐标
                for (
                    let index = 0;
                    index < this.difValues[newV].column;
                    index++
                ) {
                    var column = [];
                    // 雷区
                    for (let j = 0; j < this.difValues[newV].row; j++) {
                        var term = {
                            // 插入一个雷格
                            index: [j, index],
                            isOpen: false,
                            isMine: false,
                            isMark: false,
                            Warning: 0,
                        };
                        let termIndex = this.find(this.existMine, [j, index])
                        if (termIndex != -1) {
                            term.isMine = true;
                        }
                        column.push(term);
                    }
                    this.rowAndColumn.push(column);
                }
            }
        },
    },
    created() {
        this.selectedDifValue = "normal";
    },
});
app.component("square", {
    template: `

    `,
});

const vm = app.mount("#app");