<!DOCTYPE html>
<html>
<head>
    <:include file="../common/css.html" title="商店设置管理"/>
    <style>
        .layui-upload-img {
            height: 120px;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid" style="padding-bottom: 65px;">

    <form lay-filter="shopSettingsForm" class="layui-form">
        <div class="layui-card">
            <div class="layui-card-header">
                商店设置
            </div>
            <div class="layui-card-body">

                <input name="id" type="hidden"/>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">微信通知:</label>
                    <div class="layui-input-block">
                        <input type="radio" name="isWxpusher" value="1" title="开启" checked>
                        <input type="radio" name="isWxpusher" value="0" title="关闭">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">AppToken:</label>
                    <div class="layui-input-block">
                        <input name="appToken" placeholder="请输入wxpusher AppToken" class="layui-input"
                               lay-verify="required" required/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">邮件通知:</label>
                    <div class="layui-input-block">
                        <input type="radio" name="isEmail" value="1" title="开启" checked>
                        <input type="radio" name="isEmail" value="0" title="关闭">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">客服QQ:</label>
                    <div class="layui-input-block">
                        <input name="qqCustomerService" placeholder="请输入客服QQ号码" class="layui-input"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">网站客服:</label>
                    <div class="layui-input-block">
                        <input type="radio" name="isClient" value="1" title="开启">
                        <input type="radio" name="isClient" value="0" title="关闭" checked>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">客服CrispID:</label>
                    <div class="layui-input-block">
                        <input name="crispKey" placeholder="请输入 CrispID" class="layui-input"/>
                        <div class="layui-word-aux">申请地址：<a href="https://crisp.chat/zh/" target="_blank">https://crisp.chat/zh/</a>
                        </div>
                    </div>
                </div>

                <!--<div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">QQ群二维码:</label>
                    <div class="layui-input-block">
                        <input id="qqGroupQrcode" name="qqGroupQrcode" placeholder="请输入QQ群二维码" class="layui-input"/>
                        <div class="layui-upload" style="margin-top: 10px">
                            <button type="button" class="layui-btn" id="test2">上传二维码</button>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="demo2">
                            </div>
                        </div>
                    </div>
                </div>-->

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">首页模版:</label>
                    <div class="layui-input-block">
                        <input type="radio" name="isModel" value="1" title="Ajax模式" checked>
                        <input type="radio" name="isModel" value="0" title="平铺模式">
                        <input type="radio" name="isModel" value="2" title="左右风格">
                    </div>
                </div>

                <!--<div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">商店背景:</label>
                    <div class="layui-input-block">
                        <input id="isBackground" name="isBackground" placeholder="请输入全局背景图"
                               class="layui-input"/>
                        <div class="layui-upload" style="margin-top: 10px">
                            <button type="button" class="layui-btn" id="test1">上传图片</button>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="demo1">
                            </div>
                        </div>
                    </div>
                </div>-->
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">购物须知:</label>
                    <div class="layui-input-block">
                        <textarea id="storeDetails"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">首页弹窗:</label>
                    <div class="layui-input-block">
                        <input type="radio" name="isWindow" lay-filter="isWindow" value="1" title="开启" checked>
                        <input type="radio" name="isWindow" lay-filter="isWindow" value="0" title="关闭">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">弹窗内容:</label>
                    <div class="layui-input-block">
                        <textarea id="windowText"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <!-- 提交 -->
        <div class="form-group-bottom text-right">
            <button type="reset" class="layui-btn layui-btn-primary">&emsp;重置&emsp;</button>
            <button class="layui-btn" lay-filter="shopSettingsEditSubmit" lay-submit>&emsp;保存设置&emsp;</button>
        </div>
    </form>
</div>

<:include file="../common/js.html"/>
<script type="text/javascript" src="${ctxPath}/assets/libs/tinymce/tinymce.min.js"></script>
<script>
    layui.use(['layer', 'form', 'fileChoose'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var fileChoose = layui.fileChoose;
        var shopSettings = JSON.parse(JSON.stringify(${shopSettings!}));
        form.val('shopSettingsForm', shopSettings);
        $('#demo1').attr('src', '${ctxPath}' + shopSettings.isBackground);
        $('#demo2').attr('src', '${ctxPath}' + shopSettings.qqGroupQrcode);

        /* 渲染富文本编辑器 */
        tinymce.init({
            selector: '#storeDetails',
            height: 450,
            branding: false,
            language: 'zh_CN',
            plugins: 'code print preview fullscreen paste searchreplace save autosave link autolink image imagetools media table codesample lists advlist hr charmap emoticons anchor directionality pagebreak quickbars nonbreaking visualblocks visualchars wordcount',
            toolbar: 'fullscreen preview code | undo redo | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | formatselect fontselect fontsizeselect | link image media emoticons charmap anchor pagebreak codesample | ltr rtl',
            images_upload_url: '${ctxPath}/file/upload',
            file_picker_types: 'media',
            file_picker_callback: function (callback, value, meta) {
                layer.msg('演示环境不允许上传', {anim: 6});
            },
            init_instance_callback: function (editor) {
                tinymce.get('storeDetails').setContent(shopSettings.storeDetails);
            }
        });

        /* 渲染富文本编辑器 */
        tinymce.init({
            selector: '#windowText',
            height: 450,
            branding: false,
            language: 'zh_CN',
            plugins: 'code print preview fullscreen paste searchreplace save autosave link autolink image imagetools media table codesample lists advlist hr charmap emoticons anchor directionality pagebreak quickbars nonbreaking visualblocks visualchars wordcount',
            toolbar: 'fullscreen preview code | undo redo | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | formatselect fontselect fontsizeselect | link image media emoticons charmap anchor pagebreak codesample | ltr rtl',
            images_upload_url: '${ctxPath}/file/upload',
            file_picker_types: 'media',
            file_picker_callback: function (callback, value, meta) {
                layer.msg('演示环境不允许上传', {anim: 6});
            },
            init_instance_callback: function (editor) {
                tinymce.get('windowText').setContent(shopSettings.windowText);
            }
        });

        $('#test2').click(function (res) {
            fileChoose.open({
                fileUrl: '${ctxPath}/file',
                listUrl: '${ctxPath}/file/list',
                upload: {url: '${ctxPath}/file/upload'},
                num: 1,
                onChoose: function (urls) {
                    var list = urls;
                    $("#qqGroupQrcode").val("/file" + list[0].url);
                    $('#demo2').attr('src', "${ctxPath}/file" + list[0].url); //图片链接（base64）
                },
                response: {code: 0}
            });
        });

        $('#test1').click(function (res) {
            fileChoose.open({
                fileUrl: '${ctxPath}/file',
                listUrl: '${ctxPath}/file/list',
                upload: {url: '${ctxPath}/file/upload'},
                num: 1,
                onChoose: function (urls) {
                    var list = urls;
                    $("#isBackground").val("/file" + list[0].url);
                    $('#demo1').attr('src', "${ctxPath}/file" + list[0].url); //图片链接（base64）
                },
                response: {code: 0}
            });
        });

        /* 表单提交 */
        form.on('submit(shopSettingsEditSubmit)', function (data) {
            data.field.windowText = tinymce.get('windowText').getContent();
            data.field.storeDetails = tinymce.get('storeDetails').getContent();
            var loadIndex = layer.load(2);
            var field = data.field; //获取提交的字段
            $.post(getPostType(field), field, function (res) {
                layer.close(loadIndex);
                if (0 === res.code) {
                    layer.msg(res.msg, {icon: 1, time: 1000}, function () {
                        location.reload();
                    });
                } else {
                    layer.msg(res.msg, {icon: 2});
                    location.reload();
                }
            });
            return false;
        });

        function getPostType(mData) {
            if (mData == null) {
                return "shopSettings/save";
            } else {
                return "shopSettings/update";
            }
        }

    });
</script>
</body>
</html>
