@extends('layouts.base')
@section('title', "基础设置")
@section('content')
<style type="text/css">
    .sub-color .btn-success{
        background-color: rgb(0, 188, 212);
        color: rgb(255, 255, 255);
    }

    .panel-body .form-group {
        padding-top: 20px !important;
    }
</style>
<script type="text/javascript" src="{{ plugin_assets('article', 'assets/js/jquery.json.js') }}"></script>
<script type="text/javascript" src="{{ plugin_assets('article', 'assets/js/ueditor/ueditor.config.js') }}"></script>
<script type="text/javascript" src="{{ plugin_assets('article', 'assets/js/ueditor/ueditor.all.min.js') }}"></script>
<script type="text/javascript" src="{{ plugin_assets('article', 'assets/js/ueditor/ueditor.parse.js') }}"></script>
<script type="text/javascript" src="{{ plugin_assets('article', 'assets/js/ueditor/lang/zh-cn/zh-cn.js') }}"></script>
<script type="text/javascript">
    $(function(){
        var pagestate = 0;
        //初始化百度编辑器
        var opts = {type: 'image',direct: false,multi: true,tabs: {'upload': 'active','browser': '','crawler': ''},path: '',dest_dir: '',global: false,thumb: false,width: 0};
        var ue = UE.getEditor("editor", {
            topOffset: 0,
            autoFloatEnabled: false,
            autoHeightEnabled: false,
            autotypeset: {
                removeEmptyline: true
            },
            maximumWords : 9999999,
            initialFrameHeight: 607,
            focus : true,
            toolbars : [['fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'strikethrough', 'forecolor', 'backcolor', '|','justifyleft', 'justifycenter', 'justifyright', '|', 'insertorderedlist', 'insertunorderedlist', 'blockquote', 'emotion', 'insertvideo', 'removeformat', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight','indent', 'paragraph', 'fontsize', '|','inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol','mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|', 'anchor', 'map', 'print', 'drafts', '|','autotypeset']],
        });

        ue.ready(function() {
            ue.addListener('contentChange',function(){
                $("#preview-content").html(ue.getContent());
                pagestate = 1;
            });

            $(".itembox").click(function(a) {
                ue.execCommand("insertHtml", "<div>" + $(this).html()+"<p></p>"+ "</div>");
            });

            $(".trash").click(function(){
                if(confirm("确定要清空编辑器？此操作不可恢复。")){
                    ue.setContent("");
                }
            });

            $(document).on("click",".mylink-nav",function(){
                var href = $(this).data("href");
                var id = $("#modal-mylink").attr("data-id");
                if(id){
                    $("input[data-id="+id+"]").val(href);
                    $("#modal-mylink").attr("data-id","");
                }else{
                    ue.execCommand('link', {href:href, 'class':'acolor'});
                }
                $("#modal-mylink .close").click();
            });

            $(".mylink-nav2").click(function(){
                var href = $("textarea[name=mylink_href]").val();
                if(href){
                    var id = $("#modal-mylink").attr("data-id");
                    if(id){
                        $("input[data-id="+id+"]").val(href);
                        $("#modal-mylink").attr("data-id","");
                    }else{
                        ue.execCommand('link', {href:href, 'class':'acolor'});
                    }
                    $("#modal-mylink .close").click();
                    $("textarea[name=mylink_href]").val("");
                }else{
                    $("textarea[name=mylink_href]").focus();
                    alert("链接不能为空!");
                }
            });
        });

        let uploadUrl = @php echo json_encode(uploadUrl()); @endphp

        // 初始化调用微擎上传图片
        UE.registerUI('myinsertimage',function(editor, uiName) {
            editor.registerCommand(uiName, {
                execCommand: function() {
                    require(['fileUploader'],
                        function(uploader) {
                            uploader.upload_url(uploadUrl.upload_url);
                            uploader.image_url(uploadUrl.image_url);
                            uploader.fetch_url(uploadUrl.fetch_url);
                            uploader.delet_url(uploadUrl.delete_url);
                            uploader.show(function(imgs) {
                                        if (imgs.length == 0) {
                                            return;
                                        } else if (imgs.length == 1) {
                                            editor.execCommand('insertimage', {
                                                'src': imgs[0]['url'],
                                                '_src': imgs[0]['url'],
                                                'width': '100%',
                                                'alt': imgs[0].filename
                                            });
                                        } else {
                                            var imglist = [];
                                            for (i in imgs) {
                                                imglist.push({
                                                    'src': imgs[i]['url'],
                                                    '_src': imgs[i]['url'],
                                                    'width': '100%',
                                                    'alt': imgs[i].filename
                                                });
                                            }
                                            editor.execCommand('insertimage', imglist);
                                        }
                                    },
                                    opts);
                        });
                }
            });
            var btn = new UE.ui.Button({
                name: '插入图片',
                title: '插入图片',
                cssRules: 'background-position: -726px -77px',
                onclick: function() {
                    editor.execCommand(uiName);
                }
            });
            editor.addListener('selectionchange',
                    function() {
                        var state = editor.queryCommandState(uiName);
                        if (state == -1) {
                            btn.setDisabled(true);
                            btn.setChecked(false);
                        } else {
                            btn.setDisabled(false);
                            btn.setChecked(state);
                        }
                    });
            return btn;
        },19);
        // 初始化 系统链接选择
        UE.registerUI('mylink', function(editor, uiName) {
            editor.registerCommand(uiName, {
                execCommand: function() {
                    $("#modal-mylink").modal();
                }
            });
            var btn = new UE.ui.Button({
                name: '超链接',
                title: '超链接',
                cssRules: 'background-position: -500px 0;',
                onclick: function() {
                    editor.execCommand(uiName);
                }
            });
            editor.addListener('selectionchange', function() {
                var state = editor.queryCommandState(uiName);
                if (state == -1) {
                    btn.setDisabled(true);
                    btn.setChecked(false);
                } else {
                    btn.setDisabled(false);
                    btn.setChecked(state);
                }
            });
            return btn;
        });
        //初始化百度编辑器结束
    });
</script>

<section class="content">
    <form id="setform" action="" method="post" class="form-horizontal form">
        <div class="top">
            <ul class="add-shopnav" id="myTab">
                <li class="active"><a href="" class="tab">基础设置</a></li>
            </ul>
        </div>

        <div class="info">
            <div class="panel-body">
                <div class="tab-content">
                    <div class="tab-pane  active">

                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 col-md-2 control-label">插件开启</label>
                            <div class="col-sm-9 col-xs-12">
                                <label class="radio-inline">
                                    <input type="radio" name="setdata[is_open]" value="1"
                                           @if($set['is_open'] == 1) checked="checked" @endif /> 开启</label>
                                <label class="radio-inline">
                                    <input type="radio" name="setdata[is_open]" value="0"
                                           @if($set['is_open'] == 0) checked="checked" @endif /> 关闭</label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 col-md-2 control-label">自定义名称</label>
                            <div class="col-sm-9 col-xs-12 col-md-6">
                            <input type="text" name="setdata[plugin_name]" class="form-control" value="{{$set['plugin_name']}}"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 col-md-2 control-label">banner图</label>

                            <div class="col-sm-9 col-xs-12 col-md-6 detail-logo">
                            {!! app\common\helpers\ImageHelper::tplFormFieldImage('setdata[banner]', $set['banner']) !!}
                            <span class="help-block">建议尺寸: 350 * 136 </span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 col-md-1 control-label">使用说明</label>
                             <div class="col-sm-9 col-xs-12 col-md-11">
                                <div class="content">
                                    <div class="con1" style="width:100% !important;">
                                        <textarea id="editor" name='setdata[synopsis]' style="width:100%;">
                                        {!! htmlspecialchars_decode($set['synopsis']) !!}
                                        </textarea>

                                        {{--<script id="editor" style="width:100%;">
                                        {!! htmlspecialchars_decode($set['synopsis']) !!}
                                        </script>--}}
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="form-group sub-color">
                    <input type="submit" name="submit" value="保存设置" class="btn btn-success"
                           onclick="return formcheck()"/>
                </div>
            </div>
        </div>

    </form>
</section>
<script type="text/javascript">

    function formcheck()
    {
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "{!! yzWebFullUrl('plugin.promotion-assistant.admin.set.index') !!}" ,//url
            data: $('#setform').serialize(),
            success: function (result) {
                console.log(result);
                if (result.result == 1) {
                    alert("保存成功");
                };
            },
            error : function() {
                alert("异常！");
            }
        });
        // var setdata = document.getElementsByName("setdata");
        // console.log(setdata);
        return false;
    }
</script>
@endsection