<template>
    <div id="app">
        <button @click="generateNumbers">生成10注號(hào)碼</button>
        <div class="DLTCON" v-for="(numbers, index) in generatedNumbers" :key="index">
            <span class="DLTfront" v-for="(num1, idx1) in numbers.front" :key="idx1+'q'"
                @click="clickFront(num1,idx1,index,'front')">
                {{num1}}
            </span>
            <span> - </span>
            <span class="DLTback" v-for="(num2, idx2) in numbers.back" :key="idx2+'h'"
                @click="clickFront(num2,idx2,index,'back')">
                {{num2}}
            </span>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                generatedNumbers: [],
                seleData: []
            }
        },
        mounted() {

        },
        methods: {
            clickFront(num, idx, index, sign) {

                this.seleData.push(num)
                this.seleData.push(idx)
                this.seleData.push(index)
                this.seleData.push(sign)

                console.log(this.seleData)

                if (sign === 'front') {

                }

                if (sign === 'back') {

                }

                console.log(num, idx, index)
                console.log(this.generatedNumbers)
            },
            submit() {


            },
            getRandomNumber(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            },
            generateNumbers() {

                this.generatedNumbers = Array.from({
                    length: 10
                }, () => ({
                    front: this.getRandomNumbers(1, 35, 5),
                    back: this.getRandomNumbers(1, 12, 2)
                }));
                this.generatedNumbers.forEach(item => {
                    item.front = item.front.sort((a, b) => {
                        return a - b
                    })
                    item.back = item.back.sort((a, b) => a - b)
                })

            },
            getRandomNumbers(min, max, count) {
                const numbers = [];
                while (numbers.length < count) {
                    const randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
                    if (!numbers.includes(randomNum)) {
                        numbers.push(randomNum);
                    }
                }
                return numbers;
            },

        }
    }
</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;
    }

    .DLTCON {
        margin-top: 10px;
    }

    .DLTfront {
        width: 30px;
        display: inline-block;
        cursor: pointer;
    }

    .DLTback {
        width: 30px;
        display: inline-block;
        cursor: pointer;
    }
</style>