2024-04-11

<template>
    <div id="app">

        <div class="r9page">
            <!-- <p class="r9title">第XXX</p> -->
            <div class="r9list" v-for="(item,index) in listData">
                <!-- <div class="r9num">{{index+1}}</div> -->
                <div class="r9sele">
                    <span @click="clickSpan(0,index)" :style="{background: item.x0 !== undefined ? '#bbb': '' }">3 {{item.x0}}</span>
                    <span @click="clickSpan(1,index)" :style="{background: item.x1 !== undefined ? '#bbb': '' }">1 {{item.x1}}</span>
                    <span @click="clickSpan(2,index)" :style="{background: item.x2 !== undefined ? '#bbb': '' }">0 {{item.x2}}</span>
                </div>
            </div>
            <div class="r9btn">
                <!-- <span>选了<em>0</em><i class="r9tag">至少选9个</i></span> -->
                <span @click="submit()">选好了</span>
            </div>
        </div>

    </div>
</template>

<script>

    export default {
        name: 'app',
        data(){
            return{
                listData:[{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
                seleRow:[],
                combination:[]
            }
        },
        mounted(){
            console.log(this.listData,999)
        },
        methods:{
            clickSpan(x,y){
        
                let sx = x === 0 ? 'x0' : x === 1 ? 'x1' : x === 2 ? 'x2' : ''
                if(this.listData[y][sx] !== undefined){
                                
                    delete this.listData[y][sx] 
                    console.log(this.listData,111)
                    this.fSeleSpanY(y)
                    this.$forceUpdate()
                    return
                    
                }

                this.listData[y][sx] = x
                // this.listData[y].y = y
                
                console.log(this.listData,222)
                this.fSeleSpanY(y)
                this.$forceUpdate()
            },
            fSeleSpanY(y){
                
                this.listData.forEach((item,index) => {
                    /* 等于1说明只有一个y的key,所以删除*/
                    if(Object.keys(item).length === 1){
                        delete this.listData[y].y 
                    }
                })
                
                this.seleRow = []
                this.listData.forEach((item,index) => {
                    /* 记录y编号与选中的x */
                    if(JSON.stringify(item) !== '{}'){
                        item.y = index
                        this.seleRow.push(item)
                    }
                })
                console.log(this.seleRow,'行')
            },
            submit(){
                if(this.seleRow.length<9){
                    alert('NO')
                    return
                }

                this.combination = this.cmn(this.seleRow,9)
                

                // let  gNewArr = []
                
    
    console.log(this.listData,this.combination,'item1')
    
                this.combination.forEach((item,index) => {
                    // console.log(item,'item1')
                
                this.listData.forEach((iet,idx) => {
                    console.log(item2,'item1')
                    
                    
                    item.forEach((item2,index2) => {
                        
                        if(iet.y === item2.y){
                            
                        }
                        
                        console.log(item2,'item1')
                    })
                    
                    
                })
                
                
                
        
                })

                
        
                
                for(let i = 0;i<14;i++){}
                
        
                /* 把每一个都补充成14场 */

                
                
                
                console.log(this.combination,'combination')
            },
             //求：组合C(m, n)，m为上标，n为下标。m选n的所有项
            cmn(m, n, currentIndex = 0, choseArr = [], result = []) {

                let mLen = m.length
                if (currentIndex + n > mLen) {
                return
                }
                for (let i = currentIndex; i < mLen; i++) {
                    if (n === 1) {
                        result.push([...choseArr, m[i]])
                        i + 1 < mLen && this.cmn(m, n, i + 1, choseArr, result)
                        break
                    }
                    this.cmn(m, n - 1, i + 1, [...choseArr, m[i]], result)
                }
                return result
            },
            /*筛选数组中不相同的值*/
             getNewArr(a,b){
                const arr = [...a,...b];
                return arr.filter(item => {
                    return !(a.includes(item) && b.includes(item));
                });
            }
        }
        
    }
</script>

<style scoped="scoped">
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }

    .r9page {
        width: 100%;
    }
    .r9title{}
    .r9list{        
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 10px;
        
        }
    .r9num{
        width: 30%;
        padding: 1px 0;
    }
    .r9sele{
        width: 70%;
        display: flex;
        justify-content: space-evenly;
        
        
    }
    .r9sele span{
        width: 30%;
        background: #eee;
        padding: 1px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .r9sele span:last-child{
        border-right: none;
    }
    .r9btn{
        display: flex;
        justify-content: space-between;
    }
    .r9btn span{
        width: 50%;

    }
    .r9tag{
        font-style: normal;
        display: block;
        font-size: 8px;
        color: #666;
    }
    
</style>