@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<link href="~/js/lay-module/flow/WaterFlow.css" rel="stylesheet" />
<link href="~/js/lay-module/formDesigner/formPreview.css" rel="stylesheet" />
<script>
    //只读参数
    var readonly = true;
    layui.use(['form', 'layer', 'jquery', 'waterflow', 'flowlayout', 'common','formPreview', 'element', 'optimizeSelectOption'], function () {
        var form = layui.form, element = layui.element,
            layer = layui.layer,
            common = layui.common,
            formPreview = layui.formPreview,
            $ = layui.jquery;

        //var index = layer.getFrameIndex(window.name); //获取窗口索引
        var keyValue = $.request("keyValue");
        /*=========流程设计（begin）======================*/
        var flowDesignPanel = $('#flowPanel').flowdesign({
            height: 300,
            widht: 300,
            toolBtns: false,
            OpenNode: function (object) {
                FlowDesignObject = object; //为NodeInfo窗口提供调用
                valueList = $("#valueList").val().split(',');
                if (object.type == 'start round mix' || object.type == 'end round') {
                    layer.msg("开始节点与结束节点不能设置");
                    return false;
                }
                //高度宽度超出就适应屏幕
                var width = 650;
                var height = 450;
                var _width = document.body.clientWidth > width ? width + 'px' : document.body.clientWidth - 20 + 'px';
                var _height = document.body.clientHeight > height ? height + 'px' : document.body.clientHeight - 20 + 'px';
                top.layer.open({
                    type: 2,
                    area: [_width, _height], //宽高
                    maxmin: true, //开启最大化最小化按钮
                    title: '节点设置【' + object.name + '】',
                    content: '/SystemManage/Flowscheme/NodeInfo?Method=' + 'Details',
                    btn: [],
                    success: function (layero, index) {
                        //子界面定义一个窗口方法initForm，里面调用common.val给参数赋值
                        if (layero.find('iframe')[0].contentWindow.initForm) {
                            var data = {};
                            data.FlowDesignObject = FlowDesignObject;
                            data.valueList = valueList;
                            layero.find('iframe')[0].contentWindow.initForm(data);
                        }
                    },
                });
            },
            OpenLine: function (object) {
                FlowDesignObject = object; //为NodeInfo窗口提供调用
                valueList = $("#valueList").val().split(',');
                //高度宽度超出就适应屏幕
                var width = 650;
                var height = 400;
                var _width = document.body.clientWidth > width ? width + 'px' : document.body.clientWidth - 20 + 'px';
                var _height = document.body.clientHeight > height ? height + 'px' : document.body.clientHeight - 20 + 'px';
                top.layer.open({
                    type: 2,
                    area: [_width, _height], //宽高
                    maxmin: true, //开启最大化最小化按钮
                    title: '连线设置【' + object.name + '】',
                    content: '/SystemManage/Flowscheme/LineInfo?Method=' + 'Details',
                    btn: [],
                    success: function (layero, index) {
                        //子界面定义一个窗口方法initForm，里面调用common.val给参数赋值
                        if (layero.find('iframe')[0].contentWindow.initForm) {
                            var data = {};
                            data.FlowDesignObject = FlowDesignObject;
                            data.valueList = valueList;
                            layero.find('iframe')[0].contentWindow.initForm(data);
                        }
                    },
                });
                return;
            },
            OpenArea: function (object) {
                FlowDesignObject = object; //为NodeInfo窗口提供调用
                //高度宽度超出就适应屏幕
                var width = 450;
                var height = 250;
                var _width = document.body.clientWidth > width ? width + 'px' : document.body.clientWidth - 20 + 'px';
                var _height = document.body.clientHeight > height ? height + 'px' : document.body.clientHeight - 20 + 'px';
                top.layer.open({
                    type: 2,
                    area: [_width, _height], //宽高
                    maxmin: true, //开启最大化最小化按钮
                    title: '区域设置【' + object.name + '】',
                    content: '/SystemManage/Flowscheme/AreaInfo?Method=' + 'Details',
                    btn: ['确定', '取消'],
                    success: function (layero, index) {
                        //子界面定义一个窗口方法initForm，里面调用common.val给参数赋值
                        if (layero.find('iframe')[0].contentWindow.initForm) {
                            var data = {};
                            data.FlowDesignObject = FlowDesignObject;
                            layero.find('iframe')[0].contentWindow.initForm(data);
                        }
                    }
                });
                return;
            }
        });
        /*=========流程设计（end）=====================*/
        common.ajax({
            url: '/SystemManage/Flowscheme/GetFormJson',
            dataType: 'json',
            data: { keyValue: keyValue },
            async: false,
            success: function (data) {
                var obj = data;
                flowDesignPanel.loadData(JSON.parse(obj.F_SchemeContent));
                common.ajax({
                    url: '/SystemManage/Form/GetFormJson',
                    dataType: 'json',
                    data: { keyValue: obj.F_FrmId },
                    async: false,
                    success: function (data) {
                        if (data.F_FrmType == 0) {
                            //表单设计器
                            formPreview.render({
                                data: JSON.parse(data.F_Content),
                                elem: '#frmPreview',
                                readonly:true
                            });
                        }
                        else {
                            $("#frmPreview").load(document.location.origin + '/form/' + data.F_WebId + '.html');
                        }
                        if (!!data.F_ContentData) {
                            $("#valueList").val(data.F_ContentData);
                        }
                    }
                });
            }
        });
        form.render();
        flowDesignPanel.reinitSize($(window).width() - 50, $(window).height() - 200);
        $(window).resize(function () {
            flowDesignPanel.reinitSize($(window).width() - 50, $(window).height() - 200);
        });
        wcLoading.close();
        //让层自适应iframe
        //layer.iframeAuto(index);
    })
</script>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-tab layui-tab-brief" lay-filter="tab" style="margin: 0px">
            <ul class="layui-tab-title">
                <li class="layui-this">表单预览</li>
                <li>流程预览</li>
            </ul>
            <div class="layui-tab-content">
                <input type="text" name="valueList" id="valueList" class="layui-hide" hidden>
                <div class="layui-tab-item layui-fluid layui-show">
                    <form class="layui-form layuimini-form">
                        <div class="layui-form-item">
                            <fieldset class="layui-elem-field" style="padding-top:15px;">
                                <div id="frmPreview"></div>
                            </fieldset>
                        </div>
                    </form>
                </div>
                <div class="layui-tab-item">
                    <div id="flowPanel" style=""></div>
                </div>
            </div>
        </div>
    </div>
</div>