<%@ 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" href="${ctxPlugin}/static/css/reset.css">
</head>
<body class="">
<div class="layui-fluid ">
    <div class="layui-card pl-30 pr-30 pt-10 over">
        <div class="layui-form" action="" lay-filter="component-form-group" id="orderForm">
            <input type="hidden" name="fittingFlag" id="fittingFlag" value="${order.fittingFlag}">

            <div class="layui-card jibenxinxi">
                <div class="site-demo-button">
                    <button type="button" class="layui-btn " >服务信息</button>
                </div>
                <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-lg2 layui-col-sm4">
                                <label class="layui-form-label">产品型号：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="applianceModel" id="applianceModel"  placeholder=""
                                           autocomplete="off" class="layui-input" value="${order.applianceModel}">
                                </div>
                            </div>
                            <div class="layui-col-lg2 layui-col-sm4">
                                <label class="layui-form-label"><i class="red">*</i>机身条码：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="applianceBarcode"  placeholder="" lay-verify="required"
                                           autocomplete="off" class="layui-input " value="${order.applianceBarcode}">
                                </div>
                            </div>

                            <div class="layui-col-lg2 layui-col-sm4 layui-form" lay-filter="component-form-element">
                                <label class="layui-form-label"><i class="red">*</i>服务措施：</label>
                                <div class="layui-input-block">
                                    <select  name="warrantyType" id="warrantyType"  lay-verify="required">
                                        <option value="">请选择</option>
                                       <c:forEach var="measures" items="${list}">
                                        <option value="${measures.columns.service_measures}" <c:if test="${order.serviceMeasures eq measures.columns.service_measures}">selected</c:if>>${measures.columns.service_measures}</option>
                                       </c:forEach>
                                        <%--<c:if test="${order.serviceMeasures eq measures.service_measures}">selected</c:if>--%>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-col-xs12">
                                <label class="layui-form-label"><i class="red">*</i>反馈描述：</label>
                                <div class="layui-input-block">
                                    <textarea name="feedback" id="feedback" placeholder="" class="layui-textarea" lay-verify="required"></textarea>
                                </div>
                            </div>

                            <div class="layui-col-xs12 layui-form-item">
                                <label class="layui-form-label">服务图片：</label>
                                <div class="layui-input-block">
                                    <div id="imgsDiv">

                                    </div>
                                    <div class="upload-container " id="uploader">
                                        <img src="" alt="img placeholder" id="imgsAdd">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs12 layui-form-item">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-block" style="color: #cc2a2c">
                                    提示：请上传机身条码照片、整机照片、故障点照片
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            <div class="layui-card">
                <div class="site-demo-button">
                    <button type="button" class="layui-btn " >备件信息</button>
                </div>
                <table class="layui-table  beijianxinxi" >
                    <div class="pb-10 h-24" id="addFitApply">
                        <button type="button" class="layui-btn f-r pb-5" onclick="toAddFitApplyPage('${order.id}')">备件申请</button>
                    </div>
                    <thead>
                    <tr>
                        <th>备件名称</th>
                        <th>备件编号</th>
                        <th>使用数量</th>
                        <th>备件描述</th>
                        <th>备件状态</th>
                        <th>物流单号</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

            </div>
            <div class="layui-form-item mt-20">
                <div class="layui-input-block text-c">
                    <button class="layui-btn" lay-submit lay-filter="fwwc" id="fwwc">服务完成</button>
                    <button class="layui-btn" lay-submit lay-filter="gcfk" id="gcfk">过程反馈</button>
                    <button type="button" class="layui-btn" onclick="cancel()">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
<input class="layui-hide" value="${order.id}" id="orderId">
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'jquery','upload'], function () {
              $ = layui.$
            , form = layui.form
                  , upload = layui.upload;
        form.render(null, 'component-form-element');
        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });
        var fittingFlag = $("#fittingFlag").val();

        var orderId ="${order.id}";
        if(fittingFlag != "0"){
            orderFitting(orderId);
        }

        form.on('submit(fwwc)', function(data){
            $("#fwwc").attr("disabled","true");
            var field = data.field; //获取提交的字段
            fwwcFunction(field);
        });
        form.on('submit(gcfk)', function(data){
            $("#gcfk").attr("disabled","true");
            var field = data.field; //获取提交的字段
            gcfkFunction(field);
        });

        var uploadInst = upload.render({
            elem: '#uploader' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {

                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path);
            }
            , error: function () {
                //请求异常回调
            }
        });
    });
     var imgsCount=0;
    function addImg(data){
        imgsCount++;
        if (imgsCount >=8) {
            $("#uploader").hide();
        }else{
            $("#uploader").show();
        }
        var html = '<div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImg(this)"></span>';
        html += '<img src="${commonStaticImgPath}'+data+'" height="700" width="1200"/>';
        html += '<input type="hidden" class="imgPicker" value="'+data+'"/> </div>';
        $("#imgsDiv").append(html);
    }

    function delImg(that){
        imgsCount--;
        if (imgsCount < 3) {
            $("#uploader").show();
        }
        $(that).parent().remove();
    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }
    var siteId = "${order.siteId}";
    function orderFitting(orderId){
        $("tbody").empty();
        $.ajax({
            type:"POST",
            url:"${ctx}/service/order/getOrderFittingByorderId",
            data:{
                orderId:orderId,
                siteId:siteId
            },
            success:function(data){
                if(data!=null){
                    var deatil ="";
                    for(var i =0;i<data.length;i++){
                        var status = data[i].columns.status;
                        var stname ="";
                        if(status == 1){
                            stname = "待发货";
                        }else if(status == 2){
                            stname = "备件在途";
                        }else if(status == 3){
                            stname = "已完成";
                        }
                        deatil +=' <tr>';
                        deatil +=' <td>'+data[i].columns.fitting_name+'</td>';
                        deatil +=' <td>'+data[i].columns.number+'</td>';
                        deatil +='<td>'+data[i].columns.apply_num+'</td>';
                        deatil +=' <td>'+data[i].columns.apply_marks+'</td>';
                        deatil +=' <td><input class="layui-hide" value="'+status+'">  '+stname+'</td>';
                        deatil +=' <td>'+data[i].columns.logistics_number+'</td>';
                        deatil +=' </tr>';
                    }
                    $("tbody").html(deatil);
                }else{
                    // layer.msg("数据有误！", {icon: 2});
                }
            }
        });
    }


    var addFitApplyIndex = '';
    function toAddFitApplyPage(orderId) {
        addFitApplyIndex = layer.open({
            type: 2
            , title: '申请备件'
            , content: '${ctx}/service/order/serviceAddFitApplyPage?orderId=' + orderId
            , area: ['800px', '400px']
            , yes: function (index, layero) {

            }
        });
    }

    function closeApplyFit() {
        var orderId = $("#orderId").val();//工单id
        orderFitting(orderId);
        layer.close(addFitApplyIndex);
    }

    function reloadApplyFitPage() {
        var orderId = $("#orderId").val();//工单id
        orderFitting(orderId);
        layer.close(addFitApplyIndex);
        toAddFitApplyPage(orderId);
    }
    function  cancel(){
        var index=parent.layer.getFrameIndex(window.name);//获取当前弹出层的层级
        window.parent.location.reload();//刷新父页面*!/
        parent.layer.close(index);//关闭弹出层
    }
    //服务完成
var feedbackType;
    var repeatSub = false;
    function fwwcFunction(data){
        if (repeatSub) {
            return;
        }
        var applianceBarcode=data.applianceBarcode;
        var serviceMeasures=data.warrantyType;
        var feedback=data.feedback;
        if(isBlank(applianceBarcode)){
            layer.msg("请填写机身条码！");
            return;
        }
        if(isBlank(serviceMeasures)){
            layer.msg("请填写服务措施！");
            return;
        }
        if(isBlank(feedback)){
            layer.msg("请填写反馈描述！");
            return;
        }

        //获取配件信息列表所有状态--为完成才继续执行流程
        var flag = false;
        $("tbody tr").each(function(){
            var status = $(this).find("td").eq(4).find("input").val();
            if(status != '3'){
                flag = true;
                return false;
            }
        })
        if(flag == true){
            layer.msg("备件申请状态为已完成时才能执行服务完成操作!",{time:2000});
            return false;
        }

        var imgsAppend = '';
        var imgs = $(".imgPicker");

        imgs.each(function (index) {
            var img = $(this).val();
            if (!isBlank(img)) {
                imgsAppend += img + ",";
            }
        });
        repeatSub = true;
        feedbackType="1";
        $.ajax({
            url: '${ctx}/service/order/saveFeedBack',
            type: 'post',
            data: {
                orderId:'${order.id}',
                siteId:'${order.siteId}',
                feedbackType:feedbackType,
                applianceModel: data.applianceModel,
                applianceBarcode: data.applianceBarcode,
                serviceMeasures: data.warrantyType,
                feedback: data.feedback,
                pickerImg:imgsAppend
            },
            success: function(data) {
                $("#fwwc").attr("disabled","false");
                if(data.code=="200"){
                    layer.msg("反馈成功！",{time:1000});
                    setTimeout(function(){
                        var index=parent.layer.getFrameIndex(window.name);//获取当前弹出层的层级
                        parent.layer.close(index);//关闭弹出层
                        window.parent.location.reload();//刷新父页面
                    },2000);
                }else{
                    layer.msg("反馈失败!", {time:2000});
                }
            },
            complete:function(){
                repeatSub = false;
            }
        });



    }
    //过程反馈
    var noRepeatSub = false;
    function gcfkFunction(data){
        if (noRepeatSub) {
            return;
        }
        var imgsAppend = '';
        var imgs = $(".imgPicker");

        imgs.each(function (index) {
            var img = $(this).val();
            if (!isBlank(img)) {
                imgsAppend += img + ",";
            }
        });
        noRepeatSub = true;
        feedbackType="2";
        $.ajax({
            url: '${ctx}/service/order/saveFeedBack',
            type: 'post',
            data: {
                orderId:'${order.id}',
                siteId:'${order.siteId}',
                feedbackType:feedbackType,
                applianceModel: data.applianceModel,
                applianceBarcode: data.applianceBarcode,
                serviceMeasures: data.warrantyType,
                feedback: data.feedback,
                pickerImg:imgsAppend

            },
            success: function(data) {
                noRepeatSub = false;
                $("#gcfk").attr("disabled","false");
                if(data.code=="200"){
                    layer.msg("反馈成功！",{time:1000});
                setTimeout(function(){
                  var index=parent.layer.getFrameIndex(window.name);//获取当前弹出层的层级
                     parent.layer.close(index);//关闭弹出层
                     window.parent.location.reload();//刷新父页面
                 },2000);
                }else{
                    layer.msg("反馈失败!", {time:2000});
                }
            },
            complete:function(){

            }
        });
    }
</script>
</body>
</html>