{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
    }
    .fieldhide{display: none}
</style>
<script>
    //解决ajax获取时候id冲突问题
    window.ueditid='';
</script>
{/block}
{block name="content"}
<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="{:url('edit',['id'=>$info.id])}">
    <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}," {if $info.path==$vo.path.$vo.id.','}selected{/if}>{: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" {if 2==$info.type}checked=""{/if}>
                                   <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" {if 1==$info.type}checked=""{/if}>
                                   <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" {if 3==$info.type}checked=""{/if}>
                                   <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="{$info.title}">
                    </fieldset>
                    <fieldset class="form-group">
                        <label>栏目标识*</label>
                        <input type="text" class="form-control" name="name" placeholder="栏目唯一英文标识" value="{$info.name}">
                    </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}" {if $info.model_id==$key} selected {/if}>{$vo}</option>
                            {/volist}
                        </select>
                        <small class="text-muted text-danger"  id="contentmodel" data-modelid="{$info.model_id}"></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}" {if $info.template_list==$key} selected {/if}  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}" {if $info.template_content==$key} selected {/if}  data-mid="{$vo.mid}">{$vo.name} {$vo.title}</option>
                            {/volist}
                        </select>
                        <small class="text-muted text-danger"  id="contentmodel" data-modelid="{$info.model_id}"></small>
                    </fieldset>
                    <fieldset class="form-group listcolumn">
                        <label>列表翻页行数*</label>
                        <input type="number" class="form-control" name="list_row" placeholder="只能是正整数" value="{$info.list_row}">
                    </fieldset>
                    <fieldset class="form-group linkcolumn">
                        <label>栏目链接地址*</label>
                        <input type="text" class="form-control" name="url" placeholder="自定义栏目跳转地址" value="{if 3==$info.type}{$info.url}{/if}">
                        <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="{$info['cover_picture']}" >
                        <div id="cover_picture" class="configImage b-a-2 border-default" {if $info.picinfo!=[]} data-imgurl="__UPLOAD__/{$info.picinfo.path}" data-imgsize="{$info.picinfo.size}" data-imgname="{$info.picinfo.name}"{/if}>
                             <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" {if 'orders'==$info.listorder.0}selected{/if}>排序值</option>
                                <option value="id" {if 'id'==$info.listorder.0}selected{/if}>ID编号</option>
                                <option value="create_time" {if 'create_time'==$info.listorder.0}selected{/if}>创建时间</option>
                                <option value="update_time" {if 'update_time'==$info.listorder.0}selected{/if}>更新时间</option>
                                <option value="hits" {if 'hits'==$info.listorder.0}selected{/if}>点击量</option>
                                <option value="rand" {if '[rand]'==$info.listorder.0}selected{/if}>随机</option>
                            </select>
                        </fieldset>
                        <fieldset class="form-group col-sm-6">
                            <label> &nbsp;</label>
                            <select class="form-control" name="listorderway" id="listorderway" {if !isset($info.listorder.1)}disabled{/if}>
                                <option value="desc" {if isset($info.listorder.1)&&'desc'==$info.listorder.1}selected{/if}>从大到小</option>
                                <option value="asc"  {if isset($info.listorder.1)&&'asc'==$info.listorder.1}selected{/if}>从小到大</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="{$info.meta_title}">
                    </fieldset>
                    <fieldset class="form-group listApagecolumn">
                        <label>网页关键词</label>
                        <input type="text" class="form-control" name="meta_keywords" placeholder="显示在网页keywords标签中" value="{$info.meta_keywords}">
                    </fieldset>
                    <fieldset class="form-group listApagecolumn">
                        <label>网页描述</label>
                        <textarea class="form-control" rows="3" name="meta_description" placeholder="显示在网页description标签中" >{$info.meta_description}</textarea>
                    </fieldset>
                    <fieldset class="form-group">
                        <label>排序</label>
                        <input type="number" class="form-control" name="orders" placeholder="只能是正整数" value="{$info.orders}">
                    </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" {if $info.status} checked=""{/if}>
                                   <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}" {if $info.ext_model_id==$key} selected {/if}>{$vo}</option>
                            {/volist}
                        </select>
                    </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>
    var choosefield = ",{$info['url']},";
     function getfield(mid) {
            $.get("{:url('getoptionfield')}", {mid: mid},
                    function (data) {
                        if ('' != data) {
                            var checkString = '';
                            var jdata = jQuery.parseJSON(data);
                            for (var vo in jdata) {
                                var ifchoosed = choosefield.indexOf(',' + vo + ',') >= 0 ? 'checked' : '';
                                checkString += '<label class="custom-control custom-checkbox checkbox-inline"><input type="checkbox" name="urls[]" class="custom-control-input" value="' + vo + '" ' + ifchoosed + '><span class="custom-control-indicator"></span>' + vo + '(' + jdata[vo] + ')</label>';
                            }
                            $('#listcondition').html(checkString);
                        } else {
                            $('#listcondition').html('无');
                        }
                    },
                    "json"
             );
        }
    function getModelField(mid, cname) {
        $.ajax({
            async: false,
            url: "{:url('column/extfields')}",
            type: "GET",
            data: {
                mid: mid,
                cname: cname
            },
            dataType: 'html',
            success: function (data) {
//                alert($.parseJSON(data));
                $('#modelFields').html($.parseJSON(data));
            }
        });
    }
    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());
        //栏目拓展初始化
        {if $info.ext_model_id}
            getModelField('{$info.ext_model_id}', '{$info.name}');
        {/if}
        //栏目拓展初始化
        {if $info.model_id}
            getfield({$info['model_id']});
        {/if}
        $('#path').select2({
            placeholder: '选择栏目'
        });
       var template_list= $('#template_list').select2({
            placeholder: '选择栏目模板'
        });
        var template_content=$('#template_content').select2({
            placeholder: '选择内容模板'
        });
        $('input:radio[name="type"]').change(function () {
           setFieldOption($(this).val());
        });
        //排序选择
        $('#listorder').change(function(){
            if('rand'==$(this).val()){
                $('#listorderway').prop('disabled',true);
            }else{
                $('#listorderway').prop('disabled',false);
            }
        });
        $('#model_id').select2({
            placeholder: '选择内容模型'
        }).on("select2:select", function (e) {
            var mid = $(this).val();
            var modeldata = $('#contentmodel');
             if (mid != modeldata.attr('data-modelid')) {
                modeldata.html('警告：更换扩展模型后，之前模型下的内容将会被删除');
            } else {
                modeldata.html('');
            }
           //列表筛选设置
            getfield(mid);
            $("#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('无');
        });
         
        $('#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();
            getModelField(mid, '{$info.name}');
        });
        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}