<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body" style="padding: 15px;">
      <form class="layui-form" action="" lay-filter="component-form-group">
        <% if (user) { %>
        <input type="hidden" value="<%= user.id %>" name="id">
        <% } %>
        <div class="layui-form-item">
          <label class="layui-form-label">姓名</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="name"
              lay-verify="required|name"
              value="<%= user ? user.name : '' %>"
              placeholder="请输入姓名"
              autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">登录名</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="loginName"
              lay-verify="required|loginName"
              value="<%= user ? user.loginName : '' %>"
              placeholder="请输入登录名"
              autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">密码</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="password"
              lay-verify="password"
              placeholder="<%= user ? '为空则表示不更新密码' : '请输入密码' %>"
              autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">角色</label>
          <div class="layui-input-block">
            <select name="roleId" lay-verify="required">
              <option value=""></option>
              <% _.each(roles, function(role, index) { %>
                <option value="<%= role.id %>" <%= currentRole && currentRole.id === role.id ? 'selected' : '' %>><%= role.name %></option>
              <% }) %>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">简介</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="description"
              lay-verify="description"
              value="<%= user ? user.description : '' %>"
              placeholder="请输入简介"
              autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <select name="sex">
              <option value="0" <%= user && user.sex === 0 ? 'selected' : '' %> >男</option>
              <option value="1" <%= user && user.sex === 1 ? 'selected' : '' %> >女</option>
            </select>  
            </div>
        </div>
        <div class="layui-form-item layui-layout-admin">
          <div class="layui-input-block">
            <div class="layui-footer" style="left: 0;">
              <button class="layui-btn" lay-submit="" lay-filter="component-form-submit">立即提交</button>
              <button id="reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
  // FIXME: 统一修改为用adminUtils方法访问网络等
  layui.config({
    base: '/admin/js/'
  }).use(['form', 'laydate', 'adminUtils'], function () {
    var form = layui.form;
    var adminUtils = layui.adminUtils;

    /* 自定义验证规则 */
    form.verify({
      name: function (value, item) {
        if (value.trim().length > 255) {
          return 'name的长度必须小于255';
        }
      },
      loginName: function (value, item) {
        if (value.trim().length > 255) {
          return 'loginName的长度必须小于255';
        }
      },
      password: function (value, item) {
        <% if (!user) { %>
        if (!value) {
          return '密码不能为空';
        }
        if (value.length < 6) {
          return '密码不能小于6位';
        }
        <% } %>
        if (value.trim().length > 255) {
          return '密码的长度必须小于255';
        }
      },
      headIcon: function (value, item) {
        if (value.trim().length > 255) {
          return 'headIcon的长度必须小于255';
        }
      },
      language: function (value, item) {
        if (value.trim().length > 255) {
          return 'language的长度必须小于255';
        }
      },
      description: function (value, item) {
        if (value.trim().length > 255) {
          return 'description的长度必须小于255';
        }
      },
      sex: function (value, item) {
        var reg = /^(\-|\+)?\d+(\.\d+)?$/;
        if(!reg.test(value.trim())) {
          return 'sex必须是数字';
        }
      },
    });

    /* 监听提交 */
    form.on('submit(component-form-submit)', function (data) {
      var fields = data.field;
      adminUtils.fetch({
        url: '/sys/user/modify',
        data: fields,
        success: function(data) {
          window.location.reload();
        }
      });
      return false;
    });
  });
</script>
