<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增文章')"/>
    <th:block th:include="include :: select2-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-article-add">
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label">文章标题：</label>
                    <div class="col-sm-10">
                        <input maxlength="50" required id="articleTitle" name="articleTitle" class="form-control"
                               type="text">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">文章作者：</label>
                    <div class="col-sm-8">
                        <input maxlength="20" id="articleAuthor" name="articleAuthor" required class="form-control"
                               type="text">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">是否转载：</label>
                    <div class="col-sm-8">
                        <label class="toggle-switch switch-solid">
                            <input type="checkbox" id="isCopy" name="isCopy">
                            <span></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" id="div_isCopy_extend" style="display: none;">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-xs-2 control-label">原文链接：</label>
                    <div class="col-xs-10">
                        <input type="hidden" name="copyFlag" id="copyFlag" value="0">
                        <input type="text" required class="form-control" id="articleLink" name="articleLink"
                               value=""/>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">栏目分类：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input id="treeId" name="categoryId" type="hidden"/>
                            <input required class="form-control" type="text" onclick="selectCategoryTree()"
                                   id="treeName"
                                   readonly="true">
                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">启用评论：</label>
                    <div class="col-sm-8">
                        <label class="toggle-switch switch-solid">
                            <input type="checkbox" id="commentFlag" name="commentFlag">
                            <span></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">关键词：</label>
                    <div class="col-sm-8">
                        <input maxlength="20" name="articleKeywords" id="articleKeywords" class="form-control"
                               type="text">
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">封面图片：</label>
                    <div class="col-sm-8">
                        <input required name="materialId" id="materialId" class="form-control" type="text"
                               style="display: none;">
                        <div class="input-group">
                            <input required id="materialName" name="coverImage" readonly="true" onclick="selectImage()"
                                   class="form-control valid" type="text">
                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-4 control-label">文章状态：</label>
                    <div class="col-xs-8">
                        <div class="radio-box" th:each="dict : ${@dict.getType('cms_article_status')}">
                            <input type="radio" th:id="${'available_' + dict.dictCode}" name="articleStatus"
                                   th:value="${dict.dictValue}" th:checked="${dict.isDefault  == 'Y' }">
                            <label th:for="${'available_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <label class="col-sm-4 control-label"><span style="color: red; ">*</span>所属商户：</label>
                <div class="col-sm-8">
                    <select id="merchantId" class="form-control" name="merchantId" required>
                        <option value="">--系统商户--</option>
                        <option th:each="post:${mts}"
                                th:value="${post.merchantId}"
                                th:text="${post.merchantName}"></option>
                    </select></li>                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-xs-2 control-label">文章摘要：</label>
                    <div class="col-xs-10">
                            <textarea required maxlength="200" rows="4" class="form-control" name="articleDescription"
                                      placeholder="描述"
                                      id="articleDescription"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">文章内容</h4>

        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-xs-2 control-label">正文:</label>
                    <div class="col-xs-10">
                        <script id="editor" name="content" type="text/plain"></script>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: ueditor"/>
<script type="text/javascript">
    function selectImage() {
        var url = ctx + "/bussiness_cms/material/material_group";
        $.modal.openFull("封面图片选择", url);
    }

    /*栏目分类选择*/
    function selectCategoryTree() {
        var prefixTemp = ctx + "/bussiness_cms/category"
        var options = {
            title: '文章分类选择',
            width: "380",
            url: prefixTemp + "/selectCategoryTree/" + $("#treeId").val(),
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero) {
        var body = layer.getChildFrame('body', index);
        $("#treeId").val(body.find('#treeId').val());
        $("#treeName").val(body.find('#treeName').val());
        layer.close(index);
    }

    var ue = UE.getEditor('editor');

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

    function getContentTxt() {
        return UE.getEditor('editor').getContentTxt();
    }
</script>

<script type="text/javascript">
    $(function () {
        $("#editor").css("height", "380px");
        $("#isCopy").on("change", function () {
            var v = $(this).prop("checked");
            if (v) {
                $("#copyFlag").val("1");//转载标志
                $("#div_isCopy_extend").show();
            } else {
                $("#copyFlag").val("0");
                $("#div_isCopy_extend").hide();
            }
        });


    })
    var prefix = ctx + "bussiness_cms/article"
    $("#form-article-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            var copyFlag = $("#copyFlag").val();
            if (copyFlag == '1') {
                var article_link = $("#article_link").val();
                if (!article_link) {
                    $.modal.alertWarning("请输入原文链接!");
                    return;
                }
            }
            var c = getContentTxt();
            if (c == '' || c.length == 0) {
                $.modal.alertWarning("请输入正文！");
                return;
            }
            var params = $("#form-article-add").serialize();
            //var commentFlag = $("input[id='commentFlag']").is(':checked') == true ? 1 : 0;
            $.operate.save(prefix + "/add", params);
        }
    }
</script>
</body>
</html>