<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改菜单')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-guidance-edit" th:object="${guidanceNode}">
        <input name="tsGuidanceId" type="hidden" th:field="*{tsGuidanceId}"/>
        <input id="treeId" name="parentId" type="hidden" th:field="*{parentId}"/>
        <div class="form-group">
            <label class="col-sm-3 control-label ">上级项：</label>
            <div class="col-sm-8">

                <div class="input-group">
                    <input class="form-control" type="text" onclick="selectGuidanceTree()" id="treeName" readonly="true"
                           th:value="${guidanceNode.parentName == null ? '无' : guidanceNode.parentName}">
                    <span class="input-group-addon"><i class="fa fa-search"></i></span>
                </div>
            </div>
        </div>


        <div class="form-group1">
            <label class="col-sm-3 control-label">事项分类：</label>
            <div class="col-sm-8">
                <div class="radio-box">
                    <input type="radio" th:id="115" name="zName" th:value="zdzmq"
                           th:with="type=${@dict.getType('zName')}"
                           th:field="${guidanceNode.zName}"><!--判断是否和value="zdzmq"相等如果相等回显-->
                    <label th:for="115" th:text="正定自贸区"></label>
                </div>
                <div class="radio-box">
                    <input type="radio" th:id="116" name="zName" th:value="zdxq"
                           th:with="type=${@dict.getType('zName')}"
                           th:field="${guidanceNode.zName}">
                    <label th:for="116" th:text="正定新区"></label>
                </div>
                <div class="radio-box">
                    <input type="radio" th:id="117" name="zName" th:value="zdx"
                           th:with="type=${@dict.getType('zName')}"
                           th:field="${guidanceNode.zName}">
                    <label th:for="117" th:text="正定县"></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" id="itemName">事项分类名称：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="guidanceName" id="guidanceName" th:field="*{guidanceName}"
                       required>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">指南类型：</label>
            <div class="col-sm-8">
                <div class="radio-box">
                    <input type="radio" th:id="103" name="guidanceType"
                           th:value="M" th:field="${guidanceNode.guidanceType}">
                    <label th:for="103" th:text="目录"></label>
                </div>
                <div class="radio-box">
                    <input type="radio" th:id="104" name="guidanceType" th:value="W"
                           th:field="${guidanceNode.guidanceType}">
                    <label th:for="104" th:text="办事指南"></label>
                </div>
            </div>
        </div>
        <div class="form-group" th:if="*{iconUrl!=null&&iconUrl.length()>1}">
            <label class="col-sm-3 control-label">上次上传图标：</label>
            <div class="col-sm-8" id="oldIconUrl">
                <a th:href="*{iconUrl}" target="_blank">
                    <img th:src="*{iconUrl}" class="img-rounded col-sm-3"/>
                </a>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">上传科室图标：</label>
            <div class="col-sm-3" id="iconUrl">
                <input id="file-icon" type="file" name="iconFile" multiple/>
            </div>
        </div>
        <!--        办事指南文档-->
        <div class="form-group">
            <label class="col-sm-3 control-label">上传办事指南文档：</label>
            <div class="col-sm-8" id="docNameZ">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"></label>
            <div class="col-sm-8" id="docUrl">
                <input style="height: 50px;width:50px" id="file-doc" type="file" name="docFile" multiple
                       placeholder="选择上传文件"/>
            </div>
        </div>
        <!--        示范文档-->
        <div class="form-group">
            <label class="col-sm-3 control-label">上传示范文档：</label>
            <div class="col-sm-8" id="docNameS">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"></label>
            <div class="col-sm-8" id="docUrl2">
                <input style="height: 50px;width:50px" id="file-doc2" type="file" name="docFile" multiple/>
            </div>
        </div>
        <!--        空白文档-->
        <div class="form-group">
            <label class="col-sm-3 control-label">上传空白文档：</label>
            <div class="col-sm-8" id="docNameK">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"></label>
            <div class="col-sm-8" id="docUrl3">
                <input style="height: 50px;width:50px" id="file-doc3" type="file" name="docFile" multiple/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">显示排序：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="orderNum" th:field="*{orderNum}" required>
            </div>
        </div>
          <!--      <div class="form-group">
                    <label class="col-sm-3 control-label">显示状态：</label>
                    <div class="col-sm-8">
                        <div class="radio-box" th:each="dict : ${@dict.getType('sys_show_hide')}">
                            <input type="radio" th:id="${dict.dictCode}" name="visible" th:value="${dict.dictValue}"
                                   th:field="*{visible}">
                            <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                        </div>
                    </div>
                </div>-->
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:inline="javascript">

    var prefix = ctx + "system/touchscreen/guidance";
    var iconUrl = [[${guidanceNode.iconUrl}]];
    $(function () {
        var type = $('input[name="guidanceType"]:checked').val();
        show2Hide(type);
        $(":radio").on('ifChecked',
            function (event) {
                var guidanceType = $(event.target).val();
                show2Hide(guidanceType);
            });
    });
    $(document).ready(function () {
        initUploadDoc();
        initUploadIcon();
        var filedocs = JSON.parse([[${guidanceNode.files}]]);
        initOldDoc(filedocs);
    });
    var filedocs1 = [];
    var filedocs2 = [];
    var filedocs3 = [];
    var delIds = [];

    function initOldDoc(val) {
        for (var mapType in val) {
            // $("#docName" + mapType).html("");
            var list = val[mapType];
            console.log(list);
            for (var i = 0; i < list.length; i++) {
                var str = '<div id="' + list[i]["id"] + '"><a target="_blank" href="' + list[i]['url'] + '">' + list[i]['name'] + '</a>      ' +
                    '<i style="color: red" class="fa fa-times" onclick="delFile(\'' + list[i]['id'] + '\',\'' + mapType + '\')"></i></div>';
                $("#docName" + mapType).append(str);
            }
        }
    }

    function delFile(id, type) {
        if (type == "Z") {
            for (var i = 0; i < filedocs1.length; i++) {
                if (filedocs1[i]["id"] == id) {
                    filedocs1.splice(i, 1);
                }
            }
        }
        if (type == "S") {
            for (var i = 0; i < filedocs2.length; i++) {
                if (filedocs2[i]["id"] == id) {
                    filedocs2.splice(i, 1);
                }
            }
        }
        if (type == "K") {
            for (var i = 0; i < filedocs3.length; i++) {
                if (filedocs3[i]["id"] == id) {
                    filedocs3.splice(i, 1);
                }
            }
        }
        $("#" + id).remove();
        delIds.push(id);
    }

    function initUploadDoc() {
        $('#file-doc').fileinput({
            language: 'zh', //设置语言
            uploadUrl: prefix + "/uploadDoc",
            theme: "fa",
            allowedFileExtensions: ['doc', 'docx', 'xls', 'xlsx', 'pdf'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: true,//是否显示标题
            showRemove: false,
            showPreview: true,
            autoReplace: false,
            uploadAsync: true,
            dropZoneEnabled: false,
            msgPlaceholder: '单击右侧“选择”文件按钮',
            showClose: false,
            browseOnZoneClick: true,
        }).on("fileuploaded", function (e, data) {
            var res = data.response;
            var map = {"name": res.filename, "url": res.fileurl};
            filedocs1.push(map);
            initOldDoc({"Z": filedocs1, "S": filedocs2, "K": filedocs3});
            console.log(filedocs1);
        });
        $('#file-doc2').fileinput({
            language: 'zh', //设置语言
            uploadUrl: prefix + "/uploadDoc",
            theme: "fa",
            allowedFileExtensions: ['doc', 'docx', 'xls', 'xlsx', 'pdf'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: true,//是否显示标题
            showRemove: false,
            showPreview: true,
            autoReplace: false,
            uploadAsync: true,
            msgPlaceholder: '单击右侧“选择”文件按钮',
            dropZoneEnabled: false,
            showClose: false,
            browseOnZoneClick: true,
        }).on("fileuploaded", function (e, data) {
            var res = data.response;
            var map = {"name": res.filename, "url": res.fileurl};
            filedocs2.push(map);
            initOldDoc({"Z": filedocs1, "S": filedocs2, "K": filedocs3});
            console.log(filedocs2);
        });
        $('#file-doc3').fileinput({
            language: 'zh', //设置语言
            uploadUrl: prefix + "/uploadDoc",
            theme: "fa",
            allowedFileExtensions: ['doc', 'docx', 'xls', 'xlsx', 'pdf'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: true,//是否显示标题
            showRemove: false,
            showPreview: true,
            autoReplace: false,
            uploadAsync: true,
            dropZoneEnabled: false,
            msgPlaceholder: '单击右侧“选择”文件按钮',
            showClose: false,
            browseOnZoneClick: true,
        }).on("fileuploaded", function (e, data) {
            var res = data.response;
            var map = {"name": res.filename, "url": res.fileurl};
            filedocs3.push(map);
            initOldDoc({"Z": filedocs1, "S": filedocs2, "K": filedocs3});
            console.log(filedocs3);
        });
    }

    function initUploadIcon() {
        var control = $('#file-icon');
        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: prefix + "/uploadIcon",
            theme: "fa",
            height: 300,
            width: 500,
            maxFileCount: 1,
            allowedFileExtensions: ['png', 'jpg', 'jpeg'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            showRemove: false,
            autoReplace: false,
            uploadAsync: true,
            showClose: false,
            browseOnZoneClick: true,
        }).on("fileuploaded", function (e, data) {
            var res = data.response;
            iconUrl = res.iconUrl;
        });
    }

    $("#form-guidance-edit").validate({
        onkeyup: false,
        rules: {
            guidanceType: {
                required: true,
            },
            guidanceName: {
                required: true,
            },
            orderNum: {
                digits: true
            },
        },
        messages: {
            "guidanceName": {
                remote: "事项已经存在"
            }
        },
        focusCleanup: true
    });

    function submitHandler() {
        var type = $('input[name="guidanceType"]:checked').val();
        if ($.validate.form()) {
            if (type != "M") {
                var data = $("#form-guidance-edit").serializeArray();
                var files = {};
                files["Z"] = filedocs1;
                files["S"] = filedocs2;
                files["K"] = filedocs3;
                console.log(JSON.stringify(files));
                data.push({"name": "files", "value": JSON.stringify(files)});
                data.push({"name": "delIds", "value": delIds});
                $.operate.save(prefix + "/edit", data);
            } else {
                var data = $("#form-guidance-edit").serializeArray();
                data.push({"name": "iconUrl", "value": iconUrl});
                $.operate.save(prefix + "/edit", data);
            }
        }
    }

    function show2Hide(type) {
        if (type == "M") {
            $("#itemName").html("事项分类名称：");
            $("#iconUrl").parents(".form-group").show();
            $("#oldIconUrl").parents(".form-group").show();
            //---------
            $("#docUrl").parents(".form-group").hide();
            $("#docUrl2").parents(".form-group").hide();
            $("#docUrl3").parents(".form-group").hide();
            $("#docNameZ").parents(".form-group").hide();
            $("#docNameS").parents(".form-group").hide();
            $("#docNameK").parents(".form-group").hide();
        } else {
            $("#itemName").html("事项名称：");
            $("#iconUrl").parents(".form-group").hide();
            $("#oldIconUrl").parents(".form-group").hide();
            //----
            $("#docUrl").parents(".form-group").show();
            $("#docUrl2").parents(".form-group").show();
            $("#docUrl3").parents(".form-group").show();
            $("#docNameZ").parents(".form-group").show();
            $("#docNameS").parents(".form-group").show();
            $("#docNameK").parents(".form-group").show();
        }
    }

    /*菜单管理-修改-选择菜单树*/
    function selectGuidanceTree() {
        var guidanceId = $("#treeId").val();
        if (guidanceId > 0) {
            var url = prefix + "/selectGuidanceTree/" + guidanceId;
            $.modal.open("选择事项", url, '380', '380');
        } else {
            $.modal.alertError("科室不可更改上级");
        }
    }

    function selectGuidanceTree() {
        var guidanceId = $("#treeId").val();
        if (guidanceId > 0) {
            var url = prefix + "/selectGuidanceTree/" + guidanceId;
            var options = {
                title: '事项选择',
                width: "380",
                url: url,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        } else {
            $.modal.alertError("科室不可更改上级");
        }
    }

    function doSubmit(index, layero) {
        var body = layer.getChildFrame('body', index);
        $("#treeId").val(body.find('#treeId').val());
        $("#treeName").val(body.find('#treeName').val());
        layer.close(index);
    }
</script>
</body>
</html>
