court-badminton/pages/f6test/index.js

const app = getApp()

Page({
    query: {
        "grouping_id": "62e601c72dc7343e137fff6f",
        "match_id": "62e388d4fd61d871861b80af",
        "project_id": "62e5fff82dc7343e137ffef5"
    },
    data: {
        frameStyle: { useTop: true, name: '注册', leftArrow: false, useBar: false },
        canvasWidth: 375,
        canvasHeight: 600,
        pixelRatio: 1,
        forceMini: false,
        data: undefined,

        // picker
        show: false,
        personList: [],
        selectNode: undefined

    },
    computedTreeData() {
        const getWinnerNumList = [4, 4, 4, 4]; // 造的数据,4各组,每组取前2
        const getWinnerNum = getWinnerNumList.reduce((p, n) => p + n, 0); // 小组赛选取人数: 应该是该比赛项目的 各组选取人数加和
        let level = 1;
        let loop = true;
        while (loop) {
            const needUserNum = 2 ** (level - 1);
            // 相等,说明已经计算出结果
            if (needUserNum === getWinnerNum) loop = false;
            // 小于,说明还可以继续往后计算
            else if (needUserNum < getWinnerNum) level++;
            else {
                // 大于,说明不符合淘汰赛安排,需要手动定位
                loop = false;
                level = NaN
            }
        }
        if (!level) {
            console.log('不继续,返回了,编不了数据')
            return;
        }
        const levelList = [];
        // 1:16;2:8;3:4;4:2
        for (let i = 0; i < level - 1; i++) {
            const t = level - i - 1;
            // 计算:该层的位置数量
            const number = 2 ** t;
            const arr = [];
            for (let j = 1; j <= number; j++) {
                const obj = { id: `${i}-${j}`, num: `${i}-${j}`, label: `label-${i}-${j}` }
                arr.push(obj);
            }
            levelList.push(arr)
        }
        // 进行数据组合,从最少的入手,依次取回,然后将取出来的数据删除掉
        let getLevelIndex = levelList.length - 1;
        const data = this.resetData(levelList, getLevelIndex)
        let obj = { id: `${levelList.length}`, num: `${levelList.length}`, children: data }
        return obj;
    },


    resetData(dataList, index = 0) {
        const thisLevelList = dataList[index]
        // 取出2条数据
        const p1 = thisLevelList[0]
        const p2 = thisLevelList[1]
        // 删除取出的2条数据
        dataList[index].shift()
        dataList[index].shift()
        if (index - 1 < 0) return [p1, p2]
        const p1c = this.resetData(dataList, index - 1)
        const p2c = this.resetData(dataList, index - 1)
        p1.children = p1c
        p2.children = p2c;
        return [p1, p2]
    },

    nodeTap(e) {
        const node = e.detail;
        if (!node) return;
        this.setData({ selectNode: node })
        this.getPersonList();
        this.toOpen();
    },

    getPersonList() {
        // 先用模拟数据
        const node = this.data.data;
        const arr = this.getFirstLevelNodes(node);
        this.setData({ personList: arr })
    },

    getFirstLevelNodes(node) {
        if (!node.children) return node;
        const res = [];
        const nodes = node.children;
        for (const node of nodes) {
            if (node?.children) {
                let list = this.getFirstLevelNodes(node);
                res.push(list);
            } else {
                res.push(node)
            }
        }
        return res.flat();
    },


    selectChange(changeNode) {
        const selectNode = this.data.selectNode;
        console.log(changeNode, selectNode)
    },


    async onLoad() {
        // 设置初始的晋级图
        const data = this.computedTreeData();
        this.setData({ data })
        // 请求 小组赛的 胜者列表
        await this.setWinnerList();

    },


    async setWinnerList() {
        const res = await app.$post(`/newCourt/api/race/getWinnerList`, this.query)
        console.log(res)
    },



    //picker
    onChange(event) {
        const obj = event?.detail?.value;
        const label = obj['label']
        const value = obj['id']
        console.log(label, value)
        this.selectChange(obj);
        this.toClose();
    },
    toOpen() {
        console.log('in')
        this.setData({ show: true })
    },
    toClose() {
        this.setData({ show: false, selectNode: undefined })
    }

});