@using IwbZero.IwbDataQuery
@using IwbZero.ToolCommon.StringModel
@using WeEngine.Enum
@using WePlatform.Configuration
@using WePlatform.Authorization
@using WePlatform.Views.Shared.Modals
@using WePlatform.Views.Shared.Query
@using WePlatform.Views.Shared.SearchForm
@using WePlatform.Views.Shared.Table

@{
    ViewBag.Title = "演练方案包策划";
    string activeMenu = PermissionNames.PagesWePlayerMgPackageMg; //The menu item will be active for this page.
    ViewBag.ActiveMenu = activeMenu;
    string category = ViewBag.Category,
        sceneType = ViewBag.SceneType,
        engineModel = ViewBag.EngineModel,
        evalModel = ViewBag.EvalModel,
        guideType = ViewBag.GuideType,
        resourceType = ViewBag.ResourceType,
        variableType = IwbDataType.GetDataTypeSelectStr(),
        packageState = "<option value=\"\" selected>请选择方案包状态...</option><option value=\"" + PackageStateDefinition.New + "\">新建</option><option value=\"" + PackageStateDefinition.Solidified + "\">已固化</option>";

    var searchForm = new SearchFormViewModel(new List<SearchItem>()
{
            new SearchItem("packageName","方案包名称"),
            new SearchItem("sceneCategory","场景类别").SetSelectItem(category,isTree:true),
            new SearchItem("engineModelNo","推演模型").SetSelectItem(engineModel),
            new SearchItem("evalModelNo","评估模型").SetSelectItem(evalModel),
            new SearchItem("packageState","方案包状态",FieldType.I).SetSelectItem(packageState),
        });
    var table = new TableViewModel(IwbConsts.ApiAppUrl + "Package/GetAll", activeMenu, searchForm)
        .SetFields(new List<FieldItem>()
{
        new FieldItem("packageName", "方案包名称"),
        new FieldItem("sceneCategoryName", "类别名称"),
        new FieldItem("engineModelNo", "推演模型","EngineModelFormatter"),
        new FieldItem("evalModelNo", "评估模型","EvalModelFormatter"),
        new FieldItem("packageState", "方案包状态","PackageFormatter"),
        new FieldItem("masterPlanner", "总策划"),
        new FieldItem("planner", "策划人员")});
    var flowTable = new TableViewModel("table-flow").SetLocalData().SetPageArray(15)
        .SetFields(new List<FieldItem>()
        {
            new FieldItem("id", "编码"),
            new FieldItem("name", "情景流名称"),
            new FieldItem("sceneCategory", "类别名称","CategoryFormatter",isSort:false),
            new FieldItem("", "详情","FlowActionFormatter"),
                                                        });
    var sceneTable = new TableViewModel("table-scene").SetLocalData().SetPageArray(15)
        .SetFields(new List<FieldItem>()
        {
            new FieldItem("id", "编码"),
            new FieldItem("name", "情景名称"),
            new FieldItem("sceneCategory", "类别名称","CategoryFormatter",isSort:false),
            new FieldItem("sceneType", "情景类型","SceneTypeFormatter"),
            new FieldItem("sceneTag", "情景标签"),
                    //new FieldItem("", "详情","ActionFormatter"),
                });
    var behaviorTable = new TableViewModel("table-behavior").SetLocalData().SetPageArray(15)
        .SetFields(new List<FieldItem>()
        {
            new FieldItem("id", "编码"),
            new FieldItem("name", "行为名称"),
            new FieldItem("sceneCategory", "类别名称","CategoryFormatter",isSort:false),
            new FieldItem("behaviorTag", "行为标签"),
            new FieldItem("roleNames", "角色名称",isSort:false),
            new FieldItem("ruleKeyword", "行为关键字"),
                    //new FieldItem("", "详情","ActionFormatter"),
                });
    var guideTable = new TableViewModel("table-guide").SetLocalData().SetPageArray(15)
        .SetFields(new List<FieldItem>()
        {
            new FieldItem("id", "编码"),
            new FieldItem("name", "提示名称"),
            //new FieldItem("description", "提示详情"),
            new FieldItem("guideType", "提示类型","GuideTypeFormatter"),
                    // new FieldItem("", "详情","ActionFormatter"),
                });
    var environTable = new TableViewModel("table-environ").SetLocalData().SetPageArray(15)
        .SetFields(new List<FieldItem>()
        {
            new FieldItem("id", "编码"),
            new FieldItem("resourceName", "资源名称"),
            new FieldItem("resourceType", "资源类型","ResourceTypeFormatter"),
            new FieldItem("messageCode", "消息代码"),
            new FieldItem("resourcePath", "资源路径","PathFormatter"),
                    // new FieldItem("", "详情","ActionFormatter"),
                });

}
@section css{
    <link href="~/Content/Libs/jstree/themes/proton/style.min.css" rel="stylesheet" />
    <link href="~/Content/Css/nodetree.css" rel="stylesheet" />
    <style>
        .round.add.r-setting.flow-s.flow-d {
            font-size: 100%;
        }

        .package-menu {
            position: absolute;
            top: 20px;
            z-index: 1;
        }

            .package-menu.left {
                left: 30px;
            }

            .package-menu.right {
                right: 30px;
            }

        .role-box, .role-auto {
            width: 100%;
            margin: 10px 20px;
            padding: 10px;
            padding-bottom: 0;
            border: 1px solid #049e9a;
            border-radius: 4px;
        }

        .role-auto {
            border: none;
            text-align: right;
            margin-right: 30px;
            margin-top: 0;
        }
    </style>
}

@*<div class="main-box iwb-package-tree" id="test" style="height: 500px; overflow-y: auto;width: 1300px;margin: 10px;">
    </div>*@

<div class="iwb-package-tree" id="package-menu" style="display: none; position: absolute;z-index: 9999">
    <div class="dropdown-menu show">
        <a class="dropdown-item round add" data-type="addRound" href="javascript:void(0)">
            <i class="far fa-plus-square mr-2"></i>
            增加轮次信息
        </a>
        <a class="dropdown-item round delete" data-type="deleteRound" href="javascript:void(0)">
            <i class="far fa-minus-square mr-2"></i>
            删除轮次信息
        </a>

        <a class="dropdown-item round r-setting" data-type="roundSetting" href="javascript:void(0)">
            <i class="fa fa-cog mr-2"></i>
            配置轮次信息
        </a>
        <a class="dropdown-item comp" data-type="PRE" href="javascript:void(0)">
            <i class="fa fa-cog mr-2"></i>
            配置运行前事务
        </a>
        <a class="dropdown-item comp" data-type="RUN" href="javascript:void(0)">
            <i class="fa fa-cog mr-2"></i>
            配置运行时事务
        </a>
        <a class="dropdown-item comp" data-type="POST" href="javascript:void(0)">
            <i class="fa fa-cog mr-2"></i>
            配置运行后事务
        </a>
        <a class="dropdown-item guide" data-type="guide" href="javascript:void(0)">
            <i class="fa fa-cog mr-2"></i>
            配置引导信息
        </a>

        <a class="dropdown-item block add" data-type="addBlock" href="javascript:void(0)">
            <i class="far fa-plus-square mr-2"></i>
            增加情景流块
        </a>
        <a class="dropdown-item block delete" data-type="deleteBlock" href="javascript:void(0)">
            <i class="far fa-minus-square mr-2"></i>
            删除情景流块
        </a>

        <a class="dropdown-item flow-s" data-type="flow-s" href="javascript:void(0)">
            <i class="far fa-plus-square mr-2"></i>
            配置情景流
        </a>
        <a class="dropdown-item flow-d" data-type="flow-d" href="javascript:void(0)">
            <i class="far fa-plus-square mr-2"></i>
            情景流详情
        </a>
    </div>
</div>
<div class="iwb-package-tree" id="package-detail-menu" style="display: none; position: absolute;z-index: 9999">
    <div class="dropdown-menu show">

        <a class="dropdown-item round r-setting" data-type="roundSettingDetail" href="javascript:void(0)">
            <i class="fa fa-cog mr-2"></i>
            查看轮次信息
        </a>
        <a class="dropdown-item comp" data-type="preDetail" href="javascript:void(0)">
            <i class="fa fa-cog mr-2"></i>
            查看运行前事务
        </a>
        <a class="dropdown-item comp" data-type="runDetail" href="javascript:void(0)">
            <i class="fa fa-cog mr-2"></i>
            查看运行时事务
        </a>
        <a class="dropdown-item comp" data-type="postDetail" href="javascript:void(0)">
            <i class="fa fa-cog mr-2"></i>
            查看运行后事务
        </a>
        <a class="dropdown-item guide" data-type="guideDetail" href="javascript:void(0)">
            <i class="fa fa-cog mr-2"></i>
            查看引导信息
        </a>

        <a class="dropdown-item flow-d" data-type="flow-d" href="javascript:void(0)">
            <i class="far fa-plus-square mr-2"></i>
            情景流详情
        </a>
    </div>
</div>

<div class="row">
    <div class="col-sm-3">
        <div class="iwb-tree-box">
            <div class="box-header">场景类别</div>
            <div class="scroll box-body">
                <div id="sc-tree"></div>
            </div>
        </div>
    </div>
    <div class="col-sm-9">
        @Html.Partial("Table/_Table", table)
    </div>
</div>
    @section modal{
        @{
            var baseInput = new ModalBodyViewModel(new List<Input>
{
            new InputHide("id"),
            new Input("sceneCategory", "场景类别").SetSelectOptions(category),
            new Input("engineModelNo", "推演模型").SetSelectOptions(engineModel).SetHelp("<span style=\"color: red;\">注：请先确定推演模型后再配置方案包（更改模型后会初始化方案包配置）</span>"),
            new Input("evalModelNo", "评估模型").SetSelectOptions(evalModel),
            new Input("packageName", "方案包名称"),
            new Input("masterPlanner", "总策划").SetNotRequired(),
            new Input("planner", "策划人员").SetNotRequired(),
            new InputTextarea("description", "详情描述").SetNotRequired(),

        });
        }
        <!--Main Modal-->
        <section>
            <div class="modal fade" id="modal" tabindex="-1" aria-modal="true">
                <div class="modal-dialog modal-lg" style="max-width: 1300px;">
                    <div class="modal-content">
                        @Html.Partial("Modals/_ModalHeader", new ModalHeaderViewModel("方案包"))
                        <div class="modal-body" style="padding: 0">
                            <form class="form-horizontal " id="form" style="padding-top: 10px">
                                @*<input class="form-control" id="id" name="id" type="hidden">

                                    <div class="form-group row">
                                        <label class="col-sm-1 iwb-label iwb-label-sm iwb-label-required" for="sceneCategory">场景类别</label>
                                        <div class="col-sm-5">
                                            <div class="input-group input-group-sm">
                                                <select class="form-control required" id="sceneCategory" name="sceneCategory" placeholder="请输入场景类别..." style="width: 100%">
                                                    @(Html.Raw(category))
                                                </select>
                                            </div>
                                        </div>
                                        <label class="col-sm-1 iwb-label iwb-label-sm iwb-label-required" for="engineModelNo">推演模型</label>
                                        <div class="col-sm-5">
                                            <div class="input-group input-group-sm">
                                                <select class="form-control required" id="engineModelNo" name="engineModelNo" placeholder="请输入推演模型..." style="width: 100%">
                                                    @(Html.Raw(engineModel))
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-sm-1 iwb-label iwb-label-sm iwb-label-required" for="packageName">方案包名称</label>
                                        <div class="col-sm-5">
                                            <div class="input-group input-group-sm">
                                                <input class="form-control required" id="packageName" name="packageName" type="text" placeholder="请输入方案包名称..." style="">
                                            </div>
                                        </div>
                                        <label class="col-sm-1 iwb-label iwb-label-sm" for="masterPlanner">总策划</label>
                                        <div class="col-sm-5">
                                            <div class="input-group input-group-sm">
                                                <input class="form-control" id="masterPlanner" name="masterPlanner" type="text" placeholder="请输入总策划人员..." style="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-sm-1 iwb-label iwb-label-sm" for="planner">策划人员</label>
                                        <div class="col-sm-5">
                                            <div class="input-group input-group-sm">
                                                <input class="form-control" id="planner" name="planner" type="text" placeholder="请输入策划人员..." style="">
                                            </div>
                                        </div>
                                        <div class="col-sm-6" style="color: red; padding: 5px;">
                                            注：请先确定推演模型后再配置方案包（更改模型后会初始化方案包配置）
                                        </div>
                                    </div>*@




                                <div class="card card-primary card-outline card-outline-tabs" style="margin-bottom: 0; border-top: 0; ">
                                    <div class="card-header p-0 border-bottom-0">
                                        <ul class="nav nav-tabs">
                                            <li class="nav-item">
                                                <a class="nav-link active" data-toggle="pill" id="tab-package-base" href="#tab-content-base" role="tab">基础信息</a>
                                            </li>

                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="pill" href="#tab-content-packageSetting" role="tab">方案包配置</a>
                                            </li>
                                        </ul>
                                    </div>

                                    <div class="card-body">
                                        <div class="tab-content">
                                            <div class="tab-pane fade show active" id="tab-content-base" role="tabpanel">
                                                @Html.Partial("Modals/_ModalInput", baseInput)
                                            </div>

                                            <div class="tab-pane fade" id="tab-content-packageSetting" role="tabpanel">

                                                <div style="position: relative;">
                                                    <div class="package-menu left" style="">
                                                        <button id="variable-setting" onclick="VariableSetting()" class="btn btn-iwb btn-sm" type="button">变量配置</button>
                                                    </div>
                                                    <div class="package-menu right" style="">
                                                        <button id="role-setting" onclick="RoleSetting()" class="btn btn-iwb btn-sm" type="button">角色配置</button>
                                                        <button id="package-verify" onclick="PackageVerify()" class="btn btn-danger btn-sm" type="button">方案包校验</button>
                                                    </div>
                                                    <div class="main-box main-package-box">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </form>
                        </div>
                        @Html.Partial("Modals/_ModalFooter", "0")
                    </div>
                </div>
            </div>
        </section>
        <section>
            <div class="modal fade" id="modal-package-detail" tabindex="-1" aria-modal="true">
                <div class="modal-dialog modal-lg" style="max-width: 1300px;">
                    <div class="modal-content">
                        @Html.Partial("Modals/_ModalHeader", new ModalHeaderViewModel("方案包详情"))
                        <div class="modal-body" style="padding: 0">
                            <div class="card card-primary card-outline card-outline-tabs" style="margin-bottom: 0; border-top: 0; ">
                                <div class="card-header p-0 border-bottom-0">
                                    <ul class="nav nav-tabs" id="package-tab" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" id="tab-detail-package-link" data-toggle="pill" href="#tab-detail-package" role="tab">方案包信息</a>
                                        </li>

                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="pill" href="#tab-detail-flow" role="tab">情景流信息</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="pill" href="#tab-detail-scene" role="tab">情景信息</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="pill" href="#tab-detail-behavior" role="tab">行为信息</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="pill" href="#tab-detail-guide" role="tab">引导信息</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="pill" href="#tab-detail-environ" role="tab">环境资源信息</a>
                                        </li>
                                    </ul>
                                </div>

                                <div class="card-body" style="padding: 10px">
                                    <div class="tab-content iwb-bootstrap-table" id="package-tabContent">
                                        <div class="tab-pane fade show active" id="tab-detail-package" role="tabpanel">
                                            <div class="row package-detail">
                                            </div>

                                            <div class="main-box  main-package-box">
                                            </div>
                                        </div>

                                        <div class="tab-pane fade" id="tab-detail-flow" role="tabpanel">
                                            @Html.Partial("Table/_Table", flowTable)
                                        </div>

                                        <div class="tab-pane fade" id="tab-detail-scene" role="tabpanel">
                                            @Html.Partial("Table/_Table", sceneTable)
                                        </div>

                                        <div class="tab-pane fade" id="tab-detail-behavior" role="tabpanel">
                                            @Html.Partial("Table/_Table", behaviorTable)
                                        </div>

                                        <div class="tab-pane fade" id="tab-detail-guide" role="tabpanel">
                                            @Html.Partial("Table/_Table", guideTable)
                                        </div>

                                        <div class="tab-pane fade" id="tab-detail-environ" role="tabpanel">
                                            @Html.Partial("Table/_Table", environTable)
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @Html.Partial("Modals/_ModalFooter", "1")
                    </div>
                </div>
            </div>
        </section>

        @{
            var roundSettingModal = new ModalViewModel("轮次信息配置", "", new ModalBodyViewModel(new List<Input>
            {
            new InputHide("path"),
            new InputNumber("roundFullScore", "轮次总分", @class: "number", other: "min=0.001"),
            new InputNumber("controlRate", "随机概率", @class: "number", other: "min=0 max=100"),
            new InputNumber("sceneCount", "情景流数", @class: "	digits", other: "min=1")
        }, "form-round-setting"), "modal-round-setting");

            var flowModal = new ModalViewModel("添加情景流", "", new ModalBodyViewModel(new List<Input>
    {
            new InputHide("path"),
            new InputHide("flowNos"),
            new Input("flowNames", "情景流").SetDisabled().SetSearchIcon("qm_flow", "modal-flow", "flowNos,flowNames,variables"),
        }, "form-flow"), "modal-flow");

            var guideModal = new ModalViewModel("配置引导信息", "", new ModalBodyViewModel(new List<Input>
    {
            new InputHide("path"),
            new InputHide("guideNos"),
            new Input("guideNames", "引导信息").SetDisabled().SetSearchIcon("qm_guide", "modal-guide", "guideNos,guideNames"),

        }, "form-guide"), "modal-guide");

            var solidifyModal = new ModalViewModel("固化方案包", "", new ModalBodyViewModel(new List<Input>
    {
            new InputHide("id"),
            new Input("newName", "固化名称"),
        }, "form-solidify"), "modal-solidify");
        }

        <section>
            <div class="modal fade" id="modal-flow-detail" tabindex="-1" aria-modal="true">
                <div class="modal-dialog modal-lg" style="max-width: 1300px;">
                    <div class="modal-content">
                        @Html.Partial("Modals/_ModalHeader", new ModalHeaderViewModel(""))
                        <div class="modal-body" style="padding: 0; min-height: 500px;">
                            <div class="main-box main-flow-box"></div>
                        </div>
                        @Html.Partial("Modals/_ModalFooter", "1")
                    </div>
                </div>
            </div>
        </section>

        @Html.Partial("Modals/_Modal", roundSettingModal)
        @Html.Partial("Modals/_Modal", flowModal)
        @Html.Partial("_FlowNode", "package")
        @Html.Partial("Modals/_Modal", guideModal)

        @Html.Partial("Query/_SceneFlowInfo", new QueryWithSelect("flowNos,flowNames,variables", new Dictionary<string, string>
        {
            ["sceneCategory"] = category
        }))
        @Html.Partial("Query/_GuideInfo", new QueryWithSelect("guideNos,guideNames", new Dictionary<string, string>() { ["guideType"] = guideType }))
        @Html.Partial("Modals/_Modal", solidifyModal)

    }

    @section scripts
{
        <script src="~/Content/Libs/jstree/jstree.min.js"></script>
        <script src="~/Content/Js/packagetree.js"></script>

        <script type="text/javascript">
            var PACKAGEPRESTRING = 'P_';
            var $table, _EngineModelType, _IsDetail = false, _PackageVariable = [], cuScNo = '';
            $(function () {
                OverlayScrollbar($('.scroll'));
                InitScTree();
                //InitPackage($.extend({}, GetInitPackage()));
                $('#modal #packageName,#modal #engineModelNo').on('change',
                    function () {
                        var name = $('#modal #packageName').val();
                        if (name) {
                            _PackageTreeData.name = name;
                            InitPackage(_PackageTreeData, true);
                        }
                    });
                $table = LoadTable({
                    searchFun: TableSearchFun
                });
                var funs = window.iwbfuns || { none: function() { console.log("No type"); } };
                funs["btnCreate"] = function() {
                    $('.package-menu.right ').hide();
                    BtnCreate({
                        data: { id: "" },
                        dataFun: GetSaveData,
                        form: $('#modal #form'),
                        select2tree: "sceneCategory,sceneCategoryEx",
                        shownAfter: function () {
                            $('#modal .modal-dialog').animate({ 'marginTop': '50px' });
                            $('#modal #tab-package-base').tab('show');
                            _PackageCompData = [];
                            var initData = GetInitPackage();
                            var data = $.extend({}, initData);
                            InitPackage(data);
                            _PackageVariable = [];
                        }

                    });
                }
                funs["btnUpdate"] = function() {
                    var row = $table.bootstrapTable("getSelections")[0];
                    if (row) {
                        if (row.packageState == @(PackageStateDefinition.Solidified)) {
                            abp.message.warn("方案包已固化不能修改！");
                            return;
                        }
                        BtnUpdate({
                                select2tree: "sceneCategory,sceneCategoryEx",
                                form: $('#modal #form'),
                                disabled: "",
                                dataFun: GetSaveData,
                                shownAfter: function() {
                                    $('#modal .modal-dialog').animate({ 'marginTop': '50px' });
                                    $('#modal #tab-package-base').tab('show');
                                    var data;
                                    try {
                                        data = row.contentInfo ? JSON.parse(row.contentInfo) : undefined;
                                        _PackageCompData = row.componentInfo ? JSON.parse(row.componentInfo) : [];
                                        console.log("U-Package:", data, _PackageCompData);
                                    } catch (e) {
                                        console.log(e);
                                    }
                                    if (!data) {
                                        var initData = GetInitPackage();
                                        data = $.extend({}, initData);
                                    }
                                    _PackageVariable = [];
                                    $.iwbAjax4({
                                        url: abp.appUrl + "Package/GetVariable?no=" + row.id,
                                        blockUI: true,
                                        success: function(res) {
                                            _PackageVariable = $.extend([], res || []);
                                        }
                                    });
                                    InitPackage(data);
                                    $('.package-menu.right').show();

                                }
                            },
                            row);
                    } else {
                        abp.message.warn(abp.localization.iwbZero('SelectRecordOperation'));
                    }

                };
                funs["btnDelete"] = function(url) {
                    var row = $table.bootstrapTable("getSelections")[0];
                    if (row) {
                        if (row.packageState == @(PackageStateDefinition.Solidified)) {
                            abp.message.warn("方案包已固化不能删除！");
                            return;
                        }

                        BtnDelete({ url: url }, row);
                    } else {
                        abp.message.warn(abp.localization.iwbZero('SelectRecordOperation'));
                    }
                };
                funs["btnCopy"] = function(url) {
                    var row = $table.bootstrapTable("getSelections")[0];
                    if (row) {
                        MsgConfirm("确定拷贝【" + row.packageName + "-" + row.id + "】方案包吗？",
                            "拷贝方案包",
                            function() {
                                $.iwbAjax1({
                                    url: url,
                                    table: "table",
                                    data: { id: row.id }
                                });
                            });
                    } else {
                        abp.message.warn(abp.localization.iwbZero('SelectRecordOperation'));
                    }

                };
                funs["btnSolidify"] = function(url) {
                    var row = $table.bootstrapTable("getSelections")[0];
                    if (row) {
                        OpenModal({
                            url: url,
                            table: "table",
                            modal: 'modal-solidify',
                            data: { id: row.id, newName: row.packageName },
                            dataFun: function() {
                                return {
                                    id: $('#modal-solidify #id').val(),
                                    newName: $('#modal-solidify #newName').val()
                                };
                            }
                        });
                    } else {
                        abp.message.warn(abp.localization.iwbZero('SelectRecordOperation'));
                    }

                };
            });
            function InitScTree() {
                $('#sc-tree')
                    .jstree({
                        'core': {
                            'data': GetNode,
                            'strings': {
                                'Loading ...': '请稍后...'
                            },
                            'force_text': true,
                            'check_callback': true,
                            'themes': {
                                'name': 'proton',
                                'responsive': true,
                                'variant': 'large'
                            }
                        },

                        'plugins': ['wholerow'] // 'state',
                    }).on('ready.jstree',function(e, data) {
                        //console.log('000', e, data);
                        var inst = data.instance,
                            obj = inst.get_node('@(IwbConsts.SceneCategoryRootNo)');
                        inst.open_node(obj);
                        inst.select_node(obj);
                        cuScNo = '';
                        RefreshTable();
                    }).on('activate_node.jstree',function(e, data) {
                        //console.log('111',data);
                        cuScNo = data.node.id == '@(IwbConsts.SceneCategoryRootNo)' ? "" : data.node.id;
                        RefreshTable();
                    });
            }

            function GetNode(node, callback) {
                $.iwbAjax4({
                    url: abp.appUrl + 'Query/GetChildSceneCategory',
                    data: { id: node.id },
                    success: function(res) {
                        if (callback) {
                            callback.call(this, res);
                        } else {
                            $("#sc-tree").html("暂无数据！");
                        }
                    }
                });
            }

            function TableSearchFun(sl) {
                sl.push({
                    KeyWords: cuScNo,
                    KeyField: 'sceneCategory',
                    FieldType: '0',
                    ExpType: '0'
                });
            }
        </script>

        <script type="text/javascript">
            function GetSaveData() {
                var data = $.formSerialize($('#form'));
                data.contentInfo = JSON.stringify(_PackageTreeData);
                data.componentInfo = JSON.stringify(_PackageCompData);
                var variableStr = '';
                _PackageVariable.forEach(function(v) {
                    if (v.name) {
                        variableStr += (variableStr == '' ? '' : ',') + '@@@@{0}:{1}:{2}'.format(v.name, v.type, v.value);
                    }
                });
                data.variable = variableStr;
                return data;
            }

            function VariableSetting() {
                VariableModal(_PackageVariable);
            }
            function VariableModal(data) {
                var $form = FormatterVariableBox(data);
                $(document).iwbModal('create',
                    {
                        modal: 'modal-variable-setting',
                        modaltitle: '方案包全局变量',
                        modalBody: $form,
                        save: SaveVariable
                    });
            }
            function FormatterVariableBox(data) {
                var label = '<div class="dynamic-label col-sm-{0}"><label class="iwb-label">{1}</label></div >',
                    $box = $('<div>', { 'class': 'dynamic-box' }),
                    $box1 = $('<div>', { 'class': 'row iwb-dynamic-box' }),
                    $box2 = $('<div>', { 'class': 'row iwb-dynamic-box' });
                $box1.append(label.format('3', '变量'))
                    .append(label.format('3', '类型'))
                    .append(label.format('4', '默认值'))
                    .append(label.format('2', '增加/删除'));
                $box2.append(
                    '<div class="col-sm-3"><div class="input-group input-group-sm"><input class="form-control required" name="variableId" placeholder="请输入变量" style="width: 100%" /></div></div><div class="col-sm-3"><div class="input-group input-group-sm"><select class="form-control required" name="variableType" style="width: 100%">@(Html.Raw(variableType))</select></div></div><div class="col-sm-4"><div class="input-group input-group-sm"><input class="form-control required" name="defaultValue" placeholder="请输入默认值" style="width: 100%" /></div></div><div class="col-sm-2"><button class="btn btn-sm btn-block btn-add" type="button" onclick="AddDynamicBox(this)">增加</button></div>');
                $box.append($box1).append($box2);
                if (data && data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        var $that = i === 0
                            ? $box.find('.iwb-dynamic-box').eq(1)
                            : AddDynamicBox($box.find('.iwb-dynamic-box').eq(1).find('.btn-add'));
                        $that.find('.form-control[name="variableId"]').val(item.name);
                        $that.find('.form-control[name="variableType"]').val(item.type).select2();
                        $that.find('.form-control[name="defaultValue"]').val(item.value);
                    }
                }
                var $form = $('<form>', { 'id': 'variable-form' });
                $form.append($box);
                return $form;
            }
            function SaveVariable() {
                _PackageVariable = [];
                $('#variable-form').find('.iwb-dynamic-box').each(function() {
                    var name = $(this).find('.form-control[name="variableId"]').val();
                    if (name) {
                        var type = $(this).find('.form-control[name="variableType"]').val() || 'string';
                        var value = $(this).find('.form-control[name="defaultValue"]').val() || '';
                        _PackageVariable.push({ name: name, type: type, value: value });
                    }
                });
                $('#modal-variable-setting').modal('hide');
            }

            function RoleSetting() {
                var no = $('#modal #id').val();
                if (!no) {
                    abp.message.warn('请确认方案包已保存后再进行角色配置！');
                    return;
                }
                var modelType = $('#modal #engineModelNo option:selected').data('model-type');
                if (modelType == @(ModelType.ManyTeam.ToInt()) ||
                    modelType == @(ModelType.IndependentTeam.ToInt()) ||
                    modelType == @(ModelType.Independent.ToInt())) {

                    $.iwbAjax4({
                        url: abp.appUrl + "Package/GetPackageRoles?no=" + no,
                        blockUI: true,
                        success: function(res) {
                            if (res) {
                                var $form = FormatterRoleBox(res);
                                $(document).iwbModal('create',
                                    {
                                        modal: 'modal-assess-role',
                                        modaltitle: '设定考核角色',
                                        data: { id: no },
                                        modalBody: $form,
                                        save: SaveAssessRole
                                    });
                            }
                        }
                    });
                } else {
                    abp.message.warn('当前模型不支持角色配置！');

                }

            }

            function FormatterRoleBox(data) {
                var $form = $('<form>', { 'class': 'row' });
                var temp =
                    '<label class="iwb-checkbox iwb-{3}"><input type="checkbox" id="role-{0}" data-role-no="{0}" data-role-name="{1}" name="assess-role" value="{0}" {2}><span></span>{1}</label>';
                $form.append('<input id="id" name="id" type="hidden" >');

                var $roleBox = $('<div>', { 'class': 'role-box row' });
                var roleArr = data.assessRoleNos ? data.assessRoleNos.split(',') : undefined;
                var modelType = $('#modal #engineModelNo option:selected').data('model-type');

                if (data.allRoles) {
                    data.allRoles.forEach(function(v) {
                        var checkedStr = "";
                        if (roleArr && roleArr.indexOf(v.roleNo) > -1) {
                            checkedStr = "checked";
                        }
                        var $role = $('<div>', { 'class': 'col-sm-4' }).append(temp.format(v.roleNo,
                            v.roleName + "(" + v.rolePer + "%)",
                            checkedStr,
                            'green'));
                        if (modelType == @(ModelType.IndependentTeam.ToInt()) ||
                            modelType == @(ModelType.Independent.ToInt())) {
                            $role.on('click',
                                function(e) {
                                    e.preventDefault();
                                    e.stopPropagation();
                                    var flag = $(this).find('input').is(':checked');
                                    $(this).closest('.role-box').find('input').prop('checked', false);
                                    $(this).find('input').prop('checked', !flag);
                                });
                        }
                        $roleBox.append($role);
                    });
                }
                $form.append($roleBox);
                $form.append($('<div>', { 'class': 'role-auto' })
                    .append(temp.format('auto', '未考核角色自动满分', data.assessAuto != false ? "checked" : "", 'danger')));
                return $form;
            }

            function SaveAssessRole() {
                var roleNos = '', roleNames='';
                $('#modal-assess-role .role-box input[name="assess-role"]:checked').each(function() {
                    if ($(this).is(':checked')) {
                        roleNos += (roleNos === "" ? "" : ",") + $(this).data('role-no');
                        roleNames += (roleNames === "" ? "" : ",") + $(this).data('role-name');
                    }
                });
                var data = {
                    id: $('#modal-assess-role #id').val(),
                    assessAuto: $('#modal-assess-role #role-auto').is(':checked'),
                    assessRoleNos: roleNos,
                    assessRoleNames: roleNames
                }
                $.iwbAjax1({
                    url: abp.appUrl + "Package/SetAssessRole",
                    data: data,
                    success: function() {
                        $('#modal-assess-role').modal('hide');
                    }
                });
            }

            function PackageVerify() {
                $.iwbAjax4({
                    url: abp.appUrl + "Package/PackageVerify?no=" + $('#modal #id').val(),
                    success: function (res) {
                        if (res) {
                            abp.message.success("方案包校验成功！","校验成功");
                        }
                    },
                    error: function (error) {
                        if (error.details) {
                            return abp.message.error(error.details, error.message);
                        } else {
                            return abp.message.error(error.message || abp.ajax.defaultError.message);
                        }
                    }
                });
            }
            function PackageDetail(id) {
                _IsDetail = true;
                $.iwbAjax4({
                    url: abp.appUrl + 'Package/Detail?no=' + id,
                    success: function(res) {
                        if (res) {
                            FormatterDetail(res);
                            OpenModal({
                                modal: 'modal-package-detail'
                            });
                        }
                    }
                });
            }

            var _FlowDetailData = [], _ComponentDetailData = [],isRefreshDetail=false;

            function FormatterDetail(data) {
                if (data) {
                    _FlowDetailData = data.flows || [];
                    _ComponentDetailData = data.components || [];
                    var detail = data.detail, h = 520;
                    if (detail) {
                        var str = '', temp = '<dl class="col-sm-{2}" title="{0}：{1}"  data-toggle="tip"><dt>{0}：</dt><dd>{1}</dd></dl>', col = 3;
                        str += detail.id ? temp.format("方案包编号", detail.id, col) : "";
                        str += detail.packageName ? temp.format("方案包名称", detail.packageName, col) : "";
                        var categoryName = $('#modal #sceneCategory option[value="' + detail.sceneCategory + '"]')
                            .text();
                        str += categoryName ? temp.format("场景类别", categoryName, col) : "";
                        var modelName = $('#hid-engineModel option[value="' + detail.engineModelNo + '"]').text();
                        str += modelName ? temp.format("推演模型", modelName, col) : "";
                        str += detail.description ? temp.format("方案包详情", detail.description, 12) : "";
                        str += data.assessRoleNames ? temp.format("考核角色", data.assessRoleNames, 12) : "";
                        str += detail.masterPlanner ? temp.format("总策划", detail.masterPlanner, col) : "";
                        str += detail.planner ? temp.format("策划人员", detail.planner, 12-col) : "";
                        $('#tab-detail-package .package-detail').html(str);
                        $('#tab-detail-package .package-detail').find('[data-toggle="tip"]').tooltip({ 'placement': 'bottom', 'container': 'body', 'delay': 500 });
                        var initData;
                        try {
                            initData = detail.contentInfo ? JSON.parse(detail.contentInfo) : undefined;
                            _PackageCompData = detail.componentInfo ? JSON.parse(detail.componentInfo) : [];
                            window._CompData = $.extend([], _ComponentDetailData);
                            console.log("Data-Package:", initData, _PackageCompData, window._CompData);
                        } catch (e) {
                            console.log(e);
                        }
                        if (!initData) {
                            initData = GetInitPackage();
                            initData = $.extend({}, initData);
                        }
                        InitPackage(initData,
                            false,
                            $('#tab-detail-package .main-box'),
                            'package-detail-menu',
                            PackageDetailMenuFun);
                    }
                    LoadTable({
                        table: 'table-flow',
                        data: _FlowDetailData,
                        height: h
                    }, isRefreshDetail);
                    LoadTable({
                        table: 'table-scene',
                        data: data.scenes || [],
                        height: h
                    }, isRefreshDetail);
                    LoadTable({
                        table: 'table-guide',
                        data: data.guides || [],
                        height: h
                    }, isRefreshDetail);
                    LoadTable({
                        table: 'table-behavior',
                        data: data.behaviors || [],
                        height: h
                    }, isRefreshDetail);
                    LoadTable({
                        table: 'table-environ',
                        data: data.environResources || [],
                        height: h
                    }, isRefreshDetail);
                    _IsDetail = true;
                    isRefreshDetail = true;
                }
                $('#tab-detail-package-link').tab('show');
            }

            function PackageFlowDetail(id) {
                var flow = _FlowDetailData.find(function(v) {
                    return v.id == id;
                });
                if (flow) {
                    OpenModal({
                        modal: 'modal-flow-detail',
                        modaltitle: flow.name + '-' + flow.id + ' 详情',
                        shownBefore: function() {
                            var data;
                            _IsDetail = true;
                            try {
                                //data = flow.contentInfo || {};
                                //var pathArr = data.path.split("_");
                                //data.path = pathArr[pathArr.length - 1];
                                //console.log("U-JSON:", data, window._CompData);
                                window.InitFlowTree(flow, false, $('#modal-flow-detail .main-box'), menuFlow);
                            } catch (e) {
                                console.log(e);
                                abp.message.warn('数据异常!');
                            }
                        },
                        save: function() {
                            $('#modal-component').modal('hide');
                        }
                    });
                }
            }
        </script>

        <script id="packageTree-init-data">
            function GetInitPackage() {
                var data = {
                    id: "P",
                    no: "P",
                    name: '演练方案包',
                    path: "P",
                    parentPath: '',
                    roundCount: 0,
                    engineType: '',
                    guideNos: '',
                    guideNames: '',
                    preComponent: '',
                    runningComponent: '',
                    postComponent: '',
                    variables: '',
                    children: [
                    ]
                }
                var package = $.extend({}, data);
                package.children.push(GetInitRound(package));
                return package;
            }

            function GetInitRound(package) {
                package.roundCount++;
                var index = package.roundCount;
                var data = {
                    id: "R" + index,
                    no: "R" + index,
                    name: '轮次' + index,
                    path: package.path + "_R" + index,
                    parentPath: package.path,
                    roundIndex: index,
                    blockIndex: 0,
                    roundFullScore: 500,
                    controlRate: 80,
                    sceneCount: 2,
                    guideNos: '',
                    guideNames: '',
                    preComponent: '',
                    runningComponent: '',
                    postComponent: '',
                    variables: '',
                    children: [
                    ]
                }
                var roundInfo = $.extend({}, data);
                roundInfo.children.push(GetInitBlock(roundInfo, 1));
                roundInfo.children.push(GetInitBlock(roundInfo));
                roundInfo.children.push(GetInitBlock(roundInfo));
                roundInfo.children.push(GetInitBlock(roundInfo));
                return roundInfo;
            }

            function GetInitBlock(roundInfo, type) {
                type = type || 2;
                roundInfo.blockIndex++;
                var index = roundInfo.blockIndex;
                var data = {
                    id: "SFB" + index,
                    no: "SFB" + index,
                    name: '情景流块' + index,
                    path: roundInfo.path + "_SFB" + index,
                    parentPath: roundInfo.path,
                    blockType: type,
                    flowNos: '',
                    flowNames: '',
                    guideNos: '',
                    guideNames: '',
                    preComponent: '',
                    runningComponent:'',
                    postComponent:'',
                    variables: ''
                }
                //data.children.push({
                //    id: '',
                //    no: "SF" + 1,
                //    name: '情景流' + 1,
                //    path: data.path + "_SF" + 1,
                //    parentPath: data.path,
                //    guideNos: '',
                //    guideNames: '',
                //    preComponent: '',
                //    runningComponent: '',
                //    postComponent: '',
                //    variables: '',
                //    children: []
                //});
                var block = $.extend({}, data);
                return block;
            }

            function GetPackageNewComponentNo(typeStr) {
                return PACKAGEPRESTRING + typeStr + $.now();
            }
        </script>

        <script id="menu-fun">
            var _refreshData, _$refreshNode, _refreshType;
            var packageMenuFuns = {
                'roundSetting': RoundSetting,
                'roundSettingDetail': RoundSettingDetail,
                'addRound': AddRound,
                'deleteRound': DeleteRound,
                'addBlock': AddBlock,
                'deleteBlock': DeleteBlock,
                'flow-s': FlowSetting,
                'flow-d': FlowDetail,
                'guide': GuideSetting,
                'guideDetail': GuideSettingDetail,
                'PRE': PreComponentSetting,
                'preDetail': PreComponentSettingDetail,
                'RUN': RunComponentSetting,
                'runDetail': RunComponentSettingDetail,
                'POST': PostComponentSetting,
                'postDetail': PostComponentSettingDetail,
                'none': function () {
                    console.log('Package-Menu:', 'NONE');
                }
            };
            function SettingFun(that) {
                var type = $(that).data("setting");
                var $that = $(that).data("type-rs") ? $(that).closest('.round-setting') : $(that).closest('.setting-btn-box'),
                    path = $that.data('path'),
                    parentPath = $that.data('parent-path');
                console.log("setting", type);
                _refreshData = GetDataByPath(path);
                _$refreshNode = $that;
                _refreshType = type;
                packageMenuFuns[type]
                    ? packageMenuFuns[type].call($that, path, parentPath, $that)
                    : packageMenuFuns["none"].call(this);
            }
            var $roundSettingModal, $flowModal, $guideModal;

            function RoundSettingDetail(path, parentPath, $node) {
                RoundSetting(path, parentPath, $node, true);
            }

            function RoundSetting(path, parentPath, $node, isDetail) {
                var data = GetDataByPath(path);
                isDetail = isDetail || false;
                _IsDetail = isDetail;
                console.log('Package-Menu:RoundSetting', path, parentPath, data, isDetail);
                if (!data) {
                    abp.message.warn('数据异常，未查询到路径为【' + path + '】数据！');
                    return;
                }

                var formData = {
                    path: path,
                    roundFullScore: data.roundFullScore,
                    controlRate: data.controlRate,
                    sceneCount: data.sceneCount
                }
                $roundSettingModal = $('#modal-round-setting');
                OpenModal({
                    modal: $roundSettingModal,
                    data: formData,
                    shownBefore: function () {
                        isDetail
                            ? $roundSettingModal.find('.save-btn').hide()
                            : $roundSettingModal.find('.save-btn').show();
                    },
                    save: function () {
                        PackageSave($roundSettingModal.find('#path').val(), "roundSetting", $node);
                    }
                });
            }

            function AddRound(path, parentPath, $node) {
                var parent = GetDataByPath(parentPath);
                if (!parent) {
                    abp.message.warn('数据异常，未查询到路径为【' + parentPath + '】数据！');
                    return;
                }
                console.log('Package-Menu:AddRound', path, parentPath, parent);

                var childData = $.extend({}, GetInitRound(parent));
                parent.children = parent.children || [];
                parent.children.push(childData);
                RefreshPackage(childData, $node, 'addRound');

            }

            function DeleteRound(path, parentPath, $node) {
                var data = GetDataByPath(path);
                if (!data) {
                    abp.message.warn('数据异常，未查询到路径为【' + path + '】数据！');
                    return;
                }
                MsgConfirm("确认删除【" + data.name + "】吗？",
                    "删除轮次",
                    function () {
                        var parent = GetDataByPath(parentPath);
                        if (!parent) {
                            abp.message.warn('数据异常，未查询到路径为【' + parentPath + '】数据！');
                            return;
                        }
                        console.log('Package-Menu:DeleteRound', path, parentPath, parent);
                        var index = parent.children.findIndex(function (v) {
                            return v.path === path;
                        });
                        if (index > -1) {
                            parent.roundCount--;
                            parent.children.splice(index, 1);
                            RefreshPackage(parent.children[index], $node, 'deleteRound');
                        }
                    });
            }

            function AddBlock(path, parentPath, $node) {
                MsgConfirm("确认添加新情景流块吗？",
                    "添加情景流块",
                    function () {
                        var parent = GetDataByPath(parentPath);
                        if (!parent) {
                            abp.message.warn('数据异常，未查询到路径为【' + parentPath + '】数据！');
                            return;
                        }
                        console.log('Package-Menu:AddBlock', path, parentPath, parent);

                        var childData = $.extend({}, GetInitBlock(parent));
                        parent.children = parent.children || [];
                        parent.children.push(childData);
                        RefreshPackage(childData, $node, 'addBlock');
                    });

            }

            function DeleteBlock(path, parentPath, $node) {
                var data = GetDataByPath(path);
                console.log('Package-Menu:DeleteBlock', path, parentPath, data);
                if (!data) {
                    abp.message.warn('数据异常，未查询到路径为【' + path + '】数据！');
                    return;
                }
                MsgConfirm("确认删除【" + data.name + "】吗？",
                    "删除情景流块",
                    function () {
                        var parent = GetDataByPath(parentPath);
                        if (!parent) {
                            abp.message.warn('数据异常，未查询到路径为【' + parentPath + '】数据！');
                            return;
                        }
                        console.log('Package-Menu:DeleteBlock', path, parentPath, parent);

                        var index = parent.children.findIndex(function (v) {
                            return v.path === path;
                        });
                        if (index > -1) {
                            RefreshPackage(parent.children[index], $node, 'deleteBlock');
                            parent.children.splice(index, 1);
                        }
                        //InitPackage(_PackageTreeData);
                    });

            }

            function FlowSetting(path, parentPath, $node) {
                var data = GetDataByPath(path);
                console.log('Package-Menu:FlowSetting', path, parentPath, data);
                if (!data) {
                    abp.message.warn('数据异常，未查询到路径为【' + path + '】数据！');
                    return;
                }
                var formData = { path: path, flowNos: data.flowNos, flowNames: data.flowNames }
                $flowModal = $('#modal-flow');
                OpenModal({
                    modal: $flowModal,
                    data: formData,
                    save: function () {
                        PackageSave($flowModal.find('#path').val(), "flow", $node);
                    }
                });
            }

            var menuFlow = function FlowMenuFun($node) {
                $('#flow-menu').find('a.dropdown-item').hide();
                $('#flow-menu').find('a.dropdown-item[data-type="detail"]').show();
                var path = $node.data('path');
                var parentPath = $node.data('parent-path');
                $('#flow-menu').find('a[data-type]').off('click.menu').on('click.menu',
                    function () {
                        var type = $(this).data('type');
                        window.flowMenuFuns[type]
                            ? window.flowMenuFuns[type].call($node, path, parentPath)
                            : window.flowMenuFuns["none"].call(this);
                    });
            }

            function FlowDetail(path, parentPath) {
                var no = $(this).data('flow-no');
                console.log('Package-Menu:FlowDetail', path, parentPath, no);
                if (!no) {
                    abp.message.warn('数据异常，未查询到编号为【' + no + '】情景流数据！');
                    return;
                }
                window._IsDetail
                    ? $('#modal-component').find('.save-btn').hide()
                    : $('#modal-component').find('.save-btn').show();
                $.iwbAjax4({
                    url: abp.appUrl + 'Query/QuerySceneFlowByNo?no=' + no,
                    success: function (res) {
                        if (res) {
                            OpenModal({
                                modal: 'modal-flow-detail',
                                modaltitle: res.flowName + '-' + res.id + ' 详情',
                                shownBefore: function () {
                                    var data;
                                    try {
                                        data = res.contentInfo ? JSON.parse(res.contentInfo) : undefined;
                                        window._CompData = res.componentInfo ? JSON.parse(res.componentInfo) : [];
                                        console.log("U-JSON:", data, window._CompData);
                                        window.InitFlowTree(data, false, $('#modal-flow-detail .main-box'), menuFlow);
                                    } catch (e) {
                                        console.log(e);
                                        abp.message.warn('数据异常!');
                                    }
                                },
                                save: function () {
                                    $('#modal-component').modal('hide');
                                }
                            });
                        }
                    }
                });

            }

            function GuideSettingDetail(path, parentPath, $node) {
                GuideSetting(path, parentPath, $node, true);
            }

            function GuideSetting(path, parentPath, $node, isDetail) {
                var data = GetDataByPath(path);
                isDetail = isDetail || false;
                _IsDetail = isDetail;
                console.log('Package-Menu:GuideSetting', path, parentPath, data, isDetail);
                if (!data) {
                    abp.message.warn('数据异常，未查询到路径为【' + path + '】数据！');
                    return;
                }
                var formData = { path: path, guideNos: data.guideNos, guideNames: data.guideNames }
                $guideModal = $('#modal-guide');
                OpenModal({
                    modal: $guideModal,
                    data: formData,
                    shownBefore: function () {
                        isDetail
                            ? $guideModal.find('.save-btn').hide()
                            : $guideModal.find('.save-btn').show();
                    },
                    save: function () {
                        data.guideNos = $guideModal.find('#guideNos').val();
                        data.guideNames = $guideModal.find('#guideNames').val();
                        PackageSave($guideModal.find('#path').val(), 'guide', $node);
                    }
                });
            }

            function PreComponentSettingDetail(path, parentPath, $node) {
                PreComponentSetting(path, parentPath, $node, true);
            }

            function PreComponentSetting(path, parentPath, $node, isDetail) {
                var data = GetPackageComponentData(path, window.PRE);
                _IsDetail = isDetail;
                console.log("Menu PrevComponent", path, parentPath, data, isDetail);
                if (data) {
                    OpenModal({
                        modal: 'modal-component',
                        modaltitle: '运行前',
                        data: data,
                        shownBefore: function () {
                            isDetail
                                ? $('#modal-component').find('.save-btn').hide()
                                : $('#modal-component').find('.save-btn').show();
                        },
                        save: function () {
                            PackageSave(path, window.PRE, $node);
                        }
                    });
                }
            }

            function RunComponentSettingDetail(path, parentPath, $node) {
                RunComponentSetting(path, parentPath, $node, true);
            }

            function RunComponentSetting(path, parentPath, $node, isDetail) {
                var data = GetPackageComponentData(path, window.RUN);
                _IsDetail = isDetail;
                console.log("Menu RunComponent", path, parentPath, data, isDetail);
                if (data) {
                    OpenModal({
                        modal: 'modal-component',
                        modaltitle: '运行时',
                        data: data,
                        shownBefore: function () {
                            isDetail
                                ? $('#modal-component').find('.save-btn').hide()
                                : $('#modal-component').find('.save-btn').show();
                        },
                        save: function () {
                            PackageSave(path, window.RUN, $node);
                        }
                    });
                }
            }

            function PostComponentSettingDetail(path, parentPath, $node) {
                PostComponentSetting(path, parentPath, $node, true);
            }

            function PostComponentSetting(path, parentPath, $node, isDetail) {
                var data = GetPackageComponentData(path, window.POST);
                _IsDetail = isDetail;
                console.log("Menu PostComponent", path, parentPath, data, isDetail);
                if (data) {
                    OpenModal({
                        modal: 'modal-component',
                        modaltitle: '运行后',
                        data: data,
                        shownBefore: function () {
                            isDetail
                                ? $('#modal-component').find('.save-btn').hide()
                                : $('#modal-component').find('.save-btn').show();
                        },
                        save: function () {
                            PackageSave(path, window.POST, $node);
                        }
                    });
                }
            }

            //获取组件数据
            function GetPackageComponentData(path, type) {
                var data = GetDataByPath(path);
                window._FlowTreeData = {}
                var str = type === window.PRE ? data.preComponent : type === window.RUN ? data.runningComponent : type === window.POST ? data.postComponent : "";
                var typeStr = type === window.PRE ? PACKAGEPRESTRING + window.PRE : type === window.RUN ? PACKAGEPRESTRING + window.RUN : type === window.POST ? PACKAGEPRESTRING + window.POST : "";
                var componentArr = str ? str.split('|') : [""];
                var componentNo = componentArr[0] || typeStr + $.now();
                var componentMapping = componentArr.length > 1 ? componentArr[1] : "";
                var componentName = componentArr.length > 2 ? componentArr[2] : "";
                var index = _PackageCompData.findIndex(function (v) {
                    return v.no == componentNo;
                });
                var component;
                if (index > -1) {
                    component = JSON.stringify(_PackageCompData[index].data);
                } else {
                    index = window._CompData.findIndex(function (v) {
                        return v.no == componentNo;
                    });
                    component = index > -1 ? JSON.stringify(window._CompData[index].data) : "";
                }
                return {
                    id: data.id,
                    path: data.path,
                    componentNo: componentNo,
                    mapping: componentMapping,
                    name: componentName,
                    componentType: typeStr,
                    component: component
                }
            }

            function PackageSave(path, type, $node) {
                var data = GetDataByPath(path);
                switch (type) {
                    case 'roundSetting':
                        var valid = $.formValidate($('#form-round-setting'));
                        if (valid) {
                            data.roundFullScore = $roundSettingModal.find('#roundFullScore').val();
                            data.controlRate = $roundSettingModal.find('#controlRate').val();
                            data.sceneCount = $roundSettingModal.find('#sceneCount').val();
                            $roundSettingModal.modal('hide');
                        }
                        break;
                    case 'flow':
                        data.flowNos = $flowModal.find('#flowNos').val();
                        data.flowNames = $flowModal.find('#flowNames').val();
                        $flowModal.modal('hide');
                        break;
                    case 'guide':
                        data.guideNos = $guideModal.find('#guideNos').val();
                        data.guideNames = $guideModal.find('#guideNames').val();
                        $guideModal.modal('hide');
                        break;
                    case window.PRE:
                    case window.RUN:
                    case window.POST:
                        window.ComponentSave(data, type, 'package');
                        break;
                }
                _refreshData = data;
                _$refreshNode = $node;
                _refreshType = type;
                RefreshPackage();
                //InitPackage(_PackageTreeData);
            }

            function PackageMenuFun($node, $menu) {
                var path = $node.data('path'), parentPath = $node.data('parent-path');
                $menu = $menu || $('#package-menu');
                $menu.find('a').removeClass('last-child');
                $menu.find('a:visible:last').addClass('last-child');

                console.log("MenuTarget:", path, parentPath, $node);
                $menu.find('a[data-type]').off('click.menu').on('click.menu',
                    function () {
                        _refreshData = undefined;
                        _$refreshNode = undefined;
                        _refreshType = undefined;
                        var type = $(this).data('type');
                        packageMenuFuns[type]
                            ? packageMenuFuns[type].call($node, path, parentPath, $node)
                            : packageMenuFuns["none"].call(this);
                    });
            }

            //根据path 查询数据
            function GetDataByPath(path) {
                path = path + "";
                if (path.indexOf('_')) {
                    var arr = path.split('_');
                    return GetDataByPathArr(arr, _PackageTreeData);
                } else {
                    return _PackageTreeData;
                }
            };

            function GetDataByPathArr(arr, data, isRoot) {
                isRoot = isRoot === undefined ? true : false;
                data = data || _PackageTreeData;
                if (isRoot) {
                    arr.shift();
                }
                if (arr.length > 0) {

                    var childId = arr.shift();
                    if (childId && data.children && data.children.length > 0) {
                        var child = data.children.find(function (v) {
                            return v.id == childId;
                        });
                        if (arr.length > 0) {
                            return GetDataByPathArr(arr, child, false);
                        } else {
                            return child;
                        }
                    } else {
                        return null;
                    }
                } else {
                    return data;
                }
            };

            function PackageDetailMenuFun($node, $menu) {
                var path = $node.data('path'), parentPath = $node.data('parent-path');
                $menu = $menu || $('#package-detail-menu');
                console.log("DetailMenuTarget:", path, parentPath, $node);
                $menu.find('a[data-type]').off('click.menu').on('click.menu',
                    function () {
                        var type = $(this).data('type');
                        packageMenuFuns[type]
                            ? packageMenuFuns[type].call($node, path, parentPath, $node)
                            : packageMenuFuns["none"].call(this);
                    });
            }
        </script>

        <script id="packageTree">
            var _PackageCompData = [], _PackageTreeData = {};

            function InitPackage(data, isOffset, $modal, menu, menuFun) {
                _PackageTreeData = data;
                _IsDetail = false;
                menu = menu || 'package-menu';
                menuFun = menuFun || PackageMenuFun;
                $modal = $modal || $('#modal .main-box');

                var engineType = $('#modal #engineModelNo option:selected').data('engine-type');
                if (engineType) {
                    _PackageTreeData.engineType = engineType;
                }
                console.log(_PackageTreeData);
                $modal.packageTree({
                    data: _PackageTreeData,
                    offset: isOffset,
                    customMenu: menu,
                    customMenuBefore: menuFun,
                    flowDetailFun: packageMenuFuns['flow-d'],
                    settingFun: SettingFun
                });
            }

            function RefreshPackage(data, $node, type) {
                data = data || $.extend(true, {}, _refreshData);
                $node = $node || _$refreshNode;
                type = type || _refreshType;
                $('#modal .main-box').packageTree('refresh',
                    {
                        data: data,
                        node: $node,
                        type: type
                    });
            }
        </script>

        <!--格式化-->
        <script id="formatter-script" type="text/javascript">
            var icon = '<i class="fa fa-angle-double-right"></i>';

            function TypeFormatter(v) {
                var name = $('#hid-type option[value="' + v + '"]').text();
                switch (v) {
                case 0:
                    return '<span class="label label-danger">' + name + '</span>';
                default:
                    return '<span class="label label-info">' + name + '</span>';
                }
            }

            function CategoryFormatter(v) {
                var name = $('#hid-category option[value="' + v + '"]').text();
                switch (v) {
                case '':
                    return '';
                default:
                    return '<span class="label label-info">' + name + '</span>';
                }
            }

            function EngineModelFormatter(v) {
                var name = $('#hid-engineModel option[value="' + v + '"]').text();
                switch (v) {
                case '':
                    return '';
                default:
                    return '<span class="label label-warning">' + name + '</span>';
                }
            }

            function EvalModelFormatter(v) {
                var name = $('#hid-evalModel option[value="' + v + '"]').text();
                switch (v) {
                case '':
                    return '';
                default:
                    return '<span class="label label-info">' + name + '</span>';
                }
            }

            function PackageFormatter(v, r) {
                var name = $('#hid-packageState option[value="' + v + '"]').text();
                switch (v) {
                case @PackageStateDefinition.New:
                    return '<span class="label label-danger">' + name + '</span>';
                case @PackageStateDefinition.Solidified:
                    var str = '<span class="label label-success">' + name + '</span>';
                    str += '<span class="table-action" style="margin-left:20px" onclick="PackageDetail(\'' +
                        r.id +
                        '\')">' +
                        icon +
                        ' 查看详情</span>';

                    return str;
                default:
                    return '';
                }
            }

            function FlowActionFormatter(v, r) {
                return '<span class="table-action" style="margin-left:20px" onclick="PackageFlowDetail(\'' +
                    r.id +
                    '\')">' +
                    icon +
                    ' 查看详情</span>';
            }

            function SceneTypeFormatter(v) {
                var name = $('#hid-sceneType option[value="' + v + '"]').text();
                switch (v) {
                case 1:
                    return '<span class="label label-danger">' + name + '</span>';
                default:
                    return '<span class="label label-info">' + name + '</span>';
                }
            }

            function GuideTypeFormatter(v) {
                var name = $('#hid-guideType option[value="' + v + '"]').text();
                switch (v) {
                case 0:
                    return '<span class="label label-danger">' + name + '</span>';
                default:
                    return '<span class="label label-info">' + name + '</span>';
                }
            }

            function ResourceTypeFormatter(v) {
                var name = $('#hid-resource-type option[value="' + v + '"]').text();
                switch (v) {
                case 1:
                    return '<span class="label label-danger">' + name + '</span>';
                case 2:
                    return '<span class="label label-info">' + name + '</span>';
                case 3:
                    return '<span class="label label-success">' + name + '</span>';
                default:
                    return '<span class="label label-info">' + name + '</span>';
                }
            }

            function PathFormatter(v) {
                if (v) {
                    return '<a class="table-action" href="{0}" target="_blank">查看附件</a>'.format(v);
                }
                return '暂无附件';
            }
        </script>
    }

    <section style="display: none">
        <select id="hid-type">
            <option value=""></option>
        </select>
        <select id="hid-category">
            @(Html.Raw(category))
        </select>
        <select id="hid-engineModel">
            @(Html.Raw(engineModel))
        </select>
        <select id="hid-evalModel">
            @(Html.Raw(evalModel))
        </select>
        <select id="hid-packageState">
            @(Html.Raw(packageState))
        </select>
        <select id="hid-sceneType">
            @(Html.Raw(sceneType))
        </select>

        <select id="hid-guideType">
            @Html.Raw(guideType)
        </select>
        <select id="hid-resource-type">
            @Html.Raw(resourceType)
        </select>
        @*@Html.DropDownList("hid-type", type)*@
    </section>

    @* <div class="round-box">
                <div class="line-v"></div>
                <div class="round-node start-node">高层火灾演练 场景</div>
            </div>
            <div class="round-box">
                <div class="line-v"></div>
                <div class="block-node left">
                    <div class="round-setting">
                        <div class="title">轮次规则配置</div>
                        <div class="content">
                            <div class="setting score">
                                轮次总分:<span class="value">500</span> <span class="pull-right">分</span>
                            </div>
                            <div class="setting rate">
                                随机抽取概率:<span class="value">80</span><span class="pull-right">%</span>
                            </div>
                            <div class="setting count">
                                演化情景流数:<span class="value">3</span><span class="pull-right">个</span>
                            </div>
                            <div class="setting guide">引导信息 <span>未配置</span></div>
                            <div class="setting prev">运行前事务 <span class="pull-right">未配置</span></div>
                            <div class="setting run">运行时事务 <span class="pull-right">未配置</span></div>
                            <div class="setting post">运行后事务 <span class="pull-right">未配置</span></div>
                        </div>
                    </div>
                    <div class="block-box obj-block-box">
                        <div class="title">客观情景块</div>
                        <div class="block-content">
                            <div class="setting-box">
                                <div class="setting guide">引导信息 <span class="pull-right">未配置</span></div>
                                <div class="setting prev">运行前事务 <span class="pull-right">未配置</span></div>
                                <div class="setting run">运行时事务 <span class="pull-right">未配置</span></div>
                                <div class="setting post">运行后事务 <span class="pull-right">未配置</span></div>
                            </div>
                            <div class="flow-box">
                                <div class="flow-info">
                                    <div class="flow-name no-select">情景流1</div>
                                    <div class="flow-setting" title="配置情景流"><i class="fa fa-cog"></i></div>
                                </div>
                                <div class="flow-info">
                                    <div class="name no-select">情景流2</div>
                                    <div class="flow-setting" title="配置情景流"><i class="fa fa-cog"></i></div>
                                </div>
                                <div class="flow-info">
                                    <div class="name no-select">情景流3</div>
                                    <div class="flow-setting" title="配置情景流"><i class="fa fa-cog"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="round-node">1</div>
                <div class="block-node right">
                    <div class="tab-content-box">
                        <div class="title">演化情景块</div>
                        <div class="tab-content">
                            <div class="tab-pane fade text-left show active" id="ev-block-tab-1">
                                <div class="block-box evolution-block-box">
                                    <div class="block-content">
                                        <div class="setting-box">
                                            <div class="setting guide">引导信息 <span class="pull-right">未配置</span></div>
                                            <div class="setting prev">运行前事务 <span class="pull-right">未配置</span></div>
                                            <div class="setting run">运行时事务 <span class="pull-right">未配置</span></div>
                                            <div class="setting post">运行后事务 <span class="pull-right">未配置</span></div>
                                        </div>
                                        <div class="flow-box">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane text-left fade" id="ev-block-tab-2">
                                <div class="block-box evolution-block-box">
        <div class="block-content">
            <div class="setting-box">
                <div class="setting guide">引导信息 <span class="pull-right">未配置</span></div>
                <div class="setting prev">运行前事务 <span class="pull-right">未配置</span></div>
                <div class="setting run">运行时事务 <span class="pull-right">未配置</span></div>
                <div class="setting post">运行后事务 <span class="pull-right">未配置</span></div>
            </div>
            <div class="flow-box">
            </div>
        </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
        <div class="tab-box">
            <div class="title">情景块集合 <i title="添加演化情景流块" class="icon far fa-plus-square"></i></div>
            <ul class="nav nav-tabs flex-column">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="pill" href="#ev-block-tab-1" role="tab">演化情景块 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#ev-block-tab-2" role="tab">演化情景块 2</a>
                </li>
            </ul>
        </div>
                                                            </div>
                                                        </div>

        <div class="round-box">
            <div class="line-v"></div>
            <div class="round-node">END</div>
        </div> *@