<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改磁贴')"/>
    <th:block th:include="include :: cropbox-css"/>
    <style>
        .bg-sm {
            width: 119px;
            height: 109px;
            font-size: 75px;
            color: black;
            text-align: center
        }
        .bg-md {
            width: 180px;
            height: 150px;
            font-size: 105px;
            color: black;
            text-align: center
        }
        .bg-lg {
            width: 365px;
            height: 160px;
            font-size: 115px;
            color: black;
            text-align: center
        }
        .thumbBox_S {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 238px;
            height: 218px;
            margin-left: -119px;
            margin-top: -109px;
            box-sizing: border-box;
            border: 1px solid rgb(102, 102, 102);
            box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
            background: none repeat scroll 0% 0% transparent;
        }
        .thumbBox_M {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 360px;
            height: 300px;
            margin-left: -180px;
            margin-top: -150px;
            box-sizing: border-box;
            border: 1px solid rgb(102, 102, 102);
            box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
            background: none repeat scroll 0% 0% transparent;
        }
        .thumbBox_L {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 730px;
            height: 320px;
            margin-left: -365px;
            margin-top: -160px;
            box-sizing: border-box;
            border: 1px solid rgb(102, 102, 102);
            box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
            background: none repeat scroll 0% 0% transparent;
        }
        .imageBox_S {
            margin: 0 auto;
            width: 400px;
        }
        .imageBox_M {
            margin: 0 auto;
            width: 400px;
        }
        .imageBox_L {
            margin: 0 auto;
            width: 800px;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="div1">
    <form class="form-horizontal m" id="form-magnet-edit" th:object="${wxMagnet}">
        <input type="hidden" name="magnetId" th:field="*{magnetId}">

        <div class="form-group">
            <label class="col-sm-3 control-label"><span style="color: red; ">*</span>磁贴类型：</label>
            <div class="col-sm-8">
                <select name="magnetType" id="sel_magnetType" class="form-control m-b"
                        th:with="type=${@dict.getType('sys_magnet_type')}"
                        onchange="javascript:magnetTypeChange()">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="*{magnetType}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"><span style="color: red; ">*</span>磁贴入口：</label>
            <div class="col-sm-8">
                <select name="userType" id="sel_userType" class="form-control m-b"
                        th:with="type=${@dict.getType('sys_system_name')}"
                        onchange="javascript:magnetTypeChange()">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="*{userType}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"><span style="color: red; ">*</span>磁贴名称：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="magnetName" id="magnetName" th:field="*{magnetName}"
                       required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"><span style="color: red; ">*</span>显示排序：</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"><span style="color: red; ">*</span>磁贴尺寸：</label>
            <div class="col-sm-8">
                <select name="magnetSize" id="sel_magnetSize" class="form-control m-b"
                        th:with="type=${@dict.getType('wx_magnet_size')}" onchange="javascript:sizeChange()">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="*{magnetSize}"></option>
                </select>
            </div>
        </div>
        <div class="form-group" style="display: none;">
            <label class="col-sm-3 control-label"><span style="color: red; ">*</span>请求地址：</label>
            <div class="col-sm-8">
                <input id="url" name="url" class="form-control" type="text" th:field="*{url}" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">背景图片：</label>
            <div class="col-sm-8">
                <input id="input_bgUrl" name="bgUrl" th:field="*{bgUrl}" type="hidden"/>
                <div class="thumbnail slideshow_span" id="div-bgUrl" onclick="javascript:bgUpload('bg')">
                    <img th:src="@{*{bgUrl}}" style="width:100%;height:100%;">
                </div>
            </div>
        </div>

        <div class="form-group" style="display: none;">
            <label class="col-sm-3 control-label">小程序二维码：</label>
            <div class="col-sm-8">
                <input id="input_appletQrUrl" name="appletQrUrl" th:field="*{appletQrUrl}" type="hidden"/>
                <div class="thumbnail slideshow_span bg-sm" id="div-appletQrUrl" onclick="javascript:bgUpload('qr')">
                    <img th:src="@{*{appletQrUrl}}" style="width:100%;height:100%;">
                </div>
            </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>
        <div class="form-group">
            <label class="col-sm-3 control-label">磁贴标记父结构：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="fatherMagnet" id="fatherMagnet" th:field="*{fatherMagnet}"
                       >
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注：</label>
            <div class="col-sm-8">
                <textarea id="remark" name="remark" class="form-control" type="text" th:field="*{remark}"></textarea>
            </div>
        </div>
    </form>
</div>

<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="div2" style="display: none">
    <div id="imageBox">
        <div id="thumbBox"></div>
        <div class="spinner" style="display: none">Loading...</div>
    </div>
    <div class="action" style="margin: 10px auto;">
        <div class="new-contentarea tc">
            <a href="javascript:void(0)" class="upload-img"> <label for="avatar">选择图片</label> </a>
            <input type="file" class="" name="avatar" id="avatar" accept="image/*"/>
        </div>
        <input type="button" id="submitbuttonBg" onclick="upBg()" class="btn-info Btnsty_peyton" value="上传"/>
        <input type="button" id="submitbuttonQr" onclick="upQr()" class="btn-info Btnsty_peyton" value="上传"/>
        <input type="button" onclick="back()" class="btn-info Btnsty_peyton " value="返回"/>
    </div>

</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: cropbox-js"/>
<script th:inline="javascript">
    var prefix = ctx + "wxportal/magnet";
    var cropper;
    var size = "S";
    var magnet_type = "0";
    var options = {
        thumbBox: '.thumbBox_' + size,
        spinner: '.spinner',
        imgSrc: ctx + 'img/profile.jpg'
    }
    $(function () {
        var magnetType = $("#sel_magnetType").val();
        var $appletQrUrl = $("#input_appletQrUrl").parents(".form-group");
        var $url = $("#url").parents(".form-group");
        if (magnetType == "1") {
            $appletQrUrl.removeAttr('disabled');
            $appletQrUrl.show();
            $url.attr('disabled', 'disabled');
            $url.hide();
        } else {
            $url.removeAttr('disabled');
            $url.show();
            $appletQrUrl.attr('disabled', 'disabled');
            $appletQrUrl.hide();
        }
        $("#form-magnet-edit").validate({
            onkeyup: false,
            rules: {
                url: {
                    required: true,
                },
                magnetName: {
                    remote: {
                        url: prefix + "/checkMagnetNameUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                            "magnetId": function () {
                                return $("#magnetId").val();
                            },
                            "magnetName": function () {
                                return $.common.trim($("#magnetName").val());
                            }
                        },
                        dataFilter: function (data, type) {
                            return $.validate.unique(data);
                        }
                    }
                },
                orderNum: {
                    digits: true
                },

            },
            messages: {
                "magnetName": {
                    remote: "菜单已经存在"
                }
            },
            focusCleanup: true
        });

        $('#avatar').on('change', function () {
            var reader = new FileReader();
            reader.onload = function (e) {
                options.imgSrc = e.target.result;
                //根据MIME判断上传的文件是不是图片类型
                if ((options.imgSrc).indexOf("image/") == -1) {
                    $.modal.alertWarning("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
                } else {
                    cropper = $('.imageBox').cropbox(options);
                }
            }
            reader.readAsDataURL(this.files[0]);
        })


        $('#btnZoomIn').on('click', function () {
            cropper.zoomIn();
        })

        $('#btnZoomOut').on('click', function () {
            cropper.zoomOut();
        })


        sizeChange();
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/edit", $('#form-magnet-edit').serialize());
        }
    }

    function back() {
        $("#div1").show();
        $("#div2").hide();
    }

    /*上传背景图片*/
    function bgUpload(value) {
        var imgUrl = null;
        if (value == 'bg') {
            $("#submitbuttonQr").hide();
            $("#submitbuttonBg").show();
            imgUrl = ctx + $("#input_bgUrl").val();
        } else if (value == 'qr') {
            $("#submitbuttonBg").hide();
            $("#submitbuttonQr").show();
            imgUrl = ctx + $("#input_appletQrUrl").val();
        }
        $("#div1").hide();
        $("#div2").show();

        if (imgUrl == null || imgUrl == '') {
            imgUrl = ctx + 'img/profile.jpg';
        }
        options = {
            thumbBox: '.thumbBox_' + size,
            spinner: '.spinner',
            imgSrc: imgUrl
        }
        cropper = $('.imageBox').cropbox(options);
    }

    function upBg() {
        var img = cropper.getBlob();
        var formdata = new FormData();
        formdata.append("file", img);
        $.ajax({
            url: ctx + "common/upload",
            data: formdata,
            type: "post",
            processData: false,
            contentType: false,
            success: function (result) {
                if (result.code == 0) {
                    $("#input_bgUrl").val(result.data.fileName);
                    $("#div-bgUrl").html("<img src='" + result.data.url + "' style='width:100%;height:100%;'>");
                    $("#div1").show();
                    $("#div2").hide();
                } else {
                    $("#div1").show();
                    $("#div2").hide();
                    $.modal.alertWarning(result.msg);
                }

            }
        })
    }

    function upQr() {
        var img = cropper.getBlob();
        var formdata = new FormData();
        formdata.append("file", img);
        $.ajax({
            url: ctx + "common/upload",
            data: formdata,
            type: "post",
            processData: false,
            contentType: false,
            success: function (result) {
                if (result.code == 0) {
                    $("#input_appletQrUrl").val(result.data.fileName);
                    $("#div-appletQrUrl").html("<img src='" + result.data.url + "' style='width:100%;height:100%;'>");
                    $("#div1").show();
                    $("#div2").hide();
                } else {
                    $("#div1").show();
                    $("#div2").hide();
                    $.modal.alertWarning(result.msg);
                }

            }
        })
    }

    function sizeChange() {
        size = $("#sel_magnetSize").val();
        $("#div-bgUrl").removeClass("bg-sm");
        $("#div-bgUrl").removeClass("bg-md");
        $("#div-bgUrl").removeClass("bg-lg");
        $("#imageBox").removeClass();
        $("#thumbBox").removeClass();
        if (size == "l" || size == "L") {
            $("#div-bgUrl").addClass("bg-lg");
            size = "L";
            $("#imageBox").addClass("imageBox imageBox_L");
            $("#thumbBox").addClass("thumbBox_L");
        } else if (size == "m" || size == "M") {
            $("#div-bgUrl").addClass("bg-md");
            size = "M";
            $("#imageBox").addClass("imageBox imageBox_M");
            $("#thumbBox").addClass("thumbBox_M");
        } else if (size == "s" || size == "S") {
            $("#div-bgUrl").addClass("bg-sm");
            size = "S";
            $("#imageBox").addClass("imageBox imageBox_S");
            $("#thumbBox").addClass("thumbBox_S");
        }
    }

    function magnetTypeChange() {
        magnet_type = $("#sel_magnetType").val();
        var $appletQrUrl = $("#input_appletQrUrl").parents(".form-group");
        var $url = $("#url").parents(".form-group");
        if (magnet_type == "1") {
            $("#imageBox").addClass("imageBox imageBox_S");
            $("#thumbBox").addClass("thumbBox_S");
            $appletQrUrl.removeAttr('disabled');
            $appletQrUrl.show();
            $url.attr('disabled', 'disabled');
            $url.hide();
        } else {
            $appletQrUrl.attr('disabled', 'disabled');
            $appletQrUrl.hide();
            $("#input_appletQrUrl").val("");
            $url.removeAttr('disabled');
            $url.show();
        }
    }

</script>
</body>
</html>
