<!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-add">
            <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" 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" 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>

                            <div class="col-sm-8">
                                <input type="hidden" class="form-control" name="errorType" id="errorTypeValue" value="">
                            </div>
                            <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>

                <style>
                    .error-type-dropdown {
                        position: relative;
                        display: inline-block;
                        width: 100%; /* 统一宽度 */

                        /* 模拟 .form-control 的视觉效果 */
                        font-size: 13px;
                        line-height: 1.42857143;
                        color: #676A6C;
                        background-color: #fff;

                    }
                    .error-type-dropdown .dropdown-toggle {
                        text-align: left;
                        width: 100%;
                        cursor: pointer;
                        position: relative;

                        /* 模拟 .form-control 的视觉效果 */
                        font-size: 13px;
                        line-height: 1.42857143;
                        color: #676A6C;
                        background-color: #fff;
                        background-image: none;
                        border: 1px solid #ccc;
                        border-radius: 4px;
                        padding: 6px 12px;
                        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
                    }


                    .error-type-dropdown .dropdown-toggle .caret {
                        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')}]]*/ [];
                    /*]]>*/
                </script>

                <script th:inline="javascript">
                    /*<![CDATA[*/
                    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';
                        });

                        // URL回填
                        var urlParams = new URLSearchParams(window.location.search);
                        var errorTypeVal = urlParams.get('errorType');
                        if (errorTypeVal) {
                            var found = false;
                            errorTypeDict.forEach(function(item){
                                if(item.dictValue === errorTypeVal){
                                    $selected.textContent = item.dictLabel;
                                    $hidden.value = item.dictValue;
                                    found = true;
                                }
                            });
                            if (!found) {
                                $selected.textContent = '所有';
                                $hidden.value = '';
                            }
                        } else {
                            $selected.textContent = '所有';
                            $hidden.value = '';
                        }

                        // 重置按钮处理
                        document.getElementById('formId').addEventListener('reset', function () {
                            setTimeout(function () {
                                document.getElementById('selectedErrorType').textContent = '所有';
                                document.getElementById('errorTypeValue').value = '';
                            }, 0);
                        });


                    });
                    /*]]>*/
                </script>
            </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="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}"></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" class="time-input" id="effectstart" placeholder="开始时间" 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" class="time-input" id="effectend" placeholder="开始时间" 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}"></option>
                        </select>
                    </div>
                </div>
            </div>-->
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "project/check"
        $("#form-check-add").validate({
            focusCleanup: true
        });

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