{extend name="layout"/}
{block name="css"}
<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/editor_api.js" data-bind="__STATIC__/ueditor/_src/"  id="uapi"></script>
<style>
    .configImage{min-height:100px; padding-bottom: 20px; }
    .dz-default.dz-message{
        right: auto;
        left: 50%;
        top: 25px;
        transform: none;
        padding-left: 0;
        font-size: 35px;
        font-weight: 400;
        line-height: 35px;
        position: relative
    }
    .linkcolumn{display:none}
</style>
<script>
    //解决ajax获取时候id冲突问题
    window.ueditid='';
</script>
{/block}
{block name="content"}
{empty name="modelList"}
<div class="alert alert-warning">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <i class="fa fa-warning"></i> 请先在'模型管理'中添加栏目内容模型
</div>
{/empty}
{empty name="template_list"}
<div class="alert alert-warning">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <i class="fa fa-warning"></i> 请先在application\home\view\defaults\column\index\目录下添加栏目模板
</div>
{/empty}
{empty name="template_content"}
<div class="alert alert-warning">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <i class="fa fa-warning"></i> 请先在application\home\view\defaults\column\content\目录下添加内容模板
</div>
{/empty}
<ul class="nav nav-tabs">
    <li class="active">
        <a href="#tabs-info" data-toggle="tab">
            基础设置
        </a>
    </li>
    <li>
        <a href="#tabs-menu" data-toggle="tab">
            其他设置
        </a>
    </li>
    <li id="modeTab">
        <a id="modeCon" href="#content" data-toggle="tab">
            栏目扩展设置
        </a>
    </li>
</ul>
<form method="post" action="">
    <div class="tab-content tab-content-bordered">
        <div class="tab-pane fade in active" id="tabs-info">
            <div class="panel">
                <div class="panel-body">
                    <fieldset class="form-group">
                        <label>所属栏目*</label>
                        <select id="path" name="path" class="form-control  select2-hidden-accessible" style="width: 100%" data-allow-clear="true" tabindex="-1" aria-hidden="true">
                            <option></option>
                            <option value="0," selected>顶级栏目</option>
                            {volist name="columns" id="vo" }
                            <option value="{$vo.path}{$vo.id},">{:str_repeat('┝┈┈', $vo['deep']-1)}{$vo.title}</option>
                            {/volist}
                        </select>
                    </fieldset>
                    <fieldset class="form-group">
                        <label style="clear:both; display: block">栏目类型*</label>
                        <label class="custom-control custom-radio radio-inline">
                            <input type="radio" name="type" class="custom-control-input" value="2" checked="">
                            <span class="custom-control-indicator"></span>
                            列表
                        </label>
                        <label class="custom-control custom-radio radio-inline">
                            <input type="radio" name="type" class="custom-control-input" value="1" >
                            <span class="custom-control-indicator"></span>
                            频道
                        </label>
                        <label class="custom-control custom-radio radio-inline">
                            <input type="radio" name="type" class="custom-control-input" value="3">
                            <span class="custom-control-indicator"></span>
                            链接
                        </label>
                        <small class="text-muted" style="clear:both; display: block"></small>
                    </fieldset>
                    <fieldset class="form-group">
                        <label>栏目名称*</label>
                        <input type="text" class="form-control" name="title" placeholder="栏目中文名称" value="">
                    </fieldset>
                    <fieldset class="form-group listApagecolumn">
                        <label>栏目标识*</label>
                        <input type="text" class="form-control" name="name" placeholder="栏目唯一英文标识" value="">
                    </fieldset>
                    <fieldset class="form-group listcolumn">
                        <label>内容模型*</label>
                        <select id="model_id" name="model_id" class="form-control  select2-hidden-accessible" style="width: 100%" data-allow-clear="true" tabindex="-1" aria-hidden="true">
                            <option></option>
                            {volist name="modelList" id="vo"}
                            <option value="{$key}">{$vo}</option>
                            {/volist}
                        </select>
                        <small class="text-muted">选择列表栏目使用模型</small>
                    </fieldset>
                    <fieldset class="form-group listApagecolumn">
                        <label>栏目模板*</label>
                        <select id="template_list" name="template_list" class="form-control  select2-hidden-accessible" style="width: 100%" data-allow-clear="true" tabindex="-1" aria-hidden="true">
                            <option></option>
                            {volist name="template_list" id="vo"}
                            <option value="{$key}" data-mid="{$vo.mid}">{$vo.name} {$vo.title}</option>
                            {/volist}
                        </select>
                    </fieldset>
                    <fieldset class="form-group listcolumn">
                        <label>内容模板*</label>
                        <select id="template_content" name="template_content" class="form-control  select2-hidden-accessible" style="width: 100%" data-allow-clear="true" tabindex="-1" aria-hidden="true">
                            <option></option>
                            {volist name="template_content" id="vo"}
                            <option value="{$key}" data-mid="{$vo.mid}">{$vo.name} {$vo.title}</option>
                            {/volist}
                        </select>
                    </fieldset>
                    <fieldset class="form-group listcolumn">
                        <label>列表翻页行数*</label>
                        <input type="number" class="form-control" name="list_row" placeholder="只能是正整数" value="10">
                    </fieldset>
                    <fieldset class="form-group linkcolumn">
                        <label>栏目链接地址*</label>
                        <input type="text" class="form-control" name="url" placeholder="自定义栏目跳转地址" value="">
                        <small class="text-muted clearfix">如果是内部链接，填写：模块/控制器/操作。如果是http链接，则直接填写http开头的url地址</small>
                    </fieldset>
                    <div class="panel-footer text-right">
                        <input type="submit" class="btn btn-primary" value="添加栏目">
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade in" id="tabs-menu">
            <div class="panel">
                <div class="panel-body">
                    <fieldset class="form-group">
                        <label>封面图</label>
                        <input type="hidden" name="cover_picture"  value="" >
                        <div id="cover_picture" class="configImage b-a-2 border-default" >
                            <div class="dz-default dz-message text-light ">
                                <i class="fa fa-plus-square"></i>
                            </div>
                        </div>
                    </fieldset>
                    <div class="row listcolumn">
                        <fieldset class="form-group col-sm-6">
                            <label>列表排序</label>
                            <select class="form-control" name="listorder" id="listorder">
                                <option value="orders">排序值</option>
                                <option value="id">ID编号</option>
                                <option value="create_time">创建时间</option>
                                <option value="update_time">更新时间</option>
                                <option value="hits">点击量</option>
                                <option value="rand">随机</option>
                            </select>
                        </fieldset>
                        <fieldset class="form-group col-sm-6">
                            <label> &nbsp;</label>
                            <select class="form-control" name="listorderway" id="listorderway">
                                <option value="desc">从大到小</option>
                                <option value="asc">从小到大</option>
                            </select>
                        </fieldset>
                    </div>
                    <fieldset class="form-group listcolumn">
                        <label  style="clear:both; display: block">列表筛选字段条件</label>
                        <div id="listcondition">
                            <small> 无</small>
                        </div>
                    </fieldset>
                    <fieldset class="form-group listApagecolumn">
                        <label>网页标题</label>
                        <input type="text" class="form-control" name="meta_title" placeholder="显示在网页title标签中" value="">
                    </fieldset>
                    <fieldset class="form-group listApagecolumn">
                        <label>网页关键词</label>
                        <input type="text" class="form-control" name="meta_keywords" placeholder="显示在网页keywords标签中" value="">
                    </fieldset>
                    <fieldset class="form-group listApagecolumn">
                        <label>网页描述</label>
                        <textarea class="form-control" rows="3" name="meta_description" placeholder="显示在网页description标签中" ></textarea>
                    </fieldset>
                    <fieldset class="form-group">
                        <label>排序</label>
                        <input type="number" class="form-control" name="orders" placeholder="只能是正整数" value="100">
                    </fieldset>
                    <fieldset class="form-group">
                        <label>状态</label>
                        <label for="switcher-primary" class="switcher switcher-primary">
                            <input type="checkbox" name="status" value="1" id="switcher-primary" checked="">
                            <div class="switcher-indicator">
                                <div class="switcher-yes">启用</div>
                                <div class="switcher-no">禁用</div>
                            </div>
                            &nbsp;
                        </label>
                    </fieldset>
                    <div class="panel-footer text-right">
                        <input type="submit" class="btn btn-primary" value="添加栏目">
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade in" id="content">
            <div class="panel">
                <div class="panel-body">
                    <fieldset class="form-group">
                        <label>拓展模型</label>
                        <select id="ext_model_id" name="ext_model_id" class="form-control  select2-hidden-accessible" style="width: 100%" data-allow-clear="true" tabindex="-1" aria-hidden="true">
                            <option></option>
                            {volist name="modelList" id="vo"}
                            <option value="{$key}">{$vo}</option>
                            {/volist}
                        </select>
                        <small class="text-muted"></small>
                    </fieldset>
                    <div id="modelFields">
                        <div class="alert">
                            <button type="button" class="close" data-dismiss="alert">×</button>
                            请先选择扩展模型~
                        </div>
                    </div>
                </div>
                <div class="panel-footer text-right">
                    <input type="submit" class="btn btn-primary" value="添加栏目">
                </div>
            </div>
        </div>

    </div>
</form>
{/block}

{block name="javascript"}
<script>
     function setFieldOption(typeid) {
         //单页
            if (1 == typeid) {
                $('.listcolumn').hide();
                $('.linkcolumn').hide();
                $('.listApagecolumn').show();
                $('#modeTab').show();
            }
            //列表
            if (2 == typeid) {
                $('.linkcolumn').hide();
                $('.listApagecolumn').show();
                $('.listcolumn').show();
                $('#modeTab').show();
            }
            //链接
            if (3 == typeid) {
                $('.listApagecolumn').hide();
                $('.listcolumn').hide();
                $('.linkcolumn').show();
                $('#modeTab').hide();
            }
    }
    $(function () {
         setFieldOption($('input:radio[name="type"]:checked').val());
        $('#model_id').val('');
        $('#path').select2({
            placeholder: '选择栏目'
        });
        var template_list= $('#template_list').select2({
            placeholder: '选择栏目模板'
        });
        var template_content=$('#template_content').select2({
            placeholder: '选择内容模板'
        });
         //排序选择
        $('#listorder').change(function(){
            if('rand'==$(this).val()){
                $('#listorderway').prop('disabled',true);
            }else{
                $('#listorderway').prop('disabled',false);
            }
        });
        var model_id = $('#model_id').select2({
            placeholder: '选择内容模型'
        }).on("select2:select", function (e) {
            var mid = $(this).val();
            $.get("{:url('getoptionfield')}", {mid: mid},
                    function (data) {
                        if ('' != data) {
                            var checkString = '';
                            var jdata = jQuery.parseJSON(data);
                            for (var vo in jdata) {
                                checkString += '<label class="custom-control custom-checkbox checkbox-inline"><input type="checkbox" name="urls[]" class="custom-control-input" value="' + vo + '" ><span class="custom-control-indicator"></span>' + vo + '(' + jdata[vo] + ')</label>';
                            }
                            $('#listcondition').html(checkString);
                        } else {
                            $('#listcondition').html('无');
                        }
                    },
                    "json"
                    );
            $("#template_list,#template_content").find("option").prop("selected",false);
            $("#template_list").find("option[data-mid="+mid+"]").eq(0).prop("selected",true);
            $("#template_content").find("option[data-mid="+mid+"]").eq(0).prop("selected",true);
            template_list.change();
            template_content.change();
        }).on("select2:unselect", function (e) {
            $('#listcondition').html('无');
        });
        $('input:radio[name="type"]').change(function () {
            setFieldOption($(this).val());
        });
        
        $('#ext_model_id').select2({
            placeholder: '选择拓展模型'
        }).on("select2:select", function (e) {
            if(''!=ueditid){
                //去掉百度编辑器
                var ids=ueditid.split(","); 
                for (i=0;i<ids.length ;i++ ) 
                { 
                    if(ids[i]){
                      UE.getEditor(ids[i],{
                          toolbars:[]
                      }).destroy();
                      $('#'+ids[i]).remove();
                    }
                }
            }
            ueditid='';
            var mid = $(this).val();
            $.ajax({
                async: false,
                url: "{:url('column/extfields')}",
                type: "GET",
                data: {
                    mid: mid
                },
                dataType: 'html',
                success: function (data) {
                    $('#modelFields').html($.parseJSON(data));
                }
            });
        });
       
        var thisdom = $('#cover_picture');
        var inputdom = thisdom.prev('input');
        thisdom.dropzone({
            url: "{:url('filemanage/upload',['dir'=>'images','module'=>'admin','watermark'=>0])}",
            dictRemoveFile: "删除图片",
            init: function () {
                //回调已上传图片
                if (thisdom.attr('data-imgsize')) {
                    var mockFile = {
                        name: thisdom.attr('data-imgname'),
                        size: thisdom.attr('data-imgsize'),
                        accepted: true,
                        status: 'success',
                        processing: false
                    };
                    this.options.addedfile.call(this, mockFile);
                    this.options.thumbnail.call(this, mockFile, thisdom.attr('data-imgurl'));
                    this.files[0] = mockFile;
                    delImgEvent(thisdom);
                }
            },
            resize: function (file) {
                return {
                    srcX: 0,
                    srcY: 0,
                    srcWidth: file.width,
                    srcHeight: file.height,
                    trgWidth: file.width,
                    trgHeight: file.height
                };
            },
            maxFiles: 1,
            maxfilesexceeded: function (file) {
                this.removeAllFiles();
                this.addFile(file);
            },
            success: function (file, response, e) {
                //移除当前图片  
//                thisdom.find('div.dz-preview:not(.dz-processing)').remove();
                if (response.status == 1) {
                    inputdom.attr('value', response.id);
                    delImgEvent(thisdom);
                    toastr['success'](response.info, '', {
                        closeButton: true
                    });
                } else {
                    var data = response.info;
                    if (!data) {
                        data = '未知错误：' + response;
                    }
                    toastr['error'](data, '', {
                        closeButton: true
                    });
                }
            }
        });
        function delImgEvent(dom) {
            dom.find('.dz-remove').click(function () {
                bootbox.confirm({
                    message: '同时从服务器删除图片么？',
                    className: 'bootbox-sm',
                    callback: function (result) {
                        if (result) {
                            var id = inputdom.attr('value');
                            $.get("{:url('filemanage/delete')}", {id: id},
                                    function (data) {
                                        if (data === 'true') {
                                            toastr['success']('图片删除成功~', '', {
                                                closeButton: true
                                            });
                                        } else {
                                            toastr['error'](data, '', {
                                                closeButton: true
                                            });
                                        }
                                    },
                                    "text"
                                    );
                        }
                    }
                });
            });
        }
    });
</script>
{/block}