<%@ 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" />
</head>
<body>
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin">
                <div id="textDiv">
                    <div class="layui-form-item">
                        <div class="contentBody ">
                            <div class="layui-col-xs4">
                                <label class="layui-form-label"><i class="mark">*</i>加急时间：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="time" lay-verify="required|hour" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs2">
                                <div class="f-l layui-word-aux lh-30">小时</div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label"><i class="mark">*</i>加急费用：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="money" lay-verify="required|price" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-word-aux layui-col-xs2 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="sureSubmit" id="sureSubmit" value="确认">
                </div>
            </div>
        </div>
    </div>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script>
    var count = 1;
    layui.use(['form','jquery','layedit'], function () {
        $ = layui.$,
        form = layui.form,
        layer = layui.layer;

        form.verify({
            hour: [
                /^[1-9]\d{0,2}$/
                ,'时间只能为不超过3位的整数'
            ]
            ,price:function (value){
                var te = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
                if(!te.test(value)){
                    return "加急费用格式不正确";
                }else if(parseInt(value)==0){
                    return "加急费用不能为0";
                }
            }
        });
    });

    function addBtn(that){
        var html = '<div class="layui-form-item">' +
            '<div class="contentBody ">' +
            '<div class="layui-col-xs4">' +
            '<label class="layui-form-label"><i class="mark">*</i>加急时间：</label>' +
            '<div class="layui-input-block">' +
            '<input type="text" name="time" lay-verify="required|hour" autocomplete="off" class="layui-input">' +
            '</div>' +
            '</div>' +
            '<div class="layui-col-xs2">' +
            '<div class="f-l layui-word-aux lh-30">小时</div>' +
            '</div>' +
            '<div class="layui-col-xs4">' +
            '<label class="layui-form-label"><i class="mark">*</i>加急费用：</label>' +
            '<div class="layui-input-block">' +
            '<input type="text" name="money" lay-verify="required|price" autocomplete="off" class="layui-input">' +
            '</div>' +
            '</div>' +
            '<div class="layui-word-aux layui-col-xs2 btnDiv">' +
            //'<button style="margin-left: 10px;" class="layui-btn layui-btn-sm" onclick="addBtn(this)"><i class="layui-icon">&#xe654;</i>' +
            //'<button class="layui-btn delBtn layui-btn-sm" onclick="delBtn(this)"><i class="layui-icon">&#xe640;</i></button>' +
            '</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);
            }
        })
    }

</script>
</body>
</html>