{template 'common/header'}
<style>
    body
    {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .multi-item{
        float: left;
        margin-right: 60px;
        margin-top: 10px;
        position: relative;
        height: auto;
    }
    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
        -webkit-appearance:textfield;
    }
    input[type="number"]{
        -moz-appearance:textfield;
    }
    .form-group .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>
        <li><a href="{php echo $this->createWeburl('yb_manager', array('op' => 'contents', 'id'=>$id));}">目录管理</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">
            <div class="panel panel-default col-sm-10" style="padding: 0;">
                <div class="panel-heading">
                    目录一
                </div>
                <div class="panel-body queue" style="padding: 10px;">

                </div>
            </div>
        </div>-->
        <div class="form-group">
            <label class="col-sm-2 control-label">上传类型</label>
            <div class="form-controls col-sm-8">
                <input type="radio" name="type" id="is_display-1" checked onclick="changeType('img')">
                <label class="radio-inline" for="is_display-1">图片</label>
                <input type="radio" name="type" id="is_display-0" onclick="changeType('pdf')">
                <label class="radio-inline" for="is_display-0"> pdf文件</label>
                <div class="help-block">请选择上传类型</div>
            </div>
        </div>
        <div class="form-group type-box" id="img-box">
            <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="批量上传图片" autocomplete="off">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" onclick="uploadMultiImage(this);">选择图片</button>
                        <input type="hidden" value="multi-image">
                    </span>
                </div>
            </div>
        </div>
        <div class="form-group type-box" id="pdf-box" style="display: none">
            <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="alertDialog();">选择PDF</button>
                        <input  id='pdf' type='file' accept="application/pdf" style="display: none;" onchange="uploadPDF(this)">
                    </span>
                </div>
            </div>
            <script src="{php echo MODULE_URL}template/pdf/pdf.js"></script>
            <script>
				var timer = null, page = 0, aCanvas = [];
				$(function () {
					clearInterval(timer)
				});
                function alertDialog() {
                    $("#pdf").click();
                }
                function uploadPDF(obj) {
                    var pdfFileURL = $(obj).val();
                    if (pdfFileURL) {
						clearInterval(timer);
						page = 0;
						aCanvas = [];
                        //判断是否是pdf
                        var files = $(obj).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) {
                                    //$(".loader").show();
                                    var pageNum = pdf.numPages;
									timer = setInterval(function () {
										listenCanvas()
									},1000);
                                    for (var i = 1; i <= pageNum; i++) {
                                        var canvas = document.createElement('canvas');
                                        canvas.id = "pageNum" + i;
										aCanvas.push(canvas)
                                        var context = canvas.getContext('2d');
                                        openPage(pdf, i, context);
                                    }
                                }
                            });
                        };
                    }
                }
                function dataURLtoBlob(dataurl) {
                    var arr = dataurl.split(','),
                        mime = arr[0].match(/:(.*?);/)[1],
                        bstr = atob(arr[1]),
                        n = bstr.length,
                        u8arr = new Uint8Array(n);
                    while (n--) {
                        u8arr[n] = bstr.charCodeAt(n);
                    }
                    return new Blob([u8arr], {
                        type: mime
                    });
                }
				function listenCanvas() {
					if (aCanvas.length == page)  {
						clearInterval(timer);
						page = 0;
						for (var i =0; i < aCanvas.length;i++) {
                            let formdata = new FormData();
                            formdata.append('file', dataURLtoBlob(aCanvas[i].toDataURL()));
                            $.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 dragger" 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 required type="number" min="0" name="sort[]" class="form-control" value="`+countPage()+`" 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'));
                                    }
                                }
                            });
						}
						aCanvas = [];
					}
				}
                function openPage(pdfFile, pageNumber, context) {
                    var scale = 1.5;
                    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;
                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
                        let renderTask = page.render(renderContext);
                        renderTask.then(function () {
							window.page =  window.page + 1;
                        })
                    });
                    return;
                };
            </script>
        </div>
        <div style="color: #f00;">备注：参数依次为图片、页码</div>
        <div class="form-group">
            <div class="input-group multi-img-details queue" style="padding: 0 0 10px 10px;">
                {loop $page_list $k $v}
                <div class="multi-item dragger" style="text-align: center;height: auto;margin-right: 60px;">
                    <img ondragstart="return false;" 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 required 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='{php echo MODULE_URL}template/image/waitpic.gif'; this.title='图片未找到.'" src="{php echo MODULE_URL}template/image/waitpic.gif" class="img-responsive img-thumbnail">
                    <input type="text" 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 class="clear" style="clear: both"></div>
        <div class="col-sm-offset-2">
            <input type="submit" class="btn btn-primary" name="submit" value="提交">
            &nbsp;&nbsp;&nbsp;
            <input type="button" onclick="deleteAll()" class="btn btn-danger" name="submit" value="删除所有">
            <input type="hidden" name="token" value="{$_W['token']}">
        </div>
    </form>
</div>
<script>
    function changeType(type) {
        $(".type-box").hide();
        $("#"+type+"-box").show();
    }
    function uploadMultiImage(elm) {
        util.image("", function (urls) {
            console.log(urls);
            $.each(urls, function (idx, url) {
                var html = `<div class="multi-item dragger" 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 required type="number" min="0" name="sort[]" class="form-control" value="`+countPage()+`" 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();
        resetpage();
    }

    function uploadImage(elm, flag) {
        util.image("", function (url) {
            if (flag == 0) {
                var html = `<div class="multi-item dragger" 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 required type="number" min="0" name="sort[]" class="form-control" value="`+countPage()+`" 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().val(url.attachment)
            }
        })
    }
    function resetpage() {
        $(".multi-item input[type=number]").each(function (k, v) {
            $(this).val(k+1);
        })
    }
    function countPage() {
        return $(".multi-item").length;
    }

    function deleteAll() {
        util.confirm(function () {
            $(".dragger").remove();
        });
    }
</script>
<script src="{php echo MODULE_URL}template/plugin/js/drag.js"></script>
<script>
    /*
    registerDrag($(".we7-form"));
    window.onscroll = function(e) {
        //console.log(getMousePos(e))
        console.log(e.screenX)
    };
    function getMousePos(event) {
        var e = event || window.event;
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        var x = e.pageX || e.clientX + scrollX;
        var y = e.pageY || e.clientY + scrollY;
        //alert('x: ' + x + '\ny: ' + y);
        return { 'x': x, 'y': y };
    }*/
</script>
<script>
    require(['jquery', 'util'], function ($, util) {
        $(function () {
            $('#form').submit(function () {

                return true;
            });
        });
    });

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