<%@ 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">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.css" media="all">
    <style>
        html {
            background-color: #fff;
            padding-bottom: 50px;
        }

        td, th {
            text-align: center !important;
        }
        .load-icon{background: url('${ctxPlugin}/static/img/shili_img.png') center center no-repeat; width: 12px; height: 12px; display: inline-block; border-radius: 50%;
            vertical-align: text-bottom;transform: translate(0px, -1px);margin-right: 2px;}
    </style>
</head>

<body>
<div class="layui-form">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">表单信息</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-card">
                    <div class="layui-elem-quote" style="display: flex;justify-content: space-between;">
                        <p>订单信息</p>
                        <p>退货时间：<fmt:formatDate value="${order.columns.create_time}" pattern="yyyy-MM-dd HH:mm"/></p>
                    </div>
                    <div class="layui-tab-content">
                        <div class="layui-row">
                            <div class="layui-col-xs4">
                                <label class="layui-form-label ">退货单号：</label>
                                <div class="layui-input-block ">
                                    <input type="text" readonly class="layui-input layui-bg-gray"
                                           value="${order.columns.number}">
                                    <input class="hide" id="id" value="${order.columns.id}">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label ">退货状态：</label>
                                <div class="layui-input-block ">
                                    <input type="text" readonly class="layui-input layui-bg-gray"
                                    <c:choose>
                                           <c:when test="${order.columns.status eq '1'}">value="待发货单位入库"</c:when>
                                           <c:when test="${order.columns.pattern eq '2'}">value="入库驳回"</c:when>
                                    </c:choose>
                                    >
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label ">退货方式：</label>
                                <div class="layui-input-block ">
                                    <input type="text" readonly class="layui-input layui-bg-gray"
                                           value="${order.columns.return_method_name}">
                                </div>
                            </div>
                        </div>
                        <div class="layui-row" <c:if test="${order.columns.return_method_name ne '快递物流'}">style="display: none;"</c:if> >
                            <div class="layui-inline layui-col-xs4" >
                                <label class="layui-form-label"><i class="red">*</i>物流单号：</label>
                                <div class="layui-input-block">
                                    <input type="text" value="${order.columns.express_no}" class="layui-input layui-bg-gray">
                                </div>
                            </div>
                        </div>
                        <div class="layui-row" <c:if test="${order.columns.return_method_name eq '快递物流'}">style="display: none;"</c:if> >
                            <div class="layui-col-xs4">
                                <label class="layui-form-label ">司机：</label>
                                <div class="layui-input-block ">
                                    <input type="text" readonly
                                           class="layui-input layui-bg-gray" value="${order.columns.return_driver}">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label ">联系方式：</label>
                                <div class="layui-input-block ">
                                    <input type="text" readonly
                                           class="layui-input layui-bg-gray" value="${order.columns.return_mobile}">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label ">车牌号：</label>
                                <div class="layui-input-block ">
                                    <input type="text" readonly class="layui-input layui-bg-gray"
                                           value="${order.columns.return_car_num}">
                                </div>
                            </div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-col-xs12">
                                <label class="layui-form-label">退货备注：</label>
                                <div class="layui-input-block ">
                                    <textarea readonly
                                              class="layui-textarea layui-bg-gray">${order.columns.return_remark}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-elem-quote" style="display: flex;justify-content: space-between;">
                        <p>物料清单</p>
                    </div>
                    <div class="layui-tab-content">
                        <div class="layui-row">
                            <table class="layui-table">
                                <thead>
                                <th>序号</th>
                                <th>物料代码</th>
                                <th>物料名称</th>
                                <th>物料类型</th>
                                <th>物料品牌</th>
                                <th>物料规格</th>
                                <%--<th>订单数量</th>--%>
                                <th>发货数量</th>
                                <th>退货数量</th>
                                </thead>
                                <tbody id="materialTbody">
                                <c:forEach items="${details}" var="detail" varStatus="vs">
                                    <tr data-id="${detail.columns.id}">
                                        <td>${vs.count}</td>
                                        <td>${detail.columns.material_code}</td>
                                        <td>${detail.columns.material_name}</td>
                                        <td>${detail.columns.material_type}</td>
                                        <td>${detail.columns.material_brand}</td>
                                        <td>${detail.columns.material_spec}</td>
                                        <%--<td>${detail.columns.order_num}</td>--%>
                                        <td>${detail.columns.deliver_num}</td>
                                        <td>${detail.columns.return_num}</td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="layui-tab-content <c:if test="${source eq '2'}">hide</c:if>" >
                        <div class="layui-row">
                            <div class="layui-col-xs12">
                                <label class="layui-form-label w-120"><i class="red">*</i>上传签收凭证：
                                    <%--<br/><a href="${commonStaticImgPath}/prohibit_delete/示例图/货物签收单示例.png" style="font-size: 12px;color: red;margin-right: 5px;"><i class="load-icon"></i>下载示例图</a>--%>
                                </label>
                                <div class="layui-input-block">
                                    <div id="imgsDiv">

                                    </div>
                                    <div class="upload-container" id="uploader">
                                        <img src="" alt="img placeholder" id="imgsAdd">
                                    </div>
                                    上限5张
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="operate-footer">
        <button type="button" class="layui-btn" onclick="save();">确认收货</button>
        <button type="button" class="layui-btn layui-btn-primary " onclick="closeDiv();">取消</button>
    </div>
</div>
<div class="hide layui-tab-content" id="auditDiv">
    <label class="layui-form-label"><span class="red">*</span>驳回原因：</label>
    <div class="layui-input-block ">
        <textarea id="reason" class="layui-textarea"></textarea>
    </div>
</div>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
    //初始数据
    var $;
    var imgsCount;
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['form', 'layedit', 'laydate', 'jquery', 'layer', 'element', 'upload'], function () {
        $ = layui.jquery;
        var upload = layui.upload;
        imgsCount = '${imgsCount}';


        //执行实例
        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 >= 5) {
            $("#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 < 5) {
            $("#uploader").show();
        }
        $(that).parent().remove();
    }

    function closeDiv() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index);
    }

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

    var saveFlag = true;
    function save() {
        if (!saveFlag) {
            return;
        }
        var id = '${order.columns.id}';
        var imgs = "";
        $(".imgPicker").each(function(){
            if(isBlank(imgs)){
                imgs = $(this).val();
            }else{
                imgs =imgs +","+ $(this).val();
            }
        });
        if (isBlank(imgs) && '${source}' == '1') {
            layer.msg("请上传签收凭证");
            return;
        }
        console.log(imgs);
        saveFlag = false;
        $.ajax({
            url: '${ctx}/material/return/confirmReturnOrder',
            method: 'post',
            data: {id:id,voucherImgs:imgs},
            dataType: 'JSON',
            success: function (res) {
                if (res.code == "200") {
                    parent.layer.msg("操作成功", {time: 1000});
                    closeDiv();
                    parent.searchOrder();
                } else {
                    layer.msg(res.errMsg, {time: 1500}, function () {
                        saveFlag = true;
                    });
                }
            },
            complete: function () {

            }
        });
    }
</script>
</body>
</html>
