<%@ 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">
</head>
<body class="">
<div class="layui-fluid ">
    <div class="layui-card pl-30 pr-30 pt-10 over">
        <form class="layui-form" id="orderForm">
            <div class="layui-card-body layui-col-xs11">

                <div class="layui-card">
                    <div class="layui-card-header pt-10">
                        <h1 class="title">工单信息</h1>
                    </div>
                    <input class="layui-input layui-hide" name="siteId" id="siteId">
                    <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" lay-verify="required">
                                        <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="维修">维修</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>
                                        <c:forEach var="measure" items="${serviceMeasures}">
                                            <option value="${measure.columns.service_measures}">${measure.columns.service_measures}</option>
                                        </c:forEach>
                                    </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">
                                    <input type="text" name="applianceCapacity"  id="applianceCapacity" placeholder=""
                                           autocomplete="off" class="layui-input" lay-verify="required">   <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-card-header pt-10">
                        <h1 class="title">用户信息</h1>
                    </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 ">
                                    </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" >
                                    </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="" >
                                    </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 }">${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>
                                                </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>
                                                </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 "  >
                                            </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 >
                            <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">
                                    </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-sm4">
                                    <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" disabled>
                                            <option value="">请选择</option>
                                            <option value="1" selected>保内</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">现场描述：</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">附图：</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>
            <div class="layui-card-body layui-col-xs1 right-btn pr-10">
                <div class="layui-btn-container">
                    <button type="button" class="layui-btn  saveOrder" >保存</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script>
    var imgsCount=0;
    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;

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

                });
            }
            , done: function (res) {
                console.log(res.path);
                //上传完毕回调
                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'
            ,type: 'date'
            ,trigger: 'click'
        });
        //预约时间
        laydate.render({
            elem: '#promiseTime'
            ,min:0
            ,trigger: 'click'
        });
        laydate.render({
            elem: '#repairTime'
            ,value: new Date()
            ,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位，且不能出现空格'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });
        element.render('breadcrumb', 'breadcrumb');

        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);

        });


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

        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 saveFlag=false;
        $(".saveOrder").click(function(){
            if(saveFlag){
                return;
            }
            //验证不必填项的值格式
            var shuzi = /[0-9]*[1-9][0-9]*$/;
            var orderType=$("#orderType").val();  //信息来源
            var serviceMeasures=$("#serviceMeasures").val(); //服务措施
            var applianceCapacity=$("#applianceCapacity").val();  //容量
            if(isBlank(orderType)){
                layer.msg("请输入信息来源!",{icon:2});
                return false;
            }

            if(isBlank(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").text();//省
            var city = $("#city").find("option:selected").text();//市
            var area = $("#area").find("option:selected").text();//区
            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();//故障描述
            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 order={
                orderType:orderType,
                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
            };
            saveFlag=true;
            $.ajax({
                url:"${ctx}/order/platform/saveChannelBusinessOrder",
                type:"POST",
                contentType : "application/json;charsetset=UTF-8",
                data:JSON.stringify(order)
                ,success:function (result) {
                    console.log(result);
                    if(result.code =='202'){
                        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();

        })*/

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

        // 验证手机号
        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>
