<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <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" 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" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.css" media="all">
    <style>
        html{background-color: #fff;padding-bottom: 50px;}
        .layui-form-select dl{
            max-height:200px;
            width: 80%;
        }
        .layui-text h3 {
            font-size: 14px !important;
        }
        .fontColor1{
            color: #409eff !important;
        }
        tbody tr td{
            text-align: center;
        }
        .layui-table td, .layui-table th{
            text-align: center;
        }
        .download-link {
            display: inline-block;
            padding-top: 5px;
            padding-right: 16px;
            color: #007bff;
            text-decoration: none;
            border-radius: 4px;
        }

        .download-link:hover {
            color: #0056b3;
        }
    </style>
</head>
<body>


<div class="layui-form">
    <div class="layui-card mt-10">
        <c:if test="${order.columns.order_examine_status eq '2' || order.columns.order_examine_status eq '0'}">
            <div class="ideaOpe">
                打回原因：${order.columns.audit_remark}
            </div>
        </c:if>

        <div class="layui-tab-item layui-show">
            <div class="layui-card">
                <blockquote class="layui-elem-quote">订单信息
                <span style="float: right;margin-right: 50px;color: #2890ac;">下单时间:${order.columns.createTime}</span>
                </blockquote>

                <div class="layui-col-xs12 pr-30 mt-10">
                    <div class="layui-col-xs4 pr-30">
                        <label class="layui-form-label w-130">订单编号：</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input layui-bg-gray" value="${order.columns.number}" disabled>
                        </div>
                    </div>

                    <div class="layui-col-xs4 pr-30">
                        <label class="layui-form-label w-130">订单来源：</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input layui-bg-gray"  disabled
                       <c:choose>
                            <c:when test="${order.columns.type eq '5'}">
                                value="材料下单"
                            </c:when>

                            <c:otherwise>
                                   value="材料下单"
                            </c:otherwise>
                        </c:choose>
                            >
                        </div>
                    </div>

                    <div class="layui-col-xs4 pr-30" id="LAY_app">
                        <label class="layui-form-label w-130">授权书：</label>
                        <div class="layui-input-block ">
                            <a class="h-32 lh-32 ml-5 layui-span-unit"  style="color: #2890ac;">查看</a>

                            <c:if test="${not empty order.columns.warehouseImg}">
                                <c:forEach items="${fn:split(order.columns.warehouseImg,',')}" var="img">
                                    <img class="warehouseImg" src="${commonStaticImgPath}${img}"  style="display: none;"/>
                                </c:forEach>
                            </c:if>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs12 pr-30 mt-10">
                    <div class="layui-col-xs4 pr-30">
                        <label class="layui-form-label w-130">入库仓库：</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input layui-bg-gray" value="${order.columns.inWarehouseName}" disabled>
                        </div>
                    </div>
                    <div class="layui-col-xs4  pr-30">
                        <label class="layui-form-label w-130">接货人：</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input layui-bg-gray" value="${order.columns.person_in_charge}" disabled>
                        </div>
                    </div>
                    <div class="layui-col-xs4 pr-30">
                        <label class="layui-form-label w-130">联系电话：</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input layui-bg-gray" value="${order.columns.deliverMobile}"  disabled>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs12 pr-30 mt-10">
                    <div class="layui-col-xs8 pr-30">
                        <label class="layui-form-label w-130">仓库地址：</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input layui-bg-gray" value="${order.columns.warehouseAddress}" disabled>
                        </div>
                    </div>

                    <div class="layui-col-xs4 pr-30">
                        <label class="layui-form-label w-130">代理商名称：</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input layui-bg-gray" value="${order.columns.traderName}"  disabled>

                            <input hidden value="${order.columns.trader_id}" id="traderId">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs12 pr-30 mt-10 mb-10">
                    <div class="layui-col-xs12 pr-30">
                        <label class="layui-form-label w-130">订单备注：</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input layui-bg-gray" value="${order.columns.remarks}"  disabled>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs12 pr-30 mt-10">
                    <div class="layui-col-xs4 pr-30">
                        <label class="layui-form-label w-130">企企项目：</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input layui-bg-gray" value="${order.columns.qqProjectName}"  disabled>

                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-inline layui-col-xs12">
                        <label class="layui-form-label">施工人员保单：</label>
                        <div class="layui-input-block img-box ml-120">
                            <div style="display: flex">
                                <div id="insuranceFilesDiv">
                                    <c:if test="${not empty order.columns.insurance_files}">
                                        <c:forEach items="${order.columns.insurance_files}" var="file" varStatus="vs">
                                            <div style="margin-top: 5px">
                                                <a style="color:#2890ac;" href="${commonStaticImgPath}${file}" download="${file}" class="download-link">${fns:substringAfterLast(file, '/')}</a>
                                                <a style="color:#2890ac;cursor: pointer" target="_blank" onclick="previewUrl('${commonStaticImgPath}${file}')"    class="download-link">查看</a>
                                                <input type="hidden" class="insuranceFiles" value="${file}">
                                            </div>
                                            <c:set var="insuranceFilesCount" value="${vs.count}"/>
                                        </c:forEach>
                                    </c:if>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
<%--                <div class="layui-row">--%>
<%--                    <div class="layui-inline layui-col-xs12">--%>
<%--                        <label class="layui-form-label">安全教育登记表：</label>--%>
<%--                        <div class="layui-input-block img-box ml-120">--%>
<%--                            <div style="display: flex">--%>
<%--                                <div id="safetyFilesDiv">--%>
<%--                                    <c:if test="${not empty order.columns.safety_files}">--%>
<%--                                        <c:forEach items="${order.columns.safety_files}" var="file" varStatus="vs">--%>
<%--                                            <div style="margin-top: 5px">--%>
<%--                                                <a style="color:#2890ac;" href="${commonStaticImgPath}${file}" download="${file}" class="download-link">${fns:substringAfterLast(file, '/')}</a>--%>
<%--                                                <a style="color:#2890ac;cursor: pointer" target="_blank" onclick="previewUrl('${commonStaticImgPath}${file}')"    class="download-link">查看</a>--%>
<%--                                                <input type="hidden" class="safetyFiles" value="${file}">--%>
<%--                                            </div>--%>
<%--                                            <c:set var="safetyFilesCount" value="${vs.count}"/>--%>
<%--                                        </c:forEach>--%>
<%--                                    </c:if>--%>
<%--                                </div>--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </div>--%>

                <blockquote class="layui-elem-quote" style="clear: both;">物料信息</blockquote>

                <div class="layui-col-xs12 mt-10 mb-10 pr-30 pl-30">
                    <table class="layui-table">
                        <thead>
                        <th>序号</th>
                        <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="applyDetail" varStatus="vs">
                            <tr data-id="${applyDetail.columns.id}"
                                data-materialId="${applyDetail.columns.material_id}">
                                <td class="idx">${vs.count}</td>
                                <td class="code">${applyDetail.columns.code}</td>
                                <td class="materialName">${applyDetail.columns.material_name}</td>
                                <td class="materialType">${applyDetail.columns.material_type}</td>
                                <td class="materialBrand">${applyDetail.columns.material_brand}</td>
                                <td class="materialSpec">${applyDetail.columns.material_spec}</td>
                                <td class="applyAmount">${applyDetail.columns.apply_amount}</td>
                                <td class="outAmount">${applyDetail.columns.apply_amount}</td>
                                <td class="salePrice" data-value="${applyDetail.columns.purchase_price}">${applyDetail.columns.sales_price}</td>
                                <td>
                                    &nbsp;&nbsp;&nbsp;&nbsp;<a class="layui-table-opt-link" onclick="deleteMaterial(this)">删除</a>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>


            <div class="layui-col-xs12  pr-30 mt-10">
                <label class="layui-form-label w-130">备注：</label>
                <div class="layui-input-block">
                    <input type="text" name="auditRemarks"   id="auditRemarks" <c:if test="${from eq 'edit'}">readonly</c:if> autocomplete="off" placeholder="" class="layui-input" <c:if test="${from eq 'edit'}"> value="${order.columns.audit_remark}"</c:if>>
                </div>
            </div>
        </div>

        <input type="hidden" name="taskId" id="taskId" value="${order.columns.task_id}">
        <input type="hidden" name="id" id="id" value="${order.columns.id}">

        <input type="hidden" id="processInstanceId" value="${order.columns.process_instance_id}">
        <input type="hidden" id="status" value="${order.columns.order_examine_status}">
        <div class="layui-col-xs12 mb-20 pr-30 mt-20">
        </div>
    </div>
    <div class="operate-footer">
        <c:if test="${from eq 'audit'}">
            <input type="button" class="layui-btn approve" value="同意">
            <input type="button"  id="back" class="layui-btn " value="驳回">
        </c:if>

        <c:if test="${'edit' eq from}">
            <input type="button" class="layui-btn approve" value="确定">
        </c:if>

        <input type="button"   value="取消" class="layui-btn layui-btn-primary " onclick="closeDiv();" >
    </div>
</div>

<div id="lookImg" class="hide pos-r">
    <div style="position:relative;width:90%;height:450px;">
        <div class="w-500 h-450 lookImg">
            <img src="" width="80%" id="image">
        </div>
    </div>
</div>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.js"></script>
<script src="${ctxPlugin}/lib/base64.js"></script>
<script type="text/javascript">
    //初始数据
    var $form;
    var form;
    var upload;
    var $;
    var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;

    //图片查看效果
    var viewer = new Viewer(document.getElementById('LAY_app'));
    layui.use(['form', 'table', 'upload', 'jquery','element'], function () {
        $ = layui.jquery;
        form = layui.form;
        upload = layui.upload;
        $form = $('form');
        var element = layui.element;

        $(".layui-span-unit").click(function (){
            let imgUrl =$(".warehouseImg").eq(0).attr("src");
            if(isBlank(imgUrl)){
                layer.msg("没有授权书!");
                return;
            }
            $(".warehouseImg").eq(0).trigger("click");

        })

        //通过
        $(".approve").click(function (){
            $(this).attr("disabled","true");
            var id=$("#id").val();
            var taskId=$("#taskId").val();
            var content=$("#auditRemarks").val();
            if($("#materialTbody tr").hasClass("hide").length==$("#materialTbody tr").length){
                layer.msg("订单物料不能为空!");
                $(this).removeAttr("disabled");
                return;
            }
            var objArr=[];
            var fg=false;
            var count= $("#materialTbody tr").length;
            if(count==0){
                layer.msg("物料一个不剩，不可审批同意!");
                $(this).removeAttr("disabled");
                return;
            }
            var brand = '';
            $("#materialTbody tr").each(function(index){
                var materialId=$(this).attr("data-materialId");
                var salePrice=$(this).find(".salePrice").text();
                var purchasePrice=$(this).find(".salePrice").attr("data-value");
                var outAmount=$(this).find(".outAmount").text();
                if(${processSort ==2}){
                    if(isBlank(materialId)){
                        layer.msg("第"+(index+1)+"行，物料没匹配!");
                        fg=true;
                        return false;
                    }

                    if(isBlank(salePrice)){
                        layer.msg("第"+(index+1)+"行，物料没有销售单价!");
                        fg=true;
                        return false;
                    }
                    if(isBlank(outAmount)){
                        layer.msg("第"+(index+1)+"行，物料没有发货数量!");
                        fg=true;
                        return false;
                    }
                }

                var materialType=$(this).find(".materialType").text();
                var materialSpec=$(this).find(".materialSpec").text();
                var applyAmount=$(this).find(".applyAmount").text();
                var obj={
                     materialId:materialId
                    , materialType: materialType
                    , materialSpec: materialSpec
                    , salesPrice: salePrice
                    , purchasePrice: purchasePrice
                    , applyAmount: applyAmount
                    , outAmount: outAmount
                }
                objArr.push(obj);
            });

            if (fg) {
                $(this).removeAttr("disabled");
                return;
            }

            var ob = {
                id: id,
                taskId: taskId,
                content: content,
                materials: objArr,
                pageFrom: '${from}',
                sort:${processSort}
            }


            $.ajax({
                type:"POST",
                url:"${ctx}/material/order/supplyOrderApprove",
                method:'post',
                contentType : "application/json;charsetset=UTF-8",
                data:JSON.stringify(ob),
                success:function(res){
                    console.log(res.errMsg+'----');
                    if(res.code=="200"){
                        parent.layer.msg("审核成功",{time:2000});
                        closeDiv();
                        parent.table.reload('test');
                    } else{
                        layer.msg(res.errMsg,{time:2000});
                        $("#approve").removeAttr("disabled");
                    }
                },
                error:function (data) {
                }
            }) ;
        })

        //驳回
        $("#back").click(function (){
            var id=$("#id").val();
            var taskId=$("#taskId").val();
            var content=$("#auditRemarks").val();
            if(isBlank(content)){
                layer.msg("请输入备注！",{icon:"2"});
                return ;
            }
            $("#back").attr("disabled","true");
            $.ajax({
                type:"POST",
                url:"${ctx}/material/order/backSupplyOrder",
                data:{
                    id:id,
                    taskId:taskId,
                    content:content
                },
                success:function(res){
                    if(res.code=="200"){
                        parent.layer.msg("驳回成功",{time:2000});
                        closeDiv();
                        parent.table.reload('test');
                    } else{
                        layer.msg(res.errMsg,{time:2000});
                        $("#back").removeAttr("disabled");
                    }
                },
                error:function (data) {
                }
            }) ;
        })

    })

    //删除
    function deleteMaterial(that){
        $(that).parents("tr").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;
    }

    function getMerchMaterial(obj){
        var deatil ="";
        var applyAmount=$(".choice .applyAmount").text();
        for(var i =0;i<obj.length;i++){
            var materialObj=obj[i];
            deatil += ' <tr data-materialId="'+materialObj.materialId+'" >';
            deatil += '<td class="idx"></td>';
            deatil += '<td class="code">'+materialObj.code+'</td>';
            deatil += '<td class="materialName">'+materialObj.materialName+'</td>';
            deatil += '<td class="materialType">'+materialObj.typeName+'</td>';
            deatil += ' <td class="materialBrand">'+materialObj.materialBrand+'</td>';
            deatil += ' <td class="materialSpec">'+materialObj.materialSpec+'</td>';
            deatil += ' <td class="applyAmount">'+applyAmount+'</td>';
            deatil += '<td class="outAmount">'+materialObj.outAmount+'</td>';
            deatil += ' <td class="salePrice" data-value="'+materialObj.costPrice+'">'+materialObj.salePrice+'</td>';
            deatil += ' <td> ';
            deatil += ' <a class="layui-table-opt-link mateMaterial" >匹配</a> ';
            deatil += ' &nbsp;&nbsp;&nbsp;&nbsp;<a class="layui-table-opt-link" onclick="deleteMaterial(this)">删除</a> ';
            deatil += ' </td> ';
        }
        $(".choice").after(deatil);
        $(".choice").remove();

        getIndex();
    }

    function getIndex(){
        $("#materialTbody tr").each(function(index){
            $(this).find(".idx").text(index+1);
        })
    }

    function previewUrl(_url) {
        if (!checkUrl(_url)) {
            return false;
        }
        var base = new Base64();
        var b64Encoded = base.encode(_url);
        if(_url.endsWith('pdf')){
            window.open('http://47.98.203.224:8012/onlinePreview?url=' + encodeURIComponent(b64Encoded)+'&officePreviewType=pdf');
        }else{
            window.open('http://47.98.203.224:8012/onlinePreview?url=' + encodeURIComponent(b64Encoded));
        }
    }

    function checkUrl(url) {
        //url= 协议://(ftp的登录信息)[IP|域名](:端口号)(/或?请求参数)
        var strRegex = '^((https|http|ftp)://)'//(https或http或ftp)
            + '(([\\w_!~*\'()\\.&=+$%-]+: )?[\\w_!~*\'()\\.&=+$%-]+@)?' //ftp的user@  可有可无
            + '(([0-9]{1,3}\\.){3}[0-9]{1,3}' // IP形式的URL- 3位数字.3位数字.3位数字.3位数字
            + '|' // 允许IP和DOMAIN（域名）
            + '(localhost)|'	//匹配localhost
            + '([\\w_!~*\'()-]+\\.)*' // 域名- 至少一个[英文或数字_!~*\'()-]加上.
            + '\\w+\\.' // 一级域名 -英文或数字  加上.
            + '[a-zA-Z]{1,6})' // 顶级域名- 1-6位英文
            + '(:[0-9]{1,5})?' // 端口- :80 ,1-5位数字
            + '((/?)|' // url无参数结尾 - 斜杆或这没有
            + '(/[\\w_!~*\'()\\.;?:@&=+$,%#-]+)+/?)$';//请求参数结尾- 英文或数字和[]内的各种字符
        var re = new RegExp(strRegex, 'i');//i不区分大小写
        //将url做uri转码后再匹配，解除请求参数中的中文和空字符影响
        if (re.test(encodeURI(url))) {
            return (true);
        } else {
            return (false);
        }
    }

</script>
</body>
</html>


