<%@ 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;
        }
    </style>
</head>
<body>
<c:set var="a" value="0"/>
<div class="layui-card mb-0">
    <div class="layui-card-body">
       <%-- <div>
            <span >原派工服务商：${order.siteName}</span>
        </div>--%>
        <div class="" style="position: relative;">
            <div class=" pr-50">
                <input type="text" name="customerMobile" autocomplete="off" placeholder="请输入工程师姓名" class="layui-input"  id="filterName">
            </div>
            <button type="button" class="layui-btn f-r chamobi" style="position:absolute;top:0px;right: 0; padding: 0 10px;"><i class="layui-icon fs-16">&#xe615;</i></button>
        </div>
        <div class="layui-form mt-10">
            <table class="layui-table " >
                <colgroup>
                    <col width="30%">
                    <col width="30%">
                    <col width="30%">
                </colgroup>
                <thead>
                <tr>
                    <th>工程师姓名</th>
                    <th>选择</th>
                </tr>
                </thead>
                <tbody id="zhijiepaidan">
                <c:forEach items="${records}" var="record" varStatus="index">

                    <tr>
                        <td>${record[0]}</td>
                        <td>
                            <input type="checkbox" name="emplyid" id ="emp" value="${record[1]}" lay-verify="filter" lay-skin="primary">
                            <input class="layui-hide" value="${record[2]}" name="mobile">
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <div>
                <div class="layui-col-sm12 mb-10 over mt-10">
                    <span class="f-l">指派至：</span>
                    <div class="f-l">
                        <span id="paigongzhi"></span>
                        <input type="hidden" id="mobiles" name="mobiles">
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-hide">
                <input type="button" lay-submit lay-filter="sureSubmit" id="sureSubmit" value="确认派工">
            </div>

        </div>
        <input type="hidden" id="orderId" value="${orderId}">
    </div>

</div>

<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script>
    var $;
    layui.use(['table','layer','form'], function(){
        $ = layui.$;
        table = layui.table;
        layer = layui.layer;
        form = layui.form;

        $('#filterName').keyup(function(){
            $('#zhijiepaidan tr').hide()
                .filter(":contains('" +($(this).val()) + "')").show();
            if(isBlank($(this).val())){
                $('#zhijiepaidan tr').show();
            }
        }).keyup();//DOM加载完时，绑定事件完成之后立即触发


        $(document).on('click','#zhijiepaidan td',function(){
            var empNames = '';
            var mobile = '';
            $(":checkbox").each(function () {
                if ($(this).is(':checked')) {
                    if (isBlank(empNames)) {
                        empNames = $(this).parent("td").parent("tr").find("td").eq(0).html();
                    } else {
                        empNames = $(this).parent("td").parent("tr").find("td").eq(0).html() + ',' + empNames;
                    }
                    if (isBlank(mobile)) {
                        mobile = $(this).parent("td").parent("tr").find("input[name='mobile']").val();
                    } else {
                        mobile = $(this).parent("td").parent("tr").find("input[name='mobile']").val() + ',' + mobile;
                    }
                }
            });
            $("#mobiles").val(mobile);
            $("#paigongzhi").html(empNames);
        });
    });



    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }




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

