/**
 * DOM 类
 * 
 * DOMObj 被抽象化的dom对象
 * root   容器
 * 
 * */
class DOMClass {
    constructor(DOMObj, root) {
        if (DOMObj) {
            this.d = this.createDOM(DOMObj, root);
        }
    }
    // 创建dom
    createDOM = (DOMObj, root) => {
        // 创建的 dom
        let cDOM = document.createElement(DOMObj.el);
        // 过滤非必要的操作
        let filterArr = ["el", "elChildren"];

        // 赋予属性
        // cDOM.className = "xxx";
        for (const key in DOMObj) {
            if (!filterArr.includes(key)) {
                // console.log(key);
                cDOM[key] = DOMObj[key];

                // cDOM.className = DOMObj.className;
                // cDOM[key] //会解析 key 
            }
        }
        // 赋予样式
        for (const key in DOMObj.style) {
            cDOM.style[key] = DOMObj.style[key];
        }
        // 递归
        // 如果该盒子存在子盒子(多个或一个) 即创建子盒子 并丢进去
        DOMObj.elChildren && DOMObj.elChildren.forEach(element => {
            // 将 孩子 挨个传入 生成dom 并丢到 父盒子中
            this.createDOM(element, cDOM);
        });
        // 如果给容器 就帮你放入
        if (root) {
            root.appendChild(cDOM);
        }
        return cDOM;
    }
}
// 使用

// 1. new DOMClass(option, root);


// 2. let D = new DOMClass();
// D.createDOM(option, root);



// class N extends DOMClass {
//     constructor() {
//         super()
//         this.createDOM()
//     }
// }



// option 例子:
// {
//     el: "div",
//     className: "top",
//     elChildren: [{
//         el: "div",
//         className: "box-content",
//         elChildren: dataLbt.map((ite) => ({ el: "img", src: ite.img }))
//     }]
// }