{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新闻发布</title>
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
    <link rel="stylesheet" href="{% static '/css/cropper.min.css' %}">
    <link rel="stylesheet" href="{% static '/css/ImgCropping.css' %}">
    <style>
        .breadcrumbs {
            padding: 12px 0 12px 30px;
            border-bottom: 1px solid #dbdbdb;
        }

        .layui-breadcrumb>* {
            font-size: 16px;
        }

        .fixedDiv {
            position: fixed;
            width: 100%;
            z-index: 999;
            box-shadow: 0px 3px 5px 0px #ececec;
            background: #fff;
        }

        /* 发布类型 */

        .widget-title {
            position: relative;
            padding-left: 10px;
            font-size: 16px;
            padding: 5px 0 5px 10px;
        }

        .widget-title::after {
            position: absolute;
            content: '';
            left: 0;
            top: 9px;
            height: 15px;
            border-left: 5px solid #23a3ee;
            padding-left: 10px;
            font-size: 16px;
            padding: 5px 0 5px 10px;
        }

        .widget-title h2 {
            font-weight: 700;
            line-height: 33px;
        }

        .widget-title h2 span {
            font-size: 13px;
            font-weight: 100;
            margin-left: 20px;
            color: #333;
        }



        /* 上传详情 */

        .layui-form-item .layui-input-inline {
            width: 50%;
        }

        .uploadContent,
        .advertisingUp {
            /* border-top: 7px solid #f0f0f0; */
            padding: 25px;
        }

        .uploadUl>li {
            display: none;
        }

        .uploadUl>li:first-child {
            display: block;
        }

        .innerDiv {
            max-width: 500px;
        }

        /* 图片预览 */

        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 0;
        }

        #progressBar {
            display: none;
        }

        /* 产品展厅上传多图 */

        .uploadParent {
            position: absolute;
            margin: 10px 0;
        }

        .uploadParent>div {
            display: inline-block;
            width: 92px;
            height: 92px;
            /* border: 1px solid #b8b8b8; */
            background: url(../../static/imgs/addicon.png) no-repeat center;
            background-size: 80% 80%;
            cursor: pointer;
            margin-right: 8px;
        }

        .uploadShowParent .layui-upload-list {
            display: inline-block;
        }

        /* 表单样式 */

        .layui-form-item .layui-input-inline {
            width: 50%;
        }

        .layui-form-item .layui-input-textarea {
            width: 50%;
        }

        .uploadImg {
            position: absolute;
            margin: 10px 0;
            width: 92px;
            height: 92px;
            background: none;
            border: 1px solid #b8b8b8;
            cursor: pointer;
        }

        .uploadImgIcon {
            background: url(../../static/imgs/uploadImgIcon.png) no-repeat center;
            background-size: 80% 80%;
        }

        /* 地图 */
        .layui-form-label {
            width: 102px;
        }

        .mapBox {
            display: flex;
        }

        .map {
            width: 55%;
            height: 400px;
            border: 1px solid #878787;
        }

        .locatPoint button {
            padding: 5px 10px;
            border-radius: 4px;
            margin: 10px 20px 5px;
            color: #fff;
        }

        .locatPoint button.sw {
            background-color: #ed9c22;
        }

        .locatPoint button.ne {
            background-color: #22a3ed;

        }

        .locatPoint button.center {
            background-color: #ed2289;

        }

        /* 广告位-开始上传、取消上传按钮 */
        .imgListAction,
        .delImgData {
            display: none;
        }

        /* 轮播图-开始上传、取消上传按钮 */
        .testListAction,
        .delTestData {
            display: none;
        }

        .imgHidden {
            display: none;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="floatNav">
            <!-- 导航 -->
            <div class="breadcrumbs">
                <span class="layui-breadcrumb">
                    <a target="BoardRight">首页</a>
                    <a>
                        <cite>首页图片</cite>
                    </a>
                </span>
            </div>
        </div>
        <!-- 内容 -->
        <div>
            <!-- 发布详情 -->
            <div class="uploadContent" id="uploadContent">
                <div class="widget-title">
                    <h2>首页轮播图上传
                        <span id="Uptime"></span>
                    </h2>
                </div>

                <!-- 上传 -->
                <div class="layui-upload">
                    <span class="">轮播图片：</span>
                    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择图片</button>
                    <div id="demo1" style="margin-top: 10px">
                        <img src="" alt="" class="layui-upload-img imgHidden" id="carouselImg">
                    </div>
                    <ul id="listData"></ul>
                    <button type="button" class="layui-btn testListAction" id="testListAction">开始上传</button>
                    <button type="button" class="layui-btn layui-btn-danger delTestData" id="delTestData">取消上传</button>
                </div>
            </div>

            <!-- 广告位 -->
            <div class="advertisingUp">
                <div class="widget-title">
                    <h2>首页广告位图上传
                        <span id="Uptime"></span>
                    </h2>
                </div>

                <!-- 上传 -->
                <div class="layui-upload">
                    <span class="">广告位图片：</span>
                    <button type="button" class="layui-btn layui-btn-normal" id="replaceImg">选择图片</button>
                    <div id="demo2" style="margin-top: 10px">
                        <img src="" alt="" class="layui-upload-img imgHidden" id="finalImg">
                    </div>
                    <ul id="listDataA"></ul>
                    <button type="button" class="layui-btn imgListAction" id="imgListAction">开始上传</button>
                    <button type="button" class="layui-btn layui-btn-danger delImgData" id="delImgData">取消上传</button>
                </div>
            </div>
        </div>

        <!--图片裁剪框 start广告位-->
        <div style="display: none" class="tailoring-container1">
            <div class="black-cloth" onclick="closeTailor(this)"></div>
            <div class="tailoring-content">
                <div class="tailoring-content-one">
                    <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
                        <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg"
                            class="hidden" onchange="selectImg(this)">
                        选择图片
                    </label>
                    <div class="close-tailoring" onclick="closeTailor(this)">×</div>
                </div>
                <div class="tailoring-content-two">
                    <div class="tailoring-box-parcel">
                        <img id="tailoringImg">
                    </div>
                    <div class="preview-box-parcel">
                        <p>图片预览：</p>
                        <div class="square previewImg"></div>
                    </div>
                </div>
                <div class="tailoring-content-three">
                    <!-- <button class="l-btn cropper-reset-btn">复位</button>
                    <button class="l-btn cropper-rotate-btn">旋转</button>
                    <button class="l-btn cropper-scaleX-btn">换向</button> -->
                    <button class="l-btn sureCut" id="sureCut">确定</button>
                </div>
            </div>
        </div>
        <!--图片裁剪框 end广告位-->


        <!--图片裁剪框 start首页轮播-->
        <div style="display: none" class="tailoring-container2">
            <div class="black-cloth" onclick="closeTailorA(this)"></div>
            <div class="tailoring-content">
                <div class="tailoring-content-one">
                    <label title="上传图片" for="chooseImgA" class="l-btn choose-btn">
                        <input type="file" accept="image/jpg,image/jpeg,image/png" name="fileA" id="chooseImgA"
                            class="hidden" onchange="selectImgA(this)">
                        选择图片
                    </label>
                    <div class="close-tailoring" onclick="closeTailorA(this)">×</div>
                </div>
                <div class="tailoring-content-two">
                    <div class="tailoring-box-parcel">
                        <img id="carouselingImg">
                    </div>
                    <div class="preview-box-parcel">
                        <p>图片预览：</p>
                        <div class="square previewImgA"></div>
                    </div>
                </div>
                <div class="tailoring-content-three">
                    <!-- <button class="l-btn cropper-reset-btn">复位</button>
                    <button class="l-btn cropper-rotate-btn">旋转</button>
                    <button class="l-btn cropper-scaleX-btn">换向</button> -->
                    <button class="l-btn sureCut" id="carousesureCut">确定</button>
                </div>
            </div>
        </div>
        <!--图片裁剪框 end首页轮播-->
    </div>




    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script src="{% static '/lib/layui/layui.js'%}"></script>
    <script src="{% static 'lib/ckeditor/ckeditor.js'%}"></script>
    <script src="{% static 'lib/ckeditor/lang/zh-cn.js'%}"></script>
    <script src="{% static '/js/backstageNet/common.js'%}"></script>
    <script src="{% static '/js/cropper.min.js'%}"></script>
    <script>
        var element, form, upload;
        var advertisingName //广告位上传图片名称
        var carouselName //轮播图上传图片名称
        layui.use(['element', 'form', 'upload', 'layer'], function () {
            element = layui.element;
            form = layui.form;
            upload = layui.upload;
            layer = layui.layer;
            // $ = layui.jquery


            imgListData() //请求已上传的图片列表-广告
            imgListDataA() //请求已上传的图片列表-轮播
        });

        //广告列表请求
        function imgListData() {
            $.ajax({
                url: 'system_photo_save',
                type: 'post',
                data: {
                    code: '2'
                },
                success: function (data) {
                    var dat = JSON.parse(data)
                    $('#listDataA li').remove()
                    var html = ''
                    for (var i = 0; i < dat.length; i++) {
                        html = '<li class="" style="margin: 10px 0 10px 0"><img style="width: 800px !important; height: 60px" src="' + dat[i].pic_img + '" alt="" class=""></li>'
                        $('#listDataA').append(html)
                    }
                },
                error: function (err) {
                    console.log(err)
                }
            })
        }

        //轮播列表请求
        function imgListDataA() {
            $.ajax({
                url: 'system_photo_save',
                type: 'post',
                data: {
                    code: '1'
                },
                success: function (data) {
                    var dat = JSON.parse(data)
                    $('#listData li').remove()
                    var html = ''
                    for (var i = 0; i < dat.length; i++) {
                        html = '<li class="" style="margin: 10px 0 10px 0"><img style="width: 512px !important; height: 128px" src="' + dat[i].pic_img + '" alt="" class=""></li>'
                        $('#listData').append(html)
                    }
                },
                error: function (err) {
                    console.log(err)
                }
            })
        }

        windowAddMouseWheel();
        function windowAddMouseWheel() {
            var scrollFunc = function (e) {
                e = e || window.event;
                var top = $(window).scrollTop();
                if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
                    if (e.wheelDelta > 0) { //当滑轮向上滚动时
                        if (top < 60) {
                            if ($(".floatNav").hasClass("fixedDiv")) {
                                $(".floatNav").removeClass("fixedDiv");
                                $(window).scrollTop(0)
                            }
                        }
                    }
                    if (e.wheelDelta < 0) { //当滑轮向下滚动时
                        if (top >= 60) {
                            $(".floatNav").addClass("fixedDiv");
                        }
                    }
                } else if (e.detail) {  //Firefox滑轮事件
                    if (e.detail > 0) { //当滑轮向上滚动时
                        if (top < 60) {
                            if ($(".floatNav").hasClass("fixedDiv")) {
                                $(".floatNav").removeClass("fixedDiv");
                                $(window).scrollTop(0)
                            }
                        }
                    }
                    if (e.detail < 0) { //当滑轮向下滚动时
                        if (top >= 60) {
                            $(".floatNav").addClass("fixedDiv");
                        }
                    }
                }
            };
            //给页面绑定滑轮滚动事件
            if (document.addEventListener) {
                document.addEventListener('DOMMouseScroll', scrollFunc, false);
            }
            //滚动滑轮触发scrollFunc方法
            window.onmousewheel = document.onmousewheel = scrollFunc;
        }

        // 广告位开始上传按钮监听事件
        $('#imgListAction').on('click', function () {
            var fileObj = dataURLtoFile(imgArr, $('#chooseImg').val())
            var form = new FormData();
            form.append("upload1", fileObj);

            $.ajax({
                url: 'system_photo',
                type: 'post',
                data: form,
                processData: false, // 告诉jQuery不要去处理发送的数据
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                success: function (data) {
                    console.log(data)
                    $.ajax({
                        url: 'system_photo_save',
                        type: 'post',
                        data: {
                            code: '2'
                        },
                        success: function (data) {
                            var dat = JSON.parse(data)
                            if (dat.length != 0) {
                                layer.msg('上传成功', { icon: 1 });
                                imgArr = [] //清空数组数据
                                $('#delImgData').addClass('delImgData')
                                $('#finalImg').addClass('imgHidden')
                                // $('#demo2 img').remove();  //删除所有img
                                $('#imgListAction').addClass('imgListAction') //隐藏上传按钮
                                $('#delImgData').addClass('delImgData') //隐藏取消按钮
                                imgListData() //请求已上传的图片列表-广告
                            } else if (data == 0) {
                                layer.msg('上传失败', { icon: 2 });
                            }
                        },
                        error: function (err) {
                            console.log(err)
                        }
                    })
                },
                error: function (err) {
                    console.log(err)
                }
            })


        });

        // 广告位取消上传按钮监听事件
        $('#delImgData').on('click', function () {
            layer.confirm('是否删除已上传的图片', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                imgArr = [] //清空数组数据
                $('#delImgData').addClass('delImgData')
                $('#finalImg').addClass('imgHidden')
                // $('#demo2 img').remove();  //删除所有img
                $('#imgListAction').addClass('imgListAction') //隐藏上传按钮
                $('#delImgData').addClass('delImgData') //隐藏取消按钮
                layer.msg('删除成功', { icon: 1 });
            }, function () {
                layer.msg('取消删除', { icon: 1 });
            });
        });

        //广告位上传图片按钮监听事件
        $('#replaceImg').on('click', function () {
            // $("#replaceImg").addClass("layui-btn-disabled")
            //弹出图片裁剪框
            boxSize1 = 40
            boxSize2 = 3
            $("#replaceImg").on("click", function () {
                $(".tailoring-container1").toggle();
            });
        });

        //弹出框水平垂直居中
        (window.onresize = function () {
            var win_height = $(window).height();
            var win_width = $(window).width();
            if (win_width <= 768) {
                $(".tailoring-content").css({
                    "top": (win_height - $(".tailoring-content").outerHeight()) / 2,
                    "left": 0
                });
            } else {
                $(".tailoring-content").css({
                    "top": (win_height - $(".tailoring-content").outerHeight()) / 2,
                    "left": (win_width - $(".tailoring-content").outerWidth()) / 2
                });
            }
        })();

        //广告位图像上传
        function selectImg(file) {
            if (!file.files || !file.files[0]) {
                return;
            }
            var reader = new FileReader();
            reader.onload = function (evt) {
                var replaceSrc = evt.target.result;
                //更换cropper的图片
                $('#tailoringImg').cropper('replace', replaceSrc, false);//默认false，适应高度，不失真
            }
            advertisingName = file.files[0].name
            reader.readAsDataURL(file.files[0]);
        }
        //cropper图片裁剪
        $('#tailoringImg').cropper({
            aspectRatio: 40 / 3,//默认比例
            preview: '.previewImg',//预览视图
            guides: false,  //裁剪框的虚线(九宫格)
            autoCropArea: 0.5,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
            movable: false, //是否允许移动图片
            dragCrop: true,  //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
            movable: true,  //是否允许移动剪裁框
            resizable: true,  //是否允许改变裁剪框的大小
            zoomable: false,  //是否允许缩放图片大小
            mouseWheelZoom: false,  //是否允许通过鼠标滚轮来缩放图片
            touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
            rotatable: true,  //是否允许旋转图片
            crop: function (e) {
                // 输出结果数据裁剪图像。
            }
        });
        //广告位旋转
        $(".cropper-rotate-btn").on("click", function () {
            $('#tailoringImg').cropper("rotate", 45);
        });
        //广告位复位
        $(".cropper-reset-btn").on("click", function () {
            $('#tailoringImg').cropper("reset");
        });
        //广告位换向
        var flagX = true;
        $(".cropper-scaleX-btn").on("click", function () {
            if (flagX) {
                $('#tailoringImg').cropper("scaleX", -1);
                flagX = false;
            } else {
                $('#tailoringImg').cropper("scaleX", 1);
                flagX = true;
            }
            flagX != flagX;
        });

        //广告位裁剪后的处理
        $("#sureCut").on("click", function () {
            if ($("#tailoringImg").attr("src") == null) {
                return false;
            } else {
                var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
                var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
                imgArr = base64url
                $("#finalImg").prop("src", base64url);//显示为图片的形式
                $('#finalImg').removeClass('imgHidden')
                //关闭裁剪框
                closeTailor();
                $('#imgListAction').removeClass('imgListAction')
                $('#delImgData').removeClass('delImgData')
                // var fileObj = dataURLtoFile(imgArr, $('#chooseImg').val())
                // var form = new FormData();
                // form.append("upload1", fileObj);

                // $.ajax({
                //     url: 'system_photo',
                //     type: 'post',
                //     data: form,
                //     processData: false, // 告诉jQuery不要去处理发送的数据
                //     contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                //     success: function (data) {
                //         console.log(data)
                //     },
                //     error: function (err) {
                //         console.log(err)
                //     }
                // })
            }
        });
        //广告位关闭裁剪框
        function closeTailor() {
            $(".tailoring-container1").toggle();
        }



        // 首页轮播开始上传按钮监听事件
        $('#testListAction').on('click', function () {
            var fileObj = dataURLtoFile(imgArrA, $('#chooseImgA').val())
            var form = new FormData();
            form.append("upload", fileObj);
            $.ajax({
                url: 'system_photo',
                type: 'post',
                data: form,
                processData: false, // 告诉jQuery不要去处理发送的数据
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                success: function (data) {
                    $.ajax({
                        url: 'system_photo_save',
                        type: 'post',
                        data: {
                            code: '1'
                        },
                        success: function (data) {
                            console.log(JSON.parse(data))
                            var dat = JSON.parse(data)
                            if (dat.length != 0) {
                                layer.msg('上传成功', { icon: 1 });
                                imgArr = [] //清空数组数据
                                $('#carouselImg').addClass('imgHidden')
                                // $('#demo1 img').remove();  //删除所有img
                                $('#testListAction').addClass('testListAction') //隐藏上传按钮
                                $('#delTestData').addClass('delTestData') //隐藏取消按钮
                                imgListDataA() //请求已上传的图片列表-轮播
                            } else if (data == 0) {
                                layer.msg('上传失败', { icon: 2 });
                            }
                        },
                        error: function (err) {
                            console.log(err)
                        }
                    })
                },
                error: function (err) {
                    console.log(err)
                }
            })
        });

        // 首页轮播取消上传按钮监听事件
        $('#delTestData').on('click', function () {
            layer.confirm('是否删除已上传的图片', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                imgArr = [] //清空数组数据
                $('#carouselImg').addClass('imgHidden')
                // $('#demo1 img').remove();  //删除所有img
                $('#testListAction').addClass('testListAction') //隐藏上传按钮
                $('#delTestData').addClass('delTestData') //隐藏取消按钮
                layer.msg('删除成功', { icon: 1 });
            }, function () {
                layer.msg('取消删除', { icon: 1 });
            });
        });

        //首页轮播上传图片按钮监听事件
        $('#testList').on('click', function () {
            // $("#replaceImg").addClass("layui-btn-disabled")
            //弹出图片裁剪框
            $("#testList").on("click", function () {
                $(".tailoring-container2").toggle();
            });
        });

        //首页轮播图像上传
        function selectImgA(fileA) {
            if (!fileA.files || !fileA.files[0]) {
                return;
            }
            var reader = new FileReader();
            reader.onload = function (evt) {
                var replaceSrc = evt.target.result;
                //更换cropper的图片
                $('#carouselingImg').cropper('replace', replaceSrc, false);//默认false，适应高度，不失真
            }
            carouselName = fileA.files[0].name
            reader.readAsDataURL(fileA.files[0]);
        }
        //cropper图片裁剪
        $('#carouselingImg').cropper({
            aspectRatio: 4 / 1,//默认比例
            preview: '.previewImgA',//预览视图
            guides: false,  //裁剪框的虚线(九宫格)
            autoCropArea: 0.5,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
            movable: false, //是否允许移动图片
            dragCrop: true,  //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
            movable: true,  //是否允许移动剪裁框
            resizable: true,  //是否允许改变裁剪框的大小
            zoomable: false,  //是否允许缩放图片大小
            mouseWheelZoom: false,  //是否允许通过鼠标滚轮来缩放图片
            touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
            rotatable: true,  //是否允许旋转图片
            crop: function (e) {
                // 输出结果数据裁剪图像。
            }
        });
        //首页轮播旋转
        $(".cropper-rotate-btn").on("click", function () {
            $('#carouselingImg').cropper("rotate", 45);
        });
        //首页轮播复位
        $(".cropper-reset-btn").on("click", function () {
            $('#carouselingImg').cropper("reset");
        });
        //首页轮播换向
        var flagX = true;
        $(".cropper-scaleX-btn").on("click", function () {
            if (flagX) {
                $('#carouselingImg').cropper("scaleX", -1);
                flagX = false;
            } else {
                $('#carouselingImg').cropper("scaleX", 1);
                flagX = true;
            }
            flagX != flagX;
        });

        //首页轮播裁剪后的处理
        $("#carousesureCut").on("click", function () {
            if ($("#carouselingImg").attr("src") == null) {
                return false;
            } else {
                var cas = $('#carouselingImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
                var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
                imgArrA = base64url
                $("#carouselImg").prop("src", base64url);//显示为图片的形式
                $('#carouselImg').removeClass('imgHidden')

                //关闭裁剪框
                closeTailorA();
                $('#testListAction').removeClass('testListAction')
                $('#delTestData').removeClass('delTestData')

            }
        });
        function dataURLtoFile(dataurl, filename) {
            var arr = dataurl.split(',');
            var mime = arr[0].match(/:(.*?);/)[1];
            var bstr = atob(arr[1]);
            var n = bstr.length;
            var u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            //转换成file对象
            return new File([u8arr], filename, { type: mime });
            //转换成成blob对象
            //return new Blob([u8arr],{type:mime});
        }
        //首页轮播关闭裁剪框
        function closeTailorA() {
            $(".tailoring-container2").toggle();
        }
    </script>
</body>

</html>