@using WePlatform.Views.Shared.Modals
<link href="~/Content/Css/nodetree.css" rel="stylesheet" />
@model string
<section>
    <div class="modal fade flow-detail" id="modal-detail" tabindex="-1" aria-modal="true">
        <div class="modal-dialog modal-lg" style="margin-top: 190.5px;">
            <div class="modal-content">
                @Html.Partial("Modals/_ModalHeader", new ModalHeaderViewModel("节点配置详情", ""))
                <div class="modal-body" style="padding: 0">

                    <form class="form-horizontal " id="form-detail" novalidate="novalidate" 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="node-detail-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="tab-component" data-toggle="pill" href="#tab-content-component" role="tab">事务详情</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link " id="tab-scene" data-toggle="pill" href="#tab-content-scene" role="tab">情景信息</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="tab-guide" data-toggle="pill" href="#tab-content-guide" role="tab">引导信息</a>
                                    </li>

                                </ul>
                            </div>

                            <div class="card-body">
                                <div class="tab-content" id="custom-tabs-four-tabContent">
                                    <div class="tab-pane fade" id="tab-content-scene" role="tabpanel">
                                        <table class="table table-sm table-striped table-condensed">
                                            <thead>
                                                <tr>
                                                    <th style="width: 45%">情景编号</th>
                                                    <th style="width: 45%">情景简称</th>
                                                    <th style="width: 10%; text-align: center;">操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="tab-pane fade" id="tab-content-guide" role="tabpanel">
                                        <table class="table table-sm table-striped table-condensed">
                                            <thead>
                                                <tr>
                                                    <th style="width: 45%">引导编号</th>
                                                    <th style="width: 45%">引导简称</th>
                                                    <th style="width: 10%; text-align: center;">操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="tab-pane fade active show" id="tab-content-component" role="tabpanel">
                                        <table class="table table-sm table-striped table-condensed">
                                            <thead>
                                            <tr>
                                                <th style="width: 85%">事务信息</th>
                                                @*<th style="width: 36%">事务名称</th>
                                                <th style="width: 18%;">事务类型</th>*@
                                                <th style="width: 15%; text-align: center;">操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                            </div>
                        </div>


                    </form>
                </div>
                <div class="modal-footer" style="text-align: center;">
                    <button type="button" class="btn btn-outline-iwb waves-effect" data-dismiss="modal" style="min-width: 100px;">关闭窗口</button>
                </div>

            </div>
        </div>
    </div>
</section>

@{
    var modal = new ModalViewModel("流节点", new ModalBodyViewModel(new List<Input>()
    {
        new InputHide("id"),
        new InputHide("parentId"),
        new InputHide("path"),
        new InputHide("parentPath"),
        new InputHide("sceneNos"),
        new InputHide("variables"),
        new InputHide("guideNos"),
        new Input("name", "节点名称"),
        new Input("sceneNames", "情景名称").SetDisabled().SetSearchIcon("qm_scene","modal-node"),
        new Input("guideNames", "引导信息").SetNotRequired().SetDisabled().SetSearchIcon("qm_guide","modal-node"),
    }, "form-node"), "modal-node");
}
@Html.Partial("Modals/_Modal", modal)

<div class="iwb-flow-tree" id="flow-menu" style="display: none; position: absolute;z-index: 9999">
    <div class="dropdown-menu show">
        <a class="dropdown-item" data-type="detail" href="javascript:void(0)">
            <i class="fa fa-list mr-2"></i>
            查看配置详情
        </a>
        <a class="dropdown-item" data-type="add" href="javascript:void(0)">
            <i class="far fa-plus-square mr-2"></i>
            增加节点
        </a>
        <a class="dropdown-item" data-type="addChild" href="javascript:void(0)">
            <i class="far fa-plus-square mr-2"></i>
            增加子节点
        </a>
        <a class="dropdown-item" data-type="edit" href="javascript:void(0)">
            <i class="far fa-edit mr-2"></i>
            编辑节点
        </a>
        <a class="dropdown-item" data-type="delete" href="javascript:void(0)">
            <i class="far fa-minus-square mr-2"></i>
            删除节点
        </a>
        <a class="dropdown-item" data-type="PRE" href="javascript:void(0)">
            <i class="fa fa-cog mr-2"></i>
            配置运行前事务
        </a>
        <a class="dropdown-item" data-type="RUN" href="javascript:void(0)">
            <i class="fa fa-cog mr-2"></i>
            配置运行时事务
        </a>
        <a class="dropdown-item" data-type="POST" href="javascript:void(0)">
            <i class="fa fa-cog mr-2"></i>
            配置运行后事务
        </a>
    </div>
</div>
@Html.Partial("_Component", Model)
<script src="~/Content/Libs/html2canva/html2canvas.min.js"></script>
<script src="~/Content/Js/flowtree.js"></script>
<script id="flow-tree">
    var PRE = 'PRE', RUN = 'RUN', POST = 'POST', FLOWPRESTRING = 'F_';
    var _CompData = [];
    var _FlowTreeData = {};

    //初始化数据
    function GetInitData() {
        var data = {
            index: 1,
            id: 'FN1',
            no: 'FN1',
            path: 'FN1',
            parentPath: '',
            name: '根节点',
            sceneNos: '',
            sceneNames: '',
            guideNos: '',
            guideNames: '',
            preComponent: GetNewComponentNo(PRE),
            runningComponent: GetNewComponentNo(RUN),
            postComponent: GetNewComponentNo(POST),
            variables: '',
            children: []
        }
        var root = $.extend({}, data);
        root.children.push(GetInitChildData(root, root.path));
        root.children.push(GetInitChildData(root, root.path));
        return root;
    }
    function GetInitChildData(root, parentPath) {
        root.index++;
        var id ='FN'+ root.index;
        var data = {
            id: id,
            no: id,
            path: parentPath + "_" + id,
            parentPath: parentPath,
            name: '节点' + id,
            sceneNos: '',
            sceneNames: '',
            guideNos: '',
            guideNames: '',
            preComponent: GetNewComponentNo(PRE),
            runningComponent: GetNewComponentNo(RUN),
            postComponent: GetNewComponentNo(POST),
            variables: '',
            children: []
        }
        var node = $.extend({}, data);
        return node;
    }
    //获取新节点ID
    function GetNewNodeId() {
        _FlowTreeData.index++;
        return 'FN' +_FlowTreeData.index;
    }

    function GetNewComponentNo(typeStr) {
        return FLOWPRESTRING + typeStr + ($.now() + "").substr(5) + Math.floor(Math.random() * (9999 - 1001) + 1001) ;
    }
    //根据path 查询节点
    function GetNodeByPath(path) {
        path = path + "";
        if (path.indexOf('_')) {
            var arr = path.split('_');
            return GetNodeByPathArr(arr, _FlowTreeData);
        } else {
            return _FlowTreeData;
        }
    };
    function GetNodeByPathArr(arr, data, isRoot) {
        isRoot = isRoot === undefined ? true : false;
        data = data || _FlowTreeData;
        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 GetNodeByPathArr(arr, child, false);
                } else {
                    return child;
                }
            } else {
                return null;
            }
        } else {
            return data;
        }
    };

    function InitFlowTree(initData, isOffset, $box, menuFun) {
        $box = $box || $('#modal .main-flow-box');
        menuFun = menuFun || window.FlowMenuFun;
        console.log("FlowTreeData:", initData, $box);
        _FlowTreeData = initData;
        //$box.empty();
        $box.flowTree({
            data: initData,
            offset: isOffset,
            nodeTemplate: window.NodeTemplate,
            customMenu: $('#flow-menu'),
            customMenuBefore: menuFun
        });
    }

    function NodeDetail(data) {
        if (data) {
            $('#modal-detail').off('show.bs.modal.detail').on('show.bs.modal.detail', function () {
                FlowDetailFormatter(data);
                $('#node-detail-tab li').eq(0).find('a').tab('show');
            });

            window._IsDetail ? $('#modal-detail').find('.save-btn').hide() : $('#modal-component').find('.save-btn').show();
            $('#modal-detail').modal('show');
        } else {
            abp.message.warn("节点数据异常！");
        }
    }

    function FlowDetailFormatter(data) {
        FlowDetailSceneGuideFormatter(data.sceneNos, data.sceneNames, 'scene', data.path);
        FlowDetailSceneGuideFormatter(data.guideNos, data.guideNames, 'guide', data.path);
        FlowDetailCompFormatter(data);
    }

    function FlowDetailSceneGuideFormatter(nos,names,idStr,path) {
        var str = '',
            op = '@(Model)' == 'package'
                ? '暂无操作'
                : '<a class="table-action" style="text-align: center;"  onclick="flowMenuFuns.edit.call(this, \'' + path +'\')" >配置数据</a>',
            temp = '<tr><td>{0}</td><td>{1}</td><td>' + op + '</td></tr>',
            temp2 = '<tr><td colspan="2" style="color:red;font-weight:bold;cursor:pointer">未配置数据</td><td>' + op + '</td></tr>',
            empty = '<tr><td colspan="10" style="color:red;font-weight:bold;">未配置数据</td></tr>';
        if (nos) {
            var arr1 = nos.split(','), arr2 = names.split(',');
            arr1.forEach(function (v, i) {
                str += temp.format(v, arr2[i]);
            });
        } else if (!window._IsDetail && '@(Model))' != 'package') {
            str += temp2;
        }
        if (str) {
            $('#tab-content-' + idStr +' tbody').html(str);
        } else {
            $('#tab-content-' + idStr +' tbody').html(empty);
        }
    }

    //菜单
    var flowMenuFuns = {
        add: function (path) {
            var data = GetNodeByPath(path);
            console.log("Menu Add", path, data);
            if (!data.parentPath) {
                abp.message.warn("根节点只能添加子节点！");
                return;
            }
            var newId = GetNewNodeId();
            var parentId = data.parentId;
            OpenModal({
                modal: 'modal-node',
                modaltitle: abp.localization.iwbZero('OpCreate'),
                data: { id: newId, parentId: parentId, path: data.parentPath + "_" + newId, parentPath: data.parentPath },
                save: function () {
                    NodeSave(path, 'add');
                }
            });
        },
        addChild: function (path) {
            var data = GetNodeByPath(path);
            console.log("Menu AddChild", path, data);
            var parentId = data.id;
            var newId = GetNewNodeId();
            OpenModal({
                modal: 'modal-node',
                modaltitle: abp.localization.iwbZero('OpCreate'),
                data: { id: newId, parentId: parentId, path: data.path + "_" + newId, parentPath: data.path },
                save: function () {
                    NodeSave(path, 'addChild');
                }
            });
        },
        edit: function (path) {
            var data = GetNodeByPath(path);
            console.log("Menu Edit", path, data);
            OpenModal({
                modal: 'modal-node',
                modaltitle: abp.localization.iwbZero('OpUpdate'),
                data: data,
                save: function () {
                    NodeSave(path, 'edit');
                }
            });
        },
        delete: function (path) {
            console.log("Menu Delete", path);
            MsgConfirm("确认删除节点吗？",
                "删除节点",
                function () {
                    NodeSave(path, 'delete');
                });
        },
        PRE: function (path) {
            var data = GetComponentData(path, PRE);
            window._IsDetail ? $('#modal-component').find('.comp-btn').hide() : $('#modal-component').find('.comp-btn').show();
            console.log("Menu PrevComponent", path, data);
            if (data) {
                OpenModal({
                    modal: 'modal-component',
                    modaltitle: '运行前',
                    data: data,
                    save: function () {
                        NodeSave(path, PRE);
                    }
                });
            }
        },
        RUN: function (path) {
            var data = GetComponentData(path, RUN);
            console.log("Menu RunComponent", path, data);
            window._IsDetail ? $('#modal-component').find('.comp-btn').hide() : $('#modal-component').find('.comp-btn').show();
            if (data) {
                OpenModal({
                    modal: 'modal-component',
                    modaltitle: '运行时',
                    data: data,
                    save: function () {
                        NodeSave(path, RUN);
                    }
                });
            }

        },
        POST: function (path) {
            var data = GetComponentData(path, POST);
            window._IsDetail ? $('#modal-component').find('.comp-btn').hide() : $('#modal-component').find('.comp-btn').show();
            console.log("Menu PostComponent", path, data);
            if (data) {
                OpenModal({
                    modal: 'modal-component',
                    modaltitle: '运行后',
                    data: data,
                    save: function () {
                        NodeSave(path, POST);
                    }
                });
            }
        },
        detail: function (path) {
            var data = GetNodeByPath(path);
            NodeDetail(data);
        },
        none: function () { console.log("No Menu type"); }
    };
    function FlowMenuFun($node) {
        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');
                if (type == "detail" || '@(Model)' != 'package') {
                    flowMenuFuns[type] ? flowMenuFuns[type].call($node, path, parentPath) : flowMenuFuns["none"].call(this);
                }
            });
    }
</script>
<script id="Component-S">
    var _COMPNAME = '@(Model)' === 'package' ? "方案包事务" : "事务";
    //获取组件数据
    function GetComponentData(path, type) {
        var data = GetNodeByPath(path);
        var str = type === PRE ? data.preComponent : type === RUN ? data.runningComponent : type === POST ? data.postComponent : "";
        //if ('@(Model)' === 'package' && !str) {
            //abp.message.warn('情景流节点未配置事务，如需更事务配置请先在情景流节点中配置！');
            //return null;
        //}
        var typeStr = type === PRE ? FLOWPRESTRING + PRE : type === RUN ? FLOWPRESTRING + RUN : type === POST ? FLOWPRESTRING + 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] : _COMPNAME;
        var component="",index;
        if ('@(Model)' === 'package') {
            index = window._PackageCompData.findIndex(function (v) {
                return v.no == componentNo;
            });
            component = index > -1 ? JSON.stringify(window._PackageCompData[index].data) : "";
        }
        if (!component) {
            index = _CompData.findIndex(function (v) {
                return v.id == componentNo;
            });
            component = index > -1 ? JSON.stringify(_CompData[index].data) : "";
        }

        return { id: data.id, path: data.path, componentNo: componentNo, mapping: componentMapping, name: componentName, componentType: typeStr, component: component, sceneVariables: data.variables }
    }
    //保存节点
    function NodeSave(path, type) {
        var index, data = GetNodeByPath(path), parent;
        if (!data) {
            abp.message.warn("数据异常，请检查后再试！");
            return;
        }
        switch (type) {
            case 'add':
            case 'addChild':
            case 'edit':
                if (!$.formValidate($('#form-node'))) {
                    return;
                }
                var formData = {
                    id: $('#modal-node #id').val(),
                    parentId: $('#modal-node #parentId').val(),
                    path: $('#modal-node #path').val(),
                    parentPath: $('#modal-node #parentPath').val(),
                    name: $('#modal-node #name').val(),
                    sceneNos: $('#modal-node #sceneNos').val(),
                    sceneNames: $('#modal-node #sceneNames').val(),
                    variables: $('#modal-node #variables').val(),
                    guideNos: $('#modal-node #guideNos').val(),
                    guideNames: $('#modal-node #guideNames').val()
                }
                switch (type) {
                    case 'addChild':
                        data.children.push($.extend({},
                            {
                                preComponent: GetNewComponentNo(PRE),
                                runningComponent: GetNewComponentNo(RUN),
                                postComponent: GetNewComponentNo(POST)
                            },
                            formData,
                            { children: [] }));
                        break;
                    case 'add':
                        parent = GetNodeByPath(data.parentPath);
                        if (parent) {
                            parent.children.push($.extend({},
                                {
                                    preComponent: GetNewComponentNo(PRE),
                                    runningComponent: GetNewComponentNo(RUN),
                                    postComponent: GetNewComponentNo(POST)
                                },
                                formData,
                                { children: [] }));
                        } else {
                            abp.message.warn("数据异常！");
                            return;
                        }
                        break;
                    case 'edit':
                        $.extend(data, formData);
                }

                break;
            case 'delete':
                if (data.children && data.children.length > 0) {
                    abp.message.warn("有子节点未删除，请检查后再试！");
                    return;
                } else {
                    parent = GetNodeByPath(data.parentPath);
                    index = parent.children.findIndex(function (v) {
                        return v.id == data.id;
                    });
                    parent.children.splice(index, 1);
                }
                break;
            case PRE:
            case RUN:
            case POST:
                ComponentSave(data, type,'@(Model)');
                break;

        }

        '@(Model)' != "package"
            ? InitFlowTree(_FlowTreeData, true)
            : InitFlowTree(data, false, $('#modal-flow-detail .main-box'), window.menuFlow);
        if ($('#modal-detail').hasClass('show')) {
            data = GetNodeByPath(path);
            switch (type) {
            case 'edit':
                FlowDetailSceneGuideFormatter(data.sceneNos, data.sceneNames, 'scene', data.path);
                FlowDetailSceneGuideFormatter(data.guideNos, data.guideNames, 'guide', data.path);
                break;
            case PRE:
            case RUN:
            case POST:
                FlowDetailCompFormatter(data);
                break;
            }
        }

        $('#modal-node').modal('hide');

    }

    function ComponentSave(data, type, source) {
        if (!$.formValidate($('#modal-component form'))) {
            return;
        }
        var componentNo = $('#modal-component #componentNo').val();
        var componentMapping = $('#modal-component #mapping').val();
        var componentName = $('#modal-component #name').val();
        @*@if (Model!= "package")
        {
            <text>
        if (!componentName) {
            abp.message.warn("组件名不能为空！", "提示");
            return;
        }
            </text>
        }*@
        var str = componentNo + "|" + componentMapping + "|" + (componentName ? componentName : _COMPNAME);
        switch (type) {
            case PRE:
                data.preComponent = str;
                break;
            case RUN:
                data.runningComponent = str;
                break;
            case POST:
                data.postComponent = str;
                break;
        }

        var compData = { id: componentNo, no: componentNo, name: componentName, data: $.extend([], window._ComponentDataArray || []) };
        var compDataArray;
        if (source && source === 'package') {
            compDataArray = window._PackageCompData;
        } else {
            compDataArray = _CompData;
        }
        var cIndex = compDataArray.findIndex(function (v) {
            return v.no === componentNo;
        });
        if (cIndex > -1) {
            compDataArray[cIndex] = compData;
        } else {
            compDataArray.push(compData);
        }
        $('#modal-component').modal('hide');

    }
    function RemoveComponent(componentNo, path, type) {
        var isPackageFlow = type.indexOf('P') == 0;
        var data = isPackageFlow? window.GetDataByPath(path) : GetNodeByPath(path);
        switch (type) {
            case "F_PRE":
                if (isPackageFlow || '@(Model)' != "package"){
                    data.preComponent = data['preComponent'].substr(0, data['preComponent'].indexOf('|'))+"||";
                }
                break;
            case "P_PRE":
                data.preComponent = "";
                break;
            case "F_RUN":
                if (isPackageFlow || '@(Model)' != "package"){
                    data.runningComponent = data['runningComponent'].substr(0, data['runningComponent'].indexOf('|')) + "||";
                }
                break;
            case "P_RUN":
                data.runningComponent = "";
                break;
            case "F_POST":
                if (isPackageFlow || '@(Model)' != "package"){
                    data.postComponent = data['postComponent'].substr(0, data['postComponent'].indexOf('|')) + "||";
                }
                break;
            case "P_POST":
                data.postComponent = "";
                break;
        }
        var compDataArray;
        compDataArray = '@(Model)' === 'package' ? window._PackageCompData : _CompData;
        var cIndex = compDataArray.findIndex(function (v) {
            return v.no === componentNo;
        });
        if (cIndex > -1) {
            compDataArray.splice(cIndex, 1);
        }
        if ($('#modal-detail').hasClass('show')) {
            FlowDetailCompFormatter(data);
        }
        if ('@(Model)' === 'package') {
            window._refreshData = data;
            window.RefreshPackage();
            InitFlowTree(data, false, $('#modal-flow-detail .main-box'), window.menuFlow);
        } else {
            InitFlowTree(_FlowTreeData, true);
        }
        
        $('#modal-component').modal('hide');

    }
    function NodeTemplate(data) {
        var str1 = '<div class="setting no-setting no-select {1}" data-toggle="tip" title="{2}" {3} >{0} <span>未配置</span></div>',
            str2 = '<div class="setting no-select {1}" data-toggle="tip" title="{2}" {3} >{0} <span>已配置</span></div>',
            str3 = 'onclick="flowMenuFuns.{0}.call(this, \'' + data.path + '\')"';
        var str = '';
        str += '<div class="title"></div>';
        str += '<div class="title-text no-select">' + data['name'] + '</div>';
        str += '<div class="content no-select">';
        str += ('<div class="setting no-select path" data-toggle="tip" title="{0}">{0}</div>').format('路径：' + data['path']);
        str += (data['sceneNos'] ? str2 : str1).format('情景信息', 'scene','情景信息：' + (data['sceneNames'] ? data['sceneNames']: '无'), '@(Model)' == 'package'?'':str3.format("edit"));
        str += (data['guideNos'] ? str2 : str1).format('引导信息', 'guide', '引导信息：' + (data['guideNames'] ? data['guideNames'] : '无'), '@(Model)' == 'package' ? '' : str3.format("edit"));
        var preName = GetComponentName(data['preComponent']),
            runName = GetComponentName(data['runningComponent']),
            postName = GetComponentName(data['postComponent']);
        // data['preComponent'].substr(0, data['preComponent'].indexOf('|'))
        //str += (preName ? str2 : str1).format('运行前事务', 'pre', '事务：' + (preName ? preName : '无'), str3.format(PRE));
        //str += (runName ? str2 : str1).format('运行时事务', 'run', '事务：' + (runName ? runName : '无'), str3.format(RUN));
        //str += (postName ? str2 : str1).format('运行后事务', 'post', '事务：' + (postName ? postName : '无'), str3.format(POST));

        str += (preName ? str2 : str1).format('运行前事务', 'pre', '点击可配置事务', str3.format(PRE));
        str += (runName ? str2 : str1).format('运行时事务', 'run', '点击可配置事务', str3.format(RUN));
        str += (postName ? str2 : str1).format('运行后事务', 'post', '点击可配置事务', str3.format(POST));
        str += '</div>';
        return str;
    }

    function GetComponentName(component) {
        var componentArr = component ? component.split('|') : [""];
        var componentName = componentArr.length > 2 ? componentArr[2] : "";
        @if (Model== "package")
        {
            <text>
        var componentNo = componentArr[0];
        if (window._PackageCompData.findIndex(function (v) {return v.no === componentNo;})>-1) {
            componentName = '[方案包事务]&nbsp;&nbsp;' + componentName;
        }
            </text>
        }
        return componentName;
    }

    function FlowDetailCompFormatter(data) {
        var
            empty = '<tr><td colspan="10" style="color:red;font-weight:bold;">未配置数据</td></tr>';
        var str = '';
        str += FlowDetailComponentFormatter(data.preComponent, PRE, '运行前', data.path);
        str += FlowDetailComponentFormatter(data.runningComponent, RUN, '运行时', data.path);
        str += FlowDetailComponentFormatter(data.postComponent, POST, '运行后', data.path);
        if (str) {
            $('#tab-content-component tbody').html(str);
        } else {
            $('#tab-content-component tbody').html(empty);
        }
    }

    function FlowDetailComponentFormatter(comp,type,name,path) {
        var str = '',
            temp = '<tr><td  style="color:red;">{0}' +
                    '{0}事务组件</td><td style="text-align: center;" ><a class="table-action"  onclick="flowMenuFuns.{1}.call(this,\'{2}\')">{3}</a></td></tr>'
                    .format(name,type,path,'@(Model)' == 'package' ? '<span style="color:red;font-weight:bold;">重新配置</span>' : '查看详情'),
            temp2 = '<tr><td  style="color:red;font-weight:bold;">未配置<span style="padding:0 5px;font-size:105%;">{0}</span>事务组件</td><td style="text-align: center;" ><a class="table-action" onclick="flowMenuFuns.{1}.call(this,\'{2}\')">配置事务</a></td></tr>'
                    .format(name, type, path),
            componentArr,
            componentNo,
            componentName;

        if (comp) {
            componentArr = comp.split('|');
            componentNo = componentArr[0];
            componentName = componentArr.length > 2 ? componentArr[2] : "";
            if (componentName) {
                str += temp.format('');
            } else {
                @if (Model== "package")
                {
        <text>
            if (window._PackageCompData.findIndex(function (v) {return v.no === componentNo;})>-1) {
                str += temp.format('<span style="color:red;font-weight:bold;font-size:80%;">[方案包事务]&nbsp;&nbsp;</span>');
            }
            else {
                str += temp2;
            }
        </text>
                }
                else
            {
         <text>
             str += temp2;
         </text>
                }
            }
        } else if (!window._IsDetail) {
            str += temp2;
        }
        return str;
    }

</script>