<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/jquery.i18n.properties.js}"></script>
    <div id="root-path" th:text="${#servletContext.contextPath}" style="display:none;"></div>
    <div id="lang-country" th:text="${#locale.language + '_' + #locale.country}" style="display:none;"></div>
    <script th:src="@{/js/i18n.js}"></script>
    <title th:text="#{user.login.title}"></title>
    <meta name="description" content="呼叫管理系统">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet"/>
    <link href="../static/css/theme-modern.css" th:href="@{/css/theme-modern.css?v=20260524}" rel="stylesheet"/>
    <link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.7.10}" rel="stylesheet"/>
    <!-- 360浏览器急速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
    <style type="text/css">label.error { position:inherit;  }</style>
    <script>
        if(window.top!==window.self){alert('未登录或登录超时。请重新登录');window.top.location=window.location};
    </script>

    <script th:inline="javascript">
        // //获取国际化翻译值
        // console.log("-----------------")
        // console.log(ROOT)
        // console.log(LANG_COUNTRY)
        // console.log(i18n('user.login.username'));
        // console.log(i18n('user.login.password'));
        // console.log(i18n('user.login.code'));
        // console.log(i18n('user.login.remember'));
        // console.log(i18n('user.login.submit'));
    </script>

    <style>
        .language-selector {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            gap: 10px;
        }

        .lang-option {
            color: #fff;
            text-decoration: none;
            font-size: 14px;
        }

        .lang-option:hover {
            text-decoration: underline;
        }

        /* 下拉框样式 - 白色背景，黑色文字 */
        #groupId {
            background-color: #ffffff;   /* 白色背景 */
            color: #333333;              /* 黑色文字 */
            border: 1px solid #dcdcdc;   /* 浅灰色边框 */
            border-radius: 3px;
            padding: 8px 12px;
            height: 40px;
            font-size: 14px;
            width: 100%;
            cursor: pointer;
        }

        /* 下拉框选项样式 */
        #groupId option {
            background-color: #ffffff;   /* 选项白色背景 */
            color: #333333;              /* 选项黑色文字 */
            padding: 8px;
        }

        /* 下拉框聚焦样式 */
        #groupId:focus {
            background-color: #ffffff;
            border-color: #1abc9c;
            outline: none;
            color: #333333;
        }

        /* 下拉框悬停样式 */
        #groupId:hover {
            background-color: #f5f5f5;   /* 悬停时浅灰背景 */
        }

        /* 占位符选项样式（第一个选项） */
        #groupId option:first-child {
            color: #999999;              /* 灰色提示文字 */
        }
    </style>
</head>
<body class="signin">
    <div class="language-selector">
        <a href="javascript:void(0);" class="lang-option" onclick="setLanguage('en_US')">英语</a>
        <a href="javascript:void(0);" class="lang-option" onclick="setLanguage('zh_CN')">中文</a>
<!--        <a href="javascript:void(0);" class="lang-option" onclick="setLanguage('ja_JP')">日语</a>-->
    </div>
    <div class="signinpanel">
        <div class="row">
            <div class="col-sm-7">
                <div class="signin-info">
                    <div class="m-b"></div>
                    <h2 th:text="#{user.login.welcome} + ' ' + #{sys.sysName} "></h2>
                </div>
            </div>
            <div class="col-sm-5">
                <form id="signupForm" autocomplete="off">
                    <h4 class="no-margins"><span th:text="#{user.login.submit}"></span>：</h4>
                    <input type="text"     name="username" class="form-control uname"     th:attr="placeholder=#{user.login.username}"    />
                    <input type="password" name="password" class="form-control pword"     th:attr="placeholder=#{user.login.password}" />
                    <input type="text"     name="extNum" class="form-control uname"     th:attr="placeholder=#{user.login.extnum}"    />
                    <select th:if="${showDynamicGroupid==true}" name="groupId" id="groupId" class="form-control m-t">

                    </select>
                    <div class="row m-t" th:if="${captchaEnabled==true}">
						<div class="col-xs-6">
						    <input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5" />
						</div>
						<div class="col-xs-6">
							<a href="javascript:void(0);" title="点击更换验证码">
								<img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
							</a>
						</div>
					</div>
                    <div class="checkbox-custom" th:if="${isRemembered}" th:classappend="${captchaEnabled==false} ? 'm-t'">
				        <input type="checkbox" id="rememberme" name="rememberme"> <label for="rememberme" th:text="#{user.login.remember}"></label>
				    </div>
                    <button class="btn btn-success btn-block" id="btnSubmit" data-loading="正在验证登录，请稍候..."><span th:text="#{user.login.submit}"></span></button>
                </form>
            </div>
        </div>
        <div class="signup-footer">
            <div class="pull-left">
                Copyright 云联 All Rights Reserved. <br>
            </div>
        </div>
    </div>
<script th:inline="javascript">
    var ctx = [[@{/}]];
    var captchaType = [[${captchaType}]];
    var captchaEnabled = [[${captchaEnabled}]];
    var sysVersion = [[${sysVersion}]];
    var showDynamicGroupid = [[${showDynamicGroupid}]];

    // 加载业务组列表
    function loadBusiGroups() {
        if (!showDynamicGroupid) return;

        $.ajax({
            url: ctx + 'aicall/api/busigroup/list',
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                if (response && response.code === 0) {
                    var $select = $('#groupId');
                    $select.empty();
                    if (response.data && response.data.length > 0) {
                        $.each(response.data, function(index, item) {
                            var value = item.groupId || '';
                            var text = item.bizGroupName || '';
                            $select.append('<option value="' + value + '">' + text + '</option>');
                        });
                    }
                } else {
                    console.error('获取业务组列表失败:', response);
                }
            },
            error: function(xhr, status, error) {
                console.error('请求业务组列表失败:', error);
            }
        });
    }

    // 页面加载完成后初始化
    $(document).ready(function() {
        loadBusiGroups();
    });

</script>
<!--[if lte IE 8]><script>window.location.href=ctx+'html/ie.html';</script><![endif]-->
<!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.7.11}"></script>
<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>
<script th:inline="javascript">
    function setLanguage(lang) {
        console.log('设置语言：' + lang)
        if (lang) {
            localStorage.setItem('lang', lang); // 存储语言到本地存储
            window.location.href = window.location.pathname + "?lang=" + lang; // 通过 URL 参数切换语言
        }
    }

    document.querySelectorAll('.lang-option').forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault(); // 阻止默认行为
            setLanguage(this.getAttribute('data-lang'));
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
        // 从 URL 参数获取语言设置
        var lang = new URLSearchParams(window.location.search).get('lang');
        // 如果 URL 参数中没有语言设置，则从本地存储获取
        if (!lang) {
            lang = localStorage.getItem('lang');
        }
        // 如果本地存储中也没有语言设置，则从浏览器设置获取
        if (!lang) {
            lang = navigator.language || 'en_US'; // 默认值为 'en_US'
        }
        console.log('当前语言：' + lang);
        localStorage.setItem('lang', lang); // 更新本地存储的语言设置

        // 如果 URL 中没有 lang 参数，且本地存储中有 lang 设置，则更新 URL 参数
        if (lang && !new URLSearchParams(window.location.search).has('lang')) {
            setLanguage(lang);
            // window.history.replaceState({}, document.title, window.location.pathname + "?lang=" + lang);
        }
    });

    // document.addEventListener('DOMContentLoaded', function() {
    //     var lang = new URLSearchParams(window.location.search).get('lang') || localStorage.getItem('lang') || 'en_US';
    //     console.log('当前语言：' + lang)
    //     localStorage.setItem('lang', lang); // 更新本地存储的语言设置
    //
    //     // 如果 URL 中没有 lang 参数，且本地存储中有 lang 设置，则更新 URL 参数
    //     if (lang && !new URLSearchParams(window.location.search).has('lang')) {
    //         setLanguage(lang)
    //         // window.history.replaceState({}, document.title, window.location.pathname + "?lang=" + lang);
    //     }
    // });
</script>
</body>
</html>
