{{#data}}
<div class="pageheader">
    <div class="media">
        <div class="pageicon pull-left">
            <i class="fa fa-th-list"></i>
        </div>
        <div class="media-body">
            <ul class="breadcrumb">
                <li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
                <li><a href="/ssr_degrade/index">SSR自适应降级</a></li>
                <li>编辑配置</li>
            </ul>
            <h4>编辑配置</h4>
        </div>
    </div>
    <!-- media -->
</div>
<!-- pageheader -->
<div class="contentpanel servers-page form-horizontal"> 
    <div class="form-group">
        <label for="app" class="col-sm-2 control-label text-center">应用名称：</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="app" placeholder="应用名称" value="{{app}}" {{#if app}}readonly{{/if}}>
        </div>
    </div>
    <div class="form-group">
        <label for="router" class="col-sm-2 control-label text-center">降级条件：</label>
        <div class="col-sm-10">
          <div id="degrades">
            {{#degrades}}
            <div class="form-inline degrade" style="margin-top: 10px;"> 
              <input type="text" class="form-control data-time" style="width: 50px" placeholder="" value="{{time}}">秒内平均qps大于
              <input type="text" class="form-control data-tick" style="width: 50px" placeholder="" value="{{tick}}">，
              <input type="text" class="form-control data-delay" style="width: 50px" placeholder="" value="{{delay}}">分钟内未触发则恢复
              <a href="javascript:;" class="delete">删除</a>
            </div>
            {{/degrades}}
          </div>
          <div style="padding-top: 20px;">
            <a href="javascript:;" id="add" class="">新增</a>
          </div>
        </div>
    </div>
    <div class="row">
        <label class="col-sm-2"></label>
        <div class="col-sm-10">
            <button type="button" class="btn btn-success save">保存</button>
            <button type="button" class="btn btn-default cancel">取消</button>
        </div>
    </div>
</div>
<div style="display: none;" id="template">
  <div class="form-inline degrade" style="margin-top: 10px;"> 
    <input type="text" class="form-control data-time" style="width: 50px" placeholder="秒" value="">秒内平均qps大于
    <input type="text" class="form-control data-tick" style="width: 50px" placeholder="qps" value="">，
    <input type="text" class="form-control data-delay" style="width: 50px" placeholder="qps" value="">分钟内未触发则恢复
    <a href="javascript:;" class="delete">删除</a>
  </div>
</div>
{{/data}}
<script>
    let $app = $('#app'),
        $router = $('#router'),
        $interval = $('#interval'),
        $requests = $('#requests');

    function getData() {
      const app = $('#app').val();

      if (!app) {
        alert('请输入应用名称');
        return false;
      }
      const $degrades = $('#degrades').find('.degrade');

      const data = $degrades.map((index, el) => {
        const $el = $(el);
        const time = +$el.find('.data-time').val();
        const tick = +$el.find('.data-tick').val();
        const delay = +$el.find('.data-delay').val();

        return {
          time,
          tick,
          delay
        };
      }).toArray();

      let valid = true;

      data.forEach(degrade => {
        if (!degrade.time || !Number.isInteger(+degrade.time)) {
          alert('请输入时间！');
          valid = false;
          return false;
        }
        if (!degrade.tick || !Number.isInteger(+degrade.tick)) {
          alert('请输入qps！');
          valid = false;
          return false;
        }
        if (!degrade.delay || !Number.isInteger(+degrade.delay)) {
          alert('请输入恢复时间！');
          valid = false;
          return false;
        }
      });

      if (!valid) {
        return false;
      }
      return {
        app,
        degrades: data
      };
    }
    $('#add').on('click', function() {
      var template = $('#template').html();
      var $degrade = $(template);

      $degrade.find('.delete').on('click', function () {
        $(this).parent().remove();
      });

      $('#degrades').append($degrade);

    });
    $('.delete').on('click', function() {
      $(this).parent().remove();
    });
    $('.save').on('click', function() {
      const data = getData();
      if (!data) {
          return;
      }

      $.post('/ssr_degrade/edit', data, function(ret) {
          if (ret.code === 200) {
              alert('添加成功！');
              location.href = '/ssr_degrade/index';
          } else {
              alert('添加失败！');
          }
      });
    });

    $('.cancel').on('click', function() {
        location.href = '/ssr_degrade/index';
    });
    </script>