<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>添加备件申请</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="decorator" content="base" />
    <link rel="stylesheet" type="text/css" href="${ctxPlugin}/static/css/reset.css" />
</head>
<body>
<div class="layui-fluid pd-0">
    <div class="layui-card pl-30 pr-30 pt-10">
        <div class="layui-card-body">
            <div class="layui-form delivery" lay-filter="component-form-element">
                <div class="layui-row layui-col-space12 layadmin-form-right mb-10">
                    <div class="layui-col-xs4 layui-form-item">
                        <label class="layui-form-label"><i class="mark hide">*</i>家电品牌：</label>
                        <div class="layui-input-block">
                            <input type="text" name="applianceBrand" class="layui-input layui-bg-gray" value="${order.applianceBrand}" disabled>
                        </div>
                    </div>
                    <div class="layui-col-xs4 layui-form-item">
                        <label class="layui-form-label"><i class="mark hide">*</i>家电品类：</label>
                        <div class="layui-input-block">
                            <input type="text" name="applianceCategory" class="layui-input layui-bg-gray" value="${order.applianceCategory}" disabled>
                        </div>
                    </div>
                    <div class="layui-col-xs4 layui-form-item">
                        <label class="layui-form-label"><i class="mark hide">*</i>家电型号：</label>
                        <div class="layui-input-block">
                            <input type="text" name="applianceModel" class="layui-input layui-bg-gray" value="${order.applianceModel}" disabled/>
                        </div>
                    </div>
                </div>
                <div class="layui-row bj-msg layui-col-space12">
                    <div class="layui-col-xs4 layui-form-item">
                        <label class="layui-form-label"><i class="mark">*</i>备件名称：</label>
                        <div class="layui-input-block">
                            <input type="text" name="fittingName" id="fittingName" lay-verify="required" class="layui-input" value="">
                        </div>
                    </div>
                    <div class="layui-col-xs4 layui-form-item">
                        <label class="layui-form-label">备件条码：</label>
                        <div class="layui-input-block">
                            <input type="text" name="fittingCode" id="fittingCode" class="layui-input" value="">
                        </div>
                    </div>
                    <div class="layui-col-xs4 layui-form-item">
                        <label class="layui-form-label"><i class="mark">*</i>备件数量：</label>
                        <div class="layui-input-block">
                            <input type="text" lay-verify="required|ling" name="fittingNum" id="fittingNum" class="layui-input" value="" maxFractionDigits="2"/>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-form-item">
                        <label class="layui-form-label"><i class="mark">*</i>备件描述：</label>
                        <div class="layui-input-block">
                            <input type="text" name="apply_marks" lay-verify="required" id="applyMarks" class="layui-input" value="">
                        </div>
                    </div>

                    <div class="layui-col-xs12 layui-form-item">
                        <label class="layui-form-label"><i class="mark">*</i>备件图片：</label>
                        <div class="layui-input-block">
                            <div id="imgsDiv">

                            </div>
                            <div class="upload-container" id="uploader">
                                <img src="" alt="img placeholder" id="imgsAdd">
                            </div>
                        </div>

                    </div>
                    <div class="layui-col-xs12 layui-form-item">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block" style="color: #cc2a2c">
                            提示：请上传机身条码与配件正面的图片
                        </div>
                    </div>
                  <div class="layui-col-xs12 layui-form-item">
                        <label class="layui-form-label"></label>
                             <div class="layui-input-block">
                                 <c:choose>
                                     <c:when test="${selectAddress=='1'}">
                                         <input type="radio" name="address" value="1" title="自定义地址" lay-filter="dress" checked>
                                         <input type="radio" name="address" value="2" title="用户地址" lay-filter="dress">
                                         <input type="radio" name="address" value="3" title="网点地址" lay-filter="dress">
                                     </c:when>
                                     <c:when test="${selectAddress=='2'}">
                                         <input type="radio" name="address" value="1" title="自定义地址" lay-filter="dress">
                                         <input type="radio" name="address" value="2" title="用户地址" lay-filter="dress" checked>
                                         <input type="radio" name="address" value="3" title="网点地址" lay-filter="dress">
                                     </c:when>
                                     <c:otherwise>
                                         <input type="radio" name="address" value="1" title="自定义地址" lay-filter="dress">
                                         <input type="radio" name="address" value="2" title="用户地址" lay-filter="dress">
                                         <input type="radio" name="address" value="3" title="网点地址" lay-filter="dress" checked>
                                     </c:otherwise>
                                 </c:choose>
                              </div>
                    </div>
                    <div class="layui-col-xs4 layui-form-item">
                        <label class="layui-form-label"><i class="mark">*</i>收货人：</label>
                        <div class="layui-input-block">
                            <div class="layui-col-xs10 deliveryNamese" <c:if test="${selectAddress ne'3'}">layui-hide </c:if>>
                                <select class="deliveryName"  name="deliveryName" lay-filter="receiver">
                                    <option value="">请选择</option>
                                    <c:forEach items="${sitelist}" var="pro">
                                        <option value="${pro.columns.siteAddress}" title="${pro.columns.mobile}" <c:if test="${pro.columns.receiver eq contactsInfos }"> selected</c:if> >${pro.columns.receiver}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <c:choose>
                                <c:when test="${selectAddress=='1'}">
                                    <input type="text" name="deliveryName" id="deliveryName" class="layui-input " lay-verify="required" value="${contactsInfo}">
                                </c:when>
                                <c:when test="${selectAddress eq '2'}">
                                    <input type="text" name="deliveryName" id="deliveryName" class="layui-input layui-bg-gray" lay-verify="required" disabled="disabled"  value="${contactsInfo}">
                                </c:when>
                                <c:otherwise>
                                    <input type="text" id="deliveryName" name="deliveryName" class="layui-input layui-bg-gray layui-hide"  disabled="disabled" value="${contactsInfo}">
                                </c:otherwise>
                            </c:choose>
                        </div>
                    </div>
                    <div class="layui-col-xs4 layui-form-item">
                        <label class="layui-form-label"><i class="mark">*</i>联系方式：</label>
                        <div class="layui-input-block">
                            <c:choose>
                                <c:when test="${selectAddress=='1'}">
                                    <input type="text" name="deliveryMobile"  id="deliveryMobile" lay-verify="required"  class="layui-input" value="${mobileInfos}" />
                                </c:when>

                                <c:otherwise>
                                    <input type="text" name="deliveryMobile"  id="deliveryMobile" lay-verify="required"  class="layui-input layui-bg-gray" disabled="disabled" value="${mobileInfos}" />
                                </c:otherwise>
                            </c:choose>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-form-item">
                        <label class="layui-form-label"><i class="mark">*</i>收货地址：</label>
                        <div class="layui-input-block">
                            <c:choose>
                                <c:when test="${selectAddress=='1'}">
                                    <input type="text" name="deliveryAddress" id="deliveryAddress" class="layui-input" lay-verify="required" value="${addressInfos}">
                                </c:when>
                                <c:otherwise>
                                    <input type="text" name="deliveryAddress" id="deliveryAddress" class="layui-input layui-bg-gray" lay-verify="required" disabled="disabled" value="${addressInfos}">
                                </c:otherwise>
                            </c:choose>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item mt-20">
                    <div class="layui-input-block text-c">
                        <button class="layui-btn" lay-submit="" lay-filter="submitBtn">保存并继续添加</button>
                        <button class="layui-btn" lay-submit="" lay-filter="submitBtn2">保存</button>
                        <button type="button" class="layui-btn" onclick="cancel()">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script>
    var imgsCount;
    layui.use(['form', 'jquery','laydate','upload','layer'], function () {
        $ = layui.$
            , element = layui.element
            , form = layui.form
            , layer = layui.layer
            , laydate = layui.laydate;
        var upload = layui.upload;
        imgsCount = '${imgsCount}';


        form.verify({
            ling: [
                /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
                ,'备件数量格式不正确'
            ],
            /*code: [
                /^[a-zA-Z0-9-./]+$/
                , '备件条码必须为字母或数字或字母数字的组合,可包含-和.'
            ]*/
        });

        form.on('radio(dress)', function (data) {
            var index=data.value;
            if(index=='1'){
                $("#deliveryName").val("").attr("disabled",false).removeClass("layui-bg-gray layui-hide");
                $(".deliveryNamese").addClass("layui-hide");
                $("#deliveryMobile").val("").attr("disabled",false).removeClass("layui-bg-gray");
                $("#deliveryAddress").val("").attr("disabled",false).removeClass("layui-bg-gray");
            }
            if(index=='2'){
                $("#deliveryName").val("${order.customerName}").attr("disabled",true).addClass("layui-bg-gray").removeClass("layui-hide");
                $(".deliveryNamese").addClass("layui-hide");
                $("#deliveryMobile").val("${order.customerMobile}").attr("disabled",true).addClass("layui-bg-gray");
                $("#deliveryAddress").val("${order.province}${order.city}${order.area}${order.customerAddress}").attr("disabled",true).addClass("layui-bg-gray");
            }
            if(index=='3'){
                $(".deliveryName").val('')
                form.render('select')
                $(".deliveryNamese").removeClass("layui-hide");
                $("#deliveryName").val("${siteRecord.columns.contacts}").attr("disabled",true).addClass("layui-bg-gray layui-hide");
                $("#deliveryMobile").val("${siteRecord.columns.mobile}").attr("disabled",true).addClass("layui-bg-gray");
                $("#deliveryAddress").val("${siteRecord.columns.province}${siteRecord.columns.city}${siteRecord.columns.area}${siteRecord.columns.address}").attr("disabled",true).addClass("layui-bg-gray");
            }
        });

        form.on('select(receiver)', function(data){
            var mobile = $(data.elem).find("option:selected").attr("title");
            var address = $(data.elem).find("option:selected").val();
            $("#deliveryMobile").val(mobile);
            $("#deliveryAddress").val(address);
        });

        //保存并继续添加
        form.on('submit(submitBtn)', function(data){
            var field = data.field; //获取提交的字段
            var selectAddress = field.address;
            saveFitting(field, '1',selectAddress);

        });
        //保存
        form.on('submit(submitBtn2)', function(data){
            var field = data.field; //获取提交的字段
            saveFitting(field, '2');

        });

        //执行实例
        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 >= 3) {
            $("#uploader").hide();
        }else{
            $("#uploader").show();
        }
        var html = '<div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImg(this)"></span>';
        html += '<img src="${commonStaticImgPath}'+data+'" height="700" width="1200"/>';
        html += '<input type="hidden" class="imgPicker" value="'+data+'"/> </div>';
        $("#imgsDiv").append(html);
    }

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

    var noRepeatSub = false;
    function saveFitting(data,type,selectAddress) {
        if (noRepeatSub) {
            return;
        }
        var orderId = '${order.id}';
        var imgsAppend = '';

        var imgs = $(".imgPicker");
        if (imgs.length == 0) {
            layer.msg("备件图片不能为空！", {icon: 5, anim: 6});
            return;
        }
        imgs.each(function (index) {
            var img = $(this).val();
            if (!isBlank(img)) {
                imgsAppend += img + ",";
            }
        });

        if (isBlank(imgsAppend)) {
            layer.msg("备件图片不能为空！", {icon: 5, anim: 6});
            return;
        }
        var deliveryName = $("#deliveryName").val();
        if($(".layui-form-radioed").prev('input').val() =='3'){
            deliveryName = $(".deliveryName").find("option:selected").text();
        }
        noRepeatSub = true;
        $.ajax({
            url: '${ctx}/service/order/saveApplyFitting',
            type: 'post',
            data: {
                orderId: orderId,
                siteId:'${order.siteId}',
                fittingName: data.fittingName,
                fittingCode: data.fittingCode,
                fittingNum: data.fittingNum,
                apply_marks: data.apply_marks,
                site_name: '${order.siteName}',
                deliveryName: deliveryName,
                deliveryMobile: data.deliveryMobile,
                deliveryAddress: data.deliveryAddress,
                fitting_img: imgsAppend
            },
            success: function(data) {
                if(data.code=="200"){
                    top.layer.msg("添加成功！",{time:1000});
                    if(type=='1'){
                        parent.reloadApplyFitPage(selectAddress);
                    }else{
                        parent.closeApplyFit();
                    }
                }else if(data.code=="401"){
                    layer.msg("添加失败，请确认必填项是否为空！", {icon: 5, anim: 6});
                }else if(data.code=="501"){
                    layer.msg("该工单状态不可申请备件!", {icon: 5, anim: 6});
                }else{
                    layer.msg("添加失败！");
                }
            },
            complete:function(){
                noRepeatSub = false;
            }
        });
    }

    function cancel(){
        parent.closeApplyFit();
    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }
</script>
</body>
</html>