<template>
    <section class="h-full flex items-center login-bg">
        <div class="login-container">
            <div class="pig-tit">
                <p>牛只运输跟踪系统</p>
            </div>
            <div class="pig-container">
                <el-form ref="formRef" :model="form" :rules="rules">
                    <div class="con-tab" @click="toggleLoginMode">
                        <span :class="{ cur: form.loginType === 0 }" @click="changeLoginType(0)">用户名密码登录</span>
                        <!-- <em style="font-style: normal;">|</em> -->
                        <span :class="{ cur: form.loginType === 1 }" @click="changeLoginType(1)">手机验证码登录</span>
                        <em :class="{ cur: form.loginType === 1 }"></em>
                    </div>
                    <template v-if="form.loginType === 0">
                        <p class="info-title">手机号</p>
                        <el-form-item prop="mobile">
                            <el-input v-model="form.mobile" class="no-border-input" placeholder="请输入手机号" @keyup.enter="onSubmit" />
                        </el-form-item>
                        <p class="info-title">密码</p>
                        <el-form-item prop="password">
                            <el-input
                                placeholder="请输入密码"
                                v-model="form.password"
                                show-password
                                type="password"
                                @keyup.enter="onSubmit"
                            ></el-input>
                        </el-form-item>
                    </template>
                    <template v-if="form.loginType === 1">
                        <p class="info-title">手机号</p>
                        <el-form-item prop="mobile">
                            <el-input v-model="form.mobile" class="no-border-input" placeholder="请输入手机号" @keyup.enter="onSubmit" />
                        </el-form-item>
                        <p class="info-title">验证码</p>
                        <el-form-item prop="password">
                            <p class="info-yan" v-loading="getSmsCodeLoading" @click="getSmsCode">{{ title }}</p>
                            <el-input v-model="form.password" class="no-border-input info-fa" placeholder="请输入验证码" @keyup.enter="onSubmit">
                            </el-input>
                        </el-form-item>
                    </template>

                    <el-form-item class="login_Submitbtn">
                        <el-button :loading="loading" class="login_btn" type="primary" @click="onSubmit">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </section>
</template>
<script setup>
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { login, getSmsCodeByPhone } from '~/api/sys.js';
import { useUserStore } from '~/store/user';
import usePermissionStore from '~/store/permission.js';
import { setToken } from '@/utils/auth';
import { checkMobile } from '@/utils/validateFuns.js';
import { getUserMenu } from '@/api/sys.js';

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const title = ref('获取验证码');
const time = ref(0);
const getSmsCodeLoading = ref(false);

const form = reactive({
    mobile: '',
    password: '',
    loginType: 0,
});
const loading = ref(false);
const formRef = ref();
// 表单校验
const rules = {
    mobile: [
        {
            required: true,
            validator: (rule, value, callback) => {
                if (form.loginType === 0) {
                    if (!value) {
                        callback(new Error('登录用户名不能为空'));
                    }
                    callback();
                } else {
                    if (!checkMobile(form.mobile)) {
                        callback(new Error('请输入正确的手机号码'));
                    }
                    callback();
                }
                callback();
            },
            trigger: 'blur',
        },
    ],
    password: [
        {
            required: true,
            validator(rule, value, callback) {
                if (form.loginType === 0) {
                    if (!value) {
                        callback(new Error('登录密码不能为空'));
                    }
                    callback();
                } else {
                    if (!value || value.length !== 6) {
                        callback(new Error('短信验证码输入有误'));
                    }
                    callback();
                }
                callback();
            },
            trigger: 'blur',
        },
    ],
};
const resetForm = () => {
    form.mobile = '';
    form.password = '';
    form.loginType = 0;
    formRef.value.clearValidate();
};
const changeLoginType = (type) => {
    resetForm();
    form.loginType = type;
};

// eslint-disable-next-line consistent-return
const getSmsCode = () => {
    if (getSmsCodeLoading.value) return false;
    if (time.value > 0) return false;
    if (!checkMobile(form.mobile)) {
        ElMessage.error('请输入正确的手机号码');
        formRef.value.clearValidate();
        return false;
    }
    getSmsCodeLoading.value = true;
    title.value = '';
    getSmsCodeByPhone(form.mobile)
        .then(() => {
            title.value = `60s`;
            getSmsCodeLoading.value = false;
            time.value = 59;
            const timer = setInterval(() => {
                if (time.value > 0) {
                    title.value = `${time.value}s`;
                    // eslint-disable-next-line no-plusplus
                    time.value--;
                } else {
                    clearInterval(timer);
                    title.value = '获取验证码';
                }
            }, 1000);
        })
        .catch(() => {
            getSmsCodeLoading.value = false;
            title.value = '获取验证码';
        });
};
const onSubmit = async (val) => {
    formRef.value.validate((valid) => {
        if (valid) {
            loading.value = true;
            const params = { ...form };
            login(params)
                .then((ret) => {
                    // 写入用户登录信息
                    userStore.updateToken(ret.data.token);
                    userStore.updateUserName(ret.data.mobile);
                    userStore.updateLoginUser(ret.data.username);
                    userStore.updateLoginUserType(ret.data.userType);
                    userStore.updateRoleId(ret.data.roleId);
                    userStore.updatePermissions(ret.data.permissions || []);  // 保存权限列表
                    userStore.updateRoles(ret.data.roles || []);              // 保存角色列表
                    setToken(ret.data.token);
                    let redirect = route.query.redirect || '/';
                    if (redirect.indexOf('login') > -1) {
                        redirect = '/';
                    }
                    // router.push({ path: redirect });   此方法弃用，因为企业端和海关端没有相同系统模块，这样会导致页面空白
                    ElMessage.success('登录成功!');
                    // 更新为以下跳转方法 userType=1为监管端，userType=2为企业端，根据不同端来跳转不同页面
                    // if (ret.data.userType == 1) {
                    //     router.push({ path: '/system/post' });
                    // } else {
                    //     router.push({ path: '/personnel/role' });
                    // }
                    loading.value = false;
                    generateRoutes();
                })
                .catch((error) => {
                    loading.value = false;
                });
        }
    });
};
const generateRoutes = async () => {
    try {
        const ret = await getUserMenu();

        // 检查用户权限
        const userStore = useUserStore();
        const isSuperAdmin = userStore.permissions.includes('*:*:*') || userStore.roles.includes('admin');

        // 查找第一个有pageUrl的菜单项（type=1表示菜单）
        const findFirstMenuWithUrl = (menus) => {
            // 按sort排序，确保按顺序查找
            const sortedMenus = menus.sort((a, b) => (a.sort || 0) - (b.sort || 0));
            
            for (const menu of sortedMenus) {
                // 查找type=1（菜单）且有pageUrl的项目
                if (menu.type === 1 && menu.pageUrl) {

                    return menu;
                }
            }
            return null;
        };
        
        const firstMenu = findFirstMenuWithUrl(ret.data);
        
        // 根据用户类型和权限决定跳转页面
        let targetPath = '/';
        
        if (isSuperAdmin) {
            // 超级管理员优先跳转到系统管理页面
            targetPath = '/system/post';

        } else if (firstMenu) {
            // 普通用户跳转到第一个有权限的菜单页面
            // 构建完整路由路径：需要根据菜单的父子关系构建
            const buildRoutePath = (menu, allMenus) => {
                if (!menu) return '/';
                
                // 如果是子菜单，需要查找父菜单路径
                if (menu.parentId && menu.parentId !== 0 && menu.parentId !== '0') {
                    const parent = allMenus.find(m => m.id === menu.parentId);
                    if (parent) {
                        // 递归查找父菜单路径
                        let parentPath = '';
                        
                        // 如果父菜单是目录（type=0），目录通常没有 routeUrl 和 pageUrl
                        // 我们需要从子菜单的 pageUrl 中提取父路径
                        if (parent.type === 0) {
                            // 目录类型：从子菜单的 pageUrl 提取父路径（如 warehouse/warehouse -> warehouse）
                            if (menu.pageUrl) {
                                // 移除 pageUrl 开头的斜杠（如果有）
                                const cleanPageUrl = menu.pageUrl.replace(/^\/+/, '');
                                const pageUrlParts = cleanPageUrl.split('/').filter(p => p); // 过滤空字符串
                                if (pageUrlParts.length >= 2) {
                                    parentPath = '/' + pageUrlParts[0];
                                    const childPath = menu.routeUrl || '';
                                    if (childPath) {
                                        return parentPath + '/' + childPath.replace(/^\/+/, '');
                                    }
                                } else if (pageUrlParts.length === 1 && menu.routeUrl) {
                                    // 如果只有一个部分，可能是完整的路径（如 /shipping/shippinglist）
                                    // 检查是否包含父路径信息
                                    const fullPath = menu.pageUrl.startsWith('/') ? menu.pageUrl : '/' + menu.pageUrl;
                                    if (menu.routeUrl) {
                                        // 如果有 routeUrl，构建完整路径
                                        const parentFromPageUrl = fullPath.split('/').filter(p => p)[0];
                                        if (parentFromPageUrl) {
                                            return `/${parentFromPageUrl}/${menu.routeUrl}`;
                                        }
                                    }
                                }
                            }
                            
                            // 如果无法从 pageUrl 提取，尝试从父菜单的 routeUrl 获取
                            if (!parentPath && parent.routeUrl) {
                                parentPath = parent.routeUrl.startsWith('/') 
                                    ? parent.routeUrl 
                                    : '/' + parent.routeUrl;
                            }
                            
                            // 如果仍然无法获取，尝试查找父菜单的父菜单
                            if (!parentPath && parent.parentId && parent.parentId !== 0 && parent.parentId !== '0') {
                                const grandParent = allMenus.find(m => m.id === parent.parentId);
                                if (grandParent) {
                                    parentPath = buildRoutePath(grandParent, allMenus);
                                }
                            }
                        } else {
                            // 非目录类型：使用 routeUrl 或 pageUrl
                            parentPath = buildRoutePath(parent, allMenus);
                        }
                        
                        // 获取子菜单的路由路径
                        const childPath = menu.routeUrl || '';
                        if (childPath && parentPath) {
                            // 移除父路径末尾的斜杠和子路径开头的斜杠
                            const cleanParentPath = parentPath.replace(/\/+$/, '');
                            const cleanChildPath = childPath.replace(/^\/+/, '');
                            return cleanParentPath + '/' + cleanChildPath;
                        }
                        
                        // 如果仍然无法构建，尝试从 pageUrl 推断
                        if (!parentPath && menu.pageUrl) {
                            const cleanPageUrl = menu.pageUrl.replace(/^\/+/, '');
                            const pageUrlParts = cleanPageUrl.split('/').filter(p => p);
                            if (pageUrlParts.length >= 2 && childPath) {
                                return `/${pageUrlParts[0]}/${childPath}`;
                            }
                        }
                    }
                }
                
                // 如果是顶级菜单或没有父菜单，使用 routeUrl 或 pageUrl
                let path = menu.routeUrl || '';
                if (!path && menu.pageUrl) {
                    // 如果没有 routeUrl，尝试从 pageUrl 推断路径
                    // 移除 pageUrl 开头的斜杠（如果有）
                    const cleanPageUrl = menu.pageUrl.replace(/^\/+/, '');
                    const pageUrlParts = cleanPageUrl.split('/').filter(p => p); // 过滤空字符串
                    if (pageUrlParts.length >= 2) {
                        // 如果有父路径和文件名，构建路径
                        const parentDir = pageUrlParts[0];
                        const fileName = pageUrlParts[1];
                        // 对于 shipping/shippingList，路由是 shippinglist（小写）
                        if (parentDir === 'shipping' && fileName.toLowerCase().includes('shippinglist')) {
                            path = '/shipping/shippinglist';
                        } else {
                            // 默认使用父路径 + list
                            path = `/${parentDir}/list`;
                        }
                    } else if (pageUrlParts.length === 1) {
                        // 如果只有一个部分，直接使用（但确保以 / 开头）
                        path = menu.pageUrl.startsWith('/') ? menu.pageUrl : '/' + menu.pageUrl;
                    }
                }
                
                if (path) {
                    // 确保路径以 / 开头
                    if (!path.startsWith('/')) {
                        path = '/' + path;
                    }
                    return path;
                }
                
                return '/';
            };
            
            targetPath = buildRoutePath(firstMenu, ret.data);
            
            // 确保 targetPath 是字符串类型
            if (typeof targetPath !== 'string') {
                targetPath = String(targetPath || '/');
            }
            
            // 如果构建失败，使用 pageUrl 作为后备
            if (!targetPath || targetPath === '/') {
                if (firstMenu.pageUrl) {
                    // 从 pageUrl 推断路由路径
                    const pageUrlParts = firstMenu.pageUrl.split('/');
                    if (pageUrlParts.length >= 2) {
                        // 如果有父路径和文件名，尝试构建路径
                        const parentDir = pageUrlParts[0];
                        const fileName = pageUrlParts[1];
                        
                        // 检查是否有 routeUrl
                        if (firstMenu.routeUrl) {
                            targetPath = `/${parentDir}/${firstMenu.routeUrl}`;
                        } else {
                            // 如果没有 routeUrl，尝试从文件名推断路由路径
                            // 例如：shipping/shippingList -> /shipping/shippinglist
                            // 或者：warehouse/warehouse -> /warehouse/list
                            // 这里需要根据实际路由配置来决定
                            // 对于 shipping/shippingList，路由是 shippinglist（小写）
                            if (parentDir === 'shipping' && fileName.toLowerCase().includes('shippinglist')) {
                                targetPath = '/shipping/shippinglist';
                            } else {
                                // 默认使用 list
                                targetPath = `/${parentDir}/list`;
                            }
                        }
                    } else if (pageUrlParts.length === 1) {
                        // 如果只有一个部分，直接使用（但这种情况应该很少）
                        targetPath = firstMenu.pageUrl.startsWith('/') 
                            ? firstMenu.pageUrl 
                            : `/${firstMenu.pageUrl}`;
                    } else {
                        // 如果 pageUrl 格式不正确，使用默认路径
                        targetPath = '/shipping/loadingOrder';
                    }
                } else {
                    targetPath = '/shipping/loadingOrder';
                }
            }

        } else {
            // 默认跳转到装车订单页面
            targetPath = '/shipping/loadingOrder';

        }
        
        // 等待路由完全生成后再执行跳转
        await nextTick();
        
        // 确保权限store的路由生成完成
        const permissionStore = usePermissionStore();
        if (!permissionStore.routeFlag) {

            await permissionStore.generateRoutes();
        }
        
        // 确保 targetPath 是字符串类型，并规范化路径
        if (typeof targetPath !== 'string') {
            targetPath = String(targetPath || '/');
        }
        
        // 确保路径以斜杠开头，并移除多余的斜杠
        if (!targetPath.startsWith('/')) {
            targetPath = '/' + targetPath;
        }
        // 移除多余的斜杠（但保留开头的单个斜杠）
        targetPath = targetPath.replace(/\/+/g, '/');
        
        // 使用replace而不是push，避免路由警告
        try {
            await router.replace({ path: targetPath });

        } catch (error) {
            console.warn('Failed to navigate to', targetPath, 'error:', error);
            // 如果跳转失败，尝试跳转到首页
            try {
                await router.replace({ path: '/' });

            } catch (homeError) {
                console.error('Failed to navigate to home:', homeError);
            }
        }
        
    } catch (error) {
        console.error('Failed to get user menu:', error);
        // 获取菜单失败时跳转到首页
        try {
            await router.push({ path: '/' });

        } catch (navError) {
            console.error('Failed to navigate to home:', navError);
        }
    }
};
</script>
<style scoped lang="scss">
.login-bg {
    background: url(../assets/login-bg.png) center no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100%;
    position: relative;
}
.login-container {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    right: 15%;
    width: 550px;
    // height: 400px;
}

.pig-container {
    padding: 40px 56px 40px;
    border-radius: 9px;
    background-color: rgb(255, 255, 255);
    opacity: 0.98;
    box-shadow: 0px 8px 24px 0px rgba(104, 114, 124, 0.35);
}
.pig-tit {
    font-weight: bolder;
    font-size: 45px;
    text-align: center;
    color: #3b74ff;
    margin-bottom: 30px;
}
.con-tab {
    // font-weight: 600;
    font-size: 24px;
    color: #999;
    line-height: 20px;
    padding: 10px 0;
    margin-bottom: 40px;
    span {
        display: inline-block;
        cursor: pointer;
        &:first-child {
            padding-right: 20px;
            margin-right: 20px;
            // border-right: #ccc 2px solid;
        }
    }
    span.cur {
        color: #000;
    }

    .info {
        font-weight: 300;
        font-size: 25px;
        margin-top: 20px;
    }
}
.info-title {
    font-size: 18px;
    color: #000;
    line-height: 28px;
    margin-bottom: 4px;
}

.login-container .el-input {
    width: 500px;
    height: 60px;
    line-height: 60px;
    border-radius: 12px;
    margin-bottom: 8px;
}

.info-fa {
    position: relative;
}
.info-yan {
    position: absolute;
    z-index: 9;
    top: 9px;
    right: 10px;
    width: 120px;
    height: 42px;
    text-align: center;
    background: #3b74ff;
    border: 1px solid #dbf1ec;
    border-radius: 11px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
}
.login_Submitbtn {
    margin-top: 36px;
}

.login-container .login_btn {
    width: 500px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    border-radius: 5px;
    background: #3b74ff;
}
:deep(.el-input .el-input__icon) {
    color: #fff;
}
</style>
