{template 'common/header'}
<style>
    .multi-item{
        float: left;
        margin-right: 60px;
        margin-top: 20px;
        position: relative;
        height: auto;
    }
    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
        -webkit-appearance:textfield;
    }
    input[type="number"]{
        -moz-appearance:textfield;
    }
    .close{
        position: absolute;
        top: 0;
        right: -30px;
    }
</style>
<div class="content">
    <div class="we7-page-title">样本管理</div>
    <ul class="we7-page-tab">
        <li><a href="{php echo $this->createWeburl('yb_manager', array('op' => 'edit'));}">添加样本</a></li>
        <li><a href="{php echo $this->createWeburl('yb_manager');}">样本列表</a></li>
    </ul>
    <form action="" method="post" class="we7-form" role="form" id="form" style="">
        <input type="hidden" name="id" value="{$id}">
        <div class="form-group">
            <label class="col-sm-2 control-label">样本名称</label>
            <div class="form-controls col-sm-8">
                <input type="text" id="title" autocomplete="false" class="form-control" name="yb[title]"
                       value="{$yb['title']}" disabled placeholder="样本名称">
                <div class="help-block">请填写样本名称</div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">样本页批量上传</label>
            <div class="form-controls col-sm-8">
                <div class="input-group">
                    <input type="text" class="form-control" readonly="readonly" value="" placeholder="上传pdf文件" autocomplete="off">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" onclick="uploadPDF(this);">选择PDF</button>
                        <input  id='pdf' type='file' accept="application/pdf" style="visibility: hidden;">
                    </span>
                </div>
            </div>
            <script src="{php echo MODULE_URL}template/pdf/pdf.js"></script>
            <script>
                function uploadPDF(obj) {
                    $("#pdf").click();
                    $("#pdf").on("change", function () {
                        var pdfFileURL = $(this).val();
                        if (pdfFileURL) {
                            //判断是否是pdf
                            var files = $(this).prop('files'); //获取到文件
                            var fileType = files[0].type;
                            if (fileType != 'application/pdf') {
                                util.message('请上传pdf文件.');
                                return;
                            }
                            $(obj).parent().prev().val(pdfFileURL);
                            var reader = new FileReader();
                            reader.readAsArrayBuffer(files[0]);
                            reader.onload = function (e) {
                                var typedarray = new Uint8Array(this.result);
                                PDFJS.workerSrc = "{php echo MODULE_URL}template/pdf/pdf.worker.js";
                                PDFJS.getDocument(typedarray).then(function (pdf) { //PDF转换为canvas
                                    if (pdf) {
                                        var pageNum = pdf.numPages;

                                        for (var i = 1; i <= pageNum; i++) {
                                            var canvas = document.createElement('canvas');
                                            canvas.id = "pageNum" + i;
                                            var context = canvas.getContext('2d');
                                            openPage(pdf, i, context);
                                        }
                                    }
                                });
                            };
                        }
                    })
                }
                function openPage(pdfFile, pageNumber, context) {
                    var scale = 2;
                    pdfFile.getPage(pageNumber).then(function(page) {
                        viewport = page.getViewport(scale); // reference canvas via context
                        var canvas = context.canvas;
                        canvas.width = viewport.width;
                        canvas.height = viewport.height;
                        canvas.style.width = "100%";
                        canvas.style.height = "100%";
                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
                        let renderTask = page.render(renderContext);
                        renderTask.then(function () {
                            canvas.toBlob(function (blob) {
                                let formdata = new FormData();
                                formdata.append('file', blob);
                                $.ajax({
                                    url: "{php echo $this->createWebUrl('yb_upload')}&type=image",
                                    type: 'post',
                                    data: formdata,
                                    dataType: 'json',
                                    async: false,
                                    cache: false,
                                    contentType: false,
                                    processData: false,
                                    success(res) {
                                        console.log(res)
                                        if (res.code == 0) {
                                            var html = `<div class="multi-item" style="text-align: center;height: auto;margin-right: 60px;">
                                                                    <img onclick="uploadImage(this, 1)" style="width: 160px;height: 200px;" onerror="this.src='./resource/images/nopic.jpg'; this.title='图片未找到.'" src="`+ res.real +`" class="img-responsive img-thumbnail">
                                                                    <input type="text" name="title[]"  class="form-control" placeholder="请输入名称" value="" style="display: inherit;margin-top: 10px">
                                                                    <input type="number" required oninvalid="this.setCustomValidity('请输入目录等级');" oninput="this.setCustomValidity('')" min="1" name="level[]" class="form-control" value="1" style="display: inherit;margin-top: 10px" onmousewheel='scrollFunc()' onDOMMouseScroll='scrollFunc()'>
                                                                    <input type="number" min="0" name="sort[]" class="form-control" value="0" style="display: inherit;margin-top: 10px" onmousewheel='scrollFunc()' onDOMMouseScroll='scrollFunc()'>
                                                                    <input type="hidden" name="content[]" value="`+ res.path +`">
                                                                    <em class="close" title="删除这张图片" onclick="deleteMultiImage(this)">×</em>
                                                                </div>`;
                                            $(html).insertBefore($('#multi-item'));
                                        }
                                    },
                                    error() {
                                        openPage(pdfFile, pageNumber, context)
                                    }
                                })
                            })
                        })
                    });
                    return;
                };
                function uploadMultiImage(elm) {
                    util.image("", function (urls) {
                        console.log(urls);
                        $.each(urls, function (idx, url) {
                            var html = `<div class="multi-item" style="text-align: center;height: auto;margin-right: 60px;">
                    <img onclick="uploadImage(this, 1)" style="width: 160px;height: 200px;" onerror="this.src='./resource/images/nopic.jpg'; this.title='图片未找到.'" src="`+ url.url +`" class="img-responsive img-thumbnail">
                    <input type="text" name="title[]"  class="form-control" placeholder="请输入名称" value="" style="display: inherit;margin-top: 10px">
                    <input type="number" required oninvalid="this.setCustomValidity('请输入目录等级');" oninput="this.setCustomValidity('')" min="1" name="level[]" class="form-control" value="1" style="display: inherit;margin-top: 10px" onmousewheel='scrollFunc()' onDOMMouseScroll='scrollFunc()'>
                    <input type="number" min="0" name="sort[]" class="form-control" value="0" style="display: inherit;margin-top: 10px" onmousewheel='scrollFunc()' onDOMMouseScroll='scrollFunc()'>
                    <input type="hidden" name="content[]" value="`+ url.attachment +`">
                    <em class="close" title="删除这张图片" onclick="deleteMultiImage(this)">×</em>
                </div>`;
                            $(html).insertBefore($('#multi-item'));
                        });
                    }, {"multiple": true, "direct": false, "fileSizeLimit": 5120000});
                }

                function deleteMultiImage(elm) {
                    $(elm).parent().remove();
                }

                function uploadImage(elm, flag) {
                    util.image("", function (url) {
                        if (flag == 0) {
                            var html = `<div class="multi-item" style="text-align: center;height: auto;margin-right: 60px;">
                    <img onclick="uploadImage(this, 1)" style="width: 160px;height: 200px;" onerror="this.src='./resource/images/nopic.jpg'; this.title='图片未找到.'" src="`+ url.url +`" class="img-responsive img-thumbnail">
                    <input type="text" name="title[]"  class="form-control" placeholder="请输入名称" value="" style="display: inherit;margin-top: 10px">
                    <input type="number" required oninvalid="this.setCustomValidity('请输入目录等级');" oninput="this.setCustomValidity('')" min="1" name="level[]" class="form-control" value="1" style="display: inherit;margin-top: 10px" onmousewheel='scrollFunc()' onDOMMouseScroll='scrollFunc()'>
                    <input type="number" min="0" name="sort[]" class="form-control" value="0" style="display: inherit;margin-top: 10px" onmousewheel='scrollFunc()' onDOMMouseScroll='scrollFunc()'>
                    <input type="hidden" name="content[]" value="`+ url.attachment +`">
                    <em class="close" title="删除这张图片" onclick="deleteMultiImage(this)">×</em>
                </div>`;
                            $(html).insertBefore($('#multi-item'));
                        } else if (flag == 1) {
                            $(elm).attr('src', url.url)
                            $(elm).next().next().next().val(url.attachment)
                        }

                    })
                }
            </script>
        </div>
        <div style="color: #f00;">备注：参数依次为图片、目录名称、目录等级、排序</div>
        <div class="form-group">
            <div class="input-group multi-img-details">
                {loop $page_list $k $v}
                <div class="multi-item" style="text-align: center;height: auto;margin-right: 60px;">
                    <img onclick="uploadImage(this, 1)" style="width: 160px;height: 200px;" onerror="this.src='./resource/images/nopic.jpg';" src="{php echo tomedia($v[content])}" class="img-responsive img-thumbnail">
                    <input type="text" name="title[]"  class="form-control" placeholder="请输入名称" value="{$v[name]}" style="display: inherit;margin-top: 10px">
                    <input type="number" min="1" required oninvalid="this.setCustomValidity('请输入目录等级');" oninput="this.setCustomValidity('')" name="level[]" class="form-control" value="{$v[level]}" style="display: inherit;margin-top: 10px" onmousewheel='scrollFunc()' onDOMMouseScroll='scrollFunc()'>
                    <input type="number" min="0" name="sort[]" class="form-control" value="{$v[sort]}" style="display: inherit;margin-top: 10px" onmousewheel='scrollFunc()' onDOMMouseScroll='scrollFunc()'>
                    <input type="hidden" name="content[]" value="{$v[content]}">
                    <em class="close" title="删除这张图片" onclick="deleteMultiImage(this)">×</em>
                </div>
                {/loop}
                <div id="multi-item" class="multi-item" style="text-align: center;height: auto;">
                    <img onclick="uploadImage(this, 0)" style="width: 160px;height: 200px;cursor: pointer;" onerror="this.src='https://www.boyuan.com/skin/default/image/waitpic.gif'; this.title='图片未找到.'" src="" class="img-responsive img-thumbnail">
                    <input type="text"  class="form-control" placeholder="请输入名称" value="" style="display: inherit;margin-top: 10px">
                    <input type="number" min="1" class="form-control" value="1" style="display: inherit;margin-top: 10px" onmousewheel='scrollFunc()' onDOMMouseScroll='scrollFunc()'>
                    <input type="number" min="0"  class="form-control" value="0" style="display: inherit;margin-top: 10px" onmousewheel='scrollFunc()' onDOMMouseScroll='scrollFunc()'>
                    <input type="hidden" value="">
                    <!--<em class="close" title="删除这张图片" onclick="deleteMultiImage(this)">×</em>-->
                </div>
            </div>
        </div>
        <div id="imgDiv" style="display: block;"></div>
        <div class="clear" style="clear: both"></div>
        <div class="col-sm-offset-2">
            <input type="submit" class="btn btn-primary" name="submit" value="提交">
            <input type="hidden" name="token" value="{$_W['token']}">
        </div>
    </form>
</div>
<script>
    function scrollFunc(evt) {
        evt = evt || window.event;
        if(evt.preventDefault) {
            // Firefox
            evt.preventDefault();
            evt.stopPropagation();
        } else {
            // IE
            evt.cancelBubble=true;
            evt.returnValue = false;
        }
        return false;
    }
</script>


{template 'common/footer'}