<template>
    <div class="login-container flx-center">
        <div class="login-box">
            <div class="login-form">
                <div class="login-logo">
                    <h2 class="logo-text">总账管理系统</h2>
                </div>
                <a-form id="formLogin" class="user-layout-login" @submit="handleSubmit" :model="formRef">
                    <a-form-item v-bind="validateInfos.username">
                        <a-input size="large" type="text" :placeholder="$t('user.login.username.placeholder')"
                            v-model:value="formRef.username">
                            <template #prefix>
                                <user-outlined />
                            </template>
                        </a-input>
                    </a-form-item>
                    <a-form-item v-bind="validateInfos.password">
                        <a-input-password size="large" :placeholder="$t('user.login.password.placeholder')"
                            v-model:value="formRef.password">
                            <template #prefix>
                                <lock-outlined />
                            </template>
                        </a-input-password>
                    </a-form-item>
                    <a-form-item>
                        <pro-select ref="login_role" v-model:value="formRef.login_role" style="width: 80%;float: left;"
                            clearable :popper-append-to-body="false" />
                        <a-button type="primary" style="float: right;" @click="handleGetRole">获取岗位</a-button>
                    </a-form-item>
                    <a-form-item style="margin-top: 24px">
                        <a-button size="large" type="primary" htmlType="submit" class="login-button"
                            :loading="state.loginBtn" :disabled="state.loginBtn">{{ $t("user.login.login") }}</a-button>
                    </a-form-item>
                </a-form>
            </div>

        </div>
    </div>
    <div class="bruce">
        <ul class="bubble-bgwall">
            <li v-for="(item, index) in 15" :key="index">Hi</li>
        </ul>
    </div>
</template>

<script lang="ts" setup name="Login">
import { ref, reactive, UnwrapRef } from 'vue'
import { useI18n } from 'vue-i18n'
import { Form } from 'ant-design-vue'
import { loginSuccess, requestFailed } from './helper'
import { useRouter } from 'vue-router'
import { LoginFormState } from './types'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import config from '@/config/defaultSettings'
import generateAsyncRoutes from '@/router/generateAsyncRoutes'
import ProSelect from '@/components/ProForm/fields/ProSelect/index.vue'
import { login, getRole } from '@/api/api'
const userNav = ref([
    // dashboard
    {
        'name': 'dashboard',
        'parentId': 0,
        'id': 1,
        'meta': {
            'icon': 'bx-analyse',
            'title': '仪表盘',
            'show': true,
        },
        'component': 'RouteView',
        'redirect': '/dashboard/workplace'
    },
    {
        'name': 'workplace',
        'parentId': 1,
        'id': 7,
        'meta': {
            'title': '工作台',
            'show': true
        },
        'component': 'Workplace'
    },
    {
        'name': 'monitor',
        'path': 'monitor',
        'parentId': 1,
        'id': 3,
        'meta': {
            'title': '监控页（外部）',
            'show': true,
            'target': 'http://www.baidu.com',
            'blank': true
        }
    },
    {
        'name': 'Analysis',
        'parentId': 1,
        'id': 2,
        'meta': {
            'title': '分析页',
            'show': true
        },
        'component': 'Home',
        'path': '/dashboard/analysis'
    },
    {
        'name': 'tests',
        'parentId': 1,
        'id': 8,
        'meta': {
            'title': '测试功能',
            'show': true
        },
        'component': 'TestWork'
    },

    // form
    {
        'name': 'form',
        'parentId': 0,
        'id': 10,
        'meta': {
            'icon': 'form',
            'title': '表单页'
        },
        'redirect': '/form/base-form',
        'component': 'PageView'
    },
    {
        'name': 'basic-form',
        'parentId': 10,
        'id': 6,
        'meta': {
            'title': '基础表单'
        },
        'component': 'BasicForm'
    },
    {
        'name': 'step-form',
        'parentId': 10,
        'id': 5,
        'meta': {
            'title': '分步表单'
        },
        'component': 'StepForm'
    },
    {
        'name': 'advanced-form',
        'parentId': 10,
        'id': 4,
        'meta': {
            'title': '高级表单'
        },
        'component': 'AdvanceForm'
    },

    // list
    {
        'name': 'list',
        'parentId': 0,
        'id': 10010,
        'meta': {
            'icon': 'table',
            'title': '列表页',
            'show': true
        },
        'redirect': '/list/table-list',
        'component': 'PageView'
    },
    {
        'name': 'table-list',
        'parentId': 10010,
        'id': 10011,
        'path': '/list/table-list/:pageNo([1-9]\\d*)?',
        'meta': {
            'title': '查询表格',
            'show': true
        },
        'component': 'TableList'
    },
    {
        'name': 'basic-list',
        'parentId': 10010,
        'id': 10012,
        'meta': {
            'title': '标准列表',
            'show': true
        },
        'component': 'StandardList'
    },
    {
        'name': 'card',
        'parentId': 10010,
        'id': 10013,
        'meta': {
            'title': '卡片列表',
            'show': true
        },
        'component': 'CardList'
    },
    {
        'name': 'search',
        'parentId': 10010,
        'id': 10014,
        'meta': {
            'title': '搜索列表',
            'show': true
        },
        'redirect': '/list/search/article',
        'component': 'SearchLayout'
    },
    {
        'name': 'article',
        'parentId': 10014,
        'id': 10015,
        'meta': {
            'title': '搜索列表（文章）',
            'show': true
        },
        'component': 'SearchArticles'
    },
    {
        'name': 'project',
        'parentId': 10014,
        'id': 10016,
        'meta': {
            'title': '搜索列表（项目）',
            'show': true
        },
        'component': 'SearchProjects'
    },
    {
        'name': 'application',
        'parentId': 10014,
        'id': 10017,
        'meta': {
            'title': '搜索列表（应用）',
            'show': true
        },
        'component': 'SearchApplications'
    },

    // profile
    {
        'name': 'profile',
        'parentId': 0,
        'id': 10018,
        'meta': {
            'title': '详情页',
            'icon': 'profile',
            'show': true
        },
        'redirect': '/profile/basic',
        'component': 'RouteView'
    },
    {
        'name': 'basic',
        'parentId': 10018,
        'id': 10019,
        'meta': {
            'title': '基础详情页',
            'show': true
        },
        'component': 'ProfileBasic'
    },
    {
        'name': 'advanced',
        'parentId': 10018,
        'id': 10020,
        'meta': {
            'title': '高级详情页',
            'show': true
        },
        'component': 'ProfileAdvanced'
    },

    // result
    {
        'name': 'result',
        'parentId': 0,
        'id': 10021,
        'meta': {
            'title': '结果页',
            'icon': 'check-circle-o',
            'show': true
        },
        'redirect': '/result/success',
        'component': 'PageView'
    },
    {
        'name': 'success',
        'parentId': 10021,
        'id': 10022,
        'meta': {
            'title': '成功',
            'hiddenHeaderContent': true,
            'show': true
        },
        'component': 'ResultSuccess'
    },
    {
        'name': 'fail',
        'parentId': 10021,
        'id': 10023,
        'meta': {
            'title': '失败',
            'hiddenHeaderContent': true,
            'show': true
        },
        'component': 'ResultFail'
    },

    // Exception
    {
        'name': 'exception',
        'parentId': 0,
        'id': 10024,
        'meta': {
            'title': '异常页',
            'icon': 'warning',
            'show': true
        },
        'redirect': '/exception/403',
        'component': 'RouteView'
    },
    {
        'name': '403',
        'parentId': 10024,
        'id': 10025,
        'meta': {
            'title': '403',
            'show': true
        },
        'component': 'Exception403'
    },
    {
        'name': '404',
        'parentId': 10024,
        'id': 10026,
        'meta': {
            'title': '404',
            'show': true
        },
        'component': 'Exception404'
    },
    {
        'name': '500',
        'parentId': 10024,
        'id': 10027,
        'meta': {
            'title': '500',
            'show': true
        },
        'component': 'Exception500'
    },

    // account
    {
        'name': 'account',
        'parentId': 0,
        'id': 10028,
        'meta': {
            'title': '个人页',
            'icon': 'user',
            'show': true
        },
        'redirect': '/account/center',
        'component': 'RouteView'
    },
    {
        'name': 'center',
        'parentId': 10028,
        'id': 10029,
        'meta': {
            'title': '个人中心',
            'show': true
        },
        'component': 'AccountCenter'
    },
    // 特殊三级菜单
    {
        'name': 'settings',
        'parentId': 10028,
        'id': 10030,
        'meta': {
            'title': '个人设置',
            'hideHeader': true,
            'hideChildren': true,
            'show': true
        },
        'redirect': '/account/settings/base',
        'component': 'AccountSettings'
    },
    {
        'name': 'BaseSettings',
        'path': '/account/settings/base',
        'parentId': 10030,
        'id': 10031,
        'meta': {
            'title': '基本设置',
            'show': false
        },
        'component': 'BaseSettings'
    },
    {
        'name': 'SecuritySettings',
        'path': '/account/settings/security',
        'parentId': 10030,
        'id': 10032,
        'meta': {
            'title': '安全设置',
            'show': false
        },
        'component': 'SecuritySettings'
    },
    {
        'name': 'CustomSettings',
        'path': '/account/settings/custom',
        'parentId': 10030,
        'id': 10033,
        'meta': {
            'title': '个性化设置',
            'show': false
        },
        'component': 'CustomSettings'
    },
    {
        'name': 'BindingSettings',
        'path': '/account/settings/binding',
        'parentId': 10030,
        'id': 10034,
        'meta': {
            'title': '账户绑定',
            'show': false
        },
        'component': 'BindingSettings'
    },
    {
        'name': 'NotificationSettings',
        'path': '/account/settings/notification',
        'parentId': 10030,
        'id': 10034,
        'meta': {
            'title': '新消息通知',
            'show': false
        },
        'component': 'NotificationSettings'
    }
])
const useForm = Form.useForm
const login_role = ref()
const { t } = useI18n()
const router = useRouter()
const state = reactive({
    time: 60,
    loginBtn: false,
    smsSendBtn: false
})

// #region 表单相关
const formRef: UnwrapRef<LoginFormState> = reactive({
    username: '',
    password: '',
    login_role: '',
    loginPage: '',
})

const rulesRef = reactive({
    username: [
        {
            required: true,
            message: t('user.username.required')
        }
    ],
    password: [{ required: true, message: t('user.password.required') }, {}]
})
const { validate, validateInfos } = useForm(formRef, rulesRef)

const handleGetRole = () => {
    validate().then(async () => {
        let res = await getRole(formRef.username)
        res = res.map((item): any => {
            item.item_no = item.role_no + '_' + item.dep_no
            item.item_name = item.name + '_' + item.dep_name
            return item
        })
        login_role.value.setSelectOptions(res)
        formRef.login_role = res[0].item_no
    }).catch(() => { })

}

const handleSubmit = (e: Event): any => {
    e.preventDefault()
    state.loginBtn = true
    validate().then(async () => {
        const res = await login(formRef)
        if (res.success) {
            if (config.useAsyncRouter) {
                generateAsyncRoutes(router, res.menu)
            }
            loginSuccess(res, router)
        } else {
            requestFailed(res)
            formRef.password = ''
        }
        state.loginBtn = false
    })
        .catch((e: any): void => {
            state.loginBtn = false
        })
}
// #endregion
</script>

<style lang="less" scoped>
@import '../../style/index.less';

.user-layout-login {
    label {
        font-size: 14px;
    }

    .getCaptcha {
        display: block;
        width: 100%;
        height: 40px;
    }

    .forge-password {
        font-size: 14px;
    }

    button.login-button {
        padding: 0 15px;
        font-size: 16px;
        height: 40px;
        width: 100%;
    }

    .user-login-other {
        text-align: left;
        margin-top: 24px;
        line-height: 22px;

        .anticon {
            font-size: 24px;
            color: rgba(0, 0, 0, 0.2);
            margin-left: 16px;
            vertical-align: middle;
            cursor: pointer;
            transition: color 0.3s;

            &:hover {
                color: @primary-color;
            }
        }

        .register {
            float: right;
        }
    }
}

.login-container {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 500px;
    background-color: #eeeeee;
    background-position: 50%;
    background-size: 100% 100%;
    background-size: cover;



    .dark {
        position: absolute;
        top: 4.5%;
        right: 3.2%;
    }

    .login-box {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 96%;
        height: 94%;
        padding: 0 50px;
        background-color: hsl(0deg 0% 100% / 80%);
        border-radius: 10px;

        .login-left {
            width: 800px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .login-form {
            width: 520px;
            padding: 100px 40px;
            border-radius: 10px;
            box-shadow: 2px 3px 7px rgb(0 0 0 / 20%);
            text-align: center;
            z-index: 2;
            background: rgba(255, 255, 255, 0.9);

            .login-logo {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 45px;

                .login-icon {
                    width: 60px;
                    height: 52px;
                }

                .logo-text {
                    padding: 0 0 0 25px;
                    margin: 0;
                    font-size: 30px;
                    font-weight: bold;
                    color: #34495e;
                    white-space: nowrap;
                }
            }

            .a-form-item {
                margin-bottom: 40px;
            }

            .login-btn {
                display: flex;
                justify-content: space-between;
                width: 100%;
                margin-top: 40px;
                white-space: nowrap;

                .a-button {
                    width: 185px;
                }
            }
        }
    }
}

.bruce {
    overflow: hidden;
    position: absolute;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(270deg, #8146b4, #6990f6);

    .bubble-bgwall {
        li {
            display: flex;
            position: absolute;
            bottom: -200px;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            width: 50px;
            height: 50px;
            background-color: rgba(#fff, 0.15);
            color: #ccc;
            animation: bubble 15s infinite;

            &:nth-child(1) {
                left: 10%;
            }

            &:nth-child(2) {
                left: 20%;
                width: 90px;
                height: 90px;
                animation-duration: 7s;
                animation-delay: 2s;
            }

            &:nth-child(3) {
                left: 25%;
                animation-delay: 4s;
            }

            &:nth-child(4) {
                left: 40%;
                width: 60px;
                height: 60px;
                background-color: rgba(#fff, 0.3);
                animation-duration: 8s;
            }

            &:nth-child(5) {
                left: 70%;
            }

            &:nth-child(6) {
                left: 80%;
                width: 120px;
                height: 120px;
                background-color: rgba(#fff, 0.2);
                animation-delay: 3s;
            }

            &:nth-child(7) {
                left: 32%;
                width: 160px;
                height: 160px;
                animation-delay: 2s;
            }

            &:nth-child(8) {
                left: 55%;
                width: 40px;
                height: 40px;
                font-size: 12px;
                animation-duration: 15s;
                animation-delay: 4s;
            }

            &:nth-child(9) {
                left: 25%;
                width: 40px;
                height: 40px;
                background-color: rgba(#fff, 0.3);
                font-size: 12px;
                animation-duration: 12s;
                animation-delay: 2s;
            }

            &:nth-child(10) {
                left: 85%;
                width: 160px;
                height: 160px;
                animation-delay: 5s;
            }
        }
    }

    @keyframes bubble {
        0% {
            opacity: 0.5;
            transform: translateY(0) rotate(45deg);
        }

        25% {
            opacity: 0.75;
            transform: translateY(-400px) rotate(90deg);
        }

        50% {
            opacity: 1;
            transform: translateY(-600px) rotate(135deg);
        }

        100% {
            opacity: 0;
            transform: translateY(-1000px) rotate(180deg);
        }
    }
}
</style>
