<style type="text/css">
.del-span {
    padding: 8px;
    border-radius: 8px;
}
.del {
    border-radius: 10px !important;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
    padding: 0 5px;
    position: absolute;
    margin-top: -14px;
    margin-left: -2px;
    color: White;
    cursor: pointer;
}
.layui-layer-page .layui-layer-content {
            position: relative;
            overflow: visible !important;
    }

</style>  
  <div class="layui-fluid">
    <div class="layui-row layui-form layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-body">
              <div class="layui-row layui-col-space15">
                <div class="layui-col-md2" style="padding-top: 10px;">匹配</div>
                <div class="layui-col-md10 match-item-list">
                    <span id="matchers" style="color:gray">待添加...</span>
                </div>
              </div>

              <div class="layui-row layui-col-space15">
                <div class="layui-col-md2"></div>
                <div class="layui-col-md3">
                  <select name="match-item" lay-filter="type">
                    <option value="">请选择匹配项</option>
                    <option value="ip">IP地址</option>
                    <option value="host">域名</option>
                    <option value="req_uri">请求URI</option>
                    <option value="uri">请求URI(不带参数)</option>
                    <option value="req_method">请求方法</option>
                    <option value="user_agent">浏览器UA</option>
                    <option value="referer">请求来源</option>
                    <option value="country_iso_code">国家代码</option>
                    <option value="accept_language">accept_language请求头</option>
                  </select>
                </div>
                <div class="layui-col-md2">
                  <select class="operator" name="operator" lay-filter="match-op">
                    <option value="">操作符</option>
                    <option value="=">等于</option>
                    <option value="!=">不等于</option>
                    <option value="contain">包含</option>
                    <option value="!contain">不包含</option>
                    <option value="prefix">前缀匹配</option>
                    <option value="suffix">后缀匹配</option>
                    <option value="regex">正则匹配</option>
                  </select>
                </div>

                <div class="layui-col-md3">
                  <input type="text" name="value" required lay-verify="required" placeholder="请输入正则表达式" autocomplete="off" class="layui-input layui-hide">    
                  <textarea name="value"  placeholder="一行一个匹配值" class="layui-textarea"></textarea>

                </div>

                <div class="layui-col-md2">
                  <button type="button" id="add-match-item" class="layui-btn layui-btn-sm layui-bg-blue">添加</button>
                </div>


              </div>

              <div class="layui-row layui-col-space15">
                <div class="layui-col-md2">行为</div>
                <div class="layui-col-md6">
                  <input type="radio" name="action" value="allow" checked title="允许">
                  <input type="radio" name="action" value="reject" title="拒绝" >
                </div>
              </div>

              <div class="layui-row layui-col-space15">
                <div class="layui-col-md2"></div>
                <div class="layui-col-md2">
                  <button id="add_match" type="button" class="layui-btn">确认</button>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<script type="text/javascript">
table = layui.table
$ = layui.$
form = layui.form
form.render()

form.on('select(match-op)', function(data){
  if (data.value == "regex") {
    $("input[name='value']").removeClass("layui-hide")
    $("textarea[name='value']").addClass("layui-hide")
  } else {
    $("input[name='value']").addClass("layui-hide")
    $("textarea[name='value']").removeClass("layui-hide")
  }
  form.render()
})

$("#add-match-item").click(function () {
  var match_item = $("select[name='match-item']").val()
  var operator = $("select[name='operator']").val()

  var value = ""
  if (operator == "regex") {
    value = $("input[name='value']").val()
  } else {
    value = $("textarea[name='value']").val()
  }
  
  if (match_item == "") {
    layer.alert("请选择匹配项")
    return
  }

  if (operator == "") {
    layer.alert("请选择操作符")
    return
  }

  if (value == "") {
    layer.alert("请输入匹配值")
    return
  }

  $("select[name='match-item']").find("option[value='"+match_item+"']").remove()

  $("#matchers").remove()

  $(".match-item-list").append('<div class="layui-form-mid match-item"><span class="layui-badge layui-bg-blue del-span">'+match_item+'\t'+operator +'\t'+value+'<span onclick=\'del_item(this)\' class="layui-badge del">x</span></span></div>')

  $("select[name='match-item']").val("")
  $("select[name='operator']").val("")
  $("input[name='value']").val("")
  $("textarea[name='value']").val("")
  form.render()

})

function del_item(ele) {
    $(ele).parent().parent().remove()
    if ($(".match-item").length == 0) {
      $(".match-item-list").append('<span id="matchers" style="color:gray">待添加...</span>')
    }
    var item = $(ele).parent().text().split("\t")[0]
    $("select[name='match-item']").append('<option value="'+item+'">'+window.match_item_map[item]+'</option>')
    form.render()
}


</script>  