<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
    <meta name="decorator" content="base" />
    <meta charset="utf-8">
    <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">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/static/css/reset.css" media="all">
    <title>编辑服务措施</title>
    <style>
        .center {
            text-align: center !important;
        }

        .mark {
            color: #ff5151 !important;
        }

        tr>th {
            text-align: center !important;
        }

        tr>td {
            text-align: center !important;
        }

        .layui-icon-add-circle {
            font-size: 27px;
            color: #5FB878;
        }

        .layui-icon-close-fill {
            font-size: 29px;
            color: #dddddd;
        }
    </style>
</head>
<body>
<div class="">
    <div class="layui-card">
        <div class="layui-form layui-card-body pt-20" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin" >
            <div class="layui-col-xs6">
                <label class="layui-form-label">
                    <span class="mark">*</span>
                    服务类型：
                </label>
                <div class="layui-input-block w-150">
                    <input type="text"  value="${serviceType}" class="layui-input" readonly>
                </div>
                <input type="text" name="service_type"  id="service_type"  value="${serviceType}" class="layui-hide" >
            </div>
            <div class="layui-col-xs12 mt-10" style="height: 280px;">
                <table class="layui-table" style="">
                    <colgroup>
                        <col width="50%">
                        <col width="20%">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>服务措施</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="detailSet">
                   <c:forEach items="${serviceMeasure }" var="service" varStatus="stat">
                       <tr>
                           <td>
                               <div class="layui-input-inline">
                                   <input type="text" name="service_measures" lay-verify="required" value="${service[2] }" placeholder="请填写服务措施"
                                          <c:if test="${not empty service[4] }">disabled class="layui-input layui-bg-gray" </c:if>  class="layui-input" style="width: 300px" >
                                   <input type="text" name="id" value="${service[0] }" class="layui-hide" >
                               </div>
                           </td>
                           <td>
                               <c:if test="${stat.last}">
                                   <i class="layui-icon layui-icon-add-circle detailAdd" lay-filter="formDemoAdd"></i>
                               </c:if>
                               <i class="layui-icon layui-icon-close-fill detailDel" lay-filter="formDemoDel"></i>
                           </td>

                       </tr>
                   </c:forEach>
                    </tbody>
                </table>
            </div>
            <div class="layui-form-item layui-hide ">
                <input type="button" lay-submit lay-filter="LAY-user-front-submit_edit" id="LAY-user-front-submit_edit" value="确认">
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script>
    layui.use([ 'form', 'table' ], function() {
         $ = layui.$;
        form = layui.form;
        form.verify({

        });

        function dealAddDelBtn() {
            if ($("#detailSet").find("tr").length == 1) {
                $("#detailSet").find("tr").each(function() {
                    $(this).find("td:last").html('').append('<i class="layui-icon layui-icon-add-circle detailAdd"  ></i>');
                });
            } else {
                $("#detailSet").find("tr").each(function() {
                    $(this).find("td:last").html('');
                    $(this).find("td:last").append('<i class="layui-icon layui-icon-close-fill detailDel"  ></i>');
                });
                $("#detailSet").find("tr:last td:last").prepend('<i class="layui-icon layui-icon-add-circle detailAdd"  ></i>');
            }
        }
        ;
        dealClickEvent();

        function dealClickEvent() {
            $(".detailAdd").off("click");
            $(".detailAdd").on(
                'click',
                function() {
                    var html = '<tr>' + '<td>' + '<div class="layui-input-inline" >'
                        + '  <input type="text" name="service_measures" lay-verify="required" placeholder="请填写服务措施" class="layui-input">'+ '</div>' + '</td>'
                        + '<td>' + '<i class="layui-icon layui-icon-add-circle detailAdd" ></i>'
                        + '<i class="layui-icon layui-icon-close-fill detailDel" ></i>' + '</td>' + '</tr>';
                    $("#detailSet").append(html);
                    dealAddDelBtn();
                    form.render();
                    dealClickEvent()
                });
            $(".detailDel").off("click");
            $(".detailDel").on('click', function() {
                var service_measures = $(this).parent().parent().find("input[name='service_measures']").val();
                var a = $(this);
                $.ajax({
                    url: '${ctx}/serviceMeasure/removeMeasure',
                    type: 'post',
                    data: {
                        service_measures: service_measures
                    },
                    success: function (data) {
                        if (data=="200") {
                            a.parents("tr").remove();
                            dealAddDelBtn();
                            form.render();
                            dealClickEvent();
                        } else if(data=="401"){
                            layer.msg("无法删除,有结算使用该服务措施！",{icon:2});
                            return;
                        }else if(data=="402"){
                            layer.msg("无法删除,有结算方案使用该服务措施！",{icon:2});
                            return;
                        }else{
                            layer.msg("无法删除！");
                            return;
                        }
                    },
                    complete: function () {
                        noRepeat = false;
                    }
                });
            });
        }
    });
</script>
</body>
</html>
