<template>
    <div class="login">
        <p v-show="isShow" class="tips">
			{{ tip }}
		</p>
        <div class="loadingContainer" v-show="isShowLoading">
			<Spin fix>
				<Icon type="ios-loading" size="30" class="spin-icon-load" style="color: #dec02b"></Icon>
				<span class="loading-tip">正在登录，请稍后...</span>
			</Spin>
		</div>
        <img class="logo" src="/image/logo.png" alt="" />
        <Form>
			<FormItem prop="number">
				<Input type="text" v-model.trim="formItem.number" placeholder="请输入用户名">
				<Icon type="ios-person-outline" slot="prepend"></Icon>
				</Input>
			</FormItem>
			<FormItem prop="name">
				<Input type="password" v-model.trim="formItem.password" placeholder="请输入密码">
				<Icon type="ios-lock-outline" slot="prepend"></Icon>
				</Input>
			</FormItem>
			<FormItem>
				<Button long type="primary" @click="handleSubmit">登录</Button>
			</FormItem>
		</Form>
    </div>
</template>

<script setup>
    import { reactive, ref, watch, getCurrentInstance } from 'vue';
    import { storeToRefs } from 'pinia'
    import { Message } from 'view-ui-plus';
    import { useStateStore } from '@/store/StateStore.js'
    import router from '@/router'

    const isShow = ref(false)
    const tip = ref('')
    const isShowLoading = ref(false)
    const truckMonitorStatus = ref(false)
    const rootBus = ref(null)
    const stateStore = useStateStore()
    const stateStoreToRefs = storeToRefs(stateStore)
    const { getLoginAck, truckMonitorMsg, isShowNetworkTip } = stateStoreToRefs

    const instance = getCurrentInstance()
    const { appContext } = instance
    const { $indexRoot } = appContext.config.globalProperties

    const formItem = reactive({
        number: '',
        password: ''
    })

    function handleSubmit() {
        if (isShowLoading.value) return
        if (truckMonitorStatus.value) return Message.error('车端未启动，无法登录！')
        if (!formItem.number || !formItem.password) return Message.error('请将用户名和密码填写完整！')

        window.state = "login";

        let loginForm = JSON.stringify({
            type: "/login/req",
            msg: {
                number: formItem.number,
                password: formItem.password
            }
        })

        if ($indexRoot.sock) {
            $indexRoot.sock.send(loginForm)
        } else {
            $indexRoot.init().then(socket => {
                socket.send(loginForm)
            })
        }
    }

    watch(getLoginAck, (value) => {
        if (value && window.state === 'login') {
            let {code, number} = value
            if (code === 0 && number === formItem.number) {
                router.push({
                    name: 'main'
                })
                window.state = null
                stateStore.setLoginForm(formItem)
            } else {
                Message.error(value.msg)
                stateStore.setData('loginAck', null)
            }
        }
    })

    watch([truckMonitorMsg, isShowNetworkTip], ([data, isNetworkTip]) => {
        if (data) {
            let { visible, msg } = data
            truckMonitorStatus.value = visible
            isShow.value = visible
            tip.value = msg
            isShowLoading.value = false
        }
        if (isNetworkTip) {
            isShow.value = isNetworkTip.value
        }
    }, {deep: true, immediate: true})
</script>

<style lang="less" scoped>
    .login {
        width: 100%;
        height: 100%;
        background: url("/image/background.png") no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;

        .logo {
            margin-bottom: 20px;
            width: 25vw;
            height: auto;
        }

        .tips {
            color: #ff6363;
            animation: roll 5s infinite;
            position: absolute;
            top: 2vh;
        }

        @keyframes roll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-200px);
            }
        }
        .loadingContainer {
            display: block;
            position: absolute;
            width: 200px;
            top: 15vh;
            background: rgba(0, 0, 0, 0);
        }

        .loadingContainer .ivu-spin-fix {
            background: rgba(0, 0, 0, 0) !important;
        }

        .loading-tip {
            white-space: nowrap;
            color: #fff;
        }
    }
</style>