<template>
    <div class="login">
        <div class="form">
            <div class="title">重庆市消防执法监管系统欢迎您</div>
            <el-form label-width="30px" ref="form" :rules="rules" :model="form">
                <el-form-item label="" prop="login_id">
                    <el-input class="input" placeholder="请输入帐号" v-model="form.login_id" @keyup.enter.native="submitForm"></el-input>
                </el-form-item>
                <el-form-item label="" prop="password">
                    <el-row>
                        <el-input class="input" placeholder="请输入密码" v-model="form.password" show-password @keyup.enter.native="submitForm"></el-input>
                    </el-row>
                </el-form-item>
                <el-form-item v-if="showCode" label="" prop="random_code">
                    <el-row>
                        <el-col :span="18">
                            <el-input class="input" placeholder="请输入验证码" v-model="form.random_code" @keyup.enter.native="submitForm"></el-input>
                        </el-col>
                        <el-col :span="6">
                            <el-image @click="getCodeImage" class="login-code" :src="codeImageUrl"></el-image>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item style="text-align: right;">
                    <el-button style="width: 100%;" type="primary" @click="submitForm" :loading="loading">登录</el-button>
                </el-form-item>
            </el-form>
            <div class="code">
                <el-popover
                    placement="bottom"
                    width="120"
                    trigger="click">
                    <div class="code-content">
                        <div>扫码下载Android客户端</div>
                        <img :src="downloadUrl" alt="" srcset="">
                    </div>
                    <el-button type="text" size="small" slot="reference">下载Android客户端</el-button>
                </el-popover>
            </div>
        </div>
    </div>
</template>

<script>
import { getImage, login, getMenus } from '@/api/login'
import { auth } from '@/utils/auth'

export default {
    data () {
        return {
            form: {
                login_id: '',
                password: '',
                random_code: '',
            },
            rules: {
                login_id: [
                    { required: true, message: '请输入登录账号', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入登录账号对应的密码', trigger: 'blur' }
                ],
            },
            random_code: [
                { required: true, message: '请输入验证码', trigger: 'blur' },
                { min: 4, max: 4, message: '请输入4位验证码', trigger: 'blur' }
            ],
            loading: false,
            codeImageUrl: '',
            showCode: false,
        }
    },
    computed: {
        downloadUrl() {
            return process.env.VUE_APP_APK
        }
    },
    methods: {
        getCodeImage() {
            getImage().then(res => {
                if (res && res.data) {
                    this.codeImageUrl = 'data:image/png;base64,' + res.data;
                }
            })
        },
        handleMenuId(list) {
            if (list && list.length > 0) {
                list.map(item => {
                    item.id = item.id + '';
                    if (item.sub_menus && item.sub_menus.length > 0) {
                        this.handleMenuId(item.sub_menus);
                    }
                });
            }
        },
        loginSys() {
            this.loading = true
            login(this.form).then(res => {
                console.log('login: ', res);
                if (res) {
                    auth.saveUserInfo(res);
                    this.$store.dispatch('user/saveUser', res);
                    getMenus().then(data => {
                        console.log('menus: ', data);
                        if (data.data && data.data.length > 0) {
                            let pc = data.data.filter(item => item.perms == 'PC');
                            if (pc.length > 0) {
                                pc = pc[0].sub_menus;
                                this.handleMenuId(pc);
                                auth.saveMenus(pc);
                            }
                        }
                        this.loading = false;
                        location.reload();
                    });
                }
                else {
                    this.loading = false
                    this.$message.error(res.msg)
                }
            }).catch(err => {
                this.loading = false;
                const res = err && err.response && err.response.data;
                if (res && res.message && res.message.indexOf('图片验证码') >= 0) {
                    this.showCode = true;
                    this.getCodeImage();
                    this.rules['random_code'] = this.random_code;
                }
            });
        },
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loginSys()
                }
            });
        },
        resetForm() {
            this.$refs.form.resetFields()
        }
    }
}
</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3232AD;
    background-image: url('../../assets/fire.jpg');
    background-size: 100% 100%;
    .form {
        min-width: 400px;
        position: relative;
        background: rgba(255,255,255,0.7);
        border-radius: 10px;
        padding: 40px 40px 20px 20px;
        box-shadow: 1px 2px 10px #333333;
        .input {
            // width: 300px;
            height: 50px;
            line-height: 50px;
        }
    }
    .title {
        position: absolute;
        font-weight: bolder;
        font-size: 48px;
        top: -80px;
        left: -128px;
        width: 680px;
    }
    .code {
        text-align: right;
    }
}
.login-code {
    margin-top: 10px;
    margin-left: 10px;
    cursor: pointer;
}
.code-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 150px;
    &>div {
        font-size: 10px;
        color: #565678;
    }
    &>img {
        width: 100%;
    }
}
</style>