<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
    <meta name="decorator" content="base" />
    <link rel="stylesheet" href="${ctxPlugin}/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script src="${ctxPlugin}/lib/zTree/v3/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="${ctxPlugin}/lib/zTree/v3/js/jquery.ztree.core-3.5.min.js"></script>
    <script type="text/javascript" src="${ctxPlugin}/lib/zTree/v3/js/jquery.ztree.excheck-3.5.js"></script>
    <link rel="stylesheet" type="text/css" href="${ctxPlugin}/static/css/reset.css"/>
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.css" media="all">
    <style>

        .sf-role-item li{ padding: 10px 0px; display: inline-block; width: 48%; margin: 0 1%;}
        .layui-card{box-shadow: none;}
        .left-tree{ height: calc(100vh - 70px); border-right: 1px solid #f0f0f0; margin-right: 15px; padding-left: 6px;overflow: auto }
        .left-tree dt{ font-size: 14px; font-weight: 600; padding: 5px 0; }
        .left-tree dd{ padding:5px 10px }
        .left-tree dd a.actived{color: #0a6597}
        .fieldTable{ margin: 0}
        .fieldTable td, th {
            text-align: center !important;
        }
        .bj-img {
            margin-right: 0;
        }
        .sjbtn{position: absolute; top:12px; right: 20px; font-size: 14px}
    </style>
</head>
<body>

<div class="layui-fluid layui-form" id="LAY-app-message">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <%--<ul class="layui-tab-title">
                <sfTags:pagePermission authFlag="XTSZ_BDSZ_BDSZ_T" html='<li class="layui-this sf-tab"><a href="${ctx}/form/set/index">表单设置</a></li>'/>
            </ul>--%>
            <ul class="layui-tab-title" style="position: relative">
                <li class="layui-this">表单设置</li>
                <li class="">附件设置</li>
                <a class="layui-btn sjbtn layui-hide" id="sjbtn">设计示例图</a>
            </ul>
            <div class="layui-tab-content">
                <div style="display: flex;">
                    <div style="width: 15%">
                        <div class="left-tree" id="table1">
                            <c:forEach items="${partnerStep}" var="ps">
                            <dl rel="${ps.id}">
                                <dt>${ps.name}</dt>
                                <c:forEach items="${ps.steps}" var="step">
                                <dd rel="${step.id}"><a onclick="searchList(this)">${step.name}</a></dd>
                                </c:forEach>
                            </dl>
                            </c:forEach>
                        </div>
                    </div>
                    <div style="width: 85%;">
                        <table class="layui-table fieldTable">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>字段名称</th>
                                <th>字段类型</th>
                                <th>分组</th>
                                <th>组内排序</th>
                                <th>是否启用</th>
                                <th>是否必填</th>
                            </tr>
                            </thead>
                            <tbody id="tableBody1">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-tab-content layui-hide">
                <div style="display: flex;">
                    <div style="width: 15%">
                        <div class="left-tree" id="table2">
                            <c:forEach items="${partnerStep}" var="ps">
                            <dl rel="${ps.id}">
                                <dt>${ps.name}</dt>
                                <c:forEach items="${ps.steps}" var="step">
                                <dd rel="${step.id}"><a onclick="searchListTwo(this)">${step.name}</a></dd>
                                </c:forEach>
                            </dl>
                            </c:forEach>
                        </div>
                    </div>
                    <div style="width: 85%;">
                        <table class="layui-table fieldTable">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>字段名称</th>
                                <th>字段类型</th>
                                <th>分组</th>
                                <th>组内排序</th>
                                <th>是否启用</th>
                                <th>是否必填</th>
                            </tr>
                            </thead>
                            <tbody id="tableBody2">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="uploader"/>
</div>

<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.js"></script>
<script type="text/javascript">
    //图片查看效果
    var viewer = new Viewer(document.getElementById('LAY-app-message'));
    var form;
    var partner;
    var partner2;
    var isTab = 0;
    var imgsId;
    var imgsDiv;
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'jquery', 'layer','form','upload'], function(){
        var layer = layui.layer;
        var $ = layui.jquery;
        form = layui.form;
        var element = layui.element;
        var upload = layui.upload;

        element.on('tab(docDemoTabBrief)', function (data) {
            isTab = data.index;
            $('.layui-tab-content').eq(data.index).removeClass('layui-hide').siblings('.layui-tab-content').addClass('layui-hide');
        });

        $("#table1").find("dl").eq(0).find("dd").eq(0).children().click();
        $("#table2").find("dl").eq(0).find("dd").eq(0).children().click();

        $("#saveMenusBtn").on("click", function(){
            var nodes = ztreeNode.getCheckedNodes(true);
            var permissions = "";
            for(var i = 0; i < nodes.length; i++){
                permissions += "," + nodes[i].id;
            }
            if(permissions != ""){
                permissions = permissions.substring(1);
            }
            var roleId = getCurrentRoleId();
            $.post('${ctx}/member/saveMemberRoleMenus', {roleId: roleId, permission:permissions}, function(result){
                if("ok" == result){
                    layer.msg("保存成功", {icon:1});
                }else{
                    layer.msg("保存失败", {icon:2});
                }
            });
        });

        // 选中
        $(document).on('click', '.layui-form-switch', function () {
            let stopFlag = $(this).hasClass("layui-disabled");
            if (stopFlag) {
                return;
            }
            let hasClass = $(this).hasClass("layui-form-onswitch");
            let attr = "0";
            if (hasClass) {
                attr = "1";
            }
            let id = $(this).parent().attr("rel");
            let type = $(this).parent().attr("ref");
            if (isTab === 0) {
                saveChangeInfo(id, type, partner, attr);
            } else {
                saveChangeInfo(id, type, partner2, attr);
            }
        })

        upload.render({
            elem: '#uploader' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path);
                // 保存图片
                saveChangeInfo(imgsId, "3", partner2, res.path);
            }
            , error: function () {
                //请求异常回调
            }
        });

            // 设计实例图
            $(document).on('click', '#sjbtn', function () {
                layer.open({
                    type: 2
                    , title: '设计示例图'
                    , area: ['80%', '90%']
                    , content: '${ctx}/form/set/toSetExampleImg?stageId=02'
                })
        })
    });

    var nodes;
    var ztreeNode;
    var setting = {
        // { "Y" : "ps", "N" : "ps" }
        check: {enable: true,       chkboxType : { "Y" : "ps", "N" : "ps" }},
        data: {simpleData: {enable: true,idKey: "id",pIdKey: "pid",rootPId: 0}}
    };



    function loadTreeNodes(isNew){
        var roleId = getCurrentRoleId();
        var roleName = $("#role-item-" + roleId).text();
        $("#currentRole").val(roleName);
        $.get('${ctx}/member/getMenus', {roleId: roleId}, function(data){
            nodes = eval(data);
            ztreeNode = $.fn.zTree.init($("#treeDemo"), setting, nodes);
            ztreeNode.expandAll(false);
        });
    }

    function getCurrentRoleId(){
        var roleId = $(".role-selected").closest("li").attr("sf-role-id");
        return roleId;
    }

    function saveChangeInfo(id, type, partner, attr) {
        $.ajax({
            type: "POST",
            url: '${ctx}/form/set/changePartnerSet',
            data: {
                id: id,
                type: type,
                partner: partner,
                attr: attr
            }, success: function (result) {
                if (result.code === "200") {
                    layer.msg("保存成功", {time: 1000});
                } else {

                    layer.msg(result.errMsg, {time: 2000});
                }
            }
        })
    }

    function searchList(that) {
        let step = $(that).parent().attr("rel");
        partner = $(that).parent().parent().attr("rel");
        $.get('${ctx}/form/set/getList', {
            step: step,
            partner: partner,
            type: "1",
            selectUsed: "0"
        }, function (data) {
            $("#table1 .actived").removeClass("actived");
            $(that).addClass("actived");
            let html = '';
            let j = 1;
            for (let i = 0; i < data.length; i++) {
                html += '<tr>';
                html += '<td>' + j + '</td>';
                html += '<td>' + data[i].columnName + '</td>';
                html += '<td>' + changeColumnType(data[i].columnType) + '</td>';
                html += '<td>' + data[i].groupTypeName + '</td>';
                html += '<td>' + data[i].sort + '</td>';
                if (data[i].parentMustFillFlag === "1" || data[i].limitFlag === "1") {
                    html += '<td ref="1" rel="' + data[i].id + '"><input type="checkbox" lay-text="是|否" name="switch" lay-skin="switch" checked disabled></td>';
                    html += '<td ref="2" rel="' + data[i].id + '"><input type="checkbox" lay-text="是|否" name="switch" lay-skin="switch" checked disabled></td>';
                } else {
                    if (data[i].useFlag === "1") {
                        html += '<td ref="1" rel="' + data[i].id + '"><input type="checkbox" lay-text="是|否" name="switch" lay-skin="switch" checked></td>';
                    } else {
                        html += '<td ref="1" rel="' + data[i].id + '"><input type="checkbox" lay-text="是|否" name="switch" lay-skin="switch"></td>';
                    }
                    if (data[i].mustFillFlag === "1") {
                        html += '<td ref="2" rel="' + data[i].id + '"><input type="checkbox" lay-text="是|否" name="switch" lay-skin="switch" checked></td>';
                    } else {
                        html += '<td ref="2" rel="' + data[i].id + '"><input type="checkbox" lay-text="是|否" name="switch" lay-skin="switch"></td>';
                    }
                }
                html += '</tr>';
                j++;
            }
            $("#tableBody1").empty().html(html);
            form.render();
        });
    }

    function searchListTwo(that) {
        let step = $(that).parent().attr("rel");
        partner2 = $(that).parent().parent().attr("rel");
        if(step=='02'){
            $("#sjbtn").removeClass('layui-hide');
        }else{
            $("#sjbtn").addClass('layui-hide');
        }
        $.get('${ctx}/form/set/getList', {
            step: step,
            partner: partner2,
            type: "2",
            selectUsed: "0"
        }, function (data) {
            $("#table2 .actived").removeClass("actived");
            $(that).addClass("actived");
            let html = '';
            let j = 1;
            for (let i = 0; i < data.length; i++) {
                html += '<tr>';
                html += '<td>' + j + '</td>';
                html += '<td>' + data[i].columnName + '</td>';
                html += '<td>' + changeColumnType(data[i].columnType) + '</td>';
                html += '<td>' + data[i].groupTypeName + '</td>';
                html += '<td>' + data[i].sort + '</td>';
                if (data[i].parentMustFillFlag === "1" || data[i].limitFlag === "1") {
                    html += '<td ref="1" rel="' + data[i].id + '"><input type="checkbox" lay-text="是|否" name="switch" lay-skin="switch" checked disabled></td>';
                    html += '<td ref="2" rel="' + data[i].id + '"><input type="checkbox" lay-text="是|否" name="switch" lay-skin="switch" checked disabled></td>';
                } else {
                    if (data[i].useFlag === "1") {
                        html += '<td ref="1" rel="' + data[i].id + '"><input type="checkbox" lay-text="是|否" name="switch" lay-skin="switch" checked></td>';
                    } else {
                        html += '<td ref="1" rel="' + data[i].id + '"><input type="checkbox" lay-text="是|否" name="switch" lay-skin="switch"></td>';
                    }
                    if (data[i].mustFillFlag === "1") {
                        html += '<td ref="2" rel="' + data[i].id + '"><input type="checkbox" lay-text="是|否" name="switch" lay-skin="switch" checked></td>';
                    } else {
                        html += '<td ref="2" rel="' + data[i].id + '"><input type="checkbox" lay-text="是|否" name="switch" lay-skin="switch"></td>';
                    }
                }
                html += '</tr>';
                j++;
            }
            $("#tableBody2").empty().html(html);
            form.render();
            viewer.update();
        });
    }

    function uploadImg(id) {
        imgsId = id;
        imgsDiv = "imgsDiv" + id;
        $("#uploader").click();
    }

    function addImg(data) {
        $("#" + imgsId).hide();
        let html = '<div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImg(this,\'' + imgsId + '\')"></span>';
        html += '<img src="${commonStaticImgPath}' + data + '" height="700" width="1200"/>';
        $("#" + imgsDiv).append(html);
        //图片查看效果
    }

    function delImg(that, id) {
        $("#" + id).show();
        $(that).parent().remove();
    }

    function changeColumnType(columnType) {
        let str = "";
        if (columnType.indexOf("1") >= 0) {
                str = "下拉选择框";
        }
        if (columnType.indexOf("2") >= 0) {
            if (isBlank(str)) {
                str = "文本输入框";
            } else {
                str += "+文本输入框";
            }
        }
        if (columnType.indexOf("3") >= 0) {
            if (isBlank(str)) {
                str = "日期选择框";
            } else {
                str += "+日期选择框";
            }
        }
        if (columnType.indexOf("4") >= 0) {
            if (isBlank(str)) {
                str = "单选";
            } else {
                str += "+单选";
            }
        }
        if (columnType.indexOf("5") >= 0) {
            if (isBlank(str)) {
                str = "文本显示框";
            } else {
                str += "+文本显示框";
            }
        }
        if (columnType.indexOf("6") >= 0) {
            if (isBlank(str)) {
                str = "整数输入框";
            } else {
                str += "+整数输入框";
            }
        }
        if (columnType.indexOf("7") >= 0) {
            if (isBlank(str)) {
                str = "数字输入框";
            } else {
                str += "+数字输入框";
            }
        }
        if (columnType.indexOf("8") >= 0) {
            if (isBlank(str)) {
                str = "文件上传";
            } else {
                str += "+文件上传";
            }
        }
        if (columnType.indexOf("9") >= 0) {
            if (isBlank(str)) {
                str = "图片上传";
            } else {
                str += "+图片上传";
            }
        }
        if (columnType.indexOf("a") >= 0) {
            if (isBlank(str)) {
                str = "视频上传";
            } else {
                str += "+视频上传";
            }
        }
        if (columnType.indexOf("b") >= 0) {
            if (isBlank(str)) {
                str = "文件显示";
            } else {
                str += "+文件显示";
            }
        }
        if (columnType.indexOf("c") >= 0) {
            if (isBlank(str)) {
                str = "图纸上传";
            } else {
                str += "+图纸上传";
            }
        }
        return str;
    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }
</script>
</body>
</html>
