<!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"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-notice-edit">
        <input type="hidden" name="buyNoticeId" th:value="${BuyNoticeVo.buyNoticeId}">
        <div class="form-group">
            <label class="col-sm-2 control-label is-required">标题：</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" name="title" id="title" 
                       maxlength="50" placeholder="最多输入50个字"
                       th:value="${BuyNoticeVo.title}" required>
                <span class="help-block m-b-none text-muted">
                    <span id="titleCount">0</span>/50 字
                </span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label is-required">类型：</label>
            <div class="col-sm-10">
                <div class="radio check-box">
                    <label>
                        <input type="radio" value="1" name="noticeType" 
                               th:checked="${BuyNoticeVo.noticeType == 1}"> 购票须知
                    </label>
                </div>
                <div class="radio check-box">
                    <label>
                        <input type="radio" value="2" name="noticeType" 
                               th:checked="${BuyNoticeVo.noticeType == 2}"> 观演须知
                    </label>
                </div>
            </div>
        </div>
        <!--<div class="form-group">
            <label class="col-sm-2 control-label">排序（越大越靠前）：</label>
            <div class="col-sm-10">
                <input class="form-control" type="number" name="sort" id="sort" 
                       th:value="${BuyNoticeVo.sort}">
            </div>
        </div>-->
        <div class="form-group">
            <label class="col-sm-2 control-label is-required">内容：</label>
            <div class="col-sm-10">
                <textarea id="message" name="message" class="form-control" 
                          rows="8" maxlength="300" placeholder="最多输入300个字" 
                          required th:text="${BuyNoticeVo.message}"></textarea>
                <span class="help-block m-b-none text-muted">
                    <span id="contentCount">0</span>/300 字
                </span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">须知图标：</label>
            <div class="col-sm-10">
                <div class="file-loading">
                    <input id="fileinput-notice-image" type="file" name="file" data-browse-on-zone-click="true">
                </div>
                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 支持上传png格式文件，最大支持上传5M；如不上传，前端展示默认"！"图标</span>
            </div>
        </div>
        <input hidden id="imgUrl" name="imgUrl" th:value="${BuyNoticeVo.imgUrl}">
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script type="text/javascript">
    var prefix = ctx + "kylin/notices";
    var platformUrl = "[[${platformUrl}]]";
    var currentImage = "[[${BuyNoticeVo.imgUrl}]]";

    function submitHandler() {
        var title = $('#title').val().trim();
        if (!title) {
            $.modal.alertWarning("请填写须知标题");
            $('#title').focus();
            return false;
        }
        
        if (title.length > 50) {
            $.modal.alertWarning("须知标题最多输入50个字");
            $('#title').focus();
            return false;
        }

        var message = $('#message').val().trim();
        if (!message) {
            $.modal.alertWarning("请填写须知内容");
            $('#message').focus();
            return false;
        }
        
        if (message.length > 300) {
            $.modal.alertWarning("须知内容最多输入300个字");
            $('#message').focus();
            return false;
        }

        if ($.validate.form()) {
            var data = $('#form-notice-edit').serializeArray();
            $.operate.save(prefix + "/update", data);
        }
    }

    $(function () {
        // 初始化字数统计
        $('#titleCount').text($('#title').val().length);
        $('#contentCount').text($('#message').val().length);
        
        // 标题字数统计和实时校验
        $('#title').on('input', function() {
            var length = $(this).val().length;
            $('#titleCount').text(length);
            
            if (length > 50) {
                $(this).addClass('is-invalid');
                $(this).parent().find('.error-msg').remove();
                $(this).parent().append('<span class="error-msg text-danger">标题不能超过50个字</span>');
            } else {
                $(this).removeClass('is-invalid');
                $(this).parent().find('.error-msg').remove();
            }
        });
        
        // 标题失去焦点校验
        $('#title').on('blur', function() {
            var value = $(this).val().trim();
            $(this).parent().find('.error-msg').remove();
            
            if (!value) {
                $(this).addClass('is-invalid');
                $(this).parent().append('<span class="error-msg text-danger">请填写须知标题</span>');
            } else if (value.length > 50) {
                $(this).addClass('is-invalid');
                $(this).parent().append('<span class="error-msg text-danger">标题不能超过50个字</span>');
            } else {
                $(this).removeClass('is-invalid');
            }
        });
        
        // 内容字数统计和实时校验
        $('#message').on('input', function() {
            var length = $(this).val().length;
            $('#contentCount').text(length);
            
            if (length > 300) {
                $(this).addClass('is-invalid');
                $(this).parent().find('.error-msg').remove();
                $(this).parent().append('<span class="error-msg text-danger">内容不能超过300个字</span>');
            } else {
                $(this).removeClass('is-invalid');
                $(this).parent().find('.error-msg').remove();
            }
        });
        
        // 内容失去焦点校验
        $('#message').on('blur', function() {
            var value = $(this).val().trim();
            $(this).parent().find('.error-msg').remove();
            
            if (!value) {
                $(this).addClass('is-invalid');
                $(this).parent().append('<span class="error-msg text-danger">请填写须知内容</span>');
            } else if (value.length > 300) {
                $(this).addClass('is-invalid');
                $(this).parent().append('<span class="error-msg text-danger">内容不能超过300个字</span>');
            } else {
                $(this).removeClass('is-invalid');
            }
        });

        // 初始化文件上传
        $("#fileinput-notice-image").fileinput({
            'theme': 'explorer-fas',
            'uploadUrl': platformUrl + "/platform/basicServices/alOss/upload/unsm",
            "uploadExtraData": {
                "pathName": "notice",
                "buckType": 1
            },
            autoReplace: true,
            dropZoneTitle: "请上传图标",
            maxFileCount: 1,
            maxFileSize: 5120,
            allowedFileExtensions: ['png'],
            msgSizeTooLarge: '文件 "{name}" ({size} KB) 超过了允许大小 {maxSize} KB，最大支持上传5M文件',
            overwriteInitial: false,
            initialPreviewAsData: true,
            initialPreview: currentImage ? [currentImage] : []
        });

        $("#fileinput-notice-image").on("fileuploaded", function (event, data, previewId, index) {
            var imgPath = data.response.data.ossPath;
            // 保存完整的URL地址
            var fullUrl = "https://img.zhengzai.tv/" + imgPath;
            $("#imgUrl").val(fullUrl);
        });
    });
</script>
</body>
</html>