<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改新闻与活动')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
    <script  type="text/javascript" src="/js/jscolor.js"></script>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-news-edit" th:object="${tbNews}">
            <input name="id" th:field="*{id}" type="hidden">
            <div class="form-group">    
                <label class="col-sm-2 control-label is-required">新闻标题：</label>
                <div class="col-sm-8">
                    <input name="newsTitle" th:field="*{newsTitle}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-2 control-label is-required">新闻摘要：</label>
                <div class="col-sm-8">
                    <input name="newsSummary" th:field="*{newsSummary}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">封面背景颜色:</label>
                <div class="col-sm-8">
                    <input type="text" data-jscolor="{}" th:field="*{backgroundColor}" id="backgroundColor">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-2 control-label is-required">新闻内容：</label>
                <div class="col-sm-10">
                    <script id="editor" name="newsContent" type="text/plain" style="height: 300px;"></script>
                    <textarea id="newsContent" style="display: none;">[[*{newsContent}]]</textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label is-required">新闻封面：</label>
                <input th:field="*{newsCover}" id="newsCover" type="hidden">
                <div class="col-sm-8">
                    <div class="file-loading">
                        <input id="singleCover" name="file" type="file">
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-2 control-label">备注：</label>
                <div class="col-sm-8">
                    <input name="remark" th:field="*{remark}" class="form-control" type="text">
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: ueditor-js" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script th:inline="javascript">
        var prefix = ctx + "system/news";
        $("#form-news-edit").validate({
            focusCleanup: true
        });

        $(function () {
            var text = $("#newsContent").text();
            var ue = UE.getEditor('editor');
            ue.ready(function () {
                ue.setContent(text);
            });
        })

        function getContentTxt() {
            return UE.getEditor('editor').getContentTxt();
        }

        function submitHandler() {
            if ($.validate.form()) {
                var text = getContentTxt();
                if (text == '' || text.length == 0) {
                    $.modal.alertWarning("请输入新闻内容！");
                    return;
                }
                var a=$("input[name='newsTitle']").val();
                if(a.length>25){
                    $.modal.alertWarning("新闻标题过长，请修正后再提交！");
                    return;
                }

                var b=$("input[name='newsSummary']").val();
                if(b.length>72){
                    $.modal.alertWarning("新闻摘要过长，请修正后再提交！");
                    return;
                }

                var d=$("#newsCover").val();
                if(d == '' || d.length == 0){
                    $.modal.alertWarning("请选择新闻封面！");
                    return;
                }
                $.operate.save(prefix + "/edit", $('#form-news-edit').serialize());
            }
        }

        //初始化文件预览数据和文件上传附件
        initUpload();

        //初始化方法
        function initUpload() {
            var logoUrl = $("#newsCover").val();//拿到图片路径
            var preList = new Array();
            var initialPreviewConfig = new Array();
            //设置初始化区域值
            if (logoUrl != null && logoUrl != ''){
                var imgArr = logoUrl.split(",");
                for ( var i = 0; i < imgArr.length; i++) {
                    preList[i] =  imgArr[i]
                    var a = {
                        // caption : '主图'+(i+1),
                        // width: '120px',
                        url: '/common/del',
                        key: i,
                        extra: {url: imgArr[i]}
                    }
                    initialPreviewConfig.push(a);
                }
            }
            $("#singleCover").fileinput({
                language: 'zh', //设置语言
                uploadUrl: "/common/upload", //上传的地址，改成自己的
                allowedFileExtensions:['bmp', 'gif', 'jpg', 'jpeg', 'png'],//接收的文件后缀
                initialPreviewAsData:true,
                initialPreview:preList,//预览图片
                uploadAsync: true, //默认异步上传
                showUpload: true, //是否显示上传按钮
                showRemove : false, //显示移除按钮
                showPreview : true, //是否显示预览
                showCaption: false,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                dropZoneEnabled: false,//是否显示拖拽区域
                maxFileCount: 1, //表示允许同时上传的最大文件个数
                maxFileSize:10 *1024 *1024,
                messages: {maxFileSize:'文件上传的最大大小为 10MB',acceptFileTypes:'此文件是不支持的图片格式'    },
                enctype: 'multipart/form-data',
                validateInitialCount:true,
                msgFilesTooMany:5,
                autoReplace:false,
                initialPreviewConfig:initialPreviewConfig
            });
        }

        // 单图上传
        $("#singleCover").on('fileuploaded', function (event, data, previewId, index) {
            var rsp = data.response;
            var imgPath = $("#newsCover").val();
            if(imgPath != null && imgPath != ''){
                $("#newsCover").val(imgPath+","+rsp.fileName);
            }else{
                $("#newsCover").val(rsp.fileName);
            }
            $("#singleCover").fileinput('destroy');//销毁fileUploadFileInput
            initUpload();//重新初始化文件预览数据和文件上传附件
            $('#singleCover').fileinput('enable');//enable作用：destroy并重新初始化fileinput插件后，插件会处于disable状态
        });

        //删除方法
        $('#singleCover').on('filepredelete', function(event, key, jqXHR, data) {  //就是在删除原图片之前触发，而新选择的图片不会触发。能满足我们的要求。
            console.log('Key = ' + key);
            var logoUrl = $("#newsCover").val();
            var urlLinkNew = '';
            var imgArr = logoUrl.split(",");
            for ( var i = 0; i < imgArr.length; i++) {
                if (i == key) continue;
                if (urlLinkNew !=''){
                    urlLinkNew = urlLinkNew + "," + imgArr[i];
                }else{
                    urlLinkNew = imgArr[i];
                }
            }
            $("#newsCover").val(urlLinkNew);
            console.log($("#newsCover").val())
        });
    </script>
</body>
</html>