<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改常见错误')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-check-edit" th:object="${trsSensitiveWords}">
            <input name="id" th:field="*{id}" type="hidden">
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">错误词：</label>
                    <div class="col-sm-8">
                        <input name="wrongWord" th:field="*{wrongWord}" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">正确词：</label>
                    <div class="col-sm-8">
                        <input name="correctWord" th:field="*{correctWord}" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">错误类型：</label>
                    <div class="col-sm-8">
                        <div class="error-type-dropdown dropdown-container">
                            <button type="button" class="dropdown-toggle form-control" id="errorTypeDropdown">
                                <span id="selectedErrorType">请选择</span>
                                <span class="caret"></span>
                            </button>
                            <input type="hidden" name="errorType" id="errorTypeValue" th:value="*{errorType}" />
                            <ul class="dropdown-menu error-type-menu" id="errorTypeMenu" style="display:none;">
                                <div class="error-type-column" id="errorTypeMain"></div>
                                <div class="error-type-column" id="errorTypeSub"></div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <style>
                .error-type-dropdown {
                    position: relative;
                    display: inline-block;
                    width: 100%;
                }
                .error-type-dropdown .dropdown-toggle {
                    text-align: left;
                    position: relative;
                    display: inline-block;
                    width: 100%; /* 统一宽度 */

                    /* 模拟 .form-control 的视觉效果 */
                    font-size: 14px;
                    line-height: 1.42857143;
                    color: #676A6C;
                    background-color: #fff;
                }
                .error-type-dropdown .dropdown-toggle .caret {
                    text-align: left;
                    position: absolute;
                    right: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                }
                .error-type-dropdown .error-type-menu {
                    position: absolute;
                    top: 100%;
                    left: 0;
                    background: #fff;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                    width: 400px;
                    display: flex;
                    z-index: 1000;
                    max-height: 300px;
                    overflow: hidden;
                }
                .error-type-dropdown .error-type-column {
                    width: 50%;
                    overflow-y: auto;
                    border-right: 1px solid #eee;
                }
                .error-type-dropdown .error-type-column:last-child {
                    border-right: none;
                }
                .error-type-dropdown .cascader-item {
                    padding: 8px 12px;
                    cursor: pointer;
                }
                .error-type-dropdown .cascader-item:hover {
                    background-color: #f5f5f5;
                }
            </style>
            <script th:inline="javascript">
                /*<![CDATA[*/
                var errorTypeDict = /*[[${@dict.getType('trs_error_type')}]]*/ [];
                /*]]>*/

                document.addEventListener('DOMContentLoaded', function () {
                    var cascaderData = {};
                    errorTypeDict.forEach(function(item) {
                        if (!item.dictLabel || !item.dictValue) return;
                        var parts = item.dictLabel.split("-");
                        if(parts.length < 2) return;
                        var main = parts[0];
                        var subLabel = parts.slice(1).join("-");
                        if (!cascaderData[main]) cascaderData[main] = [];
                        cascaderData[main].push({ label: item.dictLabel, value: item.dictValue });
                    });

                    var $dropdown = document.getElementById('errorTypeDropdown');
                    var $menu = document.getElementById('errorTypeMenu');
                    var $main = document.getElementById('errorTypeMain');
                    var $sub = document.getElementById('errorTypeSub');
                    var $selected = document.getElementById('selectedErrorType');
                    var $hidden = document.getElementById('errorTypeValue');

                    Object.keys(cascaderData).forEach(function(mainKey) {
                        var div = document.createElement('div');
                        div.className = 'cascader-item';
                        div.textContent = mainKey;
                        div.dataset.main = mainKey;
                        $main.appendChild(div);

                        div.addEventListener('mouseover', function () {
                            $sub.innerHTML = '';
                            cascaderData[this.dataset.main].forEach(function(subItem) {
                                var subDiv = document.createElement('div');
                                subDiv.className = 'cascader-item';
                                subDiv.textContent = subItem.label;
                                subDiv.dataset.value = subItem.value;
                                $sub.appendChild(subDiv);

                                subDiv.addEventListener('click', function(e) {
                                    e.stopPropagation();
                                    $selected.textContent = this.textContent;
                                    $hidden.value = this.dataset.value;
                                    $menu.style.display = 'none';
                                });
                            });
                        });
                    });

                    $dropdown.addEventListener('click', function(e) {
                        e.stopPropagation();
                        $menu.style.display = ($menu.style.display === 'flex') ? 'none' : 'flex';
                    });

                    document.addEventListener('click', function() {
                        $menu.style.display = 'none';
                    });

                    // 回填旧值
                    var existingValue = $hidden.value;
                    if (existingValue) {
                        errorTypeDict.forEach(function(item){
                            if(item.dictValue === existingValue){
                                $selected.textContent = item.dictLabel;
                            }
                        });
                    } else {
                        $selected.textContent = '请选择';
                    }
                });
            </script>



            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">错误级别：</label>
                    <div class="col-sm-8">
                        <select name="errorGrade" class="form-control" th:with="type=${@dict.getType('trs_error_grade')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{errorType}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label ">生效开始时间：</label>
                    <div class="col-sm-8">
                        <input type="text"
                               th:value="${trsSensitiveWords.effectstart != null} ? ${#dates.format(trsSensitiveWords.effectstart, 'yyyy-MM-dd')} : ''"
                               class="time-input"
                               placeholder="yyyy-MM-dd"
                               name="effectstart"/>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label ">生效结束时间：</label>
                    <div class="col-sm-8">
                        <!-- 生效结束时间（带时间部分） -->
                        <input type="text"
                               th:value="${trsSensitiveWords.effectend != null} ? ${#dates.format(trsSensitiveWords.effectend, 'yyyy-MM-dd')} : ''"
                               class="time-input"
                               placeholder="yyyy-MM-dd"
                               name="effectend"/>
                    </div>
                </div>
            </div>
<!--            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">词典类型：</label>
                    <div class="col-sm-8">
                        <select name="dictType" class="form-control" th:with="type=${@dict.getType('trs_dict_type')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{dictType}"></option>
                        </select>
                    </div>
                </div>
            </div>-->
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "project/check";
        $("#form-check-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-check-edit').serialize());
            }
        }
    </script>
</body>
</html>