<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>添加角色</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="decorator" content="base"/>
  <link rel="stylesheet" type="text/css" href="${ctxPlugin}/static/css/reset.css" />
  <style>html{background-color: #fff;padding-bottom: 50px;}</style>
</head>
<body>
<div class="layui-form">
  <div class="layui-card-body">

      <div id="textDiv">
        <div class="layui-form-item">
          <div class="contentBody ">
            <label class="layui-form-label"><i class="mark">*</i>角色名称：</label>
            <div class="layui-input-inline">
              <input type="text" name="name" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-word-aux btnDiv">
              <button class="layui-btn layui-btn-sm" onclick="addBtn(this)"><i class="layui-icon">&#xe654;</i></button>
              <button class="layui-btn delBtn layui-btn-sm layui-hide" onclick="delBtn(this)"><i class="layui-icon">&#xe640;</i></button>
            </div>
          </div>
        </div>
      </div>
      <%--<div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
      </div>--%>


  </div>
  <div class="operate-footer">
    <input type="button" value="保存" class="layui-btn " lay-submit lay-filter="component-form-element">
    <input type="button" value="取消" class="layui-btn layui-btn-primary" onclick="cancel()">
  </div>
</div>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script>
    var count = 1;
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['form','jquery','layedit'], function () {
          $ = layui.jquery,
          form = layui.form,
            layer = layui.layer;

        form.verify({
            hour: [
                /^[1-9]\d{0,2}$/
                ,'时间只能为不超过3位的整数'
            ]
            ,price:[
                /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
                ,'加急费用格式不正确'
            ]
            , amount: [
                /^\+?[1-9][0-9]*$/
                , '请输入角色排序，只能输入正整数'
            ]
        });

      form.on('submit(component-form-element)',function(){
          var status = "ok";
          var jsonArry = [];
          var arr = [];
           $("#textDiv").find(".contentBody").each(function(){
               var name = $(this).find("input[name='name']").val();
               arr.push(name);
               if(isRepeat(arr)){
                   layer.msg("角色名称重复", {icon: 5, anim: 6});
                   status = "no";
               }

               if (!isBlank(name)) {
                   var info = {
                       name: name
                   };
                   jsonArry.push(info);
               }
           })
          if("ok" == status){
              $.ajax({
                  type: 'post',
                  data: {jsonData: JSON.stringify(jsonArry)},
                  url: "${ctx}/member/addPlatformRole",
                  success: function (data) {
                      if (data == '200') {
                          //先得到当前iframe层的索引
                          var index = parent.layer.getFrameIndex(window.name);
                          //再执行关闭
                          layer.msg('添加成功！', {icon:1,time:1000},function(){
                              parent.layer.close(index);
                              parent.location.reload(); //刷新父页面
                          })
                      } else if (data == '202') {
                          layer.msg("保存失败", {icon: 2});
                      } else if (data == '205') {
                          layer.msg("角色名称已存在！", {icon: 2});
                      } else {
                          layer.msg("参数信息有误，请检查！", {icon: 2});
                      }
                  },
                  error: function (e) {
                      layer.msg("请刷新！", {icon: 2});
                      return;
                  }
              })
          }
      })


    });

    function addBtn(that){
        var html = '<div class="layui-form-item">' +
            '            <div class="contentBody">' +
            '                <label class="layui-form-label"><i class="mark">*</i>角色名称：</label>' +
            '                <div class="layui-input-inline">' +
            '                    <input type="text" name="name" lay-verify="required" autocomplete="off" class="layui-input">' +
            '                </div>' +
            // '                <div class="f-l layui-word-aux lh-30"></div>' +
            // '                <label class="layui-form-label"><i class="mark">*</i>排序：</label>' +
            // '                <div class="layui-input-inline">' +
            // '                    <input type="text" name="sort" lay-verify="required" autocomplete="off" class="layui-input">' +
            // '                </div>' +
            '            <div class="layui-word-aux btnDiv">' +
            //   '                <button class="layui-btn layui-btn-sm" onclick="addBtn(this)"><i class="layui-icon">&#xe654;</i></button>' +
            '            </div>' +
            '            </div>' +
            '        </div>';
        $("#textDiv").append(html);
        count++;
        btnUpdate();
    };

    function delBtn(that){
        $(that).parent().parent().remove();
        count--;
        btnUpdate();
    }

    function btnUpdate(){
        var addBtn = '<button class="layui-btn layui-btn-sm" onclick="addBtn(this)"><i class="layui-icon">&#xe654;</i>';
        var delBtn = '<button class="layui-btn delBtn layui-btn-sm" onclick="delBtn(this)"><i class="layui-icon">&#xe640;</i></button>';

        $(".contentBody").find(".btnDiv").each(function(index){
            if (count == 1) {
                $(this).empty().append(addBtn);
            }else if (count != (index + 1)) {
                $(this).empty().append(delBtn);
            }else{
                $(this).empty().append(addBtn+delBtn);
            }
        })
    }
    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }
    function isRepeat(arr){

        var hash = {};

        for(var i in arr) {

            if(hash[arr[i]]) //hash 哈希

                return true;

            hash[arr[i]] = true;

        }

        return false;

    }
    function cancel(){
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
</script>
</body>
</html>