<template>
    <div class="bjimg">
        <x-header :left-options="{showBack: false}">{{token}}登录</x-header>
        <box gap="20px 30px">
            <flexbox orient="vertical" style="">
                <flexbox-item>
                    <h2 style="color: white;text-align:center;margin: 30px 0 15px 0">东软智能云POS管理系统</h2>
                </flexbox-item>
                <flexbox-item>
                    <x-input title="" placeholder="用户名" class="inputcss" v-model.trim="loginForm.username">
                        <img slot="label" style="padding-right:10px;display:block;"
                             src="../assets/user.png" width="20" height="20">
                    </x-input>
                </flexbox-item>
                <flexbox-item>
                    <x-input title="" placeholder="密码" type="password" class="inputcss"
                             v-model.trim="loginForm.password">
                        <img slot="label" style="padding-right:10px;display:block;"
                             src="../assets/password.png" width="20" height="20">
                    </x-input>
                </flexbox-item>
                <flexbox-item>
                    <x-input title="验证码" placeholder="验证码" class="inputcss" v-model.trim="loginForm.captcha">
                        <img slot="label" style="padding-right:10px;display:block;"
                             src="../assets/yzm.png" width="20" height="20">
                        <img slot="right-full-height"
                             @click="reRand" :src="captcha" width="100"
                             height="50">
                    </x-input>
                </flexbox-item>
                <flexbox-item>
                    <!--<x-button type="default" style="width: 85%;margin-top: 20px" @click.native="sub">登录</x-button>-->
                    <el-button type="primary" style="width:100%;margin-top: 15px"
                               @click.native.prevent="sub">
                        立即登录
                    </el-button>
                </flexbox-item>
            </flexbox>
            <toast v-model="showMessage" type="text" width="16em">{{msg}}</toast>
        </box>
    </div>
</template>

<script>
    import {XInput, Flexbox, FlexboxItem, XButton, Box} from 'vux'
    import {login} from "@/api/login";

    export default {
        components: {
            Flexbox,
            FlexboxItem,
            XInput,
            XButton,
            Box
        },
        created() {
          this.randStr = Math.random().toString()
        },
        data() {
            return {
                randStr: "",
                msg: '',
                showMessage: false,
                loginForm: {
                    username: "",
                    password: "",
                    captcha: ""
                },
                token: this.$store.getters.name
            }
        },
        methods: {
            reRand() {
                this.randStr = Math.random().toString()
            },
            sub() {
//                console.log(this.loginForm.username, this.loginForm.password, this.loginForm.captcha)
                var username = this.loginForm.username
                var password = this.loginForm.password
                var captcha = this.loginForm.captcha
                const reg = /^[a-zA-Z0-9]+$/
                if (!reg.test(username)) {
                    this.msg = "请输入正确的用户名"
                    this.showMessage = true
                    return
                }
                if (password.length < 6) {
                    this.msg = "密码不能小于6位"
                    this.showMessage = true
                    return
                }
                if (captcha.length != 5) {
                    this.msg = "验证码有误"
                    this.showMessage = true
                    return
                }
                this.msg = ""
                login(this.loginForm).then(response => {
                    if (response.code != 200) {
                        this.msg = response.message
                        this.showMessage = true
                    } else {
                        if (response.result.type == "sa" || response.result.type == "ca") {
                            this.msg = '无权登录'
                            this.showMessage = true
                        } else {
                            this.$store.dispatch("Login", response.result)
                                .then(() => {
                                    this.$router.push({path: "/order/ratiostatistics"});
                                });
                        }
                    }
                })
//                this.showMessage = true
            }
        },
        computed: {
            captcha: function () {
                return process.env.BASE_API + "service-user/login/captcha?rand=" + this.randStr
            }
        }


    }
</script>

<style>
    .vux-demo {
        text-align: center;
    }

    .logo {
        width: 100px;
        height: 100px
    }

    .weui-input::placeholder {
        color: white;
    }
    .bjimg {
        position:absolute;
        width:100%;
        height:100%;
        background-image: url('../assets/background.png');
        overflow:hidden
    }
    .inputcss {
        border: 1px solid hsla(0, 0%, 100%, .1);
        background: rgba(0, 0, 0, .1);
        border-radius: 5px;
        color: white;
        margin-top: 8px;
    }
</style>
