{extend name="index_layout"/}
{block name="main"}
<form class="layui-form" method="post">
    {:token()}
    <div class="layui-form-item">
        <label class="layui-form-label">分组</label>
        <div class="layui-input-block">
            <select name="row[group]" lay-verify="required">
                <option value=""></option>
                {volist name="groupArray" id="vo"}
                <option value="{$key}" {eq name="key" value="$groupType"}selected{/eq}>{$vo}[{$key}]</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">配置类型</label>
        <div class="layui-input-block">
            <select name="row[type]" lay-filter="fieldType" lay-verify="required">
                <option value=""></option>
                {volist name="fieldType" id="vo"}
                <option value="{$vo.name}" {eq name="vo.name" value="text"}selected{/eq}>{$vo.title}[{$vo.name}]</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">配置标题</label>
        <div class="layui-input-inline">
            <input type="text" name="row[title]" lay-verify="required" autocomplete="off" 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">配置名称</label>
        <div class="layui-input-block">
            <input type="text" name="row[name]" lay-verify="required" autocomplete="off" placeholder="字段英文名称" class="layui-input">
        </div>
        <div class="layui-form-mid no-float layui-word-aux">英文字母和下划线组成，如 <code>web_site_title</code></div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">配置默认值</label>
        <div class="layui-input-block">
            <textarea name="row[value]" placeholder="未指定值时默认插入字段的值" class="layui-textarea"></textarea>
        </div>
        <div class="layui-form-mid no-float layui-word-aux">配置类型为<code>数组</code>时请按如下格式填写：
            <br>{"键名1":"键值1","键名2":"键值2"}</div>
    </div>
    <div class="layui-form-item layui-form-text" id="options" style="display: none;">
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">可见条件</label>
        <div class="layui-input-inline">
            <input type="text" name="row[visible]" autocomplete="off" placeholder="可见条件" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">拓展属性</label>
        <div class="layui-input-block">
            <textarea name="row[extend]" placeholder="填写拓展属性" class="layui-textarea"></textarea>
        </div>
        <div class="layui-form-mid no-float layui-word-aux">如：data-field="{name}"，扩展属性支持{id}、{name}、{group}、{title}、{value}替换</div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">配置备注</label>
        <div class="layui-input-block">
            <textarea name="row[remark]" placeholder="填写配置说明" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
            <input type="number" name="row[listorder]" autocomplete="off" placeholder="只能是正整数" class="layui-input" value="100">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="row[status]" value="1" title="显示" checked>
                <input type="radio" name="row[status]" value="0" title="隐藏">
            </div>
    </div>
    <div class="layui-form-item layer-footer">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<div id="options1" style="display: none;">
    <label class="layui-form-label">配置项</label>
    <div class="layui-input-block">
        <textarea name="row[options]" placeholder="键值:键名
键值:键名
键值:键名
....." class="layui-textarea"></textarea>
    </div>
    <div class="layui-form-mid no-float layui-word-aux">如：
        <br>1:北京
        <br>2:上海
        <br>3:广东
    </div>
</div>
<div id="options2" style="display: none;">
    <label class="layui-form-label">配置项</label>
    <div class="layui-input-block">
        <textarea name="row[options]" placeholder="url:提供数据源的URL地址
field:列表显示读取的字段,默认[name]
key:列表选中后渲染的字段,默认[id]
pagination:是否开启分页,默认[true]
limit:分页大小,默认[10]
multiple:是否支持多选,默认[false]
max:最多可选择数量
order:排序字段，默认[id]" class="layui-textarea"></textarea>
    </div>
    <div class="layui-form-mid no-float layui-word-aux">如：
<br>url:admin/auth.manager/index
<br>field:username
<br>key:id
<br>pagination:true
<br>limit:10
<br>multiple:true
<br>max:20
<br>order:id
    </div>
</div>
<div id="options3" style="display: none;">
    <label class="layui-form-label">自定义模板</label>
    <div class="layui-input-block">
        <select name="row[options]">
            <option value="custom.html" selected>默认模板:custom.html</option>
            {volist name="custom" id="vo"}
            <option value="{$vo}">{$vo}</option>
            {/volist}
        </select>
    </div>
    <div class="layui-form-mid no-float layui-word-aux">新增模板以custom_xx.html形式<br>模板位于application/admin/view/custom目录下</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
layui.use(['form','yznForm'], function() {
    var form = layui.form,
    yznForm = layui.yznForm;

    form.on('select(fieldType)', function(data) {
        if (data.value == 'checkbox' || data.value == 'select' || data.value == 'selects' || data.value == 'radio' || data.value == 'selectpage' || data.value == 'custom') {
            if (data.value == 'selectpage') {
                $('#options').html($('#options2').html());
            }else if(data.value == 'custom'){
                $('#options').html($('#options3').html()); 
            }else{
                $('#options').html($('#options1').html());   
            }
            $('#options').show();
            form.render();
        }else{
            $('#options').hide();
        }
    });

    yznForm.bindevent($("form.layui-form"));
});
</script>
{/block}