<%@ 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">
                <input class="layui-hide" value="${refund.id}" id="id">
                <input type="hidden" id="fittingType" value="0" name="fittingType">

                    <div class="layui-row layui-col-space12 pb-35">
                        <h1 class="title layui-col-xs12 mb-20 mt-10">
                            <span>备件信息</span>
                        </h1>
                        <div class="layui-col-xs4 layui-form-item">
                            <label class="layui-form-label"><i class="red">*</i>备件名称：</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input"  name="fitting_name" id="fitting_name" value="${refund.fittingName}" lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-col-xs4 layui-form-item">
                            <label class="layui-form-label"><i class="red">*</i>备件数量：</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input"  name="refund_num" id="refund_num" value="${refund.refundNum}" lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-col-xs4 layui-form-item">
                            <label class="layui-form-label">备件条码：</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="fitting_code" id="fitting_code" value="${refund.fittingCode}" >
                            </div>
                        </div>
                    </div>
                <div class="layui-row layui-col-space12 pb-35">
                    <h1 class="title layui-col-xs12 mb-20 mt-10">
                        <span>物流信息</span>
                    </h1>
                    <div class="layui-col-xs4 layui-form-item">
                        <label class="layui-form-label"><i class="red">*</i>物流名称：</label>
                        <div class="layui-input-block">
                            <select name="logistics_names" id="logistics_names" lay-verify="required"   lay-search>
                                <option value="">请选择</option>
                                <c:forEach var="logis" items="${logistics}">
                                    <option value="${logis}" <c:if test="${refund.logisticsNames == logis}">selected</c:if> >${logis}</option>
                                </c:forEach>
                                <%-- <option value="${refund.logisticsNames}">${refund.logisticsNames}</option>--%>
                             <%--   <option value="中通快递" <c:if test="${refund.logisticsNames == '中通快递'}">selected</c:if>>中通快递</option>
                                <option value="顺丰速运" <c:if test="${refund.logisticsNames == '顺丰速运'}">selected</c:if>>顺丰速运</option>
                                <option value="EMS" <c:if test="${refund.logisticsNames == 'EMS'}">selected</c:if>>EMS</option>
                                <option value="申通快递" <c:if test="${refund.logisticsNames == '申通快递'}">selected</c:if>>申通快递</option>
                                <option value="圆通快递" <c:if test="${refund.logisticsNames == '圆通快递'}">selected</c:if>>圆通快递</option>
                                <option value="韵达快递" <c:if test="${refund.logisticsNames == '韵达快递'}">selected</c:if>>韵达快递</option>
                                <option value="百世汇通快递" <c:if test="${refund.logisticsNames == '百世汇通快递'}">selected</c:if>>百世汇通快递</option>
                                <option value="天天快递" <c:if test="${refund.logisticsNames == '天天快递'}">selected</c:if>>天天快递</option>
                                <option value="德邦物流" <c:if test="${refund.logisticsNames == '德邦物流'}">selected</c:if>>德邦物流</option>
                                <option value="全一快递" <c:if test="${refund.logisticsNames == '全一快递'}">selected</c:if>>全一快递</option>
                                <option value="全峰快递" <c:if test="${refund.logisticsNames == '全峰快递'}">selected</c:if>>全峰快递</option>
                                <option value="盛辉物流" <c:if test="${refund.logisticsNames == '盛辉物流'}">selected</c:if>>盛辉物流</option>
                                <option value="中铁快运" <c:if test="${refund.logisticsNames == '中铁快运'}">selected</c:if>>中铁快运</option>--%>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-xs4 layui-form-item">
                        <label class="layui-form-label"><i class="red">*</i>物流单号：</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="logistics_number" id="logistics_number" value="${refund.logisticsNumber}" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-col-xs4 layui-form-item">
                        <label class="layui-form-label">发货时间：</label>
                        <div class="layui-input-block">
                            <input type="text" id="sendTime" name="sendTime" placeholder=""
                                   autocomplete="off" class="layui-input"
                                   value="${sendTime}">
                        </div>
                    </div>
                    <div class="layui-col-xs12">
                        <label class="layui-form-label">备注：</label>
                        <div class="layui-input-block">
                            <textarea name="marks" id="marks" class="layui-textarea" >${refund.marks}</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">
                                <c:forEach var="img" items="${refund.logisticsImgs}">
                                    <div class="bj-img imgSpan">
                                           <span class="layui-icon-close layui-icon" onclick="delImg(this)"></span>
                                        <img src="${commonStaticImgPath}${img}" height="700" width="1200"/>
                                        <input type="hidden" class="imgPicker" value="${img}"/>
                                    </div>
                                </c:forEach>
                            </div>
                            <div class="upload-container" id="uploader">
                                <img src="" alt="img placeholder" id="imgsAdd">
                            </div>
                        </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="sureSubmit">确定</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'], function () {
        $ = layui.$
            , element = layui.element
            , form = layui.form
            , laydate = layui.laydate;
        var upload = layui.upload;
        imgsCount = '${imgsCount}';

        laydate.render({
            elem: '#sendTime'
            ,trigger: 'click'
        });

        form.verify({
            ling: [
                /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
                ,'备件数量格式不正确'
            ],
            code: [
                /^[a-zA-Z0-9-./]+$/
                , '备件条码必须为字母或数字或字母数字的组合,可包含-和.'
            ]
        });
        //执行实例
        var uploadInst = upload.render({
            elem: '#uploader' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    /* newBase64 = result;*/
                });
            }
            , done: function (res) {
                //上传完毕回调
                addImg(res.path);
            }
            , error: function () {
                //请求异常回调
            }
        });
        //确认
        form.on('submit(sureSubmit)', function(data){
            var field = data.field; //获取提交的字段
            saveOldBack(field);
        });
    });

    var noRepeatSub = false;
    function saveOldBack(data){

        if (noRepeatSub) {
            return;
        }
        var shuzi =/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
           var id=$("#id").val();
        var fitting_name=$("#fitting_name").val();
        var refund_num=$("#refund_num").val();
        var fitting_code=$("#fitting_code").val();
        var logistics_names=$("#logistics_names").val();
        var logistics_number=$("#logistics_number").val();
        var sendTime=$("#sendTime").val();
        var marks=$("#marks").val();

        var imgs = $(".imgPicker");
        var imgsAppend = '';
        imgs.each(function (index) {
            var img = $(this).val();
            if (!isBlank(img)) {
                imgsAppend += img + ",";
            }
        });

        if(isBlank(fitting_name)){
            layer.msg("请输入备件名称!",{icon:2});
            return ;
        }
        if(isBlank(refund_num)){
            layer.msg("请输入备件数量!",{icon:2});
            return  ;
        }else if(!shuzi.test($.trim(refund_num))){
            layer.msg("数量格式不正确",{icon:2});
            return ;
        }if(isBlank(logistics_names)){
            layer.msg("请输入物流名称!",{icon:2});
            return ;
        }if(isBlank(logistics_number)){
            layer.msg("请输入物流单号!",{icon:2});
            return ;
        }
        noRepeatSub = true;
        $.ajax({
            url:'${ctx}/service/fitting/saveUpdateBackRecord',
            type:'post',
            data:{
                id:id,
                fitting_name:fitting_name,
                refund_num:refund_num,
                fitting_code:fitting_code,
                logistics_names:logistics_names,
                logistics_number:logistics_number,
                send_time:sendTime,
                marks:marks,
                logistics_imgs:imgsAppend
            },
            success:function(result){
                if(result.code=='200'){
                    top.layer.msg("编辑成功！",{icon:1,time:1000});
                    var index=parent.layer.getFrameIndex(window.name);//获取当前弹出层的层级
                    window.parent.location.reload();//刷新父页面*!/
                    parent.layer.close(index);//关闭弹出层

                }else{
                    layer.msg("添加失败!", {icon: 5, anim: 6});
                    noRepeatSub = false;
                }
            }
        })

    }
    function cancel(){
        var index=parent.layer.getFrameIndex(window.name);//获取当前弹出层的层级
        parent.layer.close(index);//关闭弹出层
    }

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

