<%@ 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 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="20%">
                    <col width="30%">
                    <col width="20%">
                </colgroup>
                <thead>
                <tr>
                    <th>服务商名称</th>
                    <th>预计里程</th>
                    <th>选择</th>
                </tr>
                </thead>
                <tbody id="zhijiepaidan">
                <c:forEach items="${sites}" var="si">
                    <tr>
                        <td>${si.columns.name}</td>
                        <td>${si.columns.distance_formatted}</td>
                        <td> <div class="layui-input-block"><input type="radio" name="siteId" value="${si.columns.id}" lay-verify="filter"></div></td>
                    </tr>
                </c:forEach>

                </tbody>
            </table>
            <div>
                <span id="paigongzhi">指派至：</span>
            </div>
            <div >
                <label class="layui-form-label w-76"><i class="red">*</i>转派原因：</label>
                <div class="layui-input-block ml-76">
                    <input type="text" name="remarks" class="layui-input" id="remarks">
                </div>
            </div>


        </div>
        <input type="hidden" id="orderId" value="${order.id}">
    </div>
    <div class="layui-form-item pb-10"  style="text-align: center;">
        <input type="button" class="layui-btn" lay-submit lay-filter="sureSubmit" id="sureSubmit" value="确认转派">
    </div>

</div>

<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script>
    var where='${where}';
    layui.use(['table','layer','form'], function(){
        $ = layui.$;
        table = layui.table;
        layer = layui.layer;
       var 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(){
            //去除全部选择
            $("#zhijiepaidan").find("input").prop('checked',false);
            $(this).parent("tr").find("input").prop('checked','checked');
            form.render('radio');
           $("#paigongzhi").html("指派至："+$(this).parent("tr").find("td").eq(0).html());
        });

        form.on('submit(sureSubmit)',function(data){
            var siteId= $("#zhijiepaidan tr").find("input[name='siteId']:checked").val();
            var textarea= $("#remarks").val();
            if(isBlank(siteId)){
                layer.msg('请选择服务商', {icon:2});
                return false
            }
            if(isBlank(textarea)){
                layer.msg('请输入转派原因', {icon:2});
                return false
            }
            var orderId=$("#orderId").val();
            $.ajax({
                type:"POST",
                url:"${ctx}/dispatch/turnDispatchOrderSite",
                data:{
                    orderId:orderId,
                    siteId:siteId,
                    remarks:textarea
                },
                success:function(result){
                    if(result.code ==200){
                        var index = parent.layer.getFrameIndex(window.name);
                        layer.msg('转派成功！', {icon:1,time:1000},function(){
                            parent.layer.close(index);
                            if (where == '1') {
                                parent.parent.location.reload(); //刷新父页面
                            } else {
                                parent.location.reload();
                            }
                        });
                    }else if(result.code == "505"){
                        layer.msg('转派失败!', {icon:2,time:1000},function(){
                            layer.closeAll()
                        });
                    }else if(result.code == "203"){
                        layer.msg('转派原因为空!', {icon:2,time:1000});
                    }else if(result.code == "400"){
                        layer.msg('该工单不可转派，请刷新页面!', {icon:2,time:1000});
                    }else if(result.code == "402"){
                        layer.msg('该工单有备件申请，不可操作转派!', {icon:2,time:1000});
                    }else if(result.code == "403"){
                        layer.msg('该工单有收款记录，不可操作转派!', {icon:2,time:1000});
                    }else{
                        layer.msg('转派失败,数据有误', {icon:2,time:1000});
                    }
                }
            });

        })


        $(".chamobi").on('click',function(){
            var filterName = $("#filterName").val();
            console.log(filterName)
            if(isBlank(filterName)){
                layer.msg("请输入服务商名称");
            }else if(filterName.length >4){
                //查询服务商
                var orderId = $("#orderId").val();
                var html="";
                $.ajax({
                    type:"POST",
                    url:"${ctx}/dispatch/getOrderConditionSiteList",
                    data:{
                        orderId:orderId,
                        siteName:filterName.trim()
                    },
                    success:function(data){
                        console.log(data)
                        if(data.code == '202'){
                            layer.msg("数据有误，请刷新页面");
                        }else{
                            $.each(data,function(index,si){
                                console.log(si)
                                html +='<tr>';
                                html +='<td>'+si.columns.name+'</td>';
                                html +='<td>'+si.columns.distance_formatted+'</td>';
                                html +='<td> <div class="layui-input-block"><input type="radio" name="siteId" value="'+si.columns.id+'" lay-verify="filter"></div></td>';
                                html +=' </tr>';
                            });
                            $("#zhijiepaidan").empty().append(html);
                            form.render('radio');
                        }

                    }
                })
            }else{
                layer.msg("输入服务商名称字符长度不够");
            }

        })

    });



    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }
</script>
</body>
</html>

