<template>
    <div class="login_container">
        <div class="login_box">
            <div class="system_name">云南省叶酸发放服务平台</div>
            <div class="login_context">
                <div class="left_img">
                    <img src="../../static/images/login_logo.png" alt="">
                </div>
                <a-form-model :model="formData" :rules="formRules" class="login_form" ref="formRef">
                    <a-form-model-item prop="username">
                        <a-input placeholder="请输入用户名" v-model="formData.username" size="large" @keyup.enter="login">
                            <a-icon slot="prefix" type="user"/>
                        </a-input>
                    </a-form-model-item>
                    <a-form-model-item prop="password">
                        <a-input-password placeholder="请输入密码" v-model="formData.password" size="large" @keyup.enter="login">
                            <a-icon slot="prefix" type="lock"/>
                        </a-input-password>
                    </a-form-model-item>
                    <a-form-model-item v-show="!captchaVerificationVis">
                        <Verify
                            @success="success"
                            :mode="'fixed'"
                            :captchaType="'blockPuzzle'"
                            :imgSize="{
                                width: '340px',
                                height: '155px',
                            }"
                            ref="verify"
                        ></Verify>
                    </a-form-model-item>
                    <a-form-model-item v-show="captchaVerificationVis">
                        <a-alert
                            message="验证通过"
                            type="success"
                            show-icon
                        />
                    </a-form-model-item>
                    <a-button @click="login" type="primary" block size="large" :disabled="!captchaVerificationVis" :loading="loading" @keyup.enter="login">登录</a-button>
                    <!-- <a href="javascript:;" style="float: right;text-decoration: none;" @click="toNetwork">网点管理登录</a> -->
                </a-form-model>
            </div>
        </div>
    </div>
</template>
<script>
    import Verify from "@/views/components/verifition/Verify";
    import {aesEncrypt} from "@/views/components/verifition/utils/ase"
    import {getEnumByFlag} from "./utils/common";
    export default {
        components: {Verify},
        data() {
            return {
                formData: {username:"",password:""},
                formRules: {},
                captchaVerificationVis: false,
                captchaVerification: {},
                loading: false,
            }
        },
        created() {
        },
        methods: {
            login() {
                this.loading = true;
                const {username, password} = this.formData
                let params = {
                    userName: username || '',
                    password: password || ''
                }
                this.$api.common.login(params).then(({code, data}) => {
                    this.loading = false;
                    if (code === 'SUCCESS') {
                        this.$message.success('登录成功！');
                        this.getAllEnum()
                        window.sessionStorage.setItem('token', data.token);
                        window.sessionStorage.setItem('loginType', data.userInfo.userType);
                        window.sessionStorage.setItem('menuList', JSON.stringify(data.menuList));
                        window.sessionStorage.setItem('userInfo', JSON.stringify(data.userInfo));
                        window.sessionStorage.setItem('networkInfo', JSON.stringify(data.networkInfo));
                        if (data.userInfo.userType === 1) {
                            this.$router.push('/Home/index');
                            window.sessionStorage.setItem('activeItem', '/Home/index');
                        }
                        if (data.userInfo.userType === 2) {
                            this.$router.push('/supply/supplyIndex');
                            window.sessionStorage.setItem('activeItem', '/supply/supplyIndex');
                            window.sessionStorage.setItem('openKeys', 78);
                        }
                    }
                })
            },
            getAllEnum() {
                let par= {}
                this.$api.common.fetchAllEnum(par).then(({data, code}) => {
                    if (code == 'SUCCESS') {
                        window.sessionStorage.setItem('allEnum', JSON.stringify(data))
                    }
                })
            },
            toNetwork() {
                this.$router.push('/networkPortLogin')
            },
            // 验证成功
            success(params) {
                this.captchaVerification = params;
                this.captchaVerificationVis = true;
            },
        },
    }
</script>
<style lang="less" scoped>
    .login_container {
        background-image: url("../../static/images/bg.jpg");
        background-size: 100% 100%;
        height: 100%;

        .login_box {
            width: 950px;
            height: 510px;
            border-radius: 2.5rem;
            box-shadow: 1px 1px 20px #043B26;
            background-color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            .system_name {
                font-size: 24px;
                text-align: center;
                height: 90px;
                line-height: 100px;
                color: #497FF7;
            }

            .login_form {
                width: 340px;
            }
        }

        .login_context {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 400px;
            padding: 0 80px;
        }
    }
</style>
