
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
    <title>全部工单</title>
    <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>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <form class="layui-form" action="${ctx}/order/getOrderlist" lay-filter="component-form-group" id="searchForm">
            <input id="pageNo" name="page" type="hidden" value="${page.page}"/>
            <input id="pageSize" name="limit" type="hidden" value="${page.limit}"/>
            <input  name="status" type="hidden" value="${status}"/>
            <div class="layui-card">
                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <c:choose>
                                <c:when test="${status eq '1'}">
                                    <li class="layui-nav-item layui-this">待派单</li>
                                </c:when>
                                <c:when test="${status eq '2'}">
                                    <li class="layui-nav-item layui-this">服务中</li>
                                </c:when>
                                <c:when test="${status eq '4'}">
                                    <li class="layui-nav-item layui-this">待结算</li>
                                </c:when>
                                <c:when test="${status eq '5'}">
                                    <li class="layui-nav-item layui-this">已完成</li>
                                </c:when>
                                <c:otherwise>
                                    <li class="layui-nav-item layui-this">无效单</li>
                                </c:otherwise>
                            </c:choose>
                            <div class="f-r layadmin-form-right mb-10">
                                <button class="layui-btn f-r mt-10 mr-15 pl-10 pr-10">
                                    <i class="layui-icon fs-12">&#xe615;</i>查询
                                </button>
                            </div>
                        </ul>
                    </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-form-item">
                        <div class="layui-col-lg2 layui-col-sm3">
                            <label class="layui-form-label">工单编号：</label>
                            <div class="layui-input-block">
                                <input type="text" name="number" placeholder=""
                                       autocomplete="off" class="layui-input" value="${map.number}">
                            </div>
                        </div>
                        <div class="layui-col-lg2 layui-col-sm3">
                            <label class="layui-form-label">用户姓名：</label>
                            <div class="layui-input-block">
                                <input type="text" name="customer_name" lay-verify="required" placeholder=""
                                       autocomplete="off" class="layui-input" value="${map.customer_name}">
                            </div>
                        </div>
                        <div class="layui-col-lg2 layui-col-sm3">
                            <label class="layui-form-label">用户电话：</label>
                            <div class="layui-input-block">
                                <input type="text" name="customer_mobile" placeholder=""
                                       autocomplete="off" class="layui-input" value="${map.customer_mobile}">
                            </div>
                        </div>
                        <div class="layui-col-lg2 layui-col-sm3">
                            <label class="layui-form-label">用户地址：</label>
                            <div class="layui-input-block">
                                <input type="text" name="customer_address" placeholder=""
                                       autocomplete="off" class="layui-input" value="${map.customer_address}">
                            </div>
                        </div>

                        <div class="layui-col-lg2 layui-col-sm3">
                            <label class="layui-form-label">产品品类：</label>
                            <div class="layui-input-block">
                                <select name="appliance_category" lay-filter="aihao" lay-search>
                                    <option value="">请选择</option>
                                    <c:forEach var="jia" items="${cate}">
                                        <option value="${jia.columns.category}" <c:if test="${map.appliance_category eq jia.columns.category}">selected</c:if>>${jia.columns.category}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="layui-col-lg2 layui-col-sm3">
                            <label class="layui-form-label">服务类型：</label>
                            <div class="layui-input-block">
                                <select name="service_type" lay-filter="aihao">
                                    <option value="">请选择</option>
                                    <option value="安装" <c:if test="${map.service_type eq '安装'}">selected</c:if>>安装</option>
                                    <option value="维修" <c:if test="${map.service_type eq '维修'}">selected</c:if>>维修</option>
                                    <option value="咨询" <c:if test="${map.service_type eq '咨询'}">selected</c:if>>咨询</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-col-lg2 layui-col-sm3">
                            <label class="layui-form-label">产品型号：</label>
                            <div class="layui-input-block">
                                <input type="text" name="appliance_model" placeholder=""
                                       autocomplete="off" class="layui-input" value="${map.appliance_model}">
                            </div>
                        </div>
                        <div class="layui-col-lg2 layui-col-sm3">
                            <label class="layui-form-label">保修类型：</label>
                            <div class="layui-input-block">
                                <select name="warranty_type" lay-filter="aihao">
                                    <option value=""></option>
                                    <option value="1" <c:if test="${map.warranty_type eq 1}">selected</c:if>>保内</option>
                                    <option value="2" <c:if test="${map.warranty_type eq 2}">selected</c:if>>保外</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-col-lg4 layui-col-sm6">
                            <label class="layui-form-label">下单时间：</label>
                            <div class="layui-input-block">
                                <div class="layui-col-xs5">
                                    <input type="text" name="createTimeSta" class="layui-input" id="createStartTime" placeholder="开始日期" value="${map.createTimeSta}">
                                </div>
                                <div class="layui-col-xs2 text-c lh-30">
                                    —
                                </div>
                                <div class="layui-col-xs5">
                                    <input type="text" name="createTimeEnd" class="layui-input" id="createEndTime" placeholder="结束日期" value="${map.createTimeEnd}">
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-lg4 layui-col-sm6">
                            <label class="layui-form-label">完成时间：</label>
                            <div class="layui-input-block">
                                <div class="layui-col-xs5">
                                    <input type="text" name="endTimeSta" class="layui-input" id="endStartTime" placeholder="开始日期" value="${map.endTimeSta}">
                                </div>
                                <div class="layui-col-xs2 text-c lh-30">
                                    —
                                </div>
                                <div class="layui-col-xs5">
                                    <input type="text" name="endTimeEnd" class="layui-input" id="endEndTime" placeholder="结束日期" value="${map.endTimeEnd}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
            <div class="layui-card mb-5">
                <div class="layui-card-body">
                    <div>
                        <ul class="layui-row layui-col-space12 text-c layui-bg-cyan tableHead">
                            <li class="layui-col-xs2">工单信息</li>
                            <li class="layui-col-xs2">用户信息</li>
                            <c:if test="${status eq '6'}">
                            <li class="layui-col-xs1">无效原因</li>
                            <li class="layui-col-xs1">无效时间</li>
                            </c:if>
                            <li class="layui-col-xs1">保修类型</li>
                            <li class="layui-col-xs2">过程信息</li>
                            <li class="layui-col-xs2">结算金额</li>
                            <li class="layui-col-xs1">配件信息</li>
                            <li class="layui-col-xs2">下单时间</li>
                        </ul>
                    </div>
                </div>
            </div>
            <c:forEach items="${page.data}" var="order">
            <div class="layui-card mb-5">
                <div class="layui-card-body">
                    <div class="layui-row mb-10 border h-32 lh-32 pl-10 pr-20">
                        工单编号：<span class="blue" style="cursor:pointer" onclick="orderForm('${order.columns.id}','1','${order.columns.number}')">${order.columns.number}</span>
                        <c:if test="${order.columns.status eq 1}">
                        <button type="button" onclick="updateorderForm('${order.columns.id}','${order.columns.number}')" class="layui-btn ml-30 vertical-b layui-btn-radius h-24 lh-24 pl-10 pr-10 layui-btn-xs ddddd">
                            编辑工单
                        </button>

                        <button type="button" class="layui-btn layui-btn-warm ml-30 vertical-b layui-btn-radius h-24 lh-24 pl-10 pr-10 layui-btn-xs aa">
                            无效工单
                        </button>
                        </c:if>
                        <c:choose>
                            <c:when test="${order.columns.status ne 1}">
                                <c:if test="${order.columns.complaint_flag eq 0}">
                                    <a lay-href="${ctx}/complaint/new?orderNumber=${order.columns.number}" layadmin-event="message" lay-text="投诉" class="layui-btn layui-btn-warm ml-30 vertical-b layui-btn-radius h-24 lh-24 pl-10 pr-10 layui-btn-xs ">投诉</a>
                                </c:if>
                                <c:if test="${order.columns.complaint_flag eq 1}">
                                    <a layadmin-event="message" lay-text="投诉单" class="layui-btn ml-30 vertical-b layui-btn-radius h-24 lh-24 pl-10 pr-10 layui-btn-xs ">投诉单</a>
                                </c:if>
                            </c:when>
                            <c:otherwise>

                            </c:otherwise>
                        </c:choose>
                        <c:if test="${order.columns.status ne 1}">
                            <button type="button" data-orderId="${order.columns.id}" class="layui-btn ml-30 vertical-b layui-btn-radius h-24 lh-24 pl-10 pr-10 layui-btn-xs feedback" style="background-color: #1e9fff;">
                                完成反馈
                            </button>
                        </c:if>
                        <input type="hidden" value="${order.columns.id}" class="orderId">
                        <input type="hidden" value="${order.columns.status}" class="status">
                        <span class="<c:if test="${order.columns.service_type ne '安装'}">layui-hide</c:if> green f-r pointer">安装</span>
                        <span class="<c:if test="${order.columns.service_type ne '维修'}">layui-hide</c:if> blue f-r pointer">维修</span>
                    </div>
                    <ul class="layui-row layui-col-space12 text-c order-list">
                        <li class="layui-col-xs2">
                            <p>${order.columns.appliance_brand}${order.columns.appliance_category}</p>
                            <p>${order.columns.appliance_model}</p>
                        </li>
                        <li class="layui-col-xs2">
                            <p>${order.columns.customer_name}${order.columns.customer_mobile}</p>
                            <p>${order.columns.province}${order.columns.city}${order.columns.area}${order.columns.customer_address}</p>
                        </li>
                        <c:if test="${status eq '6'}">
                            <li class="layui-col-xs1">${order.columns.disable_resource}</li>
                            <li class="layui-col-xs1"><fmt:formatDate value="${order.columns.update_time}" pattern="yyyy-MM-dd HH:mm" /></li>

                        </c:if>
                        <li class="layui-col-xs1"><c:if test="${order.columns.warranty_type eq 1}">保内</c:if><c:if test="${order.columns.warranty_type eq 2}">保外</c:if></li>
                        <li class="layui-col-xs2">
                            <c:if test="${order.columns.status eq 1}">待派单</c:if>
                            <c:if test="${order.columns.status eq 2}">
                                <c:if test="${order.columns.site_status eq 1 }">待服务商接单</c:if>
                                <c:if test="${order.columns.site_status eq 2 }">服务商已拒单</c:if>
                                <c:if test="${order.columns.site_status eq 3 }">待服务商派工</c:if>
                                <c:if test="${order.columns.site_status eq 4 }">待工程师接单</c:if>
                                <c:if test="${order.columns.site_status eq 5 }">待上门</c:if>
                                <c:if test="${order.columns.site_status eq 6 }">服务中</c:if>
                                <c:if test="${order.columns.site_status eq 7 }">服务中</c:if>

                            </c:if>
                            <c:if test="${order.columns.status eq 3}">待回访</c:if>
                            <c:if test="${order.columns.status eq 4}">待结算</c:if>
                            <c:if test="${order.columns.status eq 5}">已完成</c:if>
                            <c:if test="${order.columns.status eq 6}">无效工单</c:if>
                            <p class="red" onclick="orderForm('${order.columns.id}','2','${order.columns.number}')"><i class="layui-icon red fs-16 bold">&#xe715;</i>工单跟踪</p>
                        </li>
                        <li class="layui-col-xs2">${order.columns.factory_cost}</li>
                        <li class="layui-col-xs1">
                            <c:if test="${order.columns.fitting_flag ne 0}">
                            <p class="red" onclick="orderForm('${order.columns.id}','3','${order.columns.number}')"><i class="layui-icon red fs-16 bold">&#xe715;</i>备件跟踪</p></c:if>
                        </li>
                        <li class="layui-col-xs2"><fmt:formatDate value="${order.columns.create_time}" pattern="yyyy-MM-dd HH:mm" /></li>
                    </ul>
                </div>
            </div>
            </c:forEach>

        <div id="orderPage" class="layui-table-page"></div>
    </div>
</div>
<div id="lookImg" class="hide">
    <div class="w-500 h-500 lookImg">
        <img src="../../img1/banner004.jpg" width="80%"/>
    </div>
</div>
<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(['laypage','index', 'form','laydate'], function () {

        var laydate = layui.laydate
            ,laypage = layui.laypage
            ,$= layui.jquery;

        //开始日期
        var processStartTime = laydate.render({
            elem: '#endStartTime'
            ,type: 'datetime'
            ,done: function(value, date){
                //更新结束日期的最小日期
                processEndTime.config.min = lay.extend({}, date, {
                    month: date.month - 1
                });
                //自动弹出结束日期的选择器
                processEndTime.config.elem[0].focus();
            }
        });
        //结束日期
        var processEndTime = laydate.render({
            elem: '#endEndTime'
            ,type: 'datetime'
            ,done: function(value, date){
                //更新开始日期的最大日期
                processStartTime.config.max = lay.extend({}, date, {
                    month: date.month - 1
                });
            }
        });
        //开始日期
        var createStartTime = laydate.render({
            elem: '#createStartTime'
            ,type: 'datetime'
            ,done: function(value, date){
                //更新结束日期的最小日期
                createEndTime.config.min = lay.extend({}, date, {
                    month: date.month - 1
                });
                //自动弹出结束日期的选择器
                createEndTime.config.elem[0].focus();
            }
        });
        //结束日期
        var createEndTime = laydate.render({
            elem: '#createEndTime'
            ,type: 'datetime'
            ,done: function(value, date){
                //更新开始日期的最大日期
                createStartTime.config.max = lay.extend({}, date, {
                    month: date.month - 1
                });
            }
        });

        var count = "${page.count}";
        var limit = "${page.limit}";
        var page = ${page.page};
        //完整功能
        laypage.render({
            elem: 'orderPage'
            ,count: count
            ,limit:limit
            ,page : page
            , curr: page
            ,limits:[20, 50,100]
            ,prev:"<i class=\"layui-icon\"></i>"
            ,next:"<i class=\"layui-icon\"></i>"
            ,layout: [ 'prev', 'page', 'next', 'skip','count', 'limit']
            ,jump: function(obj, first){
                //首次不执行
                if(!first){
                    $("#pageNo").val(obj.curr);
                    $("#pageSize").val(obj.limit);
                    $("#searchForm").submit()
                }
            }
        });
    });
    layui.use(['jquery',], function(args){
        var $= layui.jquery;
        var aa = $('.aa');
        aa.click(function () {
            var orderId = $(this).parent().find(".orderId").val();
            var status = $(this).parent().find(".status").val();
            if(isBlank(orderId)){
                return
            }
            if(status !=1 && status!=2 && status!=3){
                layer.msg("当前状态不可操作无效",{icon:5,anim:6});
                return;
            }else{
                var indexla = layer.confirm('您确定要操作无效工单吗？', {
                    icon:3,
                    btn: ['确定','取消'] //按钮
                }, function(){
                    layer.close(indexla);
                    layer.open({
                        type: 2,
                        content: "${ctx}/order/lookNOUse"  //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        ,title: "无效工单"
                        ,btn:['确定', '取消']
                        ,area:["600px","220px"]
                        ,yes: function(index, layero){
                            var iframeWindow = window['layui-layer-iframe'+ index]
                                ,submitID = 'sureSubmit'
                                ,submit = layero.find('iframe').contents().find('#'+ submitID);

                            //监听提交
                            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                                var field = data.field;
                                var description = field.description;
                                $.ajax({
                                    type:"POST",
                                    url:"${ctx}/order/invalidOrder",
                                    data:{
                                        orderId:orderId,
                                        description:description
                                    },
                                    success:function(result){
                                        if(result.code == "200"){
                                            layer.msg('操作成功！', {icon:1,time:1000},function(){
                                                window.location.reload();
                                            });
                                        }else if(result.code =="400"){
                                            layer.msg('该工单已派工不可操作无效！', {icon:2});
                                            window.location.reload();
                                        }else{
                                            layer.msg('操作失败！', {icon:2});
                                            window.location.reload();
                                        }
                                    }
                                });
                            });
                            submit.trigger('click');
                        },
                        success : function(layero) {
                            layero.find('.layui-layer-btn').css('text-align', 'center');
                            layero.find('.layui-layer-btn').find(".layui-layer-btn0").css("background-color","#009688");
                        }
                    })
                }, function(){
                    layer.close(indexla)
                });
            }
        })


        $(".feedback").click(function(){
            var orderId = $(this).attr("data-orderId");
            layer.open({
                type: 2,
                title:"反馈封单",
                resize:false,
                area: ['850px', '45%'],
                content: "${ctx}/order/feedbackOrderYwc?orderId="+orderId
                ,btn:['完成反馈',"取消"]
                ,yes: function(index, layero){
                    var iframeWindow = window['layui-layer-iframe'+ index]
                        ,submitID = 'sureSubmit'
                        ,submit = layero.find('iframe').contents().find('#'+ submitID);

                    //监听提交
                    iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                        var imgs;
                        layero.find('iframe').contents().find("#imgsDiv").find("input").each(function (index) {
                            if(isBlank(imgs)){
                                imgs = $(this).val();
                            }else{
                                imgs = imgs+","+$(this).val();
                            }
                        });
                        var textarea=  layero.find('iframe').contents().find("textarea").val();
                        if(isBlank(textarea)){
                            layer.msg('请输入反馈内容', {icon:2});
                            return false
                        }
                        $.ajax({
                            type:"POST",
                            url:"${ctx}/feedback/feedbackSealingSheetYwc",
                            data:{
                                orderId:orderId,
                                imgs:imgs,
                                textarea:textarea
                            },
                            success:function(result){
                                if(result.code ==200){
                                    layer.closeAll()
                                    layer.msg('反馈封单成功！', {icon:1,time:1000},function(){
                                        window.location.reload();
                                    });
                                }else if(result.code == "204"){
                                    layer.msg('反馈内容为空!', {icon:2,time:1000});
                                }else if(result.code == "400"){
                                    layer.msg('该工单不可转派，请刷新页面!', {icon:2,time:1000});
                                }else if(result.code=="205"){
                                    layer.msg("备件申请状态为已完成时才能执行反馈完成操作!",{icon:2});
                                    return;
                                }else{
                                    layer.msg('反馈失败,数据有误', {icon:2,time:1000});
                                }
                            }
                        });

                    });
                    submit.trigger('click');
                }
            });
        })

    });


    function orderForm(id,type,number){
        layer.open({
            type: 2,
            title:number+" 工单信息",
            resize:false,
            area: ['1100px', '88%'],
            content: '${ctx}/order/getOrderForm?orderId='+id+"&type="+type
        });
    }

    function updateorderForm(id,number){
        layer.open({
            type: 2,
            title:number+" 工单信息",
            resize:false,
            area: ['1100px', '81%'],
            content: '${ctx}/order/getUpdateOrderForm?orderId='+id
        });
    }

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


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