{extend name="common/base"/}
<!-- 主体 -->
{block name="body"}
<form class="layui-form p-page"  lay-filter="form-filter">
  <!--	<h3 class="pb-3">新建/编辑模型</h3>-->
  <fieldset class="layui-elem-field">
    <legend>添加/编辑字段 </legend>
    <div class="layui-field-box">
      <div class="layui-form-item">
        <label class="layui-form-label">字段名称<font>*</font></label>
        <div class="layui-input-block">
          <input type="text" name="title" lay-verify="required" lay-reqText="请输入字段名称" placeholder="请输入字段名称" class="layui-input" value="{$field.title|default=''}" />
        </div>
        <div class="layui-form-mid layui-text-em"></div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">字段标识<font>*</font></label>
        <div class="layui-input-block">
          <input type="text" name="name" lay-verify="name" maxlength="16" placeholder="请输入字段标识" lay-reqText="请输入字段标识" class="layui-input" value="{$field.name|default=''}" />
        </div>
        <div class="layui-form-mid layui-text-em">仅支持字母、数字和下划线，不能重复</div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">字段类型<font>*</font></label>
        <div class="layui-input-block">
          {volist name="field_types" id="v"}
          <input type="radio" name="type" lay-filter="typeChange" value="{$v.name}" title="{$v.title|default=''}" {if condition="isset($field)"}{if condition="$v.name eq $field.type"}checked{/if}{else}{if condition="$v.default eq 1"}checked{/if}{/if} {if condition="isset($field) && $v.define eq 'enum' && ($field.type eq 'radio' || $field.type eq 'select' || $field.type eq 'checkbox')"} disabled{/if}/>
          <div lay-radio>
            <span style="color: {if condition="$v.is_require_value eq 1"}#1e9fff{else}#16b777{/if};">{$v.title}</span>
          </div>
          {/volist}
        </div>
        <div class="layui-form-mid layui-text-em"></div>
      </div>
      <div class="layui-form-item" id="default_value" style="">
<!--        'text','multitext','htmltext','radio','checkbox','select','int','float','decimal'-->
        <label class="layui-form-label">默认值</label>
        <div class="layui-input-block">
          <textarea placeholder="请输入内容" class="layui-textarea" name="default_value">{$field.default_value|default=''}</textarea>
        </div>
        <label class="layui-form-label"></label>
        <div class="layui-form-mid layui-text-em">1、如果定义字段类型为下拉框、单选项、多选项时，默认值为必填项，多个值用竖线<span class="layui-badge-rim">|</span>隔开。如:<span class="layui-badge-rim">男|女</span><br>2、特殊符号会被过滤掉，比如：&amp;、=、?等<br>3、定义字段类型为多选项时，默认值最多为64项，超出则截取前64项</div>
      </div>
      <div class="layui-form-item" id="unit_item" {if condition="!isset($field) || in_array($field['type'], ['text','int','float','decimal'])"}style=""{else}style="display:none;"{/if}>
           <label class="layui-form-label">默认单位</label>
          <div class="layui-input-block">
            <input type="text" name="unit" maxlength="16" placeholder="比如：元、个、件等等" class="layui-input" value="{$field.unit|default=''}" />
          </div>
          <div class="layui-form-mid layui-text-em">比如：元、个、件等等</div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">提示文字</label>
        <div class="layui-input-block">
          <input type="text" name="tips" maxlength="255" placeholder="" class="layui-input" value="{$field.tips|default=''}" />
        </div>
        <div class="layui-form-mid layui-text-em">显示在发布页字段右侧的提示说明文字</div>
      </div>
    <div class="layui-form-item">
      <label class="layui-form-label">状态</label>
      <div class="layui-input-block">
        <input type="radio" name="status" value="1" title="正常" {if condition="(isset($field) && $field.status eq 1) || !isset($field)"}checked{/if} />
        <input type="radio" name="status" value="0" title="禁用" {if condition="isset($field) && $field.status eq 0"}checked{/if} />
      </div>
      <div class="layui-form-mid layui-text-em"></div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">排序</label>
      <div class="layui-input-block">
        <input type="number" lay-affix="number" name="sort" min="0" max="10000" placeholder="0" value="{$field.sort|default=100}" class="layui-input">
      </div>
      <div class="layui-form-mid layui-text-em"></div>
    </div>

    </div>
  </fieldset>

  <div class="py-3">
    <input type="hidden" name="id" value="{$id|default=''}" />
    <input type="hidden" name="channel_id" value="{$channel_id|default=''}" />
    <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">确认提交</button>
    <!--		<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
  </div>
</form>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
  layui.use(['tool'],function(){
    var form = layui.form,tool=layui.tool;
    form.verify({
      name:function(value, elem) {
        if (!/^[a-z][a-z0-9_]{2,15}$/.test(value)) {
          return '字段标识必须是字母或数字，以字母开头，且长度为3到16位';
        }
      },
    });
    //监听提交
    form.on('submit(webform)', function (data) {
      let callback = function (e) {
        parent.layui.layer.msg(e.msg);
        if (e.code == 0) {
          parent.layui.pageTable.reloadData()
          setTimeout(function () {
            parent.layui.layer.closeAll();
          }, 1000);
        }
      }
      tool.post("{:url('admin/channel/field_add')}", data.field, callback);
      return false;
    });
    //类型切换事件
    form.on('radio(typeChange)', function(data){
      $('input[type="radio"]').prop('disabled', false).removeAttr('disabled');
      form.render('radio');
      let value=data.value;

      if(['text','int','float','decimal'].indexOf(value) !== -1){
        $('#unit_item').show();
      }else{
        $('#unit_item').hide();
      }
      if(value!='radio' && value!='checkbox' && value!='select'){
        form.val('form-filter', {
          "default_value": "",
        });
      }else{
        layer.tips('字段类型为下拉框、单选项、多选项时，默认值必填', $('[name="default_value"]'), {tips: 1})
      }
    });
  })
</script>
{/block}
<!-- /脚本 -->