<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
    <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">
</head>
<body class="">
<div class="layui-fluid">
    <form class="layui-form" action="" lay-filter="component-form-group" id="orderForm" onsubmit="return false" >
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-form" action="#" lay-filter="component-form-element">
                    <div class="layui-row layui-col-space12 layui-form-item">
                        <div class="layui-col-lg4 layui-col-sm4">
                            <label class="layui-form-label">服务时长：</label>
                            发布-完工：${hour} 小时
                        </div>
                        <div class="layui-col-lg4 layui-col-sm4">
                            <label class="layui-form-label">里程参考：</label>
                            ${map.address}

                        </div>

                        <div class="layui-col-lg4 layui-col-sm4">
                            <label class="layui-form-label"><i class="mark">*</i>服务态度：</label>
                            <div class="layui-input-block">
                                <select name="serviceAttitude"  lay-verify="required" >
                                    <option value="5" selected>十分满意</option>
                                    <option value="4">满意</option>
                                    <option value="3">一般</option>
                                    <option value="2">不满意</option>
                                    <option value="1">十分不满意</option>
                                    //1.十分不满意 2.不满意 3.一般 4.满意 5.十分满意6.无效回访7.回访未成功

                                </select>
                            </div>


                        </div>
                        <div class="layui-col-lg4 layui-col-sm4">
                            <label class="layui-form-label">安全评价：</label>
                            <div class="layui-input-block">
                                <select name="safetyEvaluation" >
                                    <option value="">请选择</option>
                                    //1.按安全规范操作 2.未出示上岗证 3.未穿工作服鞋套 4.未清理现场
                                    <option value="1">按安全规范操作</option>
                                    <option value="4">未清理现场</option>
                                    <option value="3">未穿工作服鞋套</option>
                                    <option value="2">未出示上岗证</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-col-lg3 layui-col-sm3">
                            <label class="layui-form-label"><i class="mark">*</i>回访结果：</label>
                            <div class="layui-input-block">
                                <select name="result"  lay-verify="required" lay-filter="result">
                                    <option value="">请选择</option>
                                    <option value="1">已完工</option>
                                    <option value="2">仍需上门</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-col-lg3 layui-col-sm3">
                            <label class="layui-form-label"><i class="mark">*</i>服务措施：</label>
                            <div class="layui-input-block">
                                <select name="serviceStep" id="serviceStep"  lay-search lay-verify="required" lay-filter="serviceStep">
                                    <option value="">请选择</option>
                                    <c:forEach items="${rds}" var="rd">
                                        <option value="${rd.columns.service_measures}" <c:if test="${rd.columns.service_measures eq order.serviceMeasures}"> selected</c:if> >${rd.columns.service_measures}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="layui-col-lg7" >
                            <div class="layui-col-xs8">
                                <label class="layui-form-label">回访内容：</label>
                                <div class="layui-input-block">
                                    <textarea name="remarks" placeholder="" class="layui-textarea" ></textarea>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="layui-form " action="" lay-filter="component-form-element" id="factorySet">
                    <div class="layui-row layui-col-space12 layui-form-item">

                        <div class="layui-col-lg2 layui-col-sm4">
                            <label class="layui-form-label">服务费用：</label>
                            <div class="layui-input-block">
                                <input onkeyup="change()" type="text" name="serviceCosts" id="serviceCosts"
                                       lay-verify="serviceCosts" placeholder="" autocomplete="off" class="layui-input changeCost">
                            </div>
                        </div>
                        <div class="layui-col-lg2 layui-col-sm4">
                            <label class="layui-form-label">其他费用：</label>
                            <div class="layui-input-block">
                                <input  onkeyup="change()" type="text" name="otherCost" id="otherCost"  placeholder=""
                                       autocomplete="off" class="layui-input changeCost" lay-verify="otherCost">
                            </div>
                        </div>
                        <div class="layui-col-lg2 layui-col-sm4">
                            <label class="layui-form-label">里程费用：</label>
                            <div class="layui-input-block">
                                <input  onkeyup="change()" type="text" name="mileageCost" id="mileageCost" placeholder=""
                                       autocomplete="off" class="layui-input changeCost" value="${map.cost}" lay-verify="mileageCost">
                            </div>
                        </div>

                        <div class="layui-col-lg2 layui-col-sm3 lh-30">
                            <label class="layui-form-label">加急时长：</label>
                            <span class="red completeExtendCost"></span>小时
                        </div>
                        <div class="layui-col-lg2 layui-col-sm3 lh-30">
                            <label class="layui-form-label">加急费：</label>
                            <span class="red completeExtendCost ">¥</span>元
                            <input class="layui-hide changeCost" value="">
                        </div>
                        <div class="layui-col-lg2 layui-col-sm4 " >
                            <label class="layui-form-label">取消加急费：</label>
                            <div class="layui-input-block">
                                <input type="radio" name="extendCostType" value="1" title="是" lay-filter="extendCostType">
                                <input type="radio" name="extendCostType" value="2" title="否" checked lay-filter="extendCostType">
                            </div>
                        </div>

                        <div class="layui-col-xs8">
                            <label class="layui-form-label">备注：</label>
                            <div class="layui-input-block">
                                <textarea name="setRemarks" placeholder="" class="layui-textarea" ></textarea>
                            </div>
                        </div>


                    </div>
                </div>
                <div class="layui-col-xs12 text-c mt-20">
                    <button class="layui-btn" lay-submit="callOrder" id="sureSubmit" lay-filter="callOrder">保存</button>
                </div>
            </div>
        </div>
    </form>
</div>

<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPlugin}/static/h-ui.admin/js/H-ui.admin.js"></script>
<script>
    var orderId = "${order.id}"
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'layedit', 'laydate','jquery'], function () {
         $ = layui.$
            , admin = layui.admin
            , element = layui.element
            , form = layui.form
            ,laydate = layui.laydate
            , $= layui.jquery;

        form.render(null, 'component-form-element');
        element.render('breadcrumb', 'breadcrumb');

        var checkOrder = false;
        form.on('submit(callOrder)', function (data) {
            $.ajax({
                type:"POST",
                url:"${ctx}/callback/getOrderFittingCount",
                data:{
                    orderId:orderId
                },
                success:function(result){
                    if(result>0){
                        var indexla = layer.confirm('此单配件还未返厂，是否完成回访?', {
                            icon: 3,
                            btn: ['确定', '取消'] //按钮
                        }, function () {
                            callOrder();
                        }, function () {
                            layer.close(indexla)
                        });
                    }else{
                        callOrder();
                    }


                }})
        })

        function callOrder(){
            $("#sureSubmit").attr("disabled", "true");
            if (checkOrder) {
                return false;
            }
            var  cost =/^(\-)?\d+(.\d{1,2})?$/;
            var zhengshu=/^([1-9]\d*|[0]{1,1})$/;
            var serviceAttitude = $("select[name=\"serviceAttitude\"]").val();
            var safetyEvaluation = $("select[name=\"safetyEvaluation\"]").val();
            var result = $("select[name=\"result\"]").val();
            var remarks=  $("textarea[name=\"remarks\"]").val();
            var serviceStep = $("select[name=\"serviceStep\"]").val();

            var serviceMeasures = $("select[name=\"serviceMeasures\"]").find("option:selected").attr("title");;
            var serviceCosts = $("input[name=\"serviceCosts\"]").val();
            var otherCost = $("input[name=\"otherCost\"]").val();
            var mileageCost = $("input[name=\"mileageCost\"]").val();
            var extendCostType = $("input[name='extendCostType']:checked").val();
            var setRemarks=  $("textarea[name=\"setRemarks\"]").val();
            var mileageHide=  $("#mileageHide").val();
            if(isBlank(serviceStep)){
                layer.msg("请选择服务措施!",{icon:2});
                return false
            }
            if(result == 1){
                if(isBlank(serviceMeasures)){
                    layer.msg("请选择结算方案!",{icon:2});
                    return false
                }
                if(isBlank(serviceCosts)){
                    serviceCosts=0;
                }else if(!cost.test(serviceCosts)){
                    layer.msg("服务费用为可保留两位小数的正数!",{icon:2});
                    return false
                }
                if(isBlank(otherCost)){
                    otherCost=0;
                }else if(!cost.test(otherCost)){
                    layer.msg("其他费用为可保留两位小数的正数!",{icon:2});
                    return false
                }
                if(isBlank(mileageCost)){
                    mileageCost=0;
                }else if(!zhengshu.test(mileageCost)){
                    layer.msg("里程费不含小数!",{icon:2});
                    return false
                }
            }
            checkOrder = true;
            $("#sureSubmit").attr("disabled", false);
            $.ajax({
                type:"POST",
                url:"${ctx}/callback/CallbackOrder",
                data:{
                    orderId:orderId,
                    serviceAttitude:serviceAttitude,
                    safetyEvaluation:safetyEvaluation,
                    result:result,
                    remarks:remarks,
                    serviceMeasures:serviceMeasures,
                    serviceStep:serviceStep,
                    serviceCosts:serviceCosts,
                    otherCost:otherCost,
                    mileageCost:mileageCost,
                    extendCostType:extendCostType,
                    mileageHide:mileageHide,
                    setRemarks:setRemarks
                },
                success:function(result){
                    if(result.code ==200){
                        //先得到当前iframe层的索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //再执行关闭
                        parent.layer.msg('回访成功！', {icon:1,time:1000},function(){
                            parent.layer.close(index);
                            parent.location.reload(); //刷新父页面
                        })
                    }else if(result.code == '501'){
                        layer.msg('可用金额小于结算金额,不可回访结算', {icon:2,time:1000});
                    }else if(result.code == '506'){

                        layer.msg('可用金额为负数,不可回访结算', {icon:2,time:1000});
                    }else if(result.code == '507'){
                        layer.msg('抵押总金额有误,不可回访结算,请联系', {icon:2,time:1000});
                    }else{
                        layer.msg('回访失败,数据有误', {icon:2,time:1000});
                    }
                }
            });
        }

        var category = "${order.applianceCategory}";
        var num = "1";
        form.on('select(result)', function(data){
            var result = $(data.elem).find("option:selected").val();
            if(result == 1){
                $("#factorySet").removeClass("layui-hide");

                $.ajax({
                    type:"POST",
                    url:"${ctx}/callback/getCustomerSettlementTemplate",
                    data:{
                        orderId:orderId
                    },
                    success:function(result){
                        if(result.length > 0){
                            $("#serviceMeasures").empty();
                            var html =" <option value=\"\">请选择</option>";
                            $.each(result,function (index,domEle){
                                html +="<option value='"+domEle.columns.number+"' title='"+domEle.columns.service_measures+"'>"+domEle.columns.service_measures+"("+domEle.columns.number+")</option>";
                            })
                            $("#serviceMeasures").append(html);
                            form.render('select');
                        }else{
                            layer.msg("请先去系统设置中设置结算方案",{icon:3})
                        }
                    }
                });
            }else{
                $("#factorySet").addClass("layui-hide");
            }
        });


        form.on('select(serviceMeasures)', function(data){
            var number = $(data.elem).find("option:selected").val();
                $.ajax({
                    type:"POST",
                    url:"${ctx}/callback/getTemplateByNumber",
                    data:{
                        category:category,
                        number:number
                    },
                    success:function(result){
                        var serviceCosts = 0;
                        var otherCost = 0;
                        $.each(result,function (index,domEle){
                            var type = domEle.columns.basis_type;
                            var amount = domEle.columns.charge_amount;
                            if(type == 0){
                                //服务费
                                serviceCosts = serviceCosts+amount;
                            }else{
                                otherCost = otherCost+amount;
                            }
                        })
                        $("#serviceCosts").val(serviceCosts * num);
                        $("#otherCost").val(otherCost * num);
                        change();
                    }
                });

        });
        /*根据服务措施查询结算方案
        */
        form.on('select(serviceStep)', function(data){
            var serviceStep = $(data.elem).find("option:selected").val();
                $.ajax({
                    type:"POST",
                    url:"${ctx}/callback/getServiceMeasuresByStep",
                    data:{
                        orderId:orderId,
                        serviceStep:serviceStep
                    },
                    success:function(result){
                        $("#serviceMeasures").empty();
                        var html =" <option value=\"\">请选择</option>";
                        if(result.length > 0){
                            $.each(result,function (index,domEle){
                                html +="<option value='"+domEle.columns.number+"' title='"+domEle.columns.service_measures+"'>"+domEle.columns.service_measures+"("+domEle.columns.number+")</option>";
                            })
                            $("#serviceMeasures").append(html);
                        }else{
                            $("#serviceMeasures").append(html);
                            layer.msg("请先去系统设置中设置结算方案",{icon:3})
                        }
                        form.render('select');
                    }
                });

        });
        change();
      form.on('radio(extendCostType)',function(){
          change();
      })
    });
 function change(){
     var zhengshu=/^([1-9]\d*|[0]{1,1})$/;
     var total=0.00;
     var mileageCost=$("#mileageCost").val();
     if(!isBlank(mileageCost) && !zhengshu.test(mileageCost)){
         layer.msg("里程费请输入正整数！",{icon:3});
         return;
     }
     $(".changeCost").each(function(index, el){
     if(index==3){
            var fl=$("input[type='radio']:checked").val();
            if(fl=='1'){
                return false;
            }
         }
         var Fee = ($(el).val()).trim();
         if (!isNaN(parseFloat(Fee))){
             total+=parseFloat(Fee);
         }
     })
     $("#total").val(total.toFixed(2));

 }

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

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