2024-04-12

<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(1,index)" :style="{background: item.x0 !== undefined ? '#bbb': '' }">3 {{item.x0}}</span>
                    <span @click="clickSpan(2,index)" :style="{background: item.x1 !== undefined ? '#bbb': '' }">1 {{item.x1}}</span>
                    <span @click="clickSpan(3,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>{{mon}}
            </div>
        </div>
        
        <div class="r9res">
            <div class="r9table" v-for="(item,index) in combination">
                <div class="tbeNum">{{index+1}}.</div>
                <div class="tbecon">
                    <div class="tbelist" v-for="(itm,idx) in item">
                        <span v-if="itm.x0 !== undefined || itm.x1 !== undefined || itm.x2 !== undefined">
                            {{itm.x0 ? 3 : ''}} {{itm.x1 ? 1 :''}} {{itm.x2 ? 0 :''}}
                        </span>
                        <span v-else>*</span>
                    </div>
                </div>

            </div>
        </div>


    </div>
</template>

<script>

    export default {
        name: 'app',
        data(){
            return{
                listData:[{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
                seleRow:[],
                combination:[],
                noSeleRow:[],
                mon:1
            }
        },
        mounted(){
            console.log(this.listData,999)
        },
        methods:{
            clickSpan(x,y){
        
                let sx = x === 1 ? 'x0' : x === 2 ? 'x1' : x === 3 ? '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.combination = []
                this.listData.forEach((item,index) => {
                    /* 等于1说明只有一个y的key,所以删除*/
                    if(Object.keys(item).length === 1){
                        delete this.listData[y].y 
                    }
                })
                
                this.seleRow = []
                this.noSeleRow = []
                this.listData.forEach((item,index) => {
                    /* 记录y编号与选中的x */
                    if(JSON.stringify(item) !== '{}'){
                        item.y = index
                        this.seleRow.push(item)
                    }else{
                        this.noSeleRow.push(index)
                    }
                })
                console.log(this.seleRow,'行')
            
                
            },
            /* 提交 */
            submit(){
            if(this.seleRow.length<9){
                alert('NO')
                return
            }

            this.combination = this.cmn(this.seleRow,9)
            
            
            /* 遗漏项 */
            let omit = []
            this.combination.forEach((item1,index1) => {
                omit.push(this.getNewArr(item1,this.seleRow))
            })
            
            // 指定位置插入遗漏的kong值
            this.combination.forEach((item1,index1) => {
                omit.forEach((item3,index3) => {
                    if(index1 === index3){
                        item3.forEach((item4,index4) => {
                            item1.splice(item4.y*1, 0, {
                                key:'kong'
                            });
                        })
                    }
                })
            })
            
            // 指定位置插入没选的kong值
            this.combination.forEach((item1,index1) => {  //指定位置插入值
                this.noSeleRow.forEach((item3,index3) => {
                    item1.splice(item3, 0, {
                        key:'kong'
                    });
                })
            })


            let localPar = {
                time:this.currentDate(),
                data:this.combination
            }

            let lishi = JSON.parse(localStorage.getItem('r9HistoryData')) || []
            
            lishi.push(localPar)
            
            // 只保留最近三次的数组
            if(lishi.length>3){
                lishi.splice(0,1)
            }
            
            localStorage.setItem('r9HistoryData',JSON.stringify(lishi)) 
            
            /* 计算多少种可能性 */
            let mon = 0
            
            this.combination.forEach((item0,index0) => {
                let mon3b = 0
                let mon2b = 0
                    console.log(item0,'=======')
                item0.forEach((item1,index1) => {
                    if(item1.x0 && item1.x1 && item1.x2 ){
                        
                        console.log(item1,'---333----')
                        mon3b ++ 
                    }else if((item1.x0 && item1.x1) || (item1.x0 && item1.x2) || (item1.x1 && item1.x2)){
                        console.log(item1,'---222----')
                        mon2b++
                    }
                    
                })
                mon = mon + Math.pow(3,mon3b) * Math.pow(2,mon2b)
            })
            
            this.mon = mon
                        
            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));
                });
            },
            
            /* 获取当前时间 */
          currentDate(){
            var d = new Date();
            var year = d.getFullYear();
            var month = d.getMonth();
            month = month + 1 > 12 ? 1 : month + 1;
            month =  month > 9 ? month : "0" +month.toString();
            var day = d.getDate();
            var hour = d.getHours();
            hour = hour > 9 ? hour : "0" + hour.toString();
            var minute = d.getMinutes();
            minute = minute > 9 ? minute : "0" + minute.toString();
            var second = d.getSeconds();
            return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
          }
        }
        
    }
</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;
    }
    
    
    /* table */
    .r9res{
        width: 100%;
    }
    .r9table{
        display: flex;
        align-items: center;
        height: 46px;
    }
    .r9table .tbeNum{
        font-size: 12px;
        width: 34px;
    }
    .r9table .tbelist{
        
        border-top: 1px solid #CCCCCC;
        border-right: 1px solid #CCCCCC;
        height: 100%;
        display: flex;
        align-items: center;
        
    }
    .r9table .tbecon{
        border-left: 1px solid #CCCCCC;
        
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    
    .r9table:last-child .tbecon:last-child{
        
        border-bottom: 1px solid #CCCCCC;
    }
    
    .r9table .tbelist span{
        float: left;
        font-size: 12px;
        display: block;
        text-align: center;
        margin: 0 auto;
        width: 15px;
        padding: 0 3px;
        
    }
    
</style>