<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>MySQL 设置</title>
    <!-- 可以在这里添加CSS样式 -->
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 500px;
            margin: 10px auto;
            background: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h3 {
            text-align: center;
        }

        label {
            margin-top: 10px;
        }

        input {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .button {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .button:hover {
            background-color: #0056b3;
        }

        /* 模态对话框背景 */
        .modal {
            display: none;
            /* 默认隐藏 */
            position: fixed;
            /* 固定位置 */
            z-index: 1;
            /* 层叠顺序 */
            left: 0;
            top: 0;
            width: 100%;
            /* 全屏宽度 */
            height: 100%;
            /* 全屏高度 */
            overflow: auto;
            /* 启用滚动条 */
            background-color: rgba(0, 0, 0, 0.4);
            /* 半透明黑色背景 */
        }

        /* 模态对话框内容 */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            /* 15% 从顶部开始,居中 */
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            /* 或者设置为固定宽度 */
        }

        /* 关闭按钮 */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        .tab {
            overflow: hidden;
        }

        /* Tab按钮样式 */
        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
        }

        /* 活动的tab按钮高亮 */
        .tab button:hover {
            background-color: #ddd;
        }

        .tab button.active {
            background-color: #ccc;
        }

        /* Tab页内容样式 */
        .tabcontent {
            display: none;
            padding: 6px 12px;
            border-top: 1px solid #ccc;
            flex-direction: column;
        }
    </style>
</head>

<body>
    <div class="container">
        <h3>MySQL 设置</h3>
        <div class="tab">
            <button class="tablinks" onclick="openTab(event, 'General')">常规设置</button>
            <button class="tablinks" onclick="openTab(event, 'Password')">设置密码</button>
        </div>
        <div id="General" class="tabcontent">
            <label for="dataDir">存储地址:</label>
            <input type="text" id="dataDir" name="dataDir">

            <label for="logDir">日志地址:</label>
            <input type="text" id="logDir" name="logDir">

            <label for="port">端口号:</label>
            <input type="text" id="port" name="port">

            <button type="submit" id="saveConfig" class="button">保存</button>
        </div>
        <div id="Password" class="tabcontent">
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" placeholder="请输入数据库密码,不能小于3位">

            <button type="submit" id="savePwd" class="button">保存</button>
        </div>
    </div>
    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <p id="modalText"></p>
        </div>
    </div>
    <script>
        function openTab(evt, tabName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(tabName).style.display = "flex";
            evt.currentTarget.className += " active";
        }
        document.addEventListener('DOMContentLoaded', function () {
            let localData = localStorage.getItem('mysqlSettings');
            if (localData) {
                localData = JSON.parse(localData);
                // 填充表单字段
                document.getElementById('dataDir').value = localData.dataDir;
                document.getElementById('logDir').value = localData.logDir;
                document.getElementById('port').value = localData.port;
                //document.getElementById('password').value = savedData.password;
            }
            // 获取模态对话框元素
            const modal = document.getElementById("myModal");
            // 获取关闭按钮
            const span = document.getElementsByClassName("close")[0];
            // 获取模态对话框文本
            const modalText = document.getElementById("modalText");
            // 页面加载时激活第一个 tab
            document.querySelector('.tablinks:first-child').click();


            function showMsg(msg) {
                // 替换 alert 为显示模态对话框
                modal.style.display = "block";
                modalText.textContent = msg;
            }
            async function OpenDirDialog() {
                if (window.go) {
                    return window['go']['app']['App']['OpenDirDialog']();
                } else {
                    return ""
                }
            }
            document.getElementById('dataDir').addEventListener('click', async function () {
                let dir = await OpenDirDialog();
                if (dir) {
                    document.getElementById('dataDir').value = dir;
                }
            });
            document.getElementById('logDir').addEventListener('click', async function () {
                let dir = await OpenDirDialog();
                if (dir) {
                    document.getElementById('logDir').value = dir;
                }
            });
            // 添加事件监听器来处理表单提交
            document.getElementById('saveConfig').addEventListener('click', async function (event) {
                event.preventDefault(); // 阻止默认的表单提交行为

                // 获取表单字段的值
                const dataDir = document.getElementById('dataDir').value;
                const logDir = document.getElementById('logDir').value;
                const port = document.getElementById('port').value;

                // 表单字段的校验
                if (!dataDir || !logDir || !port) {
                    showMsg('所有字段都是必填项!');
                    return;
                }

                // 端口应该是一个数字
                if (isNaN(port)) {
                    showMsg('端口号必须是一个数字!');
                    return;
                }

                // 假设端口号应该在 1 到 65535 之间
                if (port < 1 || port > 65535) {
                    showMsg('端口号必须在 1 到 65535 之间!');
                    return;
                }
                const postData = {
                    dataDir: dataDir,
                    logDir: logDir,
                    port: port,
                    name: "mysql5.7",
                    cmdKey: "setting"
                }
                const comp = await fetch('http://localhost:56780/store/setting', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(postData)
                });
                if (!comp.ok) {
                    showMsg('设置失败');
                    return;
                }
                // 存储数据到 localStorage
                localStorage.setItem('mysqlSettings', JSON.stringify(postData));
                showMsg('设置成功');
            });
            document.getElementById('savePwd').addEventListener('click', async function (event) {
                event.preventDefault(); // 阻止默认的表单提交行为

                // 获取表单字段的值
                const password = document.getElementById('password').value;

                // 表单字段的校验
                if (!password || password.length < 3) {
                    showMsg('密码不能为空');
                    return;
                }
                const pwData = {
                    password: password,
                    name: "mysql5.7",
                    cmdKey: "changePassword"
                }
                const res = await fetch('http://localhost:56780/store/setting', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(pwData)
                });
                if (!res.ok) {
                    showMsg('设置失败');
                    return;
                }

                showMsg('设置成功');
            });
            // 当用户点击关闭按钮时关闭模态对话框
            span.onclick = function () {
                modal.style.display = "none";
            }

            // 当用户点击模态对话框以外的地方时关闭模态对话框
            window.onclick = function (event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            }
        });
    </script>
</body>

</html>