<template>
    <div class="log-out">
        <p>{{ tipsLogout }}</p>
        <div class="footer">
            <Button type="info" class="btn" @click="doSureLogout">确定</Button>
            <Button type="error" @click="doCancelLogout">取消</Button>
        </div>
    </div>
</template>

<script setup>
    import { ref, watch } from 'vue'
    import { useVehicleStore } from '../store/VehicleStore';
    import { useStateStore } from '../store/StateStore';
    import { storeToRefs } from 'pinia';

    const props = defineProps({
        isShow: Boolean
    })
    const tipsLogout = ref('退出当前系统')
    const logoutStep = ref(0)
    const vehicleStore = useVehicleStore()
    const vehicleStoreToRefs = storeToRefs(vehicleStore)
    const { pattern } = vehicleStoreToRefs
    const stateStore = useStateStore()

    const emits = defineEmits(['handleSend', 'closeModal'])

    function doCancelLogout() {
        logoutStep.value = 0
        emits('closeModal')
    }

    function closeSystem() {
        logoutStep.value = 0
        window.state = 'logout'
        emits('handleSend', {
            type: '/btn/quitApp',
            msg: {}
        })
        stateStore.setData('loginAck', null)
    }

    function doSureLogout() {
        if (pattern.value === 1 && logoutStep.value === 0) {
            tipsLogout.value = '当前是无人模式，确定退出程序'
            logoutStep.value = 1
        } else {
            closeSystem()
        }
    }

    watch(() => props.isShow, (value) => {
        if (value) {
            tipsLogout.value = '退出当前系统'
        }
    }, {
        immediate: true
    })
</script>

<style lang="less" scoped>
    .log-out {
        &>p {
            margin-bottom: 20px;
        }
        .footer {
            text-align: end;
            .btn {
                margin-right: 10px;
            }
        }
    }
</style>