<template>
    <div class="table-box">
        <div style="padding-bottom: 16px">
            <el-button @click="getSetList"> 重置 </el-button>
            <el-button type="primary" @click="handleClick"> 提交 </el-button>
        </div>
        <!-- @tab-click="handleTabsClick" -->
        <div class="card table-main">
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane :label="item.name" :name="item.name" v-for="(item, index) in dataStore.list" :key="index">
                    <el-form :model="dataStore.formData" label-position="top">
                        <RecursiveForm :configs="item.configs" />
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup lang="ts" name="webSetIndex">
import { getSetListApi, getConfigUpApi } from "@/api/modules/set";
import { ref, reactive } from "vue";
import RecursiveForm from "./components/RecursiveForm.vue";
import { cloneDeep } from "lodash-es";
import { useMsg } from "@/hooks/useMsg";
const activeName = ref<any>(null);

//数据集合
const dataStore = reactive<any>({
    list: [],
    formData: []
});

const convertCheckboxValuesToArray = (data: any) => {
    // 遍历外层数组
    data.forEach((item: any) => {
        // 检查 item 是否有 configs 属性
        if (item.configs) {
            // 遍历 configs 数组
            item.configs.forEach((config: any) => {
                // 检查 type 是否为 checkbox
                if (config.type === "checkbox") {
                    // 将 value 转换为数组
                    config.value = config.value.split(",").map((value: any) => value.trim());
                }
            });
        }
    });
    return data;
};

const getSetList = async () => {
    const result = await getSetListApi();
    if (result?.code === 0) {
        // let obj = {
        //     name: "图片",
        //     id: 2,
        //     configs: []
        // };
        let dataClone = cloneDeep(result?.data);
        dataStore.list = convertCheckboxValuesToArray(dataClone);
        // dataStore.list.push(obj);
        activeName.value = result?.data[0].name;
    }
};
getSetList();

// const handleTabsClick = (value: any) => {
//     console.log(value, "=value=");
// };
const extractData = (item: any) => {
    let result: any = [];
    let value = item.value;
    if (item.type === "checkbox" && Array.isArray(value)) {
        value = value.join(",");
    }
    result.push({
        value: value,
        id: item.id
    });

    if (item.extra) {
        item.extra.forEach((extra: any) => {
            if (extra.children) {
                extra.children.forEach((child: any) => {
                    result = result.concat(extractData(child));
                });
            }
        });
    }
    return result;
};
const getConfigUp = async (data: any) => {
    const result = await getConfigUpApi(data);
    if (result?.code === 0) {
        const { msg } = result;
        useMsg("success", msg);
    }
};
const handleClick = () => {
    let finalResult: any = [];
    dataStore.list.forEach((item: any) => {
        item.configs.forEach((config: any) => {
            finalResult.push(...extractData(config));
        });
    });
    getConfigUp(finalResult);
};
</script>

<style scoped lang="scss">
::v-deep(.el-form-item__label) {
    font-weight: 900;
    color: #333333;
}
</style>
