<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
    <meta name="decorator" content="base" />
    <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">
    <style>
        html {
        background-color: #fff;
    }
    </style>
</head>
<body class="">
<div class="layui-form-item operate-footer" style="text-align: center;">
    <div class="layui-btn-container">
        <sfTags:pagePermission authFlag="DPD_XGGD_B" html='<button type="button" class="layui-btn xiugaiOrder" >编辑</button>'/>
        <button type="button" class="layui-btn layui-hide uodateorder" >保存</button>
        <button type="button" class="layui-btn layui-hide cancelorder" >取消</button>
        <c:if test="${order.serviceType ne '咨询'}">
            <sfTags:pagePermission authFlag="DPD_ZP_B" html='<button type="button" class="layui-btn assign" >指派</button>'/>
        </c:if>
        <sfTags:pagePermission authFlag="DPD_WX_B" html='<button type="button" class="layui-btn invalid" >无效</button>'/>
        <c:if test="${order.serviceType eq '维修'}">
            <button type="button" class="layui-btn  newOrder">新建工单</button>
        </c:if>
        <c:if test="${order.serviceType eq '咨询'}">
            <button type="button" class="layui-btn consult">直接封单</button>
        </c:if>
    </div>
</div>
        <form class="layui-form" action="" lay-filter="component-form-group" id="orderForm">
        <div class="layui-card-body over pb-40 h-350">

        <div class="layui-card layui-hide">
            <input type="hidden" name="id" id="orderId" value="${order.id}">
         <%--   <input type="hidden" name="sign" id="sign" value="${order.customerSignFlag}">--%>
            <input type="hidden" name="fittingFlag" id="fittingFlag" value="${order.fittingFlag}">
          <%-- <fieldset class="layui-elem-field " >--%>
                <%--<div class="site-demo-button siteOrderButten">
                    <button type="button" class="layui-btn ">基本信息</button>
                    <button type="button" class="layui-btn layui-btn-primary">过程信息</button>
                   &lt;%&ndash; <button type="button" class="layui-btn ">物流信息</button>&ndash;%&gt;
                </div>--%>
        </div>
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">基本信息</li>
                    <li>过程信息</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-card jibenxinxi">
                            <div class="layui-card-body ">
                                <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="number" id="number" lay-verify="required" placeholder=""
                                                   autocomplete="off" class="layui-input layui-bg-gray" value="${order.number}" disabled>
                                        </div>
                                    </div>
                                    <div class="layui-col-lg2 layui-col-sm3" lay-filter="component-form-element">
                                        <label class="layui-form-label"><i class="mark">*</i>信息来源：</label>
                                        <div class="layui-input-block">
                                            <select name="orderType" id="orderType" lay-verify="required" class=" layui-bg-gray" disabled>
                                                <option value="">请选择</option>
                                                <option value="1" <c:if test="${order.orderType eq 1}">selected</c:if>>用户</option>
                                                <option value="2" <c:if test="${order.orderType eq 2}">selected</c:if>>平台录入</option>
                                                <option value="4" <c:if test="${order.orderType eq 4}">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="serviceType" id="serviceType" lay-verify="required" placeholder=""
                                                   autocomplete="off" class="layui-input layui-bg-gray" value="${order.serviceType}" disabled>
                                        </div>
                                    </div>
                                    <c:if test="${order.serviceType eq '安装'}">
                                        <div class="layui-col-lg2 layui-col-sm4">
                                            <label class="layui-form-label"><i class="mark">*</i>容量：</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="applianceCapacity" id="applianceCapacity" lay-verify="required" placeholder=""
                                                       autocomplete="off" class="layui-input layui-bg-gray" value="${order.applianceCapacity}" disabled>   <span class="pos-a h-32 lh-32 layui-span-unit" >KW</span>
                                            </div>
                                        </div>
                                    </c:if>
                                    <div class="layui-col-lg2 layui-col-sm3">
                                        <label class="layui-form-label">服务措施：</label>
                                        <div class="layui-input-block">
                                            <select name="serviceMeasures" id="serviceMeasures" class="layui-bg-gray" lay-filter="aihao" lay-search disabled>
                                                <option value="">请选择</option>
                                                <c:forEach items="${serviceMeasures}" var="measures">
                                                    <option value="${measures.columns.service_measures}" <c:if test="${measures.columns.service_measures eq order.serviceMeasures}">selected</c:if>> ${measures.columns.service_measures}</option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="layui-card jibenxinxi ">
                            <div class="layui-card-header pt-10">
                                <h1 class="title">用户信息</h1>
                            </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-lg3 layui-col-sm4">
                                            <label class="layui-form-label"><i class="mark">*</i>用户姓名：</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="customerName" id="customerName" lay-verify="required" placeholder=""
                                                       autocomplete="off" class="layui-input layui-bg-gray" value="${order.customerName}" disabled>
                                            </div>
                                        </div>

                                        <div class="layui-col-lg3 layui-col-sm4" style="position: relative">
                                            <label class="layui-form-label"><i class="mark">*</i>联系方式1：</label>
                                            <div class="layui-input-block pr-30">
                                                <input type="text" name="customerMobile" lay-verify="required" class="layui-input layui-bg-gray" value="${order.customerMobile}" disabled>
                                            </div>
                                        </div>
                                        <div class="layui-col-lg3 layui-col-sm4">
                                            <label class="layui-form-label">联系方式2：</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="customerTelephone" id="customerTelephone"  placeholder=""
                                                       autocomplete="off" class="layui-input layui-bg-gray" value="${order.customerTelephone}" disabled>
                                            </div>
                                        </div>
                                        <div class="layui-col-lg8">
                                            <div class="layui-col-xs12 layui-form-item">
                                                <label class="layui-form-label"><i class="mark">*</i>用户地址：</label>
                                                <div class="layui-input-block">
                                                    <div class="layui-col-lg3 layui-col-sm3 pr-30">
                                                        <select name="province" id="province" lay-verify="required" lay-filter="province" lay-search disabled>
                                                            <option value=""></option>
                                                            <c:forEach items="${pros}" var="pro">
                                                                <option value="${pro.columns.ProvinceName}" <c:if test="${order.province eq pro.columns.ProvinceName}">selected</c:if> title="${pro.columns.ProvinceID }">${pro.columns.ProvinceName}</option>
                                                            </c:forEach>
                                                        </select>
                                                    </div>
                                                    <div class="layui-col-lg2 layui-col-sm3 pr-30">
                                                        <select name="city" id="city" lay-verify="required" lay-filter="city" lay-search disabled>
                                                            <option value="">请选择</option>
                                                            <c:forEach items="${faccitys}" var="city">
                                                                <option value="${city.columns.CityName}" <c:if test="${order.city eq city.columns.CityName}">selected</c:if> title="${city.columns.CityID}">${city.columns.CityName}</option>
                                                            </c:forEach>
                                                        </select>
                                                    </div>
                                                    <div class="layui-col-lg2 layui-col-sm3 pr-30">
                                                        <select name="area" id="area" lay-verify="required" lay-filter="aihao" lay-search disabled>
                                                            <option value="">请选择</option>
                                                            <c:forEach items="${areas}" var="area">
                                                                <option value="${area.columns.DistrictName}" <c:if test="${order.area eq area.columns.DistrictName}">selected</c:if> title="${area.columns.DistrictID}">${area.columns.DistrictName}</option>
                                                            </c:forEach>
                                                        </select>
                                                    </div>
                                                    <div class="layui-col-lg6 layui-col-sm3">
                                                        <input type="text" name="customerAddress" lay-verify="required" placeholder=""
                                                               autocomplete="off" class="layui-input layui-col-lg2 layui-bg-gray" value="${order.customerAddress}" disabled>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="layui-card jibenxinxi">
                            <div class="layui-card-header pt-10">
                                <h1 class="title">服务信息</h1>
                            </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-lg3 layui-col-sm4">
                                            <label class="layui-form-label">电站名称：</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="powerStationName" id="powerStationName"  placeholder=""
                                                       autocomplete="off" class="layui-input layui-bg-gray" value="${order.powerStationName}" disabled>
                                            </div>
                                        </div>
                                        <div class="layui-col-lg2 layui-col-sm3">
                                            <label class="layui-form-label">设备类型：</label>
                                            <div class="layui-input-block">
                                                <select name="applianceCategory" id="applianceCategory" disabled>
                                                    <option value="">请选择</option>
                                                    <option value="光伏组件" <c:if test="${order.applianceCategory eq '光伏组件'}">selected</c:if>>光伏组件</option>
                                                    <option value="逆变器" <c:if test="${order.applianceCategory eq '逆变器'}">selected</c:if>>逆变器</option>
                                                    <option value="通讯模块"  <c:if test="${order.applianceCategory eq '通讯模块'}">selected</c:if>>通讯模块</option>
                                                    <option value="并网箱"  <c:if test="${order.applianceCategory eq '并网箱'}">selected</c:if>>并网箱</option>
                                                    <option value="线缆"  <c:if test="${order.applianceCategory eq '线缆'}">selected</c:if>>线缆</option>
                                                    <option value="配件"  <c:if test="${order.applianceCategory eq '配件'}">selected</c:if>>配件</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="layui-col-lg3 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 layui-bg-gray" value="${order.applianceModel}" disabled >
                                            </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="applianceBuyTime" id="applianceBuyTime"  placeholder=""
                                                       autocomplete="off" class="layui-input layui-bg-gray"  value="<fmt:formatDate value="${order.applianceBuyTime}" pattern="yyyy-MM-dd" />" disabled>
                                            </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="applianceBrand" id="applianceBrand"  placeholder=""
                                                       autocomplete="off" class="layui-input layui-bg-gray" value="${order.applianceBrand}" disabled>
                                            </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="applianceMachineCode" id="applianceMachineCode"   placeholder="" disabled
                                                       autocomplete="off" class="layui-input layui-bg-gray" value="${order.applianceMachineCode}">
                                            </div>
                                        </div>

                                        <div class="layui-col-lg3 layui-col-sm3">
                                            <label class="layui-form-label">保修类型：</label>
                                            <div class="layui-input-block">
                                                <select  name="warrantyType" id="warrantyType"  lay-filter="aihao" class="layui-bg-gray" disabled>
                                                    <option value="">请选择</option>
                                                    <option value="1" <c:if test="${order.warrantyType eq 1}">selected</c:if> >保内</option>
                                                    <option value="2" <c:if test="${order.warrantyType eq 2}">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="promiseTime"  id="promiseTime"  placeholder="" disabled
                                                       autocomplete="off" class="layui-input layui-bg-gray" value="<fmt:formatDate value="${order.promiseTime}" pattern="yyyy-MM-dd" />">
                                            </div>
                                        </div>
                                        <div class="layui-col-lg2 layui-col-sm3">
                                            <label class="layui-form-label">时间要求：</label>
                                            <div class="layui-input-block">
                                                <select  name="promiseLimit" id="promiseLimit"  lay-filter="aihao" class="layui-bg-gray" disabled>
                                                    <option value="">请选择</option>
                                                    <c:forEach items="${promiseLimit}" var="timeList">
                                                        <option value="${timeList}" <c:if test="${timeList == order.promiseLimit}">selected</c:if>>${timeList}</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">
                                                <input type="text" name="pleaseReferMall" id="pleaseReferMall"  placeholder=""
                                                       autocomplete="off" class="layui-input layui-bg-gray" disabled value="${order.pleaseReferMall}" >
                                            </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="invoice"  id="invoice"  placeholder=""
                                                       autocomplete="off" class="layui-input layui-bg-gray" disabled value="${order.invoice}">
                                            </div>
                                        </div>

                                        <div class="layui-col-lg3 layui-col-sm3">
                                            <label class="layui-form-label">重要程度：</label>
                                            <div class="layui-input-block">
                                                <select  name="level" id="level" class="layui-bg-gray" disabled>
                                                    <option value="">请选择</option>
                                                    <option value="1" <c:if test="${1 == order.level}">selected</c:if>>紧急</option>
                                                    <option value="2" <c:if test="${2 == order.level}">selected</c:if>>一般</option>
                                                </select>
                                            </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="repairTime"  id="repairTime"  placeholder=""
                                                       autocomplete="off" class="layui-input layui-bg-gray" disabled value="<fmt:formatDate value="${order.repairTime}" pattern="yyyy-MM-dd HH:mm:ss" />">
                                            </div>
                                        </div>
                                        <div class="layui-col-xs12">
                                            <c:choose>
                                                <c:when test="${order.serviceType eq '安装'}">
                                                    <label class="layui-form-label">现场描述：</label>
                                                </c:when>
                                                <c:otherwise>
                                                    <label class="layui-form-label">故障描述：</label>
                                                </c:otherwise>
                                            </c:choose>
                                            <div class="layui-input-block">
                                                <textarea name="remarks" id="remarks" placeholder="" class="layui-textarea layui-bg-gray" lay-verify="required" disabled>${order.remarks}</textarea>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs12 layui-form-item">
                                            <c:choose>
                                                <c:when test="${order.serviceType eq '安装'}">
                                                    <label class="layui-form-label">附图：</label>
                                                </c:when>
                                                <c:otherwise>
                                                    <label class="layui-form-label">故障图片：</label>
                                                </c:otherwise>
                                            </c:choose>
                                            <div class="layui-input-block">
                                                <div id="imgsDiv" class="layer-photos-demo">
                                                    <c:forEach var="image" items="${images}">
                                                        <div  class="bj-img imgSpan">
                                                            <span class="layui-icon-close layui-icon  layui-hide" onclick="delImg(this)"></span>
                                                            <img src="${commonStaticImgPath}${image}"  height="700" width="1200"/>
                                                            <input type="hidden" class="imgPicker" value="${image}">
                                                        </div>
                                                    </c:forEach>
                                                </div>
                                                <div class="upload-container layui-hide" id="uploader">
                                                    <img src="" alt="img placeholder" id="imgsAdd">
                                                </div>
                                            </div>

                                        </div>
                                        <div class="layui-col-xs12 layui-form-item layui-hide tishi">
                                            <label class="layui-form-label"></label>
                                            <div class="layui-input-block" style="color: #cc2a2c">
                                                提示：最多可上传4张照片
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item guoChen">

                    </div>
                </div>
            </div>

<%--    <div class="layui-card processInformation layui-hide">--%>
<%--        <ul class="layui-timeline guoChen">--%>



<%--        </ul>--%>
<%--    </div>--%>
       <%--     <div class="layui-card over pl-10 logsticInfoNew layui-hide">
                <div class="layui-col-xs6 pr-20">
                    <h1 class="title mt-10">寄件物流</h1>
                    <div class="mt-5">
                        <div class="layui-collapse" lay-accordion="">
                            <c:choose>
                                <c:when test="${order.customerSignFlag eq '1'}">
                                    <div class="layui-colla-item">
                                        <h2 class="layui-colla-title productInfo">${order.applianceBrand}${order.applianceCategory}</h2>
                                        <div class="layui-colla-content">
                                            <ul class="layui-timeline logisticInfor" style="max-height: 200px;overflow-y: auto">
                                            </ul>
                                        </div>
                                    </div>
                                </c:when>
                                <c:otherwise>

                                </c:otherwise>
                            </c:choose>
                            <c:choose>
                                <c:when test="${order.fittingFlag eq '2'}">
                                    <div class="layui-colla-item">
                                        <h2 class="layui-colla-title fitRefundInfo">已发备件</h2>
                                        <div class="layui-colla-content">
                                            <ul class="layui-timeline logisticInfor" style="max-height: 200px;overflow-y: auto">

                                            </ul>
                                        </div>
                                    </div>
                                </c:when>
                                <c:otherwise>
                                </c:otherwise>
                            </c:choose>

                            <c:forEach items="${applyInfo}" var="info">
                                <c:choose>
                                    <c:when test="${info.columns.site_id eq ''}">

                                    </c:when>
                                    <c:when test="${info.columns.site_id eq null}">

                                    </c:when>
                                    <c:otherwise>
                                        <div class="layui-colla-item">
                                            <h2 class="layui-colla-title fitApplyInfo" data-logName="${info.columns.logistics_names}" data-logNumber="${info.columns.logistics_number}" >${info.columns.fitting_name}</h2>
                                            <div class="layui-colla-content">
                                                <ul class="layui-timeline logisticInfor" style="max-height: 200px;overflow-y: auto">

                                                </ul>
                                            </div>
                                        </div>
                                    </c:otherwise>
                                </c:choose>
                            </c:forEach>
                        </div>

                    </div>
                </div>
                <div class="layui-col-xs6 pr-20">
                    <h1 class="title mt-10">返件物流</h1>
                    <div class="mt-5">
                        <div class="layui-collapse" lay-accordion="">
                            <c:forEach items="${rd}" var="rdList">
                                <c:choose>
                                    <c:when test="${rdList.columns.fitting_name eq ''}">

                                    </c:when>
                                    <c:when test="${rdList.columns.fitting_name eq null}">

                                    </c:when>
                                    <c:otherwise>
                                        <div class="layui-colla-item">
                                            <h2 class="layui-colla-title returnFactoryInfo" data-logName="${rdList.columns.logistics_names}" data-logNum="${rdList.columns.logistics_number}">${rdList.columns.fitting_name}</h2>
                                            <div class="layui-colla-content">
                                                <ul class="layui-timeline returnFactory" style="max-height: 200px;overflow-y: auto">

                                                </ul>
                                            </div>
                                        </div>
                                    </c:otherwise>
                                </c:choose>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </div>--%>

   <%-- <div class="layui-card">
        <div class="site-demo-button fuwufankuiorder">
            <button type="button" class="layui-btn " >备件信息</button>
        </div>
        <table class="layui-table  beijianxinxi" style="table-layout:fixed;">
            <thead>
            <tr>
                <th width="10%">备件条码</th>
                <th width="10%">备件名称</th>
                <th width="10%">备件描述</th>
                <th width="10%">备件状态</th>
                <th width="10%">使用数量</th>
                <th width="15%">收货人</th>
                <th width="15%">联系方式</th>
                <th width="20%">收货地址</th>
            </tr>
            </thead>
            <tbody>


            </tbody>
        </table>


    </div>--%>
        </div>

        </form>

<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script>
    var imgsCount="${imgNumber}";
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'layedit', 'laydate' ,'upload','jquery','layer'], function () {
         $ = layui.$
            , admin = layui.admin
            , element = layui.element
            , form = layui.form
            , layer = layui.layer
            ,laydate = layui.laydate;
        var  upload = layui.upload;

        //执行实例
        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 () {
                //请求异常回调
            }
        });

        layer.photos({
            photos: '.layer-photos-demo'
            ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });

        $(".mark").addClass("layui-hide");
        $(".red").addClass("layui-hide");

        function addImg(data){
            imgsCount++;
            if (imgsCount >= 4) {
                $("#uploader").addClass("layui-hide");
            }else{
                $("#uploader").removeClass("layui-hide");
            }
            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);
        }


        //日期
        laydate.render({
            elem: '#applianceBuyTime'
            ,trigger: 'click'
        });
        //预约时间
        laydate.render({
            elem: '#promiseTime'
            ,trigger: 'click'
        });
        laydate.render({
            elem:'#repairTime'
            ,trigger: 'click'
            ,type: 'datetime'
        })
        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);
            }
        });
        element.render('breadcrumb', 'breadcrumb');

        form.on('select(applianceBrand)', function(data){
            var brand = data.value;
            CategoryOrder(brand)
        });
        form.on('select(applianceCategory)', function(data){
            var model=$(data.elem).find("option:selected").attr("title");
            $("#applianceModel").empty();
            if(isBlank(model)){
                $("#applianceCategory").append("<option value=''>请选择</option>");
                return "";
            }
            orderModel(model);
        });

        form.on('select(completeLimitLength)', function(data){
            var model=$(data.elem).find("option:selected").attr("title");
            $("#completeExtendCost").val(model);
            $(".completeExtendCost").html("¥"+model);
        });

        form.on('select(province)', function(data){
            var province = $(data.elem).find("option:selected").attr("title");
            provinceOrder(province);
        });
        form.on('select(city)', function(data){
            var city = $(data.elem).find("option:selected").attr("title");
            cityOrder(city);

        });

        var siteId = "${order.siteId}";

        function provinceOrder(province){
            $("#city").empty();
            $("#area").empty();
            if(isBlank(province)){
                $("#city").append("<option value=''>请选择</option>");
                return "";
            }
            $.ajax({
                type:"POST",
                url:"${ctx}/main/redirect/getCitysByProId",
                data:{
                    province:province
                },
                success:function(result){
                    if(result =="205"){
                        layer.msg("暂无数据!")
                        return
                    }
                    var html =" <option value=''>请选择</option>";
                    for(var i=0;i<result.length;i++){
                        var city = result[i];
                        html =html+ '<option value="'+city.columns.CityName+'" title="'+city.columns.CityID+'">'+city.columns.CityName+'</option>';
                    }
                    $("#city").append(html);
                    form.render('select');
                }
            });

        }

        function cityOrder(city,arean){
            $("#area").empty()
            if(isBlank(city)){
                $("#area").append("<option value=''>请选择</option>");
                return "";
            }
            $.ajax({
                type:"POST",
                url:"${ctx}/main/redirect/getAreaByCityId",
                data:{
                    city:city
                },
                success:function(result){
                    if(result =="205"){
                        layer.msg("暂无数据!")
                        return
                    }
                    var html ="<option value=''>请选择</option>";
                    for(var i=0;i<result.length;i++){
                        var area = result[i];
                        html =html+ '<option value="'+area.columns.DistrictName+'" >'+area.columns.DistrictName+'</option>';
                    }
                    $("#area").append(html);
                    if(!isBlank(arean)){
                        $("#area").val(arean)
                    }

                    form.render('select');
                }
            });

        }

        var aa = $('.siteOrderButten button');
        var orderId = $("#orderId").val();
        var sign = $("#sign").val();
        var fittingFlag = $("#fittingFlag").val();

        guocheng(orderId);

        <%--aa.click(function () {--%>
        <%--    aa.addClass("layui-btn-primary");--%>
        <%--    $(this).removeClass("layui-btn-primary");--%>
        <%--    var index=aa.index(this);--%>
        <%--    if(index == 1){--%>
        <%--        //过程信息--%>
        <%--        $(".processInformation").removeClass("layui-hide");--%>
        <%--        $(".jibenxinxi").addClass("layui-hide");--%>
        <%--        $(".logsticInfoNew").addClass("layui-hide");--%>
        <%--        var html = $.trim($(".layui-timeline").html()) ;--%>
        <%--        //    if(isBlank(html)){--%>
        <%--        guocheng(orderId);--%>
        <%--        //   }--%>

        <%--    }else if(index == 2){--%>
        <%--        //物流信息--%>
        <%--        /*if(sign == 2){--%>
        <%--            layer.msg("暂时没有物流信息，请稍后查询!",{icon:2});--%>
        <%--        }else*/ if(fittingFlag == 0 &&  "安装" != "${order.serviceType}"){--%>
        <%--            layer.msg("暂时没有物流信息，请稍后查询!",{icon:2});--%>
        <%--        }else{--%>
        <%--            //物流信息--%>
        <%--            $(".processInformation").addClass("layui-hide");--%>
        <%--            $(".jibenxinxi").addClass("layui-hide");--%>
        <%--            $(".logsticInfoNew").removeClass("layui-hide");//物流信息--%>
        <%--        }--%>
        <%--    }else{--%>
        <%--        $(".jibenxinxi").removeClass("layui-hide");--%>
        <%--        $(".processInformation").addClass("layui-hide");--%>
        <%--        $(".logsticInfoNew").addClass("layui-hide");--%>
        <%--    }--%>
        <%--})--%>

        $(".xiugaiOrder").click(function(){
            $(".mark").removeClass("layui-hide");
            $(".red").removeClass("layui-hide");
            $(this).addClass("layui-hide");
            $(".uodateorder").removeClass("layui-hide");
            $(".cancelorder").removeClass("layui-hide");
            $("input").removeClass("layui-bg-gray");
            $("input").removeClass("layui-disabled");
            $("input").removeAttr("disabled");
            $("select").removeAttr("disabled");
            $("textarea").removeClass("layui-bg-gray");
            $("#remarks").attr("disabled",false);
            $("#number").addClass("layui-bg-gray").attr("disabled",true);
            $("#serviceType").addClass("layui-bg-gray").attr("disabled",true);
            $("#imgsDiv span").removeClass("layui-hide");
            $(".assign").addClass("layui-disabled").attr("disabled",true);
            $(".invalid").addClass("layui-disabled").attr("disabled",true);
            $(".newOrder").addClass("layui-disabled").attr("disabled",true);
            $(".consult").addClass("layui-disabled").attr("disabled",true);

            if(imgsCount<4){
                $("#uploader").removeClass("layui-hide")
            }
            $(".tishi").removeClass("layui-hide");

            var serType=$("#serviceType").val();
            if("安装"==serType){
                $("#warrantyType").val("1").attr("disabled",true);
            }
            form.render('select');
        })
        //保存
        $(".uodateorder").click(function(){
            //验证不必填项的值格式
            var shuzi = /[0-9]*[1-9][0-9]*$/;
            var reg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
            var orderType=$("#orderType").val();
            if(isBlank(orderType)){
                layer.msg("请输入信息来源!",{icon:2});
                return false
            }
            var serviceType=$("#serviceType").val(); //服务类型
            var serviceMeasures=$("#serviceMeasures").val()  //服务措施
            var customerName = $("#customerName").val();//用户姓名
            var customerMobile = $("input[name=customerMobile]").val();//联系方式1
            var customerTelephone = $("input[name=customerTelephone]").val();//联系方式2
            var province = $("#province").find("option:selected").text();//省
            var city = $("#city").find("option:selected").text();//市
            var area = $("#area").find("option:selected").text();//区
            var customerAddress = $("input[name=customerAddress]").val();//用户地址
            var applianceCapacity=$("#applianceCapacity").val();
            if(serviceType =='安装'){
                if(isBlank(applianceCapacity)){
                    layer.msg("请输入容量!", {icon: 2});
                    return false;
                }else  if (!reg.test(applianceCapacity)) {
                    layer.msg("容量格式不正确!", {icon: 2});
                    return false;
                }
            }
            if(isBlank(customerName)){
                layer.msg("请输入用户姓名!",{icon:2});
                return false
            }
            if (isBlank(customerMobile)) {
                layer.msg("请输入联系方式",{icon:2});
                return
            } else if (!isPhoneNo($.trim(customerMobile))) {
                layer.msg("手机号码格式不正确",{icon:2});
                return
            } else if (isBlank(customerAddress)) {
                layer.msg("请输入详细地址",{icon:2});
                return
            }
            if(isBlank(province)){
                layer.msg("请输入省",{icon:2});
                return
            }
            if(isBlank(city)){
                layer.msg("请输入市",{icon:2});
                return
            }
            if(isBlank(area)){
                layer.msg("请输入区",{icon:2});
                return
            }
            var powerStationName=$("#powerStationName").val();//电站名称
            var applianceCategory=$("#applianceCategory").val(); //设备类型
            var applianceModel=$("#applianceModel").val();//设备型号
            var applianceBuyTime=$("#applianceBuyTime").val();//投运时间
            var applianceBrand=$("#applianceBrand").val(); //设备品牌
            var applianceMachineCode=$("#applianceMachineCode").val(); //设备序列号
            var warrantyType = $("#warrantyType").find("option:selected").val();//保修类型
            var promiseTime = $("#promiseTime").val();//预约时间  2
            var promiseLimit = $("#promiseLimit").val();//时间要求   3
            var pleaseReferMall = $("#pleaseReferMall").val();//销售商  1
            var invoice=$("#invoice").val(); //发票号码
            var level=$("#level").val();  //重要程度
            var  repairTime=$("#repairTime").val(); //报单时间
            var remarks = $("textarea[name=remarks]").val();//故障描述
            /*if(serviceType =='安装'){
                if(isBlank(pleaseReferMall)){
                    layer.msg("请输入销售商!",{icon:2});
                    return false;
                }else if(isBlank(invoice)){
                    layer.msg("请输入发票号码!",{icon:2});
                    return false;
                }
            }*/
            if (isBlank(repairTime)) {
                layer.msg("请输入报单时间",{icon:2});
                return
            }
          /*  if (isBlank(remarks)) {
                layer.msg("请输入故障描述",{icon:2});
                return
            }*/
            var imgs = $(".imgPicker");
            /*
              if (imgs.length == 0) {
                  layer.msg("故障图片不能为空！", {icon: 5, anim: 6});
                  return;
              }*/
             var imgsAppend = '';
             if(imgs.length > 0){
                 imgs.each(function (index) {
                     var img = $(this).val();
                     if (!isBlank(img)) {
                         imgsAppend += img + ",";
                     }
                 });
             }

          /*  var imgsAppend='sfimg02/M00/00/3F/wKgCF11KJ4CAGjysAAKQF2GgG6g23..jpg';*/

            var orderId = "${order.id}";//工单id
            var serviceType = "${order.serviceType}";
            var  order={
                    id:orderId,
                    serviceMeasures:serviceMeasures,
                    applianceCapacity:applianceCapacity,
                    orderType:orderType,
                    customerName:customerName,
                    customerMobile:customerMobile,
                    customerTelephone:customerTelephone,
                    province:province,
                    city:city,
                    area:area,
                    customerAddress:customerAddress,
                    powerStationName:powerStationName,
                    applianceCategory:applianceCategory,
                    applianceModel:applianceModel,
                    applianceBuyTime:applianceBuyTime,
                    applianceBrand:applianceBrand,
                    applianceMachineCode:applianceMachineCode,
                    warrantyType:warrantyType,
                    promiseTime:promiseTime,
                    promiseLimit:promiseLimit,
                    pleaseReferMall:pleaseReferMall,
                    invoice:invoice,
                    level:level,
                    repairTime: repairTime,
                    remarks:remarks,
                    bdImgs:imgsAppend
            }
            $.ajax({
                url:"${ctx}/order/saveUpdate",
                type:"post",
                contentType : "application/json;charsetset=UTF-8",
                 data:JSON.stringify(order)
                ,success:function (result) {
                    if(result.code == '200'){
                        layer.msg("保存成功",{icon:1,time:1000},function(){
                            parent.table.reload('test');
                            window.location.href="${ctx}/order/getplatformOrderForm?orderId="+orderId;
                        })
                    }else{
                        layer.msg("保存失败",{icon:2});
                    }
                   /* if(result.code=="505"){
                        layer.msg("保存失败",{icon:2});
                    }else if(result.code =='506'){
                        layer.msg("保存失败,请联系平台充值!", {icon: 2});
                    }else if(result.code =='506'){
                        layer.msg("保存失败,可用金额不足，请联系平台充值!", {icon: 2});
                    }else if(result.code == '200'){
                        layer.msg("保存成功",{icon:1,time:1000},function(){
                        })
                    }*/
                },error:function () {
                    layer.msg("保存失败",{icon:2});
                }
            })


        })
        //取消
        $(".cancelorder").click(function(){
            $(this).addClass("layui-hide");
            $(".uodateorder").addClass("layui-hide");
            $(".xiugaiOrder").removeClass("layui-hide");

            window.location.reload();

        })
        /**
         * 指派
         */
        var orderId = $("#orderId").val();

        $(".assign").click(function(){
            layer.open({
                type: 2,
                content: "${ctx}/dispatch/getOrderSite?orderId="+orderId+ '&where=1'  //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                ,title: "指派"
              /*  ,btn:['确认指派']*/
                ,area:["800px","480px"],
                end:function(){
                    //刷新表格
                  /*  searchOrder(orderId)*/
                }

            });
        })
        //无效
        $(".invalid").click(function(){
            var indexla = layer.confirm('您确定要操作无效工单吗？', {
                icon:3,
                btn: ['确定','取消'] //按钮
            }, function(){
                layer.close(indexla);
               layer.open({
                   type: 2,
                   content: "${ctx}/order/lookNOUse?orderId="+orderId + "&where=1" //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                   ,title: "无效工单"
                   ,area:["600px","220px"]
               })
            }, function(){
                layer.close(indexla)
            });
        })

        //新建工单

        $(".newOrder").click(function(){
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index);
            parent.layer.open({
                type:2,
                content:"${ctx}/order/platform/addRepairOrder?orderId="+orderId,
                title:"新建工单",
                area: ['1100px', '90%'],
                end:function(){
                    //刷新表格
                }
            })
        })

        $(".consult").click(function(){
            layer.open({
                type:2,
                content:"${ctx}/order/consultOrder?orderId="+orderId,
                title:"直接封单",
                area: ['800px', '40%'],
                end:function(){
                    //刷新表格
                }
            })
        })


       /* function searchOrder(orderId) {
            //执行重载
            table.reload('test', {
                page: {
                    curr: 1
                }
            });
        }*/

        if("${type}" == 2){
            $(".processInformation").removeClass("layui-hide");
            $(".jibenxinxi").addClass("layui-hide");
            $(".logsticInfoNew").addClass("layui-hide");
            guocheng(orderId)
        }


        if(${order.status == 1}){
          /*  orderFitting(orderId);*/
        }
        function guocheng(orderId){

            $.ajax({
                type:"POST",
                url:"${ctx}/order/getOrderDetail",
                data:{
                    orderId:orderId
                },
                success:function(data){
                    if(data!=null){
                        var deatil ="";
                        for(var i =0;i<data.length;i++){
                            deatil += '<li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i>';
                            deatil += '<div class="layui-timeline-content layui-text">';
                            deatil +=' <h4 class="layui-timeline-title">'+data[i].d+'</h4> <p>';
                            deatil += data[i].c+ '  </p> </div> </li>';
                        }
                        $(".guoChen").html(deatil);
                    }else{
                        layer.msg("数据有误！", {icon: 2});
                    }
                }
            });
        }

        //查看物流信息
        $(".productInfo").click(function(){
            var logisticName = $("#logisticName").val();
            var logisticNo = $("#logisticNo").val();
            var orderId = $("#orderId").val();
            addLogisticInfo(logisticName,logisticNo,orderId);
        })

        //查看已发备件信息
        $(".fitRefundInfo").click(function(){
            var logisticName = $("#logisticName").val();
            var logisticNo = $("#logisticNo").val();
            var orderId = $("#orderId").val();
            addLogisticInfo(logisticName,logisticNo,orderId);
        })

        //查看添加备件申请获取的物流信息
        $(".fitApplyInfo").click(function(){
            var logisticName = $(this).attr("data-logName");
            var logisticNo = $(this).attr("data-logNumber");
            var orderId = $("#orderId").val();
            addLogisticInfo(logisticName,logisticNo,orderId);
        })

        //查看新建，旧件返厂物流信息
        $(".returnFactoryInfo").click(function(){
            var logisticName = $(this).attr("data-logName");
            var logisticNo = $(this).attr("data-logNum");
            var orderId = $("#orderId").val();
            $.ajax({
                type:"POST",
                url:"${ctx}/main/order/logisticsDetail",
                data:{
                    orderId:orderId,
                    logisticName:logisticName,
                    logisticNo:logisticNo
                },
                success:function(data){
                    if(data!=null){
                        var deatil ="";
                        for(var i =0;i<data.length;i++){
                            deatil += '<li class="layui-timeline-item">';
                            deatil += '<i class="layui-icon layui-timeline-axis"></i>';
                            deatil += '<div class="layui-timeline-content layui-text">';
                            deatil += '<div class="layui-timeline-title">'+data[i].AcceptTime+" "+data[i].AcceptStation+'</div>';
                            deatil += '</div>';
                            deatil += '</li>';
                        }
                        $(".returnFactory").html(deatil);
                    }else{
                        layer.msg("数据有误！", {icon: 2});
                    }

                }
            })
        })

        function addLogisticInfo(logisticName,logisticNo,orderId){
            $(".logisticInfor").empty()
            $.ajax({
                type:"POST",
                url:"${ctx}/main/order/logisticsDetail",
                data:{
                    orderId:orderId,
                    logisticName:logisticName,
                    logisticNo:logisticNo
                },
                success:function(data){
                    if(data!=null){
                        var deatil ="";
                        for(var i =0;i<data.length;i++){
                            deatil += '<li class="layui-timeline-item">';
                            deatil += '<i class="layui-icon layui-timeline-axis"></i>';
                            deatil += '<div class="layui-timeline-content layui-text">';
                            deatil += '<div class="layui-timeline-title">'+data[i].AcceptTime+" "+data[i].AcceptStation+'</div>';
                            deatil += '</div>';
                            deatil += '</li>';
                        }
                        $(".logisticInfor").html(deatil);
                    }else{
                        layer.msg("数据有误！", {icon: 2});
                    }

                }
            })
        }


        function orderFitting(orderId){
            $("tbody").empty();
            $.ajax({
                type:"POST",
                url:"${ctx}/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 = "已完成";
                            }
                            var fitting_code= data[i].columns.fitting_code;
                            if(isBlank(fitting_code)){
                                fitting_code="";
                            }
                            deatil +=' <tr>';
                            deatil +=' <td style="overflow:hidden;" class="text-over" title="'+data[i].columns.fitting_name+'">'+data[i].columns.fitting_name+'</td>';
                            deatil +=' <td style="overflow:hidden;" class="text-over">'+fitting_code+'</td>';
                            deatil +=' <td style="overflow:hidden;" class="text-over" title="'+data[i].columns.apply_marks+'">'+data[i].columns.apply_marks+'</td>';
                            deatil +=' <td>'+stname+'</td>';
                            deatil +='<td>'+data[i].columns.apply_num+'</td>';
                            deatil += ' <td style="overflow:hidden;" class="text-over" title="'+data[i].columns.delivery_name+'">' + data[i].columns.delivery_name + '</td>';
                            deatil += ' <td style="overflow:hidden;" class="text-over" title="'+data[i].columns.delivery_mobile+'">' + data[i].columns.delivery_mobile + '</td>';
                            deatil += ' <td style="overflow:hidden;" class="text-over" title="'+data[i].columns.delivery_address+'">' + data[i].columns.delivery_address + '</td>';
                            deatil +=' </tr>';
                        }
                        $("tbody").html(deatil);
                    }else{
                        // layer.msg("数据有误！", {icon: 2});
                    }
                }
            });
        }

        // 验证手机号
        function isPhoneNo(phone) {
            var tel = /(^1\d{10}$)|(^(\d{3,4}\-)?\d{5,9}$)/;
            return tel.test($.trim(phone));
        }
    });


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

    function delImg(that){
        imgsCount--;
        if (imgsCount < 4) {
            $("#uploader").removeClass("layui-hide");
        }
        $(that).parent().remove();
    }

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