{include file="public/head"}
<div class="layui-fluid layui-rg-bg">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-tab layui-tab-brief" lay-filter="tab">
                {include file="config/top"}
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <form class="layui-form layui-form-pane" style="margin-top:20px;">
                            <div class="layui-collapse">
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">缩略图</h2>
                                    <div class="layui-colla-content layui-show">
                                        <div class="layui-form-item" pane>
                                            <label class="layui-form-label">开关</label>
                                            <div class="layui-input-inline">
                                                <input type="radio" name="thumbonoff" {if !config('app.image.thumbonoff')} checked {/if} value="false" title="关闭" lay-filter="thumbonoff">
                                                <input type="radio" name="thumbonoff" {if config('app.image.thumbonoff')} checked {/if} value="true" title="开启" lay-filter="thumbonoff">
                                            </div>
                                            <div class="layui-form-mid layui-word-aux"><i class="layui-icon layui-icon-about"></i> 缩略图开关</div>
                                        </div>
                                        <div id="thumb" {if !config('app.image.thumbonoff')} style="display:none;"{/if}>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">图像大小</label>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input type="number" min="1" name="width" placeholder="宽度" autocomplete="off" class="layui-input" value="{:config('app.image.width')}">
                                            </div>
                                            <div class="layui-form-mid">-</div>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input type="number" min="1" name="height" placeholder="高度" autocomplete="off" class="layui-input" value="{:config('app.image.height')}">
                                            </div>
                                            <div class="layui-form-mid layui-word-aux"><i class="layui-icon layui-icon-about"></i> 只填写数字</div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">压缩质量</label>
                                            <div class="layui-input-inline"">
                                                <input type="number" min="1" max="100" name="thumbquality" autocomplete="off" placeholder="请输入压缩质量1-100之间数字" class="layui-input" value="{:config('app.image.thumbquality')}">
                                            </div>
                                            <div class="layui-form-mid layui-word-aux"><i class="layui-icon layui-icon-about"></i> 压缩质量1-100之间数字</div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">生成方式</label>
                                            <div class="layui-input-inline">
                                                <select name="thumbtype" lay-verify="">
                                                    <option value="1" {if config('app.image.thumbtype')==1} selected {/if}>等比例缩放</option>
                                                    <option value="2" {if config('app.image.thumbtype')==2} selected {/if}>缩放后填充</option>
                                                    <option value="3" {if config('app.image.thumbtype')==3} selected {/if}>居中裁剪</option>
                                                    <option value="4" {if config('app.image.thumbtype')==4} selected {/if}>左上角裁剪</option>
                                                    <option value="5" {if config('app.image.thumbtype')==5} selected {/if}>右下角裁剪</option>
                                                    <option value="6" {if config('app.image.thumbtype')==6} selected {/if}>固定尺寸缩放</option>
                                                </select> 
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">水印</h2>
                                    <div class="layui-colla-content layui-show">
                                        <div class="layui-form-item" pane>
                                            <label class="layui-form-label">开关</label>
                                            <div class="layui-input-block">
                                                <input type="radio" name="wateronoff" {if !config('app.image.wateronoff')} checked {/if} value="false" title="关闭" lay-filter="wateronoff">
                                                <input type="radio" name="wateronoff" {if config('app.image.wateronoff')==1} checked {/if} value="1" title="文字" lay-filter="wateronoff">
                                                <input type="radio" name="wateronoff" {if config('app.image.wateronoff')==2} checked {/if} value="2" title="图片" lay-filter="wateronoff">
                                            </div>
                                        </div>
                                        <div class="layui-form-item" id="watertype" {if !config('app.image.wateronoff')}style="display:none"{/if}>
                                            <label class="layui-form-label">水印位置</label>
                                            <div class="layui-input-inline">
                                                <select name="watertype" lay-verify="">
                                                    <option value="1" {if config('app.image.watertype')==1} selected {/if}>左上角</option>
                                                    <option value="2" {if config('app.image.watertype')==2} selected {/if}>上居中</option>
                                                    <option value="3" {if config('app.image.watertype')==3} selected {/if}>右上角</option>
                                                    <option value="4" {if config('app.image.watertype')==4} selected {/if}>左居中</option>
                                                    <option value="5" {if config('app.image.watertype')==5} selected {/if}>居中</option>
                                                    <option value="6" {if config('app.image.watertype')==6} selected {/if}>右居中</option>
                                                    <option value="7" {if config('app.image.watertype')==7} selected {/if}>左下角</option>
                                                    <option value="8" {if config('app.image.watertype')==8} selected {/if}>下居中</option>
                                                    <option value="9" {if config('app.image.watertype')==9} selected {/if}>右下角</option>
                                                </select> 
                                            </div>
                                        </div>
                                        <div id="waterimgonoff" {if !config('app.image.wateronoff') || config('app.image.wateronoff')==1}style="display:none"{/if}>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">图片</label>
                                            <div class="layui-input-inline" style="min-width:40%"><input type="text" class="layui-input" name="waterimg" id="waterimg" value="{:config('app.image.waterimg')}"><div class="layui-form-mid"><img src="{:config('app.image.waterimg')}" id="waterimgpic" style="max-height:60px;background:#efefef;"></div></div>
                                            <div class="layui-input-inline" style="width:90px;"><a class="layui-btn uploadimage" lay-data={id:"waterimg"}>{:lang('upimage')}</a></div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">透明度</label>
                                            <div class="layui-input-inline"">
                                                <input type="number" min="1" max="100" name="wateralpha" autocomplete="off" placeholder="请输入透明度1-100之间数字" class="layui-input" value="{:config('app.image.wateralpha')}">
                                            </div>
                                            <div class="layui-form-mid layui-word-aux"><i class="layui-icon layui-icon-about"></i> 透明度1-100之间数字</div>
                                        </div>
                                        </div>
                                        <div id="watertext" {if !config('app.image.wateronoff') || config('app.image.wateronoff')==2}style="display:none"{/if}>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">文字内容</label>
                                            <div class="layui-input-inline"">
                                                <input type="text" name="textcontent" autocomplete="off" placeholder="请输入文字内容" class="layui-input" value="{:config('app.image.textcontent')}">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">选择字体</label>
                                            <div class="layui-input-inline">
                                                <select name="textfont" lay-verify="">
                                                    <option value="0" {if config('app.image.textfont')==0} selected {/if}>英文字体</option>
                                                    <option value="1" {if config('app.image.textfont')==1} selected {/if}>中文字体</option>
                                                </select> 
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">字体大小</label>
                                            <div class="layui-input-inline"">
                                                <input type="number" name="textsize" autocomplete="off" placeholder="请输入字体大小" class="layui-input" value="{:config('app.image.textsize')}">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">字体颜色</label>
                                            <div class="layui-input-inline" style="width: 120px;">
                                            <input type="text" value="{:config('app.image.textcolor')}" placeholder="请选择颜色" class="layui-input" name="textcolor" id="textcolor">
                                            </div>
                                            <div class="layui-inline" style="left: -11px;">
                                            <div id="test-form"></div>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">位置偏移量</label>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input type="text" name="offset_x" placeholder="X" autocomplete="off" class="layui-input" value="{:config('app.image.offset_x')}">
                                            </div>
                                            <div class="layui-form-mid">-</div>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input type="text" name="offset_y" placeholder="Y" autocomplete="off" class="layui-input" value="{:config('app.image.offset_y')}">
                                            </div>
                                            <div class="layui-form-mid layui-word-aux"><i class="layui-icon layui-icon-about"></i> 左-上</div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">字体角度</label>
                                            <div class="layui-input-inline"">
                                                <input type="number" min="0" max="360" name="textangle" autocomplete="off" placeholder="请输入字体角度" class="layui-input" value="{:config('app.image.textangle')}">
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="layui-form-footer">
                                <input type="hidden" name="name" value="{$name}">
                                <button class="layui-btn layui-btn-sm" lay-submit lay-filter="submit">{:lang('submit')}</button>
                                <a class="layui-btn layui-btn-primary layui-btn-sm refresh">{:lang("reload")}</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!---->
</div>
{include file="public/foot"}
<script>
    layui.use(['jquery', 'form', 'layer', 'element', 'colorpicker', 'upload'],function () {
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer,element = layui.element;
        var colorpicker = layui.colorpicker;
        var upload = layui.upload;
        element.on('tab(tab)', function(data){
            var name = $(this).attr('lay-id');
            var thisurl = "{:url('index',['name' => 'thisname'])}".replace('thisname',name);
            location.href = thisurl;
        });
        // 上传图片
        var uploadimage = upload.render({
            elem: '.uploadimage'
            ,url: '{:url("upload/upload",["action" => "uploadimage"])}'
            ,field: 'upfile'
            ,exts:'{:config("app.upload.imageAllowFiles")}'
            ,size:{:config('app.upload.imageMaxSize')*1024}
            ,done: function(res){
                var id = this.id;
                //如果上传失败
                if(res.state !== "SUCCESS"){
                    return layer.msg(res.state);
                }
                //上传成功
                $('#'+id+'pic').attr('src', res.url);
                $('#'+id).val(res.url);
            }
        });
        // 颜色
        colorpicker.render({
            elem: '#test-form'
            ,color:'{:config("app.image.textcolor")}'
            ,predefine: true
            ,done: function(color){
                $('#textcolor').val(color);
            }
        });
        form.on('radio(thumbonoff)', function(data){
            if(data.value == 'false') {
                $("#thumb").css('display','none');
            } else {
                $("#thumb").css('display','block');
            }
        }); 
        form.on('radio(wateronoff)', function(data){
            if(data.value == 'false') {
                $("#waterimgonoff").css('display','none');
                $("#watertype").css('display','none');
                $("#watertext").css('display','none');
            } else if(data.value == 1){
                $("#waterimgonoff").css('display','none');
                $("#watertype").css('display','block');
                $("#watertext").css('display','block');
            } else if(data.value == 2){
                $("#waterimgonoff").css('display','block');
                $("#watertype").css('display','block');
                $("#watertext").css('display','none');
            }
        });
        //表单提交
        form.on('submit(submit)',function(data){
            loading = layer.load(1, {shade: [0.1, '#fff']});
            delete data.field.upfile;
            $.ajax({
                url: '{:url("saveconfig")}',
                type: 'POST',
                dataType: 'json',
                data: data.field,
                success: function(result){
                    layer.close(loading);
                    layuialert(result,1);
                }
            });
            return false; //禁止刷新
        });
    });
</script>