<template>
    <div class="login">
        <img class="bg" :src="logo" alt="" srcset="">
        <img class="bgb" :src="logoBg" alt="" srcset="">
        <div class="main">
            <van-cell-group class="mt">
                <van-field v-model="account" label="帐号" placeholder="请输入帐号" />
                <van-field v-model="pwd" type="password" label="密码" placeholder="请输入密码" />
                <van-field v-if="showCode" v-model="authCode" center clearable label="验证码" placeholder="请输入验证码">
                    <template #button>
                        <van-image @click="refreshAuthImage" width="88" height="24" :src="authCodeImage" />
                    </template>
                </van-field>
            </van-cell-group>
            <div class="btn">
                <van-button type="primary" block @click="login">登录</van-button>
            </div>
        </div>

        <v-mask :showOverLay="showOverLay" tipMsg="登录中..."></v-mask>
    </div>
</template>

<script>
import { isEmpty, notEmpty } from '@/utils/tool';
import { removePwdTips, saveAccount, getAccount, saveInfo, saveSeal, saveMenus } from '@/utils/auth';
import mask_overLay from "@/components/overLay_xy.vue";
import { get, post } from '@/utils/http.js';
import { Notify } from 'vant';

export default {
    components: {
        "v-mask": mask_overLay,
    },
    data () {
        return {
            account: getAccount(), // || "xiefei@cq",
            pwd: '', //'Jj123456',
            logo: require('@/assets/login.png'),
            logoBg: require('@/assets/loginb.png'),
            showOverLay: false,
            authCode: '',
            authCodeImage: '',
            showCode: false,
        }
    },
    methods: {
        refreshAuthImage() {
            get('/v2/api/sys_user/random_image').then(res => {
                if (res && res.data) {
                    this.authCodeImage = 'data:image/png;base64,' + res.data;
                }
            })
        },
        login() {
            if (isEmpty(this.account)) {
                Notify({ type: 'danger', message: '请输入帐号' })
                return
            }

            if (isEmpty(this.pwd)) {
                Notify({ type: 'danger', message: '请输入密码' })
                return
            }

            if (this.showCode) {
                if (isEmpty(this.authCode)) {
                    Notify({ type: 'danger', message: '请输入验证码' })
                    return
                }
                else if (this.authCode.length != 4) {
                    Notify({ type: 'danger', message: '请输入4位验证码' })
                    return
                }
            }

            removePwdTips();

            this.showOverLay = true;
            post('/v2/api/sys_user/login', {
                login_id: this.account,
                password: this.pwd,
                random_code: this.authCode,
            }).then(res => {
                // console.log('login: ', res);
                if (res) {
                    saveAccount(this.account);
                    saveInfo(res);

                    get('/v2/api/sys_seal').then(result => {
                        if (result.data && result.data.length > 0) {
                            const seal = result.data[0];
                            saveSeal(seal);
                        }
                    });

                    get('/v2/api/sys_menu?role_id=self').then(result => {
                        if (result.data && result.data.length > 0) {
                            let app = result.data.filter(item => item.name == 'APP');
                            if (app.length > 0) {
                                app = app[0].sub_menus;
                                saveMenus(app);
                            }
                        }
                        this.$router.push('/');
                        this.showOverLay = false;
                    });
                }
                else {
                    this.showOverLay = false;
                    this.$toast.fail(res.msg);
                }
            }).catch (err => {
                const res = err && err.response && err.response.data;
                let msg = '系统异常';
                if (res && res.message) {
                    if (res.message.indexOf('图片验证码') >= 0) {
                        this.showCode = true;
                        this.refreshAuthImage();
                    }
                    msg = res.message;
                }
                this.$toast.fail(msg);
                this.showOverLay = false;
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #FFFFFF;
    .bg {
        width: 100%;
    }
    .bgb {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }
    .main {
        position: absolute;
        left: 20px;
        right: 20px;
        top: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .title {
            font-size: 20px;
            font-weight: bolder;
        }
        .mt {
            margin-top: 50px;
        }
        .btn {
            margin-top: 30px;
            width: 78%;
        }
    }
}
</style>