(function (vc) {
    vc.extends({
        el: '#nav',
        data: {
            nav: {
                moreNoticeUrl: '/#/pages/common/noticeManage',
                langs: [{
                    name: '中文',
                    lang: 'zh-cn'
                }, {
                    name: '繁体',
                    lang: 'cn'
                }, {
                    name: 'english',
                    lang: 'en'
                }, {
                    name: 'ខ្មែរ',
                    lang: 'Khmer'
                }],
                langName: 'Language',
                _currentCommunity: '',
                communityInfos: [],
                storeTypeCd: '',
                catalogs: [],
            },
            loginInfo: {
                logo: '',
                username: '',
                passwd: '',
                validateCode: '',
                errorInfo: '',
                areaId: '86',   // 存储选中的国区号值（字符串类型）
                areas: [],      // 存储所有国区号选项数据（与addOwner一致

            },
            // APK下载配置
            appDownloads: {
                owner: {
                    name: vc.i18n('业主端应用', 'login'),
                    url: '/install/ownerApp.apk', // APK文件路径
                    fileName: 'ownerApp.apk'
                },
                property: {
                    name: vc.i18n('物业端应用', 'login'),
                    url: '/install/propertyApp.apk', // APK文件路径
                    fileName: 'propertyApp.apk'
                }
            },
            imgUrlPrefix: '', // 从后端获取的域名前缀
            qrCodeReady: false, // 标记QRCode库是否加载完成
            selectedAreaLabel: '',
            selectedLang: 'zh-cn',
        },
        mounted: function () {
            this._initSysInfo();
            this.initLang();
        },

        _initEvent: function () {
            $that.$on('errorInfoEvent', function (_errorInfo) {
                $that.loginInfo.errorInfo = _errorInfo;
                console.log('errorInfoEvent 事件被监听', _errorInfo)
            });
            $that.$on('validate_code_component_param_change_event', function (params) {
                for (var tmpAttr in params) {
                    $that.loginInfo[tmpAttr] = params[tmpAttr];
                }
            });
            vc.on('login', 'doLogin', function () {
                $that.doLogin();
            })

            layui.use('form', function () {
                var form = layui.form;
                form.on('select(langSelect)', function (data) {
                    console.log('LayUI 捕获到的语言选择值：', data.value);
                    const selectedLang = $that.nav.langs.find(lang => lang.lang === data.value);
                    if (selectedLang) {
                        $that._changeLang(selectedLang);
                    } else {
                        console.error('未找到匹配的语言：', data.value);
                    }
                });
                form.render('select');
            });

            // 新增：监听 Layui 国区号下拉框的选择事件（通过 lay-filter="areaCodeSelect" 定位）
            layui.form.on('select(areaCodeSelect)', function (data) {
                // data.value：Layui 捕获到的选中值（即 item.statusCd，如 95）
                // data.elem：当前下拉框元素
                console.log('Layui 捕获到的国区号选择值：', data.value);

                // 关键：手动将 Layui 选中值赋值给 Vue 的 loginInfo.areaId
                $that.loginInfo.areaId = data.value;

                // 验证赋值结果（确保 Vue 数据已更新）
                console.log('Vue loginInfo.areaId 赋值后：', $that.loginInfo.areaId);
            });
        },

        _initMethod: function () {
            $that.clearCacheData();
            $that._loadSysInfo();

            console.log('开始初始化语言设置');
            console.log('开始初始化语言设置111111111111111111111111111111111111');
            $that.initLang();

            // 初始化语言设置（在页面加载完成后设置select）
            // $that.initLangSelect();

            // 通过前端方法获取地址前缀
            $that.imgUrlPrefix = $that._getCurrentUrlPrefix();
            console.log("动态获取的地址前缀：", $that.imgUrlPrefix);
            // 加载国区号字典（与addOwner逻辑完全一致）
            vc.getDict(
                'international_area_code_dictionary',
                'link_area_type',
                function (_data) {
                    // 关键修改：用$set强制Vue检测数组变化
                    $that.$set($that.loginInfo, 'areas', _data);
                    $that.$nextTick(() => {
                        console.log("DOM更新完毕，可以交互了");
                        layui.form.render('select');
                    });
                    console.log("国区号字典加载成功：", _data);
                    if (_data && _data.length > 0) {
                        $that.loginInfo.areaId = _data[0].statusCd;
                        const defaultItem = _data[0];
                        $that.selectedAreaLabel = `+${defaultItem.statusCd} (${defaultItem.name})`;
                    }
                },
                function (err) {
                    console.error("国区号字典加载失败：", err);
                }
            );
            if (window.QRCode) {
                console.log("qrcode.js加载成功");
                $that.qrCodeReady = true; // 标记库已就绪
            } else {
                console.error("qrcode.js未加载，请检查路径是否正确");
                $that.qrCodeReady = false;
            }

        },

        watch: {
            'loginInfo.areaId': function (newVal) {
                const matched = this.loginInfo.areas.find(item => item.statusCd === newVal);
                this.selectedAreaLabel = matched
                    ? `+${matched.statusCd} (${matched.name})`
                    : '';
            }
        },

        methods: {
            _initSysInfo: function () {
                let sysInfo = vc.getData("java110SystemInfo");
                let _that = this;
                if (!sysInfo) {
                    setTimeout(function () {
                        sysInfo = vc.getData("java110SystemInfo");
                        _that.logo = sysInfo.systemSimpleTitle;
                    }, 2000);
                    return;
                }
                this.logo = sysInfo.systemSimpleTitle;
            },
            initLang: function () {
                let _lang = vc.getData('JAVA110-LANG');
                console.log('从 localStorage 读取的语言:', _lang);

                // 如果没有有效语言或语言不在列表中，设置默认值
                if (!_lang || typeof _lang !== 'object' || !_lang.lang || !this.nav.langs.find(lang => lang.lang === _lang.lang)) {
                    _lang = {
                        name: '中文',
                        lang: 'zh-cn'
                    };
                    vc.saveData('JAVA110-LANG', _lang);
                    console.log('未找到有效语言，保存默认语言:', _lang);
                }

                // 设置 Vue 数据
                this.nav.langName = _lang.name;
                this.selectedLang = _lang.lang;
                console.log('同步 Vue 数据:', {langName: this.nav.langName, selectedLang: this.selectedLang});

                // 确保 Layui 渲染正确的选中值
                this.$nextTick(() => {
                    layui.use('form', function () {
                        var form = layui.form;
                        form.val('langForm', {
                            langSelect: _lang.lang
                        });
                        form.render('select');
                        console.log('LayUI 下拉框渲染完成，选中值:', _lang.lang);
                    });
                });
            },
            _changeLang: function (_lang) {
                console.log('切换语言:', _lang);
                vc.saveData('JAVA110-LANG', _lang);
                console.log('保存后 localStorage:', vc.getData('JAVA110-LANG'));

                // 更新 Vue 数据
                this.nav.langName = _lang.name;
                this.selectedLang = _lang.lang;
                console.log('更新 Vue 数据:', {langName: this.nav.langName, selectedLang: this.selectedLang});

                // 使用原生 DOM 设置 select 值
                this.$nextTick(() => {
                    layui.use('form', function () {
                        var form = layui.form;
                        var select = document.querySelector('select[name="langSelect"]');
                        if (select) {
                            select.value = _lang.lang;
                        } else {
                            console.error('未找到 langSelect 元素');
                        }
                        form.render('select');
                        console.log('LayUI 下拉框更新，选中值:', _lang.lang);
                    });

                    setTimeout(() => {
                        console.log('测试刷新');
                        location.reload();
                    }, 100);
                });
            },
            onLangChange: function () {
                const selectedLang = this.nav.langs.find(lang => lang.lang === this.selectedLang);
                if (selectedLang) {
                    this._changeLang(selectedLang);
                }
            },
            onAreaInputChange(event) {
                const inputVal = event.target.value;

                // 匹配输入的文本是否存在于下拉项中
                const matched = this.loginInfo.areas.find(
                    item => inputVal === `+${item.statusCd} (${item.name})`
                );

                if (matched) {
                    this.loginInfo.areaId = matched.statusCd; // 设置提交用的真实值
                } else {
                    this.loginInfo.areaId = ''; // 未匹配则清空
                }

                console.log('输入变更，选中areaId:', this.loginInfo.areaId);
            },

            clearCacheData: function () {
                //todo anfioo

                let lang = vc.getData('JAVA110-LANG');
                let sys = vc.getData('sysInfo');

                vc.clearCacheData();
                vc.saveData("JAVA110-LANG", lang);
                vc.saveData("_sysInfo", sys);
            },

            _loadSysInfo: function () {
                var param = {
                    params: {
                        sys: 'HC'
                    }
                }
                vc.http.get(
                    'login',
                    'getSysInfo',
                    param,
                    function (json, res) {
                        //vm.menus = vm.refreshMenuActive(JSON.parse(json),0);
                        if (res.status != 200) {
                            console.log("加载系统信息失败");
                            vc.saveData("_sysInfo", {logo: 'HC'});
                            vc.copyObject(json, $that.loginInfo);
                            return;
                        }
                        vc.copyObject(JSON.parse(json), $that.loginInfo);
                        //保存到浏览器
                        vc.saveData("_sysInfo", JSON.parse(json));
                    },
                    function (errInfo, error) {
                        console.log('请求失败处理');
                        vc.saveData("_sysInfo", {logo: 'HC'});
                        vc.copyObject(json, $that.loginInfo);
                        $that.loginInfo.errorInfo = errInfo;
                    });
            },
            // 新增：获取当前页面地址前缀的工具方法
            _getCurrentUrlPrefix: function () {
                const {protocol, hostname, port} = window.location;
                // 拼接基础前缀（协议+主机名）
                let prefix = `${protocol}//${hostname}`;
                // 若有非默认端口（http默认80/https默认443），则拼接端口
                if (port && !(protocol === 'http:' && port === '80') && !(protocol === 'https:' && port === '443')) {
                    prefix += `:${port}`;
                }
                return prefix;
            },


            // 新增：URL拼接工具方法（处理斜杠问题）
            _joinUrl: function (prefix, path) {
                // 如果前缀为空，直接返回路径
                if (!prefix) return path;
                // 如果路径为空，直接返回前缀
                if (!path) return prefix;
                // 去除前缀末尾的斜杠
                const cleanPrefix = prefix.replace(/\/$/, '');
                // 去除路径开头的斜杠
                const cleanPath = path.replace(/^\//, '');
                // 拼接（中间加一个斜杠）
                return `${cleanPrefix}/${cleanPath}`;
            },


            doLogin: function () {
                // 验证国区号（改为areaId）
                if (!vc.notNull($that.loginInfo.areaId)) {
                    vc.toast(vc.i18n('请选择国区号', 'login'));
                    return;
                }
                if (!vc.notNull($that.loginInfo.username)) {
                    vc.toast(vc.i18n('用户名不能为空', 'login'));
                    return;
                }
                if (!vc.notNull($that.loginInfo.passwd)) {
                    vc.toast(vc.i18n('密码不能为空', 'login'));
                    return;
                }
                if (!vc.notNull($that.loginInfo.validateCode)) {
                    vc.toast(vc.i18n('验证码不能为空', 'login'));
                    return;
                }
                // 拼接国区号（areaId）和用户名
                let loginParam = JSON.parse(JSON.stringify($that.loginInfo));
                // 核心修改：使用areaId拼接（与字段名保持一致）
                loginParam.username = $that.loginInfo.areaId + $that.loginInfo.username;

                // 2. 关键修改：给 loginInfo 新增 statusCd 字段，值等于 areaId（与后端字段名匹配）
                $that.loginInfo.statusCd = $that.loginInfo.areaId;

                vc.http.post(
                    'login',
                    'doLogin?version=2.0',
                    JSON.stringify($that.loginInfo), {
                        emulateJSON: true
                    },
                    function (json, res) {
                        //vm.menus = vm.refreshMenuActive(JSON.parse(json),0);
                        let _json = JSON.parse(json);
                        if (_json.code != 0) {
                            vc.toast(_json.msg);
                            return;
                        }
                        let _data = _json.data;
                        vc.emit('initData', 'loadCommunityInfo', {
                            url: '/',
                            loginUsers: _data
                        });
                    },
                    function (errInfo, error) {
                        console.log('请求失败处理');
                        vc.toast(errInfo);
                        $that.loginInfo.errorInfo = errInfo;
                    });
            },
            _doRegister: function () {
                vc.jumpToPage('/user.html#/pages/frame/register');
            },

            // 1. 提取独立的二维码生成函数（复用你提供的逻辑，路径写死为百度）
            generateQRCode: function (container, url, size = 80) {
                const qrContent = url;
                // 1. 检查容器是否存在（container 是外层 div）
                if (!container) {
                    console.error('二维码生成失败：容器不存在');
                    return;
                }
                // 2. 清空容器，动态创建 canvas 元素（关键步骤）
                container.innerHTML = '';
                // 创建 canvas 元素
                const canvas = document.createElement('canvas');
                // 将 canvas 放入容器 div 中
                container.appendChild(canvas);
                // 检查容器是否存在、qrcode库是否就绪
                if (!$that.qrCodeReady) {
                    console.error('二维码生成失败：qrcode.js 未加载');
                    return;
                }
                // 设置canvas尺寸（适配容器）
                canvas.width = size;
                canvas.height = size;

                // 调用qrcode.js生成二维码（复用你提供的配置）
                QRCode.toCanvas(canvas, qrContent, {
                    width: size,
                    margin: 1,
                    color: {
                        dark: "#000000",
                        light: "#ffffff"
                    }
                }, function (error) {
                    if (error) {
                        console.error('生成二维码失败:', error)
                    }
                })
            },


            // 2. 物业端APP下载弹窗（使用新的generateQRCode函数）
            directDownload: function () {
                var content = '<div style="padding: 20px; text-align: center;">' +
                    '<p style="margin-bottom: 20px;">' + vc.i18n('请选择要安装的方式', 'login') + '</p>' +
                    '<div style="display: flex; justify-content: center; align-items: center; gap: 80px;">' +
                    // 二维码区域
                    '<div style="text-align: center;">' +
                    '<p style="margin-bottom: 10px;">' + vc.i18n('扫描二维码下载', 'login') + '</p>' +
                    '<div class="qr-app-option" data-app="property" style="text-align: center; cursor: pointer;">' +
                    '<div class="qr-container" style="width: 80px; height: 80px; margin: 0 auto 10px; border: 1px solid #eee;"></div>' +
                    '<span>' + vc.i18n('物业端应用', 'login') + '</span>' +
                    '</div>' +
                    '</div>' +
                    // 按钮区域
                    '<div style="text-align: center;">' +
                    '<p style="margin-bottom: 10px;">' + vc.i18n('点击下载', 'login') + '</p>' +
                    '<button class="layui-btn layui-btn-normal download-app-btn" data-app="property" style="margin-bottom: 10px;">' + vc.i18n('物业端APP下载', 'login') + '</button>' +
                    '</div>' +
                    '</div>' +
                    '</div>';

                var index = layer.open({
                    type: 1,
                    title: vc.i18n('请选择要安装的方式', 'login'),
                    area: ['400px', '300px'],
                    content: content,
                    success: function (layero, index) {
                        //获取物业端应用的完整下载URL
                        var appType = 'property';
                        var appInfo = $that.appDownloads[appType];
                        var fullDownloadUrl = $that._joinUrl($that.imgUrlPrefix, appInfo.url);

                        // 调用新的二维码生成函数（尺寸80px）
                        var qrContainer = layero.find('.qr-container')[0];
                        $that.generateQRCode(qrContainer, fullDownloadUrl, 80);

                        // 按钮点击事件（保留原下载逻辑）
                        layero.find('.download-app-btn').on('click', function () {
                            var appType = $(this).data('app');
                            $that.downloadApp(appType);
                            layer.close(index);
                        });
                        layero.find('.qr-app-option').on('click', function () {
                            var appType = $(this).data('app');
                            var appInfo = $that.appDownloads[appType];
                            var fullDownloadUrl = $that._joinUrl($that.imgUrlPrefix, appInfo.url);
                            // 传递固定的百度链接作为二维码内容
                            $that.showQrCode(appType, fullDownloadUrl);
                            layer.close(index);
                        });
                    }
                });
            },

            // 3. 业主端APP下载弹窗（使用新的generateQRCode函数）
            showQrOptions: function () {
                var content = '<div style="padding: 20px; text-align: center;">' +
                    '<p style="margin-bottom: 20px;">' + vc.i18n('请选择要安装的方式', 'login') + '</p>' +
                    '<div style="display: flex; justify-content: center; align-items: center; gap: 80px;">' +
                    // 二维码区域
                    '<div style="text-align: center;">' +
                    '<p style="margin-bottom: 10px;">' + vc.i18n('扫描二维码下载', 'login') + '</p>' +
                    '<div class="qr-app-option" data-app="owner" style="text-align: center; cursor: pointer;">' +
                    '<div class="qr-container" style="width: 80px; height: 80px; margin: 0 auto 10px; border: 1px solid #eee;"></div>' +
                    '<span>' + vc.i18n('业主端应用', 'login') + '</span>' +
                    '</div>' +
                    '</div>' +
                    // 按钮区域
                    '<div style="text-align: center;">' +
                    '<p style="margin-bottom: 10px;">' + vc.i18n('点击下载', 'login') + '</p>' +
                    '<button class="layui-btn layui-btn-normal download-app-btn" data-app="owner" style="margin-bottom: 10px;">' + vc.i18n('业主端APP下载', 'login') + '</button>' +
                    '</div>' +
                    '</div>' +
                    '</div>';
                var index = layer.open({
                    type: 1,
                    title: vc.i18n('请选择要安装的方式', 'login'),
                    area: ['400px', '300px'],
                    content: content,
                    success: function (layero, index) {
                        // 获取业主端应用的完整下载URL
                        var appType = 'owner';
                        var appInfo = $that.appDownloads[appType];
                        var fullDownloadUrl = $that._joinUrl($that.imgUrlPrefix, appInfo.url);
                        // 调用新的二维码生成函数（尺寸80px）
                        var qrContainer = layero.find('.qr-container')[0];
                        $that.generateQRCode(qrContainer, fullDownloadUrl, 80);

                        // 按钮点击事件
                        layero.find('.download-app-btn').on('click', function () {
                            var appType = $(this).data('app');
                            $that.downloadApp(appType);
                            layer.close(index);
                        });
                        layero.find('.qr-app-option').on('click', function () {
                            var appType = $(this).data('app');
                            var appInfo = $that.appDownloads[appType];
                            var fullDownloadUrl = $that._joinUrl($that.imgUrlPrefix, appInfo.url);
                            // 传递固定的百度链接作为二维码内容
                            $that.showQrCode(appType, fullDownloadUrl);
                            layer.close(index);
                        });
                    }
                })
            },
            // 4. 大尺寸二维码弹窗（使用新的generateQRCode函数）
            showQrCode: function (appType, apkUrl) {
                var appInfo = $that.appDownloads[appType];
                // 弹窗内容（显示链接）
                var content = '<div style="text-align: center; padding: 20px;">' +
                    '<h3>' + appInfo.name + '</h3>' +
                    '<div class="large-qr-container" style="width: 200px; height: 200px; margin: 15px auto; border: 1px solid #eee;"></div>' +
                    '<p style="color: #333; margin-bottom: 15px;">' + vc.i18n('请使用手机扫描二维码下载', 'login') + '</p>' +
                    '<p style="color: #999; font-size: 14px;">' + vc.i18n('链接地址:', 'login') + ' ' + apkUrl + '</p>' +
                    '</div>';

                var index = layer.open({
                    type: 1,
                    title: appInfo.name + ' - ' + vc.i18n('扫码访问', 'login'),
                    area: ['350px', '450px'],
                    content: content,
                    success: function (layero, index) {
                        // 调用新的二维码生成函数（尺寸200px，大尺寸）
                        var largeQrContainer = layero.find('.large-qr-container')[0];
                        $that.generateQRCode(largeQrContainer, apkUrl, 200);
                    }
                });
            },

            // 下载应用方法
            downloadApp: function (appType) {
                var appInfo = $that.appDownloads[appType];
                var fullDownloadUrl = $that._joinUrl($that.imgUrlPrefix, appInfo.url);

                // 创建隐藏的下载链接并触发点击
                var link = document.createElement('a');
                link.href = fullDownloadUrl;
                link.download = appInfo.fileName;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);

                // 关闭弹窗
                layer.closeAll();
            },
        },
        _destroyedMethod: function () {
            console.log("登录页面销毁调用");
        }
    });
})(window.vc);