<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="stylesheet" href="css/page_common.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>谷医堂电子证明</title>
    <style>

        .put-code {
            display: flex;
            align-items: flex-start;
            position: relative;
            width: 100%;
            margin: 10px 0px 10px 10px;
        }
        .get-code {
            border: none; /* 移除边框 */
            background-color: #fff;
            color: #009688;
            padding: 0; /* 去除内边距 */
            text-align: center;
            margin-top: 0; /* 调整以确保在同一行 */
            cursor: pointer;
            position: absolute;
            bottom: 15px; /* 放在底部 */
            right: 10px; /* 右侧间距 */
        }

        /*.get-code.disabled {*/
        /*    cursor: not-allowed;*/
        /*    background-color: #cccccc;*/
        /*}*/

        /*.warning {*/
        /*    font-size: 14px;*/
        /*    text-align: start;*/
        /*    margin: 120px 20px;*/
        /*    color: red;*/
        /*}*/
        /*.error-container {*/
        /*    display: flex; !* 使用 Flexbox 对齐 *!*/
        /*    justify-content: flex-start; !* 水平右对齐 *!*/
        /*    width: 100%; !* 使其占满一行 *!*/
        /*}*/

        /*.error-message {*/
        /*    color: red;*/
        /*    font-size: 14px;*/
        /*    !*margin-left: px; !* 添加左边距 *!*!*/
        /*    display: none; !* 默认隐藏 *!*/
        /*}*/

        /*!* 媒体查询用于不同屏幕尺寸 *!*/
        /*@media (min-width: 768px) {*/
        /*    body {*/
        /*        padding: 20px; !* 让PC端左右有边距 *!*/
        /*    }*/
        /*    .container {*/
        /*        width: 50%; !* PC端容器宽度 *!*/
        /*    }*/
        /*}*/

    </style>
</head>
<body>

<div class="container">
    <div class="header">
        <h2>谷医堂电子证明</h2>
    </div>
    <div class="form">
        <div class="form-group">
            <label for="phone">手机号</label>
            <input type="text" id="phone" placeholder="请输入在职时预留手机号码">
        </div>

        <div class="form-group">
            <label for="code">验证码</label>
            <div class="put-code">
                <input type="text" id="code" placeholder="请输入验证码">
                <button class="get-code" id="sendCode">获取验证码</button> <!-- 确保这个ID已添加 -->
            </div>
        </div>
        <div class="error-container">
            <span class="error-message"  id="error_msg">用户名不能为空</span>
        </div>
    </div>

    <button class="login-button" id="submitBtn"  type="submit">登录</button>

    <div class="warning">
        温馨提示：<br>
        本功能仅供咨询和下载已开放证明文件。如需开具证明，请联系相应的HRBP或SSC。
    </div>
</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/main.js"></script>
<script>

    $(document).ready(function () {
        function sendVerificationCode(phone, role, btn) {
            $('.error-message').hide();
            if (!phone) {
                $('#error_msg').text('请输入手机号码');
                $('#error_msg').show();
                return;
            }
            //点击之后禁用按钮3秒，防止多次点击
            btn.addClass('disabled'); // 添加禁用样式
            btn.off('click'); // 取消按钮的点击事件
            setTimeout(function () {
                btn.removeClass('disabled'); // 解除禁用样式
                btn.on('click', function () { // 重新绑定点击事件
                    sendVerificationCode($('#phone').val(), role, btn); // 重新发送验证码
                });
            }, 3000);

            $.ajax({
                url: '/user/sendCode', // 实际的接口 URL
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ phone: phone, role: role }),
                success: function (response) {
                    if (response.success) {
                        let countdown = 60; // 设置倒计时时间为60秒
                        startCountdown(btn, countdown);
                    } else {
                        $('#error_msg').text(  response.message);
                        $('#error_msg').show();
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $('#error_msg').text('服务器内部错误: ' + textStatus);
                    $('#error_msg').show();
                }
            });
        }

        function startCountdown(btn, countdown) {
            btn.text(`${countdown}秒后可重新发送`);
            btn.css({ backgroundColor: '#e0e0e0', color: '#999' }); // 改变按钮样式，表示不可点击
            btn.off('click'); // 取消按钮的点击事件

            const timer = setInterval(function () {
                countdown--;
                btn.text(`${countdown}秒后可重新发送`);
                if (countdown <= 0) {
                    clearInterval(timer);
                    btn.text('获取验证码');
                    btn.css({ backgroundColor: '#fff', color: '#009688' }); // 恢复按钮样式
                    btn.on('click', function () { // 重新绑定点击事件
                        sendVerificationCode($('#phone').val(), 2, btn); // 重新发送验证码
                    });
                }
            }, 1000);
        }

// 用于绑定事件的示例
        $('#sendCode').on('click', function () {
            // $('.error-message').hide();
            const role = 2; // 或根据实际逻辑设置角色
            sendVerificationCode($('#phone').val(), role, $(this));
        });



        // 登录表单提交
        $('#submitBtn').on('click', function (event) {
            event.preventDefault();
            $('.error-message').hide();

            const phone = $('#phone').val();
            const code = $('#code').val();
            if (phone.trim() === '') {
                $('#error_msg').text('请输入手机号码');
                $('#error_msg').show();
                return;
            }

            if (code.trim() === '') {
                $('#error_msg').text('请输入验证码');
                $('#error_msg').show();
                return;
            }

            const codeRegex = /^\d{6}$/;
            if (!codeRegex.test(code)) {
                $('#error_msg').text('验证码必须是6位纯数字');
                $('#error_msg').show();
                return;
            }

            validateCode(phone, code);
        });

        /*
         * ajax 表单提交验证
         */
        function validateCode(phone,code) {
            $.ajax({
                url: '/user/verifyCode',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ phone: phone, code: code }),
                success: function (response) {
                    if (response.success) {
                        goToIdentityPage(phone,code);
                    } else {
                        $('#error_msg').text('登录失败: ' + response.message);
                        $('#error_msg').show();
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $('#error_msg').text('登录失败: ' + errorThrown);
                    $('#error_msg').show();
                }
            });
        }

        /**
         * 返回身份证填写页面
         */
        function goToIdentityPage(phone,code) {
            // 携带参数,并跳转到身份证填写页面
            window.location.href = '/normalUser/identity?phone=' + phone + '&code=' + code;
        }


    });


</script>
</body>
</html>
