<!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-add">
            <div class="form-group">    
                <label class="col-sm-2 control-label is-required">新闻标题：</label>
                <div class="col-sm-8">
                    <input name="newsTitle" 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 name="a1" class="form-control" type="text" disabled="true" value="标题字数不能超过25个字符">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label is-required">新闻摘要：</label>
                <div class="col-sm-8">
                    <input name="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 name="a2" class="form-control" type="text" disabled="true" value="摘要字数不能超过72个字符">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label is-required">新闻封面：</label>
                <input name="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="a3" class="form-control" type="text" disabled="true" value="封面图片大小：400 * 250">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">封面背景颜色:</label>
                <div class="col-sm-8">
                    <input type="text" value="#FFFFFF" data-jscolor="{}" name="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>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-2 control-label">备注：</label>
                <div class="col-sm-8">
                    <input name="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-add").validate({
            focusCleanup: true
        });

        $(document).ready(function () {
            // 单图上传
            $("#singleCover").fileinput({
                uploadUrl: ctx + 'common/upload',
                maxFileCount: 1,
                autoReplace: true,
                maxImageWidth: 400,
                maxImageHeight: 250
            }).on('fileuploaded', function (event, data, previewId, index) {
                var rsp = data.response;
                $("#newsCover").val(rsp.fileName);
            }).on('fileremoved', function (event, id, index) {
                $("input[name='" + event.currentTarget.id + "']").val('')
            })
        });

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

        function submitHandler() {
            if ($.validate.form()) {
                alert($("#backgroundColor").val());
                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 + "/add", $('#form-news-add').serialize());
            }
        }
    </script>
</body>
</html>