<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 (xt_app_version.id) { %>
        <input type="hidden" value="<%= xt_app_version.id %>" name="id">
        <% } %>

        <div class="layui-form-item">
          <label class="layui-form-label">版本号</label>
          <div class="layui-input-block">
            <input type="text" name="version_code" lay-verify="version_code"
                   value="<%= xt_app_version.version_code ? xt_app_version.version_code : '0' %>" 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="version_name" lay-verify="version_name"
                   value="<%= xt_app_version.version_name ? xt_app_version.version_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="checkbox" name="silence" 
              value="true"
              lay-skin="switch" lay-text="是|否" <%- xt_app_version.silence ? 'checked' : '' %> >
          </div>
          <div class="layui-form-mid layui-word-aux">只有在更新bundle的时候，静默安装才有效果</div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">强制更新</label>
          <div class="layui-input-block">
            <input type="checkbox" name="force_update" value="true" 
              lay-skin="switch" lay-text="是|否" <%- xt_app_version.force_update ? 'checked' : '' %> >
          </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="checkbox" name="store_update" lay-filter="store_update" lay-skin="switch" value=true 
              lay-text="是|否" <%- xt_app_version.store_update ? 'checked' : '' %> >
          </div>
          <div class="layui-form-mid layui-word-aux">市场更新将会跳转到市场进行更新，否则就是bundle更新</div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">平台</label>
          <div class="layui-input-inline">
            <select name="platform" lay-verify="platform">
              <option value="ios" <%- xt_app_version.platform === 'ios' ? 'selected' : '' %> >iOS</option>
              <option value="android" <%- xt_app_version.platform === 'android' ? 'selected' : '' %> >Android</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">更新内容</label>
          <div class="layui-input-block">
            <textarea name="content" lay-verify="content" placeholder="请输入更新内容" class="layui-textarea"><%= xt_app_version.content %></textarea>
          </div>
        </div>
        <div id="div_url_upload" class="layui-form-item" style="display: <%= xt_app_version.store_update ? 'none' : 'block' %>;">
          <label class="layui-form-label">bundle包</label>
          <div class="layui-input-inline">
            <button id="btn_upload" class="layui-btn layui-btn-primary" type="button">上传文件</button>
            <input type="hidden" name="url_upload" lay-verify="url_upload" id="hidden_url" 
              value="<%= xt_app_version.store_update ? '' : (xt_app_version.url || '') %>" >
          </div>
          <div id="label_upload_status" class="layui-form-mid layui-word-aux"><%= xt_app_version.url && !xt_app_version.store_update ? '已上传' : '' %></div>
        </div>
        <div id="div_url_store" class="layui-form-item" style="display: <%= xt_app_version.store_update ? 'block' : 'none' %>;">
          <label class="layui-form-label">下载链接</label>
          <div class="layui-input-block">
            <input type="text" name="url_store" lay-verify="url_store"
              value="<%= xt_app_version.store_update ? (xt_app_version.url ? xt_app_version.url : '') : '' %>" 
              placeholder="请输入下载链接" autocomplete="off" class="layui-input">
          </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>
  layui.use(['form', 'laydate', 'upload'], function () {
    var $ = layui.$, layer = layui.layer, form = layui.form;
    var upload = layui.upload;

    upload.render({
      elem: '#btn_upload',
      url: '/static/upload',
      field: 'file',
      accept: 'file',
      before: function(obj) {
        layer.load(1);
      },
      done: function (res, index, upload) {
        layer.closeAll('loading'); //关闭loading
        if (res.errCode === 0) {
          var name = res.data[0]['real_name'];
          $('#label_upload_status').text('已上传');
          $('#hidden_url').val(res.data[0]['id']);
        }
      },
      error: function (index, upload) {
        layer.closeAll('loading'); //关闭loading
      }
    });

    form.on('switch(store_update)', function(data) {
      console.log(data.elem.checked); //开关是否开启，true或者false
      if (data.elem.checked) { //打开表示是市场更新
        $('#div_url_upload').hide();
        $('#div_url_store').show();
      } else {
        $('#div_url_upload').show();
        $('#div_url_store').hide();
      }
    });

    /* 自定义验证规则 */
    form.verify({
      version_code: function (value, item) {
        if (!value.trim()) {
          return 'version_code不能为空';
        }
        var reg = /^(\-|\+)?\d+(\.\d+)?$/;
        if(!reg.test(value.trim())) {
          return 'version_code必须是数字';
        }
        var reg = /^[0-9]+$/;
        if(!reg.test(value.trim())) {
          return 'version_code必须是整数';
        }
      },
      version_name: function (value, item) {
        if (!value.trim()) {
          return 'version_name不能为空';
        }
        if (value.trim().length > 50) {
          return 'version_name的长度必须小于50';
        }
      },
      silence: function (value, item) {
      },
      force_update: function (value, item) {
      },
      store_update: function (value, item) {
      },
      platform: function (value, item) {
        if (value.trim().length > 50) {
          return 'platform的长度必须小于50';
        }
      },
      content: function (value, item) {
        if (value.trim().length > 1000) {
          return 'content的长度必须小于1000';
        }
      },
      url: function (value, item) {
        if (value.trim().length > 256) {
          return 'url的长度必须小于256';
        }
      },
      
    });

    /* 监听提交 */
    form.on('submit(component-form-submit)', function (data) {
      var field = data.field;
      if (field.store_update) { //市场更新
        if (!field.url_store) {
          layer.msg('请填写下载的市场链接', {icon: 5});
          return false;
        }
        field.url = field.url_store;
      } else {
        if (!field.url_upload) {
          layer.msg('请上传bundle包', {icon: 5});
          return false;
        }
        field.url = field.url_upload;
      }
      var loading = layer.load(1);
      $.post('/admin/xt_app_version/modify', field, function (data) {
        layer.close(loading);
        if (data.errCode === 0) {
          layer.msg(data.msg, {
            icon: 6,
            time: 2000
          }, function() {
            window.location.reload();
          });
        } else {
          layer.msg(data.msg, {icon: 5});
        }
      });
      return false;
    });
  
  });
</script>
