<%@ 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>
        .popup .ico1pic{vertical-align:middle;}
        .topshow .popup{background:#fff; border-radius:4px; position:absolute; border:1px solid #4BAAED; /*height:25px; line-height:25px;*/ text-align:center; padding:5px 0px; width:180px; font-size:14px;}
        .topshow .popup .sjxsp1{display:block;  width:0; height:0; border-width:0 10px 10px;  border-style:solid;  border-color:transparent transparent #0e8ee7; transform:rotate(180deg); position:absolute;  bottom:-10px;  left:50%;/* 三角形居中显示 */ margin-left:-10px;/* 三角形居中显示 */}
        .topshow .popup em{display:block; width:0; height:0; border-width:0 10px 10px;  border-style:solid;  border-color:transparent transparent #fff; position:absolute; top:1px; left:-10px;}
        .wordtext{vertical-align:middle;}
         html{
             background-color: #fff;
         }
    </style>
</head>
<body class="">
<div class="layui-form-item operate-footer" style="text-align: center;">
    <button type="button" class="layui-btn  saveOrder" >保存</button>
    <button type="reset " class="layui-btn  reset" >重置</button>
    <button type="button" class="layui-btn assign" >直接派单</button>
    <button type="button" class="layui-btn directSealin hide" >直接封单</button>
</div>
        <form class="layui-form" id="orderForm">
            <div class="layui-card-body over pt-20 pb-40 h-350">

                <div class="layui-card">
                    <div class="layui-elem-quote">
                        <p>工单信息</p>
                    </div>
                    <input class="layui-input layui-hide" name="siteId" id="siteId">
                    <input class="layui-input layui-hide" name="consultOrder" id="consultOrder">
                    <div class="layui-card-body">

                        <div class="layui-row layui-col-space12 layui-form-item">
                            <div class="layui-col-lg2 layui-col-sm3">
                                <label class="layui-form-label"><i class="mark">*</i>信息来源：</label>
                                <div class="layui-input-block">
                                    <select name="orderType" id="orderType">
                                        <option value="">请选择</option>
                                            <option value="1">用户</option>
                                            <option value="2">平台录入</option>
                                            <option value="4">电子商务</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-col-lg2 layui-col-sm3">
                                <label class="layui-form-label"><i class="mark">*</i>服务类型：</label>
                                <div class="layui-input-block">
                                    <select name="serviceType" id="serviceType" lay-filter="serviceType">
                                        <option value="">请选择</option>
                                        <option value="安装">安装</option>
                                        <option value="维修" <c:if test="${order.serviceType eq '维修'}">selected</c:if>>维修</option>
                                        <option value="咨询" <c:if test="${order.serviceType 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">
                                    <select name="serviceMeasures" id="serviceMeasures" lay-filter="aihao" lay-search>
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-col-lg2 layui-col-sm3 layui-hide" id="hideCapacity">
                                <label class="layui-form-label"><i class="mark">*</i>容量：</label>
                                <div class="layui-input-block pos-r">
                                    <input type="text" name="applianceCapacity"  id="applianceCapacity" placeholder=""
                                           autocomplete="off" class="layui-input" value="">
                                    <span class="pos-a h-32 lh-32 layui-span-unit" >KW</span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="layui-card jibenxinxi ">
                    <div class="layui-elem-quote">
                        <p>用户信息</p>
                    </div>
                    <div class="layui-card-body ">
                        <div>
                            <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 " value="${order.customerName}">
                                    </div>
                                </div>


                                <div class="layui-col-lg3 layui-col-sm4" style="position:relative;">
                                    <div>
                                        <label class="layui-form-label"><i class="mark">*</i>联系方式1：</label>
                                        <div class="layui-input-block pr-30">
                                            <input type="text" name="customerMobile" id="customerMobile" lay-verify="recevierMobile" class="layui-input" value="${order.customerMobile}" autocomplete="off" >
                                        </div>
                                    </div>
                                    <div class="topshow layui-hide" style="position:absolute; top:-48px; left:71px;">
                                        <div class="popup orderOnclick">
                                            <img src="${ctxPlugin}/static/djximg/ico1.png" class="ico1pic">
                                            <span class="sjxsp1"><em></em></span>
                                            <span class="wordtext">有101条历史工单</span>
                                        </div>
                                    </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 " value="${order.customerTelephone}" >
                                    </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 >
                                                    <option value="">请选择省</option>
                                                    <c:forEach items="${pros}" var="pro">
                                                        <option value="${pro.columns.ProvinceName}" title="${pro.columns.ProvinceID }" <c:if test="${order.province eq pro.columns.ProvinceName}">selected</c:if>>${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 >
                                                    <option value="">请选择市</option>
                                                  <%--  <c:forEach items="${faccitys}" var="city">
                                                        <option value="${city.columns.CityName}" title="${city.columns.CityID}">${city.columns.CityName}</option>
                                                    </c:forEach>--%>
                                                    <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 >
                                                    <option value="">请选择县/区</option>
                                                   <%-- <c:forEach items="${areas}" var="area">
                                                        <option value="${area.columns.DistrictName}"  title="${area.columns.DistrictID}">${area.columns.DistrictName}</option>
                                                    </c:forEach>--%>
                                                    <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 "  value="${order.customerAddress}">
                                            </div>
                                        </div>

                                    </div>

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

                </div>
                <div class="layui-card jibenxinxi">
                    <div class="layui-elem-quote">
                        <p>服务信息</p>
                    </div>
                    <div class="layui-card-body">
                        <div >
                            <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" value="${order.powerStationName}">
                                    </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">
                                            <option value="">请选择</option>
                                            <option value="光伏组件">光伏组件</option>
                                            <option value="逆变器">逆变器</option>
                                            <option value="通讯模块">通讯模块</option>
                                            <option value="并网箱">并网箱</option>
                                            <option value="线缆">线缆</option>
                                            <option value="配件">配件</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 " >
                                    </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" >
                                    </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 " >
                                    </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=""
                                               autocomplete="off" class="layui-input " >
                                    </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">
                                            <option value="">请选择</option>
                                            <option value="1">保内</option>
                                            <option value="2">保外</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=""
                                               autocomplete="off" class="layui-input">
                                    </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">
                                            <option value="">请选择</option>
                                            <c:forEach items="${promiseLimit}" var="timeList">
                                                <option value="${timeList}">${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" >
                                    </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">
                                    </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">
                                            <option value="">请选择</option>
                                            <option value="1">紧急</option>
                                            <option value="2">一般</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">
                                    </div>
                                </div>
                                <div class="layui-col-xs12">
                                    <label class="layui-form-label" id="changeDescribe">现场描述：</label>
                                    <div class="layui-input-block">
                                        <textarea name="remarks" id="remarks" placeholder="" class="layui-textarea" lay-verify="required"></textarea>
                                    </div>
                                </div>
                                <div class="layui-col-xs12 layui-form-item">
                                    <label class="layui-form-label" id="changeImgName">附图：</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">
                                        提示：最多可上传4张照片
                                    </div>
                                </div>
                                <input class="layui-hide" value="sfimg02/M00/00/3F/wKgCF11KJ4CAGjysAAKQF2GgG6g23..jpg," name="bdImgs">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </form>


<div class=" layui-card mb-0 pr-30 layui-hide layuiDirectSealing">
    <div class="layui-card mb-0 pr-30">
        <div class="layui-card-body">
            <div class="layui-row">
                <input class="layui-hide" name="orderId" value="${orderId}" id="orderId">
                <div class="layui-col-xs12">
                    <label class="layui-form-label">封单备注：</label>
                    <div class="layui-input-block">
                        <textarea id="consultOrderRem" lay-filter="description" class="layui-textarea" lay-verify="required"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item " style="text-align: center;">
            <div class="layui-input-block">
                <button class="layui-btn"  id="directSealingSubmit">确认</button>
               <%-- <button  class="layui-btn " lay-filter="cancel" id="cancel">取消</button>--%>
            </div>

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

<div class="layui-card mb-0 layui-hide" id="type-content">
        <div class="layui-card-body">
            <div class="" style="position: relative;">
                <div class=" pr-50">
                    <input type="text" name="customerMobile" autocomplete="off" placeholder="请输入服务商名称" class="layui-input"  id="filterName">
                </div>
                <button type="button" class="layui-btn f-r chamobi" style="position:absolute;top:0px;right: 0; padding: 0 10px;"><i class="layui-icon fs-16">&#xe615;</i></button>
            </div>
            <div class="layui-form" style="height: 300px; overflow-y: auto">
                <table class="layui-table " >
                    <colgroup>
                        <col width="30%">
                        <col width="20%">
                        <col width="30%">
                        <col width="20%">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>服务商名称</th>
                        <th>预计里程</th>
                        <th>选择</th>
                    </tr>
                    </thead>
                    <tbody id="zhijiepaidan">
                    </tbody>
                </table>
                <div class="layui-form-item layui-hide" style="text-align: center;">
                    <input type="button" lay-submit lay-filter="sureSubmit" id="sureSubmit" value="确认指派" class="layui-btn">
                </div>
            </div>
            <div>
                <span id="paigongzhi">指派至：</span>
            </div>
        </div>

    </div>


<div class="layui-card mb-0 layui-hide" id="HistoryOrder">
    <div class="layui-card-body">
        <div class="layui-form mt-10">
            <table class="layui-table " >
                <colgroup>
                    <col width="8%">
                    <col width="10%">
                    <col width="10%">
                    <col width="10%">
                    <col width="10%">
                    <col width="10%">
                    <col width="10%">
                    <col width="10%">
                    <col width="12%">
                </colgroup>
                <thead>
                <tr>
                    <th></th>
                    <th>工单编号</th>
                    <th>状态</th>
                    <th>用户姓名</th>
                    <th>详细地址</th>
                    <th>服务类型</th>
                    <th>电站名称</th>
                    <th>报单时间</th>
                    <th>工单描述</th>
                </tr>
                </thead>
                <tbody id="orderHis">
                </tbody>
            </table>

            <div class="layui-form-item " style="text-align: center;">
                <input type="button"  value="工单复制" class="layui-btn copyOrder">
            </div>
        </div>
    </div>

</div>



<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script>
    var imgsCount=0;
    var serviceType = '${order.serviceType}';
    var reg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'layedit', 'laydate','jquery','upload','layer'], function () {
          $ = layui.$
            , element = layui.element
            , form = layui.form
            , layer = layui.layer
            ,laydate = layui.laydate;
       var  upload = layui.upload;

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

        function addImg(data){
            imgsCount++;
            if (imgsCount >= 4) {
                $("#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);
        }

        //日期
        laydate.render({
            elem: '#applianceBuyTime'
            ,trigger: 'click'
        });
        //预约时间
        laydate.render({
            elem: '#promiseTime'
            ,trigger: 'click'
        });
        laydate.render({
            elem: '#repairTime'
            ,value: '${data}'
            ,type: 'datetime'
            ,trigger: 'click'
        });
        form.render(null, 'component-form-element');
        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,recevierMobile : [ /^((0\d{2,3}-\d{7,8})|([1][3,4,5,7,8,8,9][0-9]{9}))$/
                , '请输入正确格式的联系电话！'
            ]
            ,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);

        });
        form.on('select(serviceType)',function(data){
            var serviceType=$(data.elem).find("option:selected").val();
            if(serviceType =='安装'){
                $("#hideCapacity").removeClass("layui-hide");
                $("#changeDescribe").html("现场描述：");
                $("#changeImgName").html("附图：");
                $("#warrantyType").val("1").attr("disabled",true);
            }else{
                $("#hideCapacity").addClass("layui-hide");
                $("#changeDescribe").html("故障描述：");
                $("#changeImgName").html("故障图片：");
                $("#warrantyType").val("").removeAttr("disabled");
                form.render('select');
            }
            if(serviceType =='咨询'){
                $(".directSealin").removeClass("hide");
                $(".assign").addClass("hide");
            }else{
                $(".directSealin").addClass("hide");
                $(".assign").removeClass("hide");
            }

            serviceTypeOrder(serviceType);
        })

        $("#sureSubmit").click(function () {
            var siteId=$("#siteId").val();
          if(isBlank(siteId)){
              layer.msg("请选择服务商！");
              return ;
          }
            $('.saveOrder').trigger('click');
        })


        $("#directSealingSubmit").on('click',function(data) {
            var consultOrder = $("#consultOrderRem").val();
           $("#consultOrder").val(consultOrder);
            if(isBlank(consultOrder)){
                layer.msg("请输入封单备注！");
                return ;
            }
            $("#siteId").val('');
            $('.saveOrder').trigger('click');
        })


        function serviceTypeOrder(serviceType){
            $("#serviceMeasures").empty();
            if(isBlank(serviceType)){
                $("#serviceMeasures").append("<option value=''>请选择</option>");
                  return;
            }
           $.ajax({
               type:"POST",
               url:"${ctx}/main/redirect/getServiceMeasures",
               data:{
                   serviceType:serviceType
               },
               success:function(result){
                       var html =" <option value=''>请选择</option>";

                   for(var i=0;i<result.length;i++){
                       var serviceMeasures = result[i];
                       html =html+ '<option value="'+serviceMeasures.columns.service_measures+'" >'+serviceMeasures.columns.service_measures+'</option>';
                   }
                   $("#serviceMeasures").append(html);
                   form.render('select');
               }
           })
        }
        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');
                }
            });

        }

        function CategoryOrder(brand,cateName){
            $("#applianceCategory").empty();
            $("#applianceModel").empty();
            if(isBlank(brand)){
                $("#applianceCategory").append("<option value=''>请选择</option>");
                return "";
            }
            $.ajax({
                type:"POST",
                url:"${ctx}/order/getCategoryByBrandname",
                data:{
                    brand:brand
                },
                success:function(result){
                    if(result =="205"){
                        layer.msg("暂无数据!");
                        return
                    }
                    var html ="<option value=''>请选择</option>";
                    for(var i=0;i<result.length;i++){
                        var cate = result[i];
                        html =html+ '<option value="'+cate.columns.category+'" title="'+cate.columns.model+'">'+cate.columns.category+'</option>';
                    }
                    $("#applianceCategory").append(html);
                    $("#applianceCategory").val(cateName)
                    form.render('select');
                }
            });

        }
        function orderModel(model){
            if(isBlank(model)){
                return
            }
            var mode = model.split(",");
            var html ="<option value=''>请选择</option>";
            for(var i=0;i<mode.length;i++){
                var mod = $.trim(mode[i]);
                html =html+ '<option value="'+mod+'" >'+mod+'</option>';
            }
            $("#applianceModel").append(html);
            form.render('select');

        }

        // 重置
     /*   $(".reset").click(function(){
            $("#orderForm")[0].reset();
            layui.form.render();
        })*/
     // 直接派单
        var falg = false;
     $(".assign").click(function(){
         if (falg) {
             return;
         }
         var orderType=$("#orderType").val();  //信息来源
         var serviceType=$("#serviceType").val(); //服务类型
         var applianceCapacity=$("#applianceCapacity").val();  //容量
         if(isBlank(orderType)){
             layer.msg("请输入信息来源!",{icon:2});
             return false;
         }
         if(isBlank(serviceType)){
             layer.msg("请输入服务类型!",{icon:2});
             return false;
         }
         if(serviceType =='安装'){
             if(isBlank(applianceCapacity)){
                 layer.msg("请输入容量!", {icon: 2});
                 return false;
             }else  if (!reg.test(applianceCapacity)) {
                 layer.msg("容量格式不正确!", {icon: 2});
                 return false;
             }
         }
         var customerName = $("input[name=customerName]").val();//用户姓名
         var customerMobile = $("input[name=customerMobile]").val();//联系方式1
         var province = $("#province").find("option:selected").val();//省
         var city = $("#city").find("option:selected").val();//市
         var area = $("#area").find("option:selected").val();//区
         var customerAddress = $("input[name=customerAddress]").val();//用户地址
         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
         };
         if(isBlank(province)){
             layer.msg("请输入省",{icon:2});
             return
         }
         if(isBlank(city)){
             layer.msg("请输入市",{icon:2});
             return
         }
         if(isBlank(area)){
             layer.msg("请输入区",{icon:2});
             return
         }
         if (isBlank(customerAddress)) {
             layer.msg("请输入详细地址",{icon:2});
             return
         }
         var  repairTime=$("#repairTime").val(); //报单时间
         var remarks = $("textarea[name=remarks]").val();//故障描述
         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;
          }*/
         falg=true;
         var adress=province+city+area+customerAddress;
         $.ajax({
             type:"POST",
             url:"${ctx}/order/getSiteByAdress",
             data:{
                 customerAdress:adress,
                 province:province,
                 city:city
             },
             success:function(result){
                 falg = false;
                 var html="";
                 for(var i=0;i<result.length;i++){
                    var siteItem=result[i].columns;
                     html+='<tr>';
                    html+='<td>'+siteItem.name+'</td>';
                     html+=' <td>'+siteItem.distance_formatted+'</td>';
                     html+=' <td> <div class="layui-input-block"><input type="radio" name="site" value=\"'+ siteItem.id +'\" lay-verify="filter"></div></td>';
                     html+='</tr> ';
                 }
                 $("#zhijiepaidan").html(html);
                 form.render('radio');
                 action();
                 $("#type-content").removeClass("layui-hide")
                 layer.open({
                     content: $("#type-content")
                     ,type: 1
                     ,area:["800px","480px"]
                     ,title:"直接派单"
                     ,btn: ['确认指派']
                     ,yes: function(){
                         $('#sureSubmit').click();
                     }
                     ,cancel: function(){
                         $("#type-content").addClass("layui-hide")
                         $("#siteId").val("");
                     }
                 });
             }
         })
     })

        $(".chamobi").on('click',function(){
            var filterName = $("#filterName").val();
            console.log(filterName)
            if(isBlank(filterName)){
                layer.msg("请输入服务商名称");
            }else if(filterName.length >4){
                //查询服务商
                var province = $("#province").find("option:selected").val();//省
                var city = $("#city").find("option:selected").val();//市
                var area = $("#area").find("option:selected").val();//区
                var customerAddress = $("input[name=customerAddress]").val();//用户地址
                var adress=province+city+area+customerAddress;
                $.ajax({
                    type:"POST",
                    url:"${ctx}/order/getSiteByAdress",
                    data:{
                        customerAdress:adress,
                        province:province,
                        city:city,
                        siteName:filterName.trim()
                    },
                    success:function(result){
                        falg = false;
                        var html="";
                        for(var i=0;i<result.length;i++){
                            var siteItem=result[i].columns;
                            html+='<tr>';
                            html+='<td>'+siteItem.name+'</td>';
                            html+=' <td>'+siteItem.distance_formatted+'</td>';
                            html+=' <td> <div class="layui-input-block"><input type="radio" name="site" value=\"'+ siteItem.id +'\" lay-verify="filter"></div></td>';
                            html+='</tr> ';
                        }
                        $("#zhijiepaidan").html(html);
                        form.render('radio');
                        action();

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

        })

        $(".directSealin").click(function(){

            $(".layuiDirectSealing").removeClass("layui-hide")
            layer.open({
                content: $(".layuiDirectSealing")
                ,type: 1
                ,area:["800px","480px"]
                ,title:"直接封单"
                ,cancel: function(){
                    $(".layuiDirectSealing").addClass("layui-hide")
                }
            });
        })

        $(".copyOrder").click(function(){
            //获取选择行的数据
            var orrId = $('input[name="historyOrderId"]:checked').val();
           //
            $.ajax({
                type:"POST",
                url:"${ctx}/main/redirect/getOrderDetail",
                data:{
                    orderId:orrId
                },
                success:function(data){
                    console.log(data)
                    if(data.code=='200'){
                        var or = data.data.order;
                        $("#serviceType").val(or.serviceType);
                        if(or.serviceType =='安装'){
                            $("#hideCapacity").removeClass("layui-hide");
                            $("#changeDescribe").html("现场描述：");
                            $("#changeImgName").html("附图：");
                            $("#warrantyType").val("1").attr("disabled",true);
                        }else{
                            $("#hideCapacity").addClass("layui-hide");
                            $("#changeDescribe").html("故障描述：");
                            $("#changeImgName").html("故障图片：");
                            $("#warrantyType").val("").removeAttr("disabled");
                          //  form.render('select');
                        }
                        if(or.serviceType =='咨询'){
                            $(".directSealin").removeClass("hide");
                            $(".assign").addClass("hide");
                        }else{
                            $(".directSealin").addClass("hide");
                            $(".assign").removeClass("hide");
                        }

                        serviceTypeOrder(or.serviceType);
                        $("#province").val(or.province);
                        CitysByProName(or.province,or.city);
                        $("#city").val(or.city);
                        AreaByCityName(or.city,or.area);
                        $("#area").val(or.area);
                        $("input[name=customerAddress]").val(or.customerAddress);
                        $("#powerStationName").val(or.powerStationName);
                        $("#remarks").val(or.remarks);
                        $("#customerName").val(or.customerName);
                        $("input[name=customerMobile]").val(or.customerMobile);
                        $("#customerTelephone").val(or.customerTelephone);
                        form.render('select');
                        layer.closeAll();
                    }else{
                        layer.mag("复制失败",{icon:2})
                    }
                }
            })

        })

        function CitysByProName(province,cityn){
            $("#city").empty();
            $("#area").empty();
            if(isBlank(province)){
                $("#city").append("<option value=''>请选择</option>");
                return "";
            }
            $.ajax({
                type:"POST",
                url:"${ctx}/main/redirect/getCitysByProName",
                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);
                    $("#city").val(cityn)
                    form.render('select');
                }
            });

        }

        function AreaByCityName(city,arean){
            $("#area").empty()
            if(isBlank(city)){
                $("#area").append("<option value=''>请选择</option>");
                return "";
            }
            $.ajax({
                type:"POST",
                url:"${ctx}/main/redirect/getAreaByCityName",
                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');
                }
            });

        }

     /*   $('#filterName').keyup(function(){
            $('#zhijiepaidan tr').hide()
                .filter(":contains('" +($(this).val()) + "')").show();
            if(isBlank($(this).val())){
                $('#zhijiepaidan tr').show();
            }
        }).keyup();//DOM加载完时，绑定事件完成之后立即触发*/


        $("#customerMobile").blur(function(){
            var _this = $(this);
            var mobile = _this.val();
            if (isBlank(mobile)) {

                return
            } else if (!isPhoneNo($.trim(mobile))) {
                layer.msg("手机号码格式不正确",{icon:2});
                return
            }else{
                $.ajax({
                    type:"POST",
                    url:"${ctx}/order/getOrderCountByMobile",
                    data:{
                        mobile:mobile.trim()
                    },
                    success:function(data){
                        if(data>0){
                            $(".wordtext").html("有"+data+"条历史工单");
                            $(".topshow").removeClass("layui-hide");
                          //  layer.msg("历史工单数量："+data,{icon :1})

                        }else{
                            $(".topshow").addClass("layui-hide");
                        }
                    }
                })
            }
        })

        $(".orderOnclick").click(function(){
            var mobile = $("#customerMobile").val();
            if(isBlank(mobile)){
                return
            }
            $.ajax({
                type:"POST",
                url:"${ctx}/order/getOrderByMobile",
                data:{
                    mobile:mobile.trim()
                },
                success:function(result){
                    if(result == null){
                        return
                    }
                    var html="";
                    for(var i=0;i<result.length;i++){
                        var item=result[i].columns;
                        html+='<tr>';
                        html+=' <td><input type="radio" name="historyOrderId" value=\"'+ item.id +'\" ></td>';
                        html+='<td>'+item.number+'</td>';
                        if(item.status=='1'){
                            html+='<td>待派工</td>';
                        }else if(item.status=='2'){
                            html+='<td>服务中</td>';
                        }else if(item.status=='3'){
                            html+='<td>待回访</td>';
                        }else if(item.status=='4'){
                            html+='<td>待结算</td>';
                        }else if(item.status=='5'){
                            html+='<td>已完成</td>';
                        }else if(item.status=='6'){
                            html+='<td>无效工单</td>';
                        }else{
                            html+='<td>取消</td>';
                        }

                        html+='<td>'+item.customer_name+'</td>';
                        html+='<td>'+item.province+item.city+item.area+item.customer_address+'</td>';
                        html+='<td>'+item.service_type+'</td>';
                        html+='<td>'+item.power_station_name+'</td>';
                        html+=' <td>'+item.repairTime+'</td>';
                        html+='<td>'+item.remarks+'</td>';
                        html+='</tr> ';
                    }
                    $("#orderHis").html(html);
                    form.render('radio');
                    $("#HistoryOrder").removeClass("layui-hide")
                    layer.open({
                        content: $("#HistoryOrder")
                        ,type: 1
                        ,area:["1000px","500px"]
                        ,title:"历史工单"
                        ,cancel: function(){
                            $("#HistoryOrder").addClass("layui-hide")
                        }
                    });
                }
            })

        })

     function action(){
         $("#zhijiepaidan td").on("click",function(){
             $("#zhijiepaidan").find("input").prop('checked',false);
             $(this).parent("tr").find("input").prop('checked','checked');
            var siteId= $(this).parent("tr").find("input").val();
            $("#siteId").val(siteId);
             form.render('radio');
             $("#paigongzhi").html("指派至："+$(this).parent("tr").find("td").eq(0).html());
         })
     }
        //保存
        var saveFlag=false;
        $(".saveOrder").click(function(){
            if(saveFlag){
                return;
            }
            //验证不必填项的值格式
            var shuzi = /[0-9]*[1-9][0-9]*$/;
            var orderType=$("#orderType").val();  //信息来源
            var serviceType=$("#serviceType").val(); //服务类型
            var serviceMeasures=$("#serviceMeasures").val(); //服务措施
            var applianceCapacity=$("#applianceCapacity").val();  //容量
            if(isBlank(orderType)){
                layer.msg("请输入信息来源!",{icon:2});
                return false;
            }
            if(isBlank(serviceType)){
                layer.msg("请输入服务类型!",{icon:2});
                return false;
            }
            if (serviceType == '安装' ) {
                if(isBlank(applianceCapacity)){
                    layer.msg("请输入容量!", {icon: 2});
                    return false;
                }else  if (!reg.test(applianceCapacity)) {
                    layer.msg("容量格式不正确!", {icon: 2});
                    return false;
                }

            }
            var customerName = $("input[name=customerName]").val();//用户姓名
            var customerMobile = $("input[name=customerMobile]").val();//联系方式1
            var customerTelephone = $("input[name=customerTelephone]").val();//联系方式2
            var province = $("#province").find("option:selected").val();//省
            var city = $("#city").find("option:selected").val();//市
            var area = $("#area").find("option:selected").val();//区
            var customerAddress = $("input[name=customerAddress]").val();//用户地址
            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
            } ;
            if(isBlank(province)){
                layer.msg("请输入省",{icon:2});
                return
            }
            if(isBlank(city)){
                layer.msg("请输入市",{icon:2});
                return
            }
            if(isBlank(area)){
                layer.msg("请输入区",{icon:2});
                return
            }
            if (isBlank(customerAddress)) {
                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();//故障描述
            var consultOrder=$("#consultOrder").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 siteId=$("#siteId").val();
          var order={
              siteId:siteId,
              orderType:orderType,
              serviceType:serviceType,
              serviceMeasures:serviceMeasures,
              applianceCapacity:applianceCapacity,
              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,
              memoNote:consultOrder
          };
            saveFlag=true;
            $.ajax({
                url:"${ctx}/order/saveOrder",
                type:"POST",
                contentType : "application/json;charsetset=UTF-8",
                data:JSON.stringify(order)
                ,success:function (result) {
                   // console.log(JSON.stringify(order));
                    if(result.code=="202"){
                        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'){
                        var index = parent.layer.getFrameIndex(window.name);
                        layer.msg("保存成功",{icon:1,time:1000},function(){
                            parent.layer.close(index);
                            parent.location.reload(); //刷新父页面
                        })
                    }else{
                        layer.msg("保存失败",{icon:2});
                    }
                    saveFlag=false;

                },error:function () {
                    layer.msg("保存失败",{icon:2});
                    saveFlag=false;
                }
            })
        })

        //取消
        $(".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  //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                ,title: "指派"
                /!*  ,btn:['确认指派']*!/
                ,area:["600px","370px"],
                end:function(){
                    //刷新表格
                    searchOrder(orderId)
                }
            });
        })*/

        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 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").show();
        }
        $(that).parent().remove();
    }
</script>
</body>
</html>
