<template>
    <view class="content">
        <view class="slogen">史上最牛的数独解体工具</view>
        <table>
            <tbody>
                <tr v-for="(item,index) in sudoArr" :class="(index+1)%3==0?'redR':''">
                    <td v-for="(it,idx) in item">
                        <input type="text"  v-model="sudoArr[index][idx]" :class="(idx+1)%3==0?'redC':''" placeholder="" :value="sudoArr[index][idx]==0?'':sudoArr[index][idx]"></input>
                    </td>
                </tr>
            </tbody>

        </table>
        <button @tap="solveSudo">解</button>
        <button @tap="refresh" class="refresh">重来</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                sudoArr:[
                        [0,0,0,0,0,0,0,0,0],
                        [0,0,0,0,0,0,0,0,0],
                        [0,0,0,0,0,0,0,0,0],
                        [0,0,0,0,0,0,0,0,0],
                        [0,0,0,0,0,0,0,0,0],
                        [0,0,0,0,0,0,0,0,0],
                        [0,0,0,0,0,0,0,0,0],
                        [0,0,0,0,0,0,0,0,0],
                        [0,0,0,0,0,0,0,0,0]
                    ]
            }
        },
        onLoad() {
            this.refresh();
        },
        methods: {
            refresh(){
                this.sudoArr=[
                        [0,0,0,0,0,0,0,0,0],
                        [0,0,0,0,0,0,0,0,0],
                        [0,0,0,0,0,0,0,0,0],
                        [0,0,0,0,0,0,0,0,0],
                        [0,0,0,0,0,0,0,0,0],
                        [0,0,0,0,0,0,0,0,0],
                        [0,0,0,0,0,0,0,0,0],
                        [0,0,0,0,0,0,0,0,0],
                        [0,0,0,0,0,0,0,0,0]
                    ];
            },
            solveSudo(){
                var row=0;
                var col=0;
                var res=this.findEmptyCell();
                if(!res){
                    return true;
                }else{
                    row=res[0];
                    col=res[1];
                }

                for(var num =1;num<=9;num++){
                    if(this.isSafe(row,col,num)){
                        this.sudoArr[row][col]=num;
                        if(this.solveSudo()){
                            //console.log('行数:'+(row+1)+'列数:'+(col+1)+'值为:'+num);
                            return true;//找到一个可行解
                        }
                        this.sudoArr[row][col]=0;//回溯
                    }
                }
                return false;//无解
            },
            findEmptyCell(){
                for(var row=0;row<9;row++){
                    for(var col=0;col<9;col++){
                        if(this.sudoArr[row][col]==0){
                            return [row,col];
                        }
                    }
                }
                return false;
            },
            isSafe(row,col,num){
                return !this.usedInRow(row,num) && !this.usedInCol(col,num) && !this.usedInBox(row-row%3,col-col%3,num);
            },
            usedInRow(row,num){
                for(var col=0;col<9;col++){
                    if(this.sudoArr[row][col]==num){
                        return true;
                    }
                }
                return false;
            },
            usedInCol(col,num){
                for(var row=0;row<9;row++){
                    if(this.sudoArr[row][col]==num){
                        return true;
                    }
                }
                return false;
            },
            usedInBox(boxStartRow,boxStartCol,num){
                for(var row=0;row<3;row++){
                    for(var col=0;col<3;col++){
                        if(this.sudoArr[boxStartRow+row][boxStartCol+col]==num){
                            return true;
                        }
                    }
                }
                return false;
            },

        }
    }
</script>

<style>
    table{width:630upx; height:630upx;border-collapse: collapse;margin:10upx auto;}
    td{width:70upx;height:70upx;border:1px solid #000;}
    td input{width:70upx;height:70upx;text-align: center;}
    .slogen{color:#00adef;text-align: center;width:100%;height:100upx;line-height: 100upx;}
    button{width:700upx;height:80upx;border-radius:20upx;background:#00adef;color:#fff;}
    .redR td{border-bottom:1px solid #f00;}
    .redC{border-right:1px solid #f00;}
    .refresh{background:#eee;margin-top:20px;}
</style>