var setting = {
    view: {
        showIcon: false,
        showLine: false,
        nameIsHTML: true,
        selectedMulti: false,
        autoCancelSelected: false,
    },
    callback: {
        beforeClick: onClick,
        onDrop: zTreeOnDrop,
        onRemove: zTreeOnRemove,
        beforeDrop: zTreeBeforeDrop,
        beforeDrag: zTreeBeforeDrag,
        beforeRemove: zTreeBeforeRemove,
        beforeRename: zTreeBeforeRename,
    },
    edit: {
        drag: {
            isCopy: false,
            isMove: true,
            prev: true,
            inner: canInner,
            next: true,
        },
        enable: true,
        showRenameBtn: false,
        showRemoveBtn: false
    },
    data: {
        simpleData: {
            enable: true
        }
    }
};

var infoTree = {};
var detailTree = {};

$(function () {
    setSummaryType(pageObj.SummaryType);
    $("#myTab li a").on("click", function (e) {
        setSummaryType($(e.target).text());
    });
});

function syncValue(obj) {
    if (obj.id.endsWith("_ColumnType")) {
        var optionIdStr = obj.id.replace("ColumnType", "ColumnOptions");
        $("#" + optionIdStr).attr('readonly', $(obj).val() < 3)
    }
    var idStr = '#' + $(obj).prop('id') + '_span';
    $(idStr).text($(obj).val());
}

function setSummaryType(summaryType) {
    $("#myTab li").removeClass("active");
    $("#myTab :contains('" + summaryType + "')").parent().addClass("active");
    $("[tag]").hide();
    $("[tag*='" + summaryType + "']").show();

    LoadStructureInfo($("#myTab a:contains('" + summaryType + "')").attr("value"));
}

function canInner(treeId, nodes, targetNode) {
    return !(targetNode && targetNode.level === 0);
}

function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {
    return !(targetNode == null || targetNode.id <= 0);
}

function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
    var objs = [];
    var tree = treeId == "infoTree" ? infoTree : detailTree;
    var notes = tree.getNodes();
    notes.forEach((item) => {
        if (item.id > 0) {
            var obj = ConvertNoteToObj(treeId, item);
            objs.push(obj);
        }
    });
    if (!save(treeId, objs)) {
        treeId == "infoTree"
            ? LoadStructureInfo(objs[0].Range)
            : LoadStructureDetail(objs[0].StructureId)
    }
}

function zTreeOnRemove(event, treeId, treeNode) {
    var tree = treeId == "infoTree" ? infoTree : detailTree;
    var nodes = tree.getNodes();
    if (nodes.length > 2) {
        tree.selectNode(nodes[1]);
        if (treeId == "infoTree") {
            onClick("infoTree", nodes[1], 1);
        }
    }
}

function zTreeBeforeDrag(treeId, treeNodes) {
    var status = true;
    treeNodes.forEach((item, index) => { if (item.id <= 0) { status = false; } });
    return status;
}

function zTreeBeforeRemove(treeId, treeNode) {
    var status = true;
    if (treeNode.id > 0) {
        status = false;
        var url = "/StructureInfo/{0}".template(treeId == "infoTree" ? "DeleteStructureInfo" : "DeleteStructureDetails")
        var opt = {
            url: url,
            async: false,
            data: { id: treeNode.id },
            success: function (res) {
                status = res.success;
                res.msg && main.message(res.msg);
            },
            error: function (res) {
                main.alert("删除失败:" + res.msg);
            }
        };
        main.ajax(opt);
    }
    return status;
}

function zTreeBeforeRename(treeId, treeNode, newName, isCancel) {
    if (!newName) { return false; }
    treeNode.name = newName;
    var obj = ConvertNoteToObj(treeId, treeNode);
    var objs = [obj];
    var status = save(treeId, objs);
    if (status) {
        treeId == "infoTree"
            ? LoadStructureInfo(objs[0].Range)
            : LoadStructureDetail(objs[0].StructureId)
    }
    return status;
}

function save(treeId, objs) {
    var postData = { objs: objs };
    if (treeId === "infoTree") {
        url = "/StructureInfo/SaveStructureInfo";
        postData["range"] = $("#myTab .active a").attr("value");
    }
    else {
        url = "/StructureInfo/SaveStructureDetails";
        postData["id"] = objs[0].StructureId;
    }
    var status = false;
    var opt = {
        url: url,
        data: postData,
        async: false,
        success: function (res) {
            status = res.success;
            res.msg && main.message(res.msg);
        },
        error: function (res) {
            main.alert("保存失败:" + res.msg);
        }
    };
    main.ajax(opt);
    return status;
}

function onClick(event, treeNode, treeId) {
    if (treeNode == null || treeNode.id < 0) {
        return false;
    }
    if (treeNode.id > 0) {
        if (event == "infoTree") {
            LoadStructureDetail(treeNode.id);
        }
        return true;
    } else {
        return false;
    }
}

function OptFunc(treeName, optType) {
    var selecter = "";
    if (treeName == "infoTree") {
        selecter = ".rename";
    } else {
        selecter = "[edit]:visible";
    }
    if (optType < 3 && $(selecter).length) {
        return;
    }
    var tree = treeName == "infoTree" ? infoTree : detailTree;
    var notes = tree.getSelectedNodes();
    switch (optType) {
        case 1://新增
            AddNote(treeName);
            break;
        case 2://修改
            if (notes.length) {
                notes.forEach((item) => {
                    if (treeName === "infoTree") {
                        tree.editName(item);
                    } else {
                        $("#" + item.id + "_Info [show]").hide()
                        $("#" + item.id + "_Info [edit]").show()
                        $("[edit]:visible:first").focus();
                    }
                });
            }
            break;
        case 3://删除
            if (notes.length) {
                notes.forEach((item) => {
                    tree.removeNode(item, true);
                });
            }
            break;
        default:
    }
}

function AddNote(treeName) {
    var tree = treeName == "infoTree" ? infoTree : detailTree;
    var newNode = { id: 0, name: "" };
    if (treeName != "infoTree") {
        var structureNotes = infoTree.getSelectedNodes();
        if (!structureNotes.length || !structureNotes.find((O) => O.id > 0)) { return; }
        newNode = GetDetailNote(0, structureNotes[0].id, "", "", "", "", true);
    }
    var index = tree.getNodes().length - 1;
    newNode = tree.addNodes(null, index, newNode);
    if (treeName == "infoTree") {
        tree.editName(newNode[0]);
        InitDetailTree([]);
    } else {
        var focus = false;
        $("#0_Info [edit]").bind("focus", function (e) {
            console.log("focus ==> " + e.target.id)
            focus = true;
        }).bind("blur", function (e) {
            console.log("blur ==> " + e.target.id)
            focus = false;
            setTimeout(() => {
                if (focus) { return; }
                var obj = ConvertNoteToObj(treeName, newNode[0]);
                if (!obj.ColumnName) { return; }
                var objs = [obj];
                if (save(treeName, objs)) {
                    LoadStructureDetail(obj.StructureId)
                }
            }, 500);
        });
        detailTree.selectNode(newNode[0]);
        $("[edit]:visible:first").focus();
    }
}

function ConvertNoteToObj(treeName, treeNote) {
    var tree = treeName == "infoTree" ? infoTree : detailTree;
    var obj = {
        id: treeNote.id,
        SortIndex: tree.getNodeIndex(treeNote)
    };
    if (treeName === "infoTree") {
        obj["StructureName"] = treeNote.name;
        obj["Range"] = $("#myTab .active a").attr("value");
    }
    else {
        var detailNotes = detailTree.getSelectedNodes();
        obj["StructureId"] = $("#" + treeNote.id + "_Structure_span").text();
        obj["ColumnName"] = $("#" + treeNote.id + "_ColumnName").val();
        obj["ColumnType"] = $("#" + treeNote.id + "_ColumnType").val();
        obj["ColumnOptions"] = $("#" + treeNote.id + "_ColumnOptions").val();
        obj["ColumnDefaultValue"] = $("#" + treeNote.id + "_ColumnDefaultValue").val();
    }
    return obj;
}

function GetOptNote(treeName) {
    var optHtml = "<div title='操作区域'>";
    optHtml += "<input type='button' class='wentiEdit' onclick='OptFunc(\"{0}\",1)' title='增加' value='增加'></input>"
    optHtml += "<input type='button' class='wentiEdit' onclick='OptFunc(\"{0}\",2)' title='修改' value='修改'></input>";
    optHtml += "<input type='button' class='wentiEdit' onclick='OptFunc(\"{0}\",3)' title='删除' value='删除'></input>";
    optHtml += "</div>";
    optHtml = optHtml.template(treeName);
    return { id: -1, name: optHtml };
}

function InitInfoTree(items) {
    var nodes = [{ id: -2, name: "结构名" }];
    items.forEach((item, index) => {
        nodes.push(item);
    });
    nodes.push(GetOptNote("infoTree"));
    if (infoTree.setting) {
        infoTree.destroy();
    }
    infoTree = $.fn.zTree.init($("#infoTree"), setting, nodes);
    //infoTree.expandAll(true);
    var nodes = infoTree.getNodes();
    InitDetailTree([]);
    if (items.length > 0) {
        infoTree.selectNode(nodes[1]);
        onClick("infoTree", nodes[1], 1);
    }
}

function InitDetailTree(items) {
    var nodes = [GetDetailNote(-2, 0, "字段名", "字段类型", "可选值", "默认值")];
    items.forEach((item, index) => {
        nodes.push(item);
    });
    nodes.push(GetOptNote("detailTree"));
    if (detailTree.setting) {
        detailTree.destroy();
    }
    detailTree = $.fn.zTree.init($("#detailTree"), setting, nodes);
    //detailTree.expandAll(true);
    if (items.length > 0) {
        var nodes = detailTree.getNodes();
        detailTree.selectNode(nodes[1]);
    }
    var focus = false;
    $("[edit]").bind("focus", function (e) {
        console.log("focus ==> " + e.target.id)
        focus = true;
    }).bind("blur", function (e) {
        console.log("blur ==> " + e.target.id)
        focus = false;
        setTimeout(() => {
            if (!focus) {
                var tid = $("#" + e.currentTarget.id).parents("li[class='level0']").attr("id");
                var note = detailTree.getNodeByTId(tid);
                var obj = ConvertNoteToObj("detailTree", note);
                var objs = [obj];
                if (save("detailTree", objs)) {
                    LoadStructureDetail(obj.StructureId)
                }
            }
        }, 500);
    });
}

function LoadStructureInfo(range) {
    var opt = {
        url: "/StructureInfo/QueryStructureInfo",
        data: { range: range },
        success: function (res) {
            if (res.success) {
                var nodes = [];
                res.obj.forEach((item, index) => {
                    nodes.push({ id: item.id, name: item.StructureName });
                });
                InitInfoTree(nodes);
            }
        },
        error: function (res) {
            main.alert("error:" + res.msg);
        }
    };
    main.ajax(opt);
}

function GetDetailNote(id, structureId, columnName, columnType, columnOptions, columnDefaultValue, editStatus = false) {
    html = "<span id='{0}_Info'>";
    if (id >= 0) {
        html += "<input id='{0}_ColumnName' class='columnInfo' {5} edit value='{1}' title='字段名' type='text' onchange='syncValue(this)'>";
        html += "<select id='{0}_ColumnType' class='columnInfo' {5} edit title='字段类型' onchange='syncValue(this)'>";
        for (var key in pageObj.ColumnTypes) {
            html += "<option value='" + key + "'" + (key == columnType ? "selected" : "") + ">" + pageObj.ColumnTypes[key] + "</option>";
        }
        html += "</select>";
        html += "<input id='{0}_ColumnOptions' class='columnInfo' {5} edit value='{3}' title='可选值\r\n仅当字段类型为下拉列表时可用\r\n多个选项之间用逗号分隔' type='text' " + (columnType > 2 ? "" : "readonly") + " onchange='syncValue(this)'>";
        html += "<input id='{0}_ColumnDefaultValue' class='columnInfo' {5} edit value='{4}' title='默认值' type='text' onchange='syncValue(this)'>";
    }
    html += "<span id='{0}_Structure_span'  class='columnInfo' style='display: none;'>{7}</span>";
    html += "<span id='{0}_ColumnName_span'  class='columnInfo' title='字段名' {6} show>{1}</span>";
    html += "<span id='{0}_ColumnType_span'  class='columnInfo' title='字段值' {6} show>{2}</span>";
    html += "<span id='{0}_ColumnOptions_span'  class='columnInfo' {6} title='可选值' show>{3}</span>";
    html += "<span id='{0}_ColumnDefaultValue_span'  class='columnInfo' {6} title='默认值' show>{4}</span>";
    html += "</span>";
    html = html.template(
        id,
        columnName,
        pageObj.ColumnTypes[columnType] || columnType,
        columnOptions,
        columnDefaultValue,
        (editStatus ? "" : "style='display: none;'"),
        (editStatus ? "style='display: none;'" : ""),
        structureId);
    return { id: id, name: html };
}

function LoadStructureDetail(structureId) {
    var opt = {
        url: "/StructureInfo/QueryStructureDetails",
        data: { id: structureId },
        success: function (res) {
            if (res.success) {
                var nodes = [];
                res.obj.forEach((item, index) => {
                    nodes.push(GetDetailNote(item.id, structureId, item.ColumnName, item.ColumnType, item.ColumnOptions, item.ColumnDefaultValue));
                });
                InitDetailTree(nodes);
            }
        },
        error: function (res) {
            main.alert("error:" + res.msg);
        }
    };
    main.ajax(opt);
}