$(function () {
    $(".dropdown-menu.dropdown-select-menu").each((index, value) => {
        setDropdownItem(value)
    })

})

/** 
 * fn 定義 | 手動初始化 Bootstrap dropdown select 
 */
$.fn.droSetItem = function () {
    setDropdownItem(this);
    return this;
}
/** 
 * fn 定義 | 輸出含原元素 html
 */
$.fn.outerHtml = function () {
    return $(this).prop("outerHTML");
}

/**
 * 設置 bootstrap dropdown 為下拉選單 
 * @param {any} menuEle .dropdown-menu element
 */
function setDropdownItem(menuEle) {
    if ($(menuEle).find(".dropdown-item.active").length == 0) {
        $(menuEle).find(".dropdown-item").first().addClass("active");
    }

    let actText = $(menuEle).find(".dropdown-item.active").first().text();
    let actEleId = $(menuEle).prop("id");
    $(`.dropdown-toggle[data-target=${actEleId}]`).text(actText);

    /*actChaCallback($(menuEle).find(".dropdown-item.active"))*/
    $(menuEle).trigger("active:change", $(menuEle).find(".dropdown-item.active"));

    //點選選項 add active class
    onEvent("click", ".dropdown-menu.dropdown-select-menu .dropdown-item", function () {
        $(this).parent(".dropdown-menu.dropdown-select-menu").find(".dropdown-item").removeClass("active");
        $(this).addClass("active");
        setDropdownItem($(this).parent(".dropdown-menu.dropdown-select-menu"));
    })
}

/**
 * 預設設備圖像
 * @param {any} obj
 */
function defDev(obj) {
    let defSrc = 'img/defdev.png';
    obj.src = defSrc;
}

function dtAjaxResetSendData(table,sendData) {
    table.context[0].ajax.data = function (d) {
        d = sendData;
        return JSON.stringify(d)
    }
}

/**
 * element 建造 
 * @param {any} text
 * @param {any} id
 * @param {any} name
 * @param {any} cls
 * @param {any} data
 * @param {any} attr
 */
function eleBuild(text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
    cls = cls ?? [], data = data ?? {}, attr = attr ?? {};
    id = id ? `id="${id}"` : "";
    name = name ? `name="${name}"` : "";
    cls = cls.length != 0 ? `class="${cls.join(' ')}"` : "";
    data = data.length != 0 ? `${Object.keys(data).map(x => `data-${x}="${data[x]}"`).join(" ")}` : "";
    attr = attr ? `${Object.keys(attr).map(x => `${x}="${attr[x]}"`).join(" ")}` : "";
    let attrArr = [], attrText = "";
    attrArr = [id, name, cls, data, attr];
    attrText = attrArr.filter(x => x != "").join(" ");
    text = text === null ? "" : text;
    return { attrText: attrText, text: text };
}

function creEle(ele, text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
    let comp = eleBuild(text, id, name, cls, data, attr);
    return $(`<${ele} ${comp.attrText}>${comp.text}</${ele}>`);
}

function creDiv(cls = [], attr = {}, id = null, name = null, data = {}, text = null) {
    return creEle("div", text, id, name, cls, data, attr);
}

function creBtn(text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
    return creEle("button", text, id, name, cls, data, attr);
}

function creBtnHtml(text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
    return creEle("button", text, id, name, cls, data, attr).prop("outerHTML");
}

function creSelect(id = null, cls = [], name = null, data = {}, attr = {}, text = null) {
    return creEle("select", text, id, name, cls, data, attr);
}

function creOption(text = null, value = null, data = {}, attr = {}, cls = [], name = null, id = null) {
    attr = value != null ? attr.value = value : attr;
    return creEle("option", text, id, name, cls, data, attr);
}