<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'} ">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8"/>
    <link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" type="text/css" href="assets/js/vendor/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="assets/js/vendor/cropper/cropper.min.css"/>
    <style>
        .upload-image {height: 100%; opacity: 0;}
        .upload-image-preview {width: 200px;height: 200px;overflow: hidden;margin: 0 20px;display: inline-block;}
        #imageBox {height: 418px;overflow: auto;background-color: #F1F1F1;}
        #imagePreviewBox .upload-image-preview {background-color: #F1F1F1;}
    </style>
</head>
<div>
    <div id="content" class="edit-content" style="padding: 5px; opacity: 0;">
        <div id="imageBox" class="col-xs-8">
            <img id="image" class="upload-image" src="assets/images/profile-photo.jpg" th:if="${fileId eq null or fileId eq ''}">
            <img id="image" class="upload-image" th:src="${'route/file/downloadfile/false/'+ fileId}" th:if="${fileId ne null and fileId ne ''}">
        </div>
        <div id="imagePreviewBox" class="col-xs-4">
            <div class="upload-image-preview"></div>
        </div>
        <div class="col-xs-4" style="text-align: center;">
            <button id="dragBtn" type="button" class="btn btn-danger fa fa-arrows" onclick="dragImage()" title="移动"></button>
            <button type="button" class="btn btn-danger fa fa-search-plus" onclick="zoomPlus()" title="放大图片"></button>
            <button type="button" class="btn btn-danger fa fa-search-minus" onclick="zoomMinus()" title="缩小图片"></button>
            <button type="button" class="btn btn-danger fa fa-refresh" onclick="reset()" title="重置图片"></button>
        </div>
        <div class="col-xs-4" style="margin-top: 5px; text-align: center;">
            <div class="btn-group">
                <button class="btn btn-danger fa fa-undo" onclick="rateLeft()" type="button" title="向左旋转90°"> 向左旋转
                </button>
            </div>
            <div class="btn-group">
                <button class="btn  btn-danger fa fa-repeat" onclick="rateRight()" type="button" title="向右旋转90°"> 向右旋转
                </button>
            </div>
        </div>
        <div class="col-xs-4" style="margin-top: 5px; text-align: center;">
            <div class="btn-group">
                <form id="uploadFileForm" action="#" style="display: none;">
                    <input type="file" id="uploadImage" name="image" accept="image/jpeg,image/gif,image/png,image/jpg"
                           onchange="doUploadFile()"/>
                </form>
                <button class="btn btn-primary btn-block fa fa-upload" type="button" onclick="openUploadImage()"> 上传图片
                </button>
            </div>
            <div class="btn-group">
                <button class="btn btn-primary btn-block fa fa-save" type="button" onclick="doCrop()"> 裁剪上传</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="assets/js/vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/vendor/cropper/cropper.min.js"></script>
<script type="text/javascript" src="assets/js/common.js"></script>
<script type="text/javascript">
    var fileArray = [];

    function closeBox() {
        top.dialog.closeBox();
    }

    function doSubmitForm() {
        return false;
    }

    var cropper;

    // 放大
    function zoomPlus() {
        cropper.zoom(0.1);
    }

    // 缩小
    function zoomMinus() {
        cropper.zoom(-0.1);

    }

    // 逆时针90
    function rateLeft() {
        cropper.rotate(-90);
    }

    // 顺时针90
    function rateRight() {
        cropper.rotate(90);
    }

    // 重置
    function reset() {
        cropper.reset();
    }

    // 图片移动
    var isDrag = false;

    function dragImage() {
        if (!isDrag) {
            cropper.setDragMode('move');
            isDrag = true;
            $('#dragBtn').addClass('btn-default');
            $('#dragBtn').removeClass('btn-danger');
        } else {
            cropper.setDragMode('crop');
            isDrag = false;
            $('#dragBtn').addClass('btn-danger');
            $('#dragBtn').removeClass('btn-default');
        }
    }

    // 打开上传图片
    function openUploadImage() {
        $('#uploadImage').click();
    }

    // 上传文件
    function doUploadFile() {
        var loadLayerIndex;
        var formData = new FormData($('#uploadFileForm')[0]);
        top.restAjax.postFile('api/file/uploadimage', formData, {}, function (code, data) {
            top.dialog.msg('上传成功');
            cropper.replace('route/file/downloadfile/false/' + data.data, false);
            top.dialog.dialogData.uploadImage = data.data;
        }, function(code, data) {
            top.dialog.msg(data.msg);
        }, function() {
            loadLayerIndex = top.dialog.msg(top.dataMessage.uploading, {icon: 16, time: 0, shade: 0.3});
        }, function() {
            top.dialog.close(loadLayerIndex);
        });
    }

    // 裁剪
    function doCrop() {
        cropper.getCroppedCanvas().toBlob(function (cropBlob) {
            var formData = new FormData();
            formData.append("image", cropBlob);
            var loadLayerIndex;
            top.restAjax.postFile('api/file/uploadimage', formData, {}, function (code, data) {
                top.dialog.msg('裁剪成功');
                cropper.replace('route/file/downloadfile/false/' + data.data, false);
                top.dialog.dialogData.uploadImage = data.data;
            }, function(code, data) {
                top.dialog.msg(data.msg);
            }, function() {
                loadLayerIndex = top.dialog.msg(top.dataMessage.uploading, {icon: 16, time: 0, shade: 0.3});
            }, function() {
                top.dialog.close(loadLayerIndex);
            });
        });
    }

    $(function () {
        top.dialog.dialogData.uploadImage = '';
        var image = document.getElementById('image');
        cropper = new Cropper(image, {
            aspectRatio: 1 / 1,
            viewMode: 1,
            preview: '.upload-image-preview',
            minContainerHeight: 430,
            maxContainerHeight: 430,
            crop(event) {},
        });
        $('#content').fadeTo(1000, 1);
    })
</script>
</body>
</html>