// js 封装插件
(function () {
    var defaultOption = {
        tabsTitle: "title", // tabs的标题
    }
    // 构造函数，在这里面定义变量，实现插件参数的校验
    function Tabs(option) {
        if (option.hasOwnProperty("el") && option.hasOwnProperty("data")) {
            if (option.el.length !=0 && option.data.length !=0) {

                defaultOption.tabsTitle = option.tabsTitle ||  defaultOption.tabsTitle
        
                this.option = option
                this.init()
            } else {
                throw new Error("插件需要的核心参数：el和data的数值都不能为空")
            }
        } else {
            // console.error("插件需要的核心参数：el和data都不能为空");
            throw new Error("插件需要的核心参数：el和data都必须传入")
        }
    }

    // 类的方法，主要实现插件的核心功能
    Tabs.prototype = {
        init: function () {
            this.CreatedTabsTitle();
        },
        // 创建tabs切换的标题
        CreatedTabsTitle: function () {
            var Ul = document.createElement("ul")
            Ul.className = "tabs_title"
            this.option.data.forEach((v,i) => {
                console.log(v);
               Ul.innerHTML += `<li class="${ i == 0 ? 'tabs_title_active' : '' }">${v[defaultOption.tabsTitle]}</li>` 
            });
            this.AppendElement(Ul);
            this.CreatedTabsContent();

            this.BindTabsTitleClick();
        },
        // 为tabs标题绑定事件
        BindTabsTitleClick() {
            var li = document.querySelectorAll(".tabs_title li")
            var tabsContentLi = document.querySelectorAll(".tabs_content li")
            li.forEach((v,i)=>{
                v.onclick = function () {
                    li.forEach((k,s)=>{
                        k.className = ""
                        tabsContentLi[s].className = ""
                    });
                    v.className = "tabs_title_active"
                    tabsContentLi[i].className = "tabs_content_active"
                }
            })
        },
        // 创建tabs切换的内容
        CreatedTabsContent() {
            var Ul = document.createElement("ul")
            Ul.className = "tabs_content";
            this.option.data.forEach((v,i) => {
                var li = document.createElement("li");
                i == 0 ? li.className = "tabs_content_active" : '';
                v.content.forEach((k)=>{
                    li.innerHTML += `<div>${k.text}</div>`
                });
                Ul.appendChild(li)
            });
            this.AppendElement(Ul)
        },

        /**
         * 将html插入到用户指定的父节点中
         * @param {*} html 需要被插入的html
         */
        AppendElement(html) {
            document.querySelector(this.option.el).appendChild(html)
        }
    }



    // 将自执行函数内部的方法通过全局对象 window 暴露到外面，
    //给用户能使用到
    window.lBtab = Tabs
})()

//es5

//es6
// class
// class a {
//     constructor() {
//         this.init()
//     }

//     init() {}
// }

// new a()
// 语法糖