<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('编辑商品图片')" />
    <style>
        .custom-btn {
            cursor: pointer;
        }
    </style>
</head>
<body class="white-bg">
    <input id="prodId" th:value="${prodId}" type="hidden">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row" id="ibox-container" style="width: 1260px">
        </div>
        <div style="display: none;">
            <input type="file" class="form-control" name="imageFileUrl" id="imageFileUrl" accept="image/*"/>
            <input type="hidden" name="picUrl" id="picUrl" />
            <input type="hidden" id="picCount" />
        </div>
    </div>
    <!-- 设置快递单类型区域 -->
    <script id="addNewPicDiv" type="text/template">
        <div class="col-sm-12 select-table table-striped">
            <table id="newPic-table"></table>
        </div>
    </script>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "master/product/prodPic";
        var prodPicVoList = [[${prodPicVoList}]];
        var iPicCount = 0;
        prodPicVoList.forEach(item => {
            iPicCount++;
            var card = `<div class='col-sm-2'>
                            <div style='width: 200px; height: 300px; border: 1px solid black'>
                                <div style="position: absolute; width: 200px; height: 300px; top: 0; left: 14px;">
                                    <img id='picImgSrc_${iPicCount}' style='width: 200px; height: 300px;' src='${item.picUrl}'>
                                </div>
                            </div>
                            <div style='width: 300px; height: 30px; margin-left: 70px; margin-top: 10px;' class='custom-btn'>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="removePic(${item.sort})"><i class="fa fa-search"></i>&nbsp;删除</a>
                            </div>
                        </div>`;
            $("#ibox-container").append(card);
        });
        $("#picCount").val(iPicCount);
        var newPicCard = `<div class='col-sm-2' id='addButton'>
                            <div class='ibox' style='width: 200px; height: 300px;'>
                                <div class='ibox-content custom-btn' style='width: 100%; height: 100%;' onclick='addNewPic()'>
                                    <h5 style='margin-left: 40px; font-size: large'>添加图片</h5>
                                </div>
                            </div>
                          </div>`;
        $("#ibox-container").append(newPicCard);

        $('#imageFileUrl').change(function () {
            var fileSize = this.files[0].size;
            fileSize = Math.round(fileSize/1024*100)/100;

            if(fileSize>2048){
                layer.msg('上传文件不得大于2M，请重新上传。', {time: 3000, icon:6});
                return false;
            }

            if (!/image\/\w+/.test(this.files[0].type)) {
                layer.msg('上传的不是图片文件，请重新上传。', {time: 3000, icon:6});
                return false;
            }

            if ($(this).val()) {
                var formdata = new FormData();
                formdata.append("imageFile", this.files[0]);
                $.ajax({
                    url: ctx + "common/upload/file/image",
                    data: formdata,
                    type: "post",
                    processData: false,
                    contentType: false,
                    beforeSend: function () {
                        $.modal.loading("正在处理中，请稍后...");
                        $.modal.disable();
                    },
                    success: function (result) {
                        if (result.code === web_status.SUCCESS) {
                            var nowPicCount = $("#picCount").val()*1 + 1;
                            $("#picCount").val(nowPicCount);
                            var appendCard =
                                `<div class='col-sm-2'>
                                    <div style='width: 200px; height: 300px; border: 1px solid black'>
                                        <div style="position: absolute; width: 200px; height: 300px; top: 0; left: 14px;">
                                            <img id='picImgSrc_${nowPicCount}' style='width: 200px; height: 300px;' src=''>
                                        </div>
                                    </div>
                                    <div style='width: 300px; height: 30px; margin-left: 70px; margin-top: 10px;' class='custom-btn'>
                                        <a class="btn btn-primary btn-rounded btn-sm" onclick="removePic(${nowPicCount})"><i class="fa fa-search"></i>&nbsp;删除</a>
                                    </div>
                                </div>`;
                            $('#addButton').before(appendCard);
                            $("#picImgSrc_" + nowPicCount).attr('src', result.imageUrl);
                            $("#picUrl").val(result.imageUrl);
                            savePic(nowPicCount);
                            $.modal.alertSuccess(result.msg)
                        } else if (result.code === web_status.WARNING) {
                            $.modal.alertWarning(result.msg)
                        } else {
                            $.modal.alertError(result.msg);
                        }
                        $.modal.closeLoading();
                        $.modal.enable();
                    }
                })
            }
        });

        $("#form-prod-edit").validate({
            focusCleanup: true
        });

        function removePic(sort) {
            var data = {
                "prodId": $("#prodId").val(),
                "sort": sort,
            };
            $.operate.post(prefix + "/remove", data, refreshTab);
        }

        function savePic(picIdx) {
            var data = {
                "prodId": $("#prodId").val(),
                "picUrl": $("#picUrl").val(),
                "sort": picIdx,
            };
            $.operate.post(prefix + "/addProdPic", data, setIdToImg);
        }

        function refreshTab() {
            location.reload();
        }

        function addNewPic() {
            $("#imageFileUrl").click();
        }

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