{include file="public/head"}
{php}
if($pid !== 0) {
    $pnavinfo = app\admin\model\Navlist::get($pid);
} else {
    $pnavinfo = NULL;
}
{/php}
<script type="text/javascript" src="__STATIC__/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/ueditor/ueditor.all.js"></script>
<style>
.layui-treeSelect .ztree li span.button.switch{top:-6px !important;}
.layui-treeSelect .ztree li{padding: 0px;}
</style>
<div class="layui-fluid layui-rg-bg">
    <form class="layui-form layui-form-pane">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md12 layui-col-lg8">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="layui-icon layui-icon-about"> </i>基本信息</div>
                    <div class="layui-card-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label" title="name">名称</label>
                            <div class="layui-input-inline" id="name"><input type="text" name="name" required  lay-verify="required" placeholder="请输入栏目名称" class="layui-input"></div>
                            <div class="layui-word-aux">
                                <input type="checkbox" title="批量添加(一行一个)，副名称及URL名将失效" lay-skin="primary" lay-filter="adds">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" title="ename">副名称</label>
                            <div class="layui-input-inline"><input type="text" name="ename" placeholder="请输入栏目副名称" class="layui-input"></div>
                            <div class="layui-form-mid layui-word-aux">比如栏目英文之类</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" title="pid">上级</label>
                            <div class="layui-input-block">
                            <input type="text" id="navtree" lay-filter="navtree" class="layui-input" name="pid">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" title="img">图片</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="img" id="img">
                            </div>
                            <div class="layui-word-aux">
                                <div class="layui-btn-group">
                                    <button type="button" class="layui-btn uploadimage" lay-data="{id:'img',config:{water:false,thumb:false,action:'uploadimage'}}">上传</button>
                                    <button type="button" class="layui-btn" onclick='openmedia("{:url('media/show')}?type=image&stype=radio&formname=img");'>素材库</button>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-block">
                                <img src="/public/static/images/nopic.jpg" id="imgpic" style="max-height:60px; border:#efefef 1px solid;">
                            </div>
                        </div>
                        <div class="layui-form-item" pane>
                            <label class="layui-form-label">类别</label>
                            <div class="layui-input-block">
                                <input type="radio" name="type" value="about" title="单页内容" lay-filter="navType" {if $pnavinfo && $pnavinfo.type == "about"}checked{/if}>
                                <input type="radio" name="type" value="model" title="系统模型" lay-filter="navType" {if $pnavinfo && $pnavinfo.type == "model"}checked{/if}>
                                <input type="radio" name="type" value="link" title="链接" lay-filter="navType">
                                <input type="radio" title="系统页面" disabled="">
                            </div>
                        </div>
                        <div id="typeid"></div>
                        <div id="template"></div>
                        {:DiyFields_navlist()}
                        <div class="layui-form-item">
                            <label class="layui-form-label" title="keys">关键词</label>
                            <div class="layui-input-block">
                            <div id="keys" name="keys" class="xmselect" value=""></div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" title="desc">栏目描述</label>
                            <div class="layui-input-block"><textarea placeholder="栏目描述" class="layui-textarea" name="desc" id="desc"></textarea></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-md12 layui-col-lg4">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="layui-icon layui-icon-set"> </i>其他设置</div>
                    <div class="layui-card-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label" title="alias">URL名</label>
                            <div class="layui-input-block"><input type="text" name="alias" placeholder="输入URL名" class="layui-input"></div>
                            <div class="layui-form-mid layui-word-aux"> <a style="cursor:pointer;text-decoration:underline;color:#01AAED !important;" href="javascript:;" onclick="ConvertName();">拼音</a>，URL美化，链接类型无效，批量增加无效</div>
                        </div>
                        <div class="layui-form-item" pane>
                            <label class="layui-form-label">栏目位置</label>
                            <div class="layui-input-block">
                            <input type="checkbox" name="G0" lay-skin="primary" title="默认主栏目" checked>
                            {foreach :app\common\model\Navgroup::select() as $v}
                            <input type="checkbox" name="{$v.name}" lay-skin="primary" title="{$v.title}">
                            {/foreach}
                            </div>
                        </div>
                        <div id="ugids" class="layui-hide">
                        <div class="layui-form-item" pane>
                            <label class="layui-form-label">浏览权限</label>
                            <div class="layui-input-block">
                                {foreach :app\common\model\Usergroup::select() as $v}
                                <input type="checkbox" value="{$v.id}" title="{$v.title}" lay-skin="primary" lay-filter="rgcms_checkbox">
                                {/foreach}
                                <input type="hidden" name="ugids" value="0">
                            </div>
                        </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" title="target">Target</label>
                            <div class="layui-input-block">
                                <select name="target">
                                <option value="">打开方式</option>
                                <option value="_blank">_blank</option>
                                <option value="_self">_self</option>
                                <option value="_parent">_parent</option>
                                <option value="_top">_top</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label" title="torder">{:lang("order")}</label>
                            <div class="layui-input-block"><input type="number" name="torder" lay-verify="number" min="1" placeholder="排序为大于1的整数字" class="layui-input" value="{:app\\admin\\model\\Navlist::count()+1}"></div>
                        </div>
                        <div class="layui-form-item" pane>
                            <label class="layui-form-label" title="status">{:lang("state")}</label>
                            <div class="layui-input-block"><input type="checkbox" name="status" lay-skin="switch" checked lay-text="开|关"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="layui-form-footer">
            <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>
            <a class="layui-btn layui-btn-sm layui-btn-primary" onclick="closelayer()"></i>{:lang('close')}</a>
        </div>
    </form>
</div>
{include file="public/foot"}
{include file="public/other"}
<script src="__STATIC__/js/Convert_Pinyin.js"></script>
<script> 
    var ConvertName = function(){
        var name = $('input[name="name"]').val();
        if(!name) {
            layer.msg('标题未填写');
            return false;
        }
        //获取全写拼音（调用js中方法）
        var fullName = pinyin.getFullChars(name);
        fullName = fullName.replace(/[^a-z0-9]+/gi,' '); // 过滤非数字和英文
        fullName = fullName.trim(); // 去2头空
        fullName = fullName.replace(/\s+/g,' '); // 只保留连续一个空格
        fullName = fullName.replace(/\ /g, "_"); // 空格替换下划线
        //给文本框赋值
        $('input[name="alias"]').val(fullName);
    };
</script>
<script>
    $(document).on("click",".elink",function(){
        $('input[name="link"]').val("javascript:;");
    });
    layui.use(['treeSelect','jquery','form', 'layer', 'element','upload','xmSelect'],function () {
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var treeSelect = layui.treeSelect;
        var upload = layui.upload;
        var xmSelect = layui.xmSelect;
        form.on('checkbox(adds)', function(data){
            if(data.elem.checked) {
                $("#name").html('<textarea placeholder="栏目名称列表" class="layui-textarea" name="name" lay-verify="required"></textarea>');
            } else {
                $("#name").html('<input type="text" name="name" required  lay-verify="required" placeholder="请输入栏目名称" class="layui-input">');
            }
        })
        function selectAjax(url,text,value,wheredata) {
            $.ajax({
                url: url,
                type: 'POST',
                data: wheredata,
                dataType: 'json',
                success: function(result){
                    if(text == '单页'){
                        var str = '<div class="layui-form-item"><label class="layui-form-label">'+text+'</label><div class="layui-input-block"><select name="typeid"><option value="">创建单页或选择一个单页</option>';
                    } else {
                        var str = '<div class="layui-form-item"><label class="layui-form-label">'+text+'</label><div class="layui-input-block"><select name="typeid" lay-verify="required"><option value="">请选择'+text+'</option>';
                    }
                    
                    var selected;
                    (result.data).forEach(function(i){
                        i.id == value?selected = 'selected':selected='';
                        str += '<option value="'+i.id+'" '+selected+'>'+i.title+'</option>';
                    });
                    str += "</select></div></div>";
                    $("#typeid").html(str);
                    form.render();
                }
            });
        }
        // 下拉多选
        $('.xmselect').each(function(index){
            var id = $(this).attr('id');
            var name = $(this).attr('name');
            var value = '';
            if(typeof($(this).attr('value'))!=="undefined") {
                value = $(this).attr('value').split(',');
            }
            var keys = xmSelect.render({
                el: '#'+id,
                name: name,
                tips: '请选择关键词',
                searchTips: '搜索或添加(请勿含有逗号)',
                direction: 'auto',
                paging: true,
                autoRow: true,
                pageSize: 8,
                initValue: value,
                theme: {
                    color: '#5FB878',
                },
                prop: {
                    value: 'name',
                },
                toolbar: {
                    show: true,
                    list: [ 'ALL', 'CLEAR', 'REVERSE' ]
                },
                filterable: true,
                create: function(val, arr){
                    if(arr.length !== 1) {
                        return {
                            name: val.replace(/,/g, ""),
                            value: val.replace(/,/g, "")
                        }
                    }
                },
                on: function(data){
                    var isAdd = data.isAdd;
                    var change = data.change;
                    if(isAdd && change.length == 1) {
                        $.ajax({
                            async:false,
                            url: '{:url("sitekey/add")}',
                            type: 'POST',
                            dataType: 'json',
                            data: {name:change[0].name,list_token:true},
                            success: function(result){
                                if(result.code == 1) {
                                    layer.msg(result.msg);
                                } else {
                                    return false;
                                }
                            }
                        });
                    }
                },
                data: {:app\\common\\model\\Sitekey::field(['id,name'])->order('torder')->select()}
            });
        });
        // 栏目树
        treeSelect.render({
            elem: '#navtree',
            notes: {:json_encode(app\\admin\\model\\Navlist::getNavlisttree(session('siteid')))},
            placeholder: '选择栏目',
            search: false,
            style: {
                folder: {
                    enable: false
                },
                line: {
                    enable: true
                }
            },
            // 点击回调
            click: function(d){
            },
            // 加载完成后的回调函数
            success: function (d) {
                {if $pid>0}
                treeSelect.checkNode('navtree',{$pid});
                {/if}
                // treeSelect.checkNode('pidtree',3);
                // console.log(d);
                // 选中节点，根据id筛选
                // 获取zTree对象，可以调用zTree方法
                // var treeObj = treeSelect.zTree('tree');
                // console.log(treeObj);
                // treeSelect.refresh('pidtree');
            }
        });
        
        // 单选事件
        form.on('radio(navType)',function(data){
            var type = data.value;
            loading = layer.load(1, {shade: [0.1, '#fff']});
            var url,text,wheredata;
            $("#typeid").html('');
            $("#template").html('');
            $("#ugids").addClass('layui-hide');
            if(type == 'about') {
                url = '{:url("about/index")}';
                text = '单页';
                wheredata = {limit:999};
                selectAjax(url,text,'',wheredata);
            } else if(type == 'model'){
                url = '{:url("cmsmodel/index")}';
                text = '模型';
                {if $pnavinfo}
                $("#template").html('<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">列表模板</label><div class="layui-input-inline"><select name="listtemp"><option value="">选择列表模板</option>{volist name="templist" id="v"}{if strpos($v,"_list.html")}<option value="{$v}" {if $pnavinfo.listtemp == $v}selected{/if}>{$v}</option>{/if}{/volist}</select></div></div><div class="layui-inline"><label class="layui-form-label">详情模板</label><div class="layui-input-inline"><select name="infotemp"><option value="">选择详情模板</option>{volist name="templist" id="v"}{if strpos($v,"_content.html")}<option value="{$v}" {if $pnavinfo.infotemp == $v}selected{/if}>{$v}</option>{/if}{/volist}</select></div></div></div>');
                {else/}
                $("#template").html('<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">列表模板</label><div class="layui-input-inline"><select name="listtemp"><option value="">选择列表模板</option>{volist name="templist" id="v"}{if strpos($v,"_list.html")}<option value="{$v}">{$v}</option>{/if}{/volist}</select></div></div><div class="layui-inline"><label class="layui-form-label">详情模板</label><div class="layui-input-inline"><select name="infotemp"><option value="">选择详情模板</option>{volist name="templist" id="v"}{if strpos($v,"_content.html")}<option value="{$v}">{$v}</option>{/if}{/volist}</select></div></div></div>');
                {/if}
                $("#ugids").removeClass('layui-hide');
                wheredata = {type:1};
                {if $pnavinfo}
                selectAjax(url,text,{$pnavinfo.typeid},wheredata);
                {else /}
                selectAjax(url,text,'',wheredata);
                {/if}
            } else if(type == 'link'){
                $("#typeid").html('<div class="layui-form-item"><label class="layui-form-label">链接</label><div class="layui-input-inline" style="width:65%;"><input type="text" name="link" required lay-verify="required" autocomplete="off" placeholder="设置链接后，栏目将打开至此链接" class="layui-input"></div><div class="layui-form-mid layui-word-aux elink" style="cursor:pointer;text-decoration:underline;color:#01AAED !important;">设置空链</div></div>');
            } else {}
            layer.close(loading);
        });
        // 上传图片
        var uploadimage = upload.render({
            elem: '.uploadimage'
            ,url: '{:url("upload/upload")}'
            ,field: 'upfile'
            ,exts:'{:config("app.upload.imageAllowFiles")}'
            ,size:{:config('app.upload.imageMaxSize')*1024}
            ,before: function(obj){
                this.data = this.config;
            }
            ,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);
            }
        });
        {if $pnavinfo}
        $(function(){
            $("input:radio[name='type']:checked").next("div").click();
        });
        {/if}
        // 表单提交
        form.on('submit(submit)',function(data){
            loading = layer.load(1, {shade: [0.1, '#fff']});
            data.field.pid = data.field.pid=="" ? "0" : data.field.pid;
            data.field.status = data.field.status=="on" ? "1" : "0";
            data.field.G0 = data.field.G0=="on" ? "1" : "0";
            {foreach :app\common\model\Navgroup::select() as $v}
            data.field.{$v.name} = data.field.{$v.name}=="on" ? "1" : "0";
            {/foreach}
            $.ajax({
                url: '{:url("add")}',
                type: 'POST',
                dataType: 'json',
                data: data.field,
                success: function(result){
                    layer.close(loading);
                    layuialert(result,3);
                }
            });
            return false; //禁止刷新
        });
    });
</script>