{{template "layout.html" .}}
<div class="flex items-center justify-between" style="margin-bottom:20px">
  <div></div>
  <a href="/admin/form_field?form_id={{.form.ID}}" class="btn btn-ghost">← 返回字段列表</a>
</div>
<div class="card" style="max-width:620px">
  <div class="card-hd">{{if .isEdit}}✎ 编辑字段{{else}}＋ 添加字段{{end}}</div>
  <div class="card-bd">
    <form id="formFieldForm">
      <input type="hidden" name="id" value="{{.field.ID}}">
      <input type="hidden" name="form_id" value="{{.form.ID}}">
      <div class="fg">
        <label>所属表单</label>
        <input type="text" class="fctrl" value="{{.form.Name}}" readonly style="background:var(--gray-50);color:var(--gray-400)">
      </div>
      <div class="fr">
        <div class="fg half">
          <label>字段名 <span style="color:var(--danger)">*</span></label>
          <input type="text" name="name" class="fctrl" value="{{.field.Name}}" placeholder="如：name、tel" required>
          <div class="hint">API 提交时的 key，如 field_name</div>
        </div>
        <div class="fg half">
          <label>显示名 <span style="color:var(--danger)">*</span></label>
          <input type="text" name="label" class="fctrl" value="{{.field.Label}}" placeholder="如：姓名、电话" required>
          <div class="hint">表单上显示的标签</div>
        </div>
      </div>
      <div class="fg">
        <label>字段类型 <span style="color:var(--danger)">*</span></label>
        <select name="field_type" class="fctrl" onchange="toggleFieldOptions(this.value)" required>
          <option value="">请选择类型</option>
          <option value="text" {{if eq .field.Type "text"}}selected{{end}}>单行文本</option>
          <option value="textarea" {{if eq .field.Type "textarea"}}selected{{end}}>多行文本</option>
          <option value="radio" {{if eq .field.Type "radio"}}selected{{end}}>单选按钮</option>
          <option value="checkbox" {{if eq .field.Type "checkbox"}}selected{{end}}>多选按钮</option>
          <option value="select" {{if eq .field.Type "select"}}selected{{end}}>下拉选择</option>
          <option value="date" {{if eq .field.Type "date"}}selected{{end}}>日期</option>
          <option value="image" {{if eq .field.Type "image"}}selected{{end}}>图片上传</option>
          <option value="file" {{if eq .field.Type "file"}}selected{{end}}>附件上传</option>
        </select>
      </div>
      <div id="optionsGroup" style="{{if and (ne .field.Type "radio") (ne .field.Type "checkbox") (ne .field.Type "select")}}display:none{{end}}">
        <div class="fg">
          <label>选项配置</label>
          <textarea name="options" class="fctrl" rows="3" placeholder="每行一个，格式：显示名=值">{{.field.Options}}</textarea>
          <div class="hint">每行一个选项，如：<br>红色=red<br>蓝色=blue</div>
        </div>
      </div>
      <div class="fr">
        <div class="fg half">
          <label>默认值</label>
          <input type="text" name="default_val" class="fctrl" value="{{.field.DefaultVal}}" placeholder="留空则无默认值">
        </div>
        <div class="fg half">
          <label>占位提示</label>
          <input type="text" name="placeholder" class="fctrl" value="{{.field.Placeholder}}" placeholder="输入框提示文字">
        </div>
      </div>
      <div class="fg">
        <label>帮助文本</label>
        <input type="text" name="help_text" class="fctrl" value="{{.field.HelpText}}" placeholder="字段下方的说明文字">
      </div>
      <div class="fr">
        <div class="fg half">
          <label>必填</label>
          <select name="required" class="fctrl">
            <option value="0" {{if eq .field.Required 0}}selected{{end}}>否</option>
            <option value="1" {{if eq .field.Required 1}}selected{{end}}>是</option>
          </select>
        </div>
        <div class="fg half">
          <label>排序</label>
          <input type="number" name="sort" class="fctrl" value="{{.field.Sort}}" min="0" placeholder="0">
        </div>
      </div>
      <div class="fg">
        <label>状态</label>
        <select name="status" class="fctrl">
          <option value="1" {{if eq .field.Status 1}}selected{{end}}>启用</option>
          <option value="0" {{if eq .field.Status 0}}selected{{end}}>禁用</option>
        </select>
      </div>
      <div class="flex gap-2" style="padding-top:6px">
        <button type="submit" class="btn btn-primary">保存</button>
        <a href="/admin/form_field?form_id={{.form.ID}}" class="btn btn-ghost">取消</a>
      </div>
    </form>
  </div>
</div>
<script>
function toggleFieldOptions(type){
  var g=document.getElementById('optionsGroup');
  g.style.display=(type==='radio'||type==='checkbox'||type==='select')?'block':'none';
}
toggleFieldOptions('{{.field.Type}}');
document.getElementById('formFieldForm').addEventListener('submit',function(e){
  e.preventDefault();
  var btn=this.querySelector('button[type="submit"]');btn.disabled=true;btn.textContent='保存中…';
  fetch('/admin/form_field/save',{method:'POST',body:new FormData(this)})
    .then(function(r){return r.json()})
    .then(function(d){toast(d.msg,d.code===0?'success':'error');if(d.code===0)setTimeout(function(){window.location.href='/admin/form_field?form_id={{.form.ID}}'},600);else{btn.disabled=false;btn.textContent='保存'}});
});
</script>

</body>
</html>