<%@ 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">
    <style>
        .layui-form-select dl{
            max-height:200px;
            width: 80%;
        }
        html {
            background-color: #fff;
        }
        .layui-table td, .layui-table th {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="aaa">
    <div class="layui-form">
        <div class="layui-card-body over pt-20 pb-40 h-350" action="" id="detailSet">
            <div class="layui-col-xs12 mb-10 pr-30">
                <div class="layui-inline layui-col-xs4">
                    <label class="layui-form-label w-130"><i class="red">*</i>方案编号：</label>
                    <div class="layui-input-block ">
                        <input type="text" ${empty plan? '':'disabled'}  name="code" lay-verify="required" autocomplete="off" placeholder="请输入方案编号" class="layui-input ${empty plan? '': 'layui-disabled'}" value="${plan.columns.code}">
                    </div>
                </div>
                <div class="layui-inline layui-col-xs4">
                    <label class="layui-form-label w-130"><i class="red">*</i>方案名称：</label>
                    <div class="layui-input-block w-200" >
                        <input type="text" ${empty plan? '':'disabled'} name="name" lay-verify="required" autocomplete="off" placeholder="请输入方案名称" class="layui-input ${empty plan? '': 'layui-disabled'}" value="${plan.columns.name}">
                    </div>
                </div>
                <c:if test="${not empty matchTime}">
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label w-130">匹配时间：</label>
                        <div class="layui-input-block w-200" >
                            <input type="text" readonly autocomplete="off" class="layui-input layui-disabled" value='<fmt:formatDate value="${matchTime}" pattern="yyyy-MM-dd HH:mm:ss"/>' />
                        </div>
                    </div>
                </c:if>
                <c:if test="${mode ne 'view'}">
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label w-130"><i class="red">*</i>上传附件：</label>
                        <div class="layui-input-block w-200">
                            <div style="position: relative;top: 3px; display: inline-block">
                                <button class="layui-btn layui-btn-sm">上传</button>
                                <input type="file" id="uploadFile"
                                       style="position: absolute; z-index: 3; opacity: 0; left: 0; width: 44px;">
                            </div>
                            <span style="position: relative; top: 4px;"
                                  class="uploadFileName ${empty plan.columns.attach? 'layui-hide': ''}">${empty plan.columns.attach? '': plan.columns.attach_name}</span>
                            <input type="hidden" name="attach" lay-verify="attach" value="${plan.columns.attach}"/>
                            <input type="hidden" name="attachName" value="${plan.columns.attach_name}"/>
                        </div>
                    </div>
                </c:if>
            </div>

            <input type="hidden" name="id" id="id" value="${plan.columns.id}">
            <input type="hidden" name="details" lay-verify="details">
            <c:if test="${mode ne 'view'}">
                <div>
                    <input type="button" class="layui-btn layui-btn-sm" id="importPlan" value="批量导入"/>
                </div>
            </c:if>
            <div class="layui-col-xs12 mb-20 pr-30 mt-20">
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>料号</th>
                            <th>名称</th>
                            <th>规格</th>
                            <th>单位</th>
                            <th>数量</th>
                        </tr>
                    </thead>
                    <tbody id="materialTable">
                        <c:forEach items="${materials}" varStatus="vs" var="material">
                            <tr>
                                <td>${vs.count}</td>
                                <td>${material.columns.code}</td>
                                <td>${material.columns.name}</td>
                                <td>${material.columns.spec}</td>
                                <td>${material.columns.unit}</td>
                                <td>${material.columns.amount}</td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
        <c:if test="${readOnly ne '1'}">
            <div class="layui-form-item operate-footer" style="text-align: center;">
                <c:if test="${mode ne 'view'}">
                    <input type="button" lay-submit lay-filter="confirm" id="confirm" class="layui-btn " value="确认">
                </c:if>
                <button type="button" class="layui-btn layui-btn-primary " onclick="closeDiv();">取消</button>
            </div>
        </c:if>
    </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/layui/data.js"></script>--%>
<script type="text/javascript">
    //初始数据
    var $form;
    var form;
    var upload;
    var $;
    var imgs='';
    var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    layui.use(['form', 'table', 'upload', 'jquery'], function () {
        $ = layui.jquery;
        form = layui.form;
        upload = layui.upload;
        $form = $('form');

        form.verify({
            details: function(){
              if($('#materialTable>tr').length === 0){
                  return "请导入物料信息";
              }
            },
            attach: function(value){
                if(isBlank(value)){
                    return "请上传附件";
                }
            }
        });

        if(${mode eq 'view'}){
            $('input').prop('disabled', true);
        }

        $(document).on('mouseenter', '#materialTable td', function(){
            var that = this;
            $(that).attr('title', $(that).text());
        });

        window.importMaterial = function(data){
            var html = "";
            for(var i=0; i<data.length; i++){
                html += "<tr>";
                html += '<td>' + (i+1) + '</td>';
                html += '<td>' + data[i].code + '</td>';
                html += '<td>' + data[i].name + '</td>';
                html += '<td>' + data[i].spec + '</td>';
                html += '<td>' + data[i].unit + '</td>';
                html += '<td>' + data[i].amount + '</td>';
                html += "</tr>";
            }

            $('#materialTable').empty().append(html);
        }

        $('#uploadFile').change(function () {
            var file = $(this)[0].files[0];
            if(isBlank(file)){
                return;
            }
            var formData = new FormData();
            formData.append("file", file);
            $.ajax({
                url: "${ctx}/common/uploadFile",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    $('.uploadFileName').text(file.name).removeClass('layui-hide');
                    <%--$('#logo').attr('src', '${commonStaticImgPath}' + data.path);--%>
                    $('input[name=attach]').val(data.path);
                    $('input[name=attachName]').val(file.name);
                }
            });
        });
        $('#importPlan').click(function(){
            parent.layer.open({
                title: '导入物料',
                type: 2,
                area: ['550px', '300px'],
                content: '${ctx}/contract/toImportMaterial'
            });
        });

        var saveFlag = true;
        form.on('submit(confirm)', function(data){
            if(!saveFlag){
                return;
            }
            var plan = {};
            plan.id = data.field.id;
            plan.code = data.field.code;
            plan.name = data.field.name;
            plan.attach = data.field.attach;
            plan.attachName = data.field.attachName;
            var arr = [];
            $('#materialTable>tr').each(function(){
                var material = {};
                material.code = $(this).find('td').eq(1).text();
                material.name = $(this).find('td').eq(2).text();
                material.spec = $(this).find('td').eq(3).text();
                material.unit = $(this).find('td').eq(4).text();
                material.amount = $(this).find('td').eq(5).text();
                arr.push(material);
            });
            plan.materialList = arr;
            console.log(plan);
            saveFlag = false;
            $.ajax({
                url:'${ctx}/contract/add',
                method:'post',
                contentType: 'application/json',
                data:JSON.stringify(plan),
                dataType:'JSON',
                success:function(res){
                    if(res.code=="200"){
                        parent.layer.msg("保存成功",{time:1000});
                        closeDiv();
                        parent.table.reload('test');
                    } else if(res.code=="501") {
                        layer.msg(res.errMsg,{time:1500});
                    } else if(res.code == '422'){
                        layer.msg(res.msg,{time:1500});
                    } else{
                        layer.msg("保存失败",{time:1000});
                    }
                },
                complete: function(){
                    saveFlag = true;
                }
            }) ;
        });

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

                });
            }
            , done: function (res) {
               /* imgs+=res.path+',';
                $("#imgs").val(imgs);*/
                //上传完毕回调
                addImg(res.path);
            }
            , error: function () {
                //请求异常回调
            }
        });

        $(".imgSpan img").click(function(){
            var img = $(this).attr("data-img");
            console.log(img);
            $("#lookImg img").attr('src',img);
            layer.open({
                type:1,
                title:'查看图片',
                area:['500px','450px'],
                content:$("#lookImg")
            })
        })
    })

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

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