<template>
    <div class="login">
        <img src="../../assets/image/logobig.png" alt="" class="logobig" />
        <div class="logTit">
            <h2>微纳园人员管理平台</h2>
            <p>（企业端）</p>
        </div>
        <div class="loginBox">
            <div class="inputBox">
                <img src="../../assets/image/comicon.png" alt="" /><input
                    type="text"
                    placeholder="请输入企业名称"
                    v-model="loginForm.userName"
                />
            </div>
            <div class="inputBox">
                <img src="../../assets/image/pswicon.svg" alt="" />
                <input
                    type="password"
                    placeholder="请输入密码"
                    v-model="loginForm.password"
                />
            </div>
            <div class="inputBox">
                <img src="../../assets/image/yzmicon.svg" alt="" />
                <input
                    type="text"
                    placeholder="验证码"
                    class="yanzhengma"
                    v-model="loginForm.code"
                />
                <img
                    :src="loginForm.captchaImage"
                    @click="captchaImageRefresh(loginForm)"
                    class="yanzhengImg"
                />
            </div>
            <div class="pswBox">
                <p @click="forgetPsw">忘记密码？</p>
            </div>
            <div>
                <van-button
                    type="default"
                    size="large"
                    color="#1f1fbe"
                    @click="login"
                    >登 录</van-button
                >
            </div>
        </div>
        <div class="bottomTips">
            2022@copyrigtht IOT - Park-tech. supported by 中国移动
        </div>
    </div>
</template>
<script>
import { Dialog, Toast } from 'vant'
import { authLogin, Login } from '@/service/api_login'
import auth from '@/service/auth'

export default {
    data() {
        return {
            loginForm: {
                userName: '',
                password: '',
                code: '',
                type: this.$auth.TYPE_FRAME,
                captchaId: '',
                captchaImage: '',
                rememberMe: true
            }
        }
    },
    mounted() {
        this.captchaImageRefresh(this.loginForm)
    },
    methods: {
        captchaImageRefresh: function(_form) {
            _form.captchaId = this.$common.uuid(8)
            _form.captchaImage =
                this.$constant.BASE_URI +
                '/captcha/captchaImage?type=math&captchaId=' +
                _form.captchaId +
                '&s=' +
                Math.random()
        },
        forgetPsw() {
            Dialog.confirm({
                title: '忘记密码',
                message: '联系客服：xxxxxxxxxxx',
                // confirmButtonColor: "#1f1fbe",
                confirmButtonText: '拨打'
            })
                .then(() => {
                    // on close
                    window.location.href = 'tel://' + 'xxxxxxxxxxx'
                })
                .catch(() => {
                    // on cancel
                })
        },
        login() {
            const _this = this
            if (!this.loginForm.userName || !this.loginForm.password) {
                Toast('请填写账号和密码')
                return false
            }
            this.$auth.setUserType(this.$auth.TYPE_FRAME)
            Login(this.loginForm).then(res => {
                console.log(res)
                if (res.msg == '正常') {
                    Toast('登录成功')
                    // _this.login(res.data);
                    console.log(res.user_)
                    this.$auth.setUser(res.user_)
                    this.$router.push('/home/home')
                } else {
                    Toast(res.msg)
                }
            })
        },
        onShareAppMessage: function() {}
    }
}
</script>
<style lang="scss">
.login {
    background: white;
    height: 100%;
    overflow: hidden;
    .logTit {
        width: 80vw;
        left: 10vw;
        top: 60vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        z-index: 1;
        color: rgba(51, 51, 51, 1);
        font-size: 4vw;
        p {
            color: rgba(102, 102, 102, 1);
            font-size: 4vw;
            margin-top: 0.5vw;
        }
    }
    .logobig {
        width: 100vw;
        position: absolute;
        left: 0;
        z-index: 0;
    }

    .loginBox {
        width: 70vw;
        left: 15vw;
        padding-top: 75vw;
        position: absolute;
    }
    .inputBox {
        position: relative;
        display: flex;
        align-items: center;
        img {
            position: absolute;
            width: 7vw;
            // padding-top: 40px;
        }
        .yanzhengImg {
            right: 0;
            width: 20vw;
            height: 10vw;
        }
        .yanzhengImgBox {
            height: 50px;
            display: flex;
            align-items: center;
        }
        input {
            width: 100%;
            height: 50px;
            padding: 20px 0 20px 50px;
            background-color: rgba(255, 255, 255, 1);
            border: 1px solid rgba(29, 24, 188, 0.05);
            margin: 10px 0;
            font-size: 4vw;
        }
        input::-webkit-input-placeholder {
            color: rgba(153, 153, 153, 1);
        }
        .yanzhengma {
            width: 60%;
        }
    }
    .pswBox {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin: 20px 0;
        color: rgba(29, 24, 188, 1);
    }
    .van-button {
        border-radius: 60px;

        margin-top: 50px;
    }
    .bottomTips {
        width: 100vw;
        position: fixed;
        bottom: 15px;
        text-align: center;
        color: #999999;
        font-size: 2vw;
    }
    @media screen and (max-height: 454px) {
        .bottomTips {
            display: none;
        }
    }
}
</style>
