<template>
    <div class="main">
        <page-header class="page-header"></page-header>
        <div class="page-main">
            <side-bar class="side-bar" ref="sideBarDom" @changeTab="changeTab"></side-bar>
            <div class="container">
                <div class="container-message" v-show="isShowBasic">
                    <basic-message v-if="basciName === 'basic_message'" @handleClose="handleClose" @showModal="showModal"></basic-message>
                    <basic-information v-else @handleClose="handleClose"></basic-information>
                    <information-msg class="information-msg"></information-msg>
                </div>
                <div v-show="!isShowBasic" class="container-message-icon" @click="handleShowBasic">
                    <img src="/image/basic-message-icon.png" alt="" />
                </div>
                <map-container class="map" :reloadData="reloadData" :isShowBasic="isShowBasic" @handleSend="handleSend"></map-container>
            </div>
        </div>
        <Modal v-model="isShow"
            :mask-closable="false"
            :footer-hide="true"
            :title="title"
            :closable="isCloseable"
            :width="modalWidth"
            @on-visible-change="modeChange">
            <component :is="currentTag" :is-show="isShow" @handleSend="handleSend" @closeModal="closeModal"></component>
        </Modal>
        <Modal v-model="isShowTip"
            :mask-closable="false"
            :mask="false"
            :footer-hide="isFooterHide">
            <p>{{ vehicleTip }}</p>
            <p>{{ remaintime }}</p>
            <template #footer>
                <Button type="info" class="footer" @click="doClose">确定</Button>
            </template>
        </Modal>
        <Modal v-model="isShowBoxCheck"
            title="确认信息"
            class="box-check"
            :closable="false"
            :mask-closable="false"
            @on-ok="handleBoxCheck(1)"
            @on-cancel="handleBoxCheck(0)">
            <span>{{ checkMsg.msg }}</span>
            <template #footer>
                 <Button type="info" class="footer" @click="doClose">确定</Button>
                 <Button type="info" class="footer" @click="doClose">取消</Button>
            </template>
        </Modal>
    </div>
</template>

<script setup>
    import { onBeforeMount, ref, getCurrentInstance, computed, watch, toRefs, reactive, onBeforeUnmount, shallowRef } from 'vue'
    import { useVehicleStore } from '../store/VehicleStore';
    import { storeToRefs } from 'pinia';
    import { Message } from 'view-ui-plus';
    import PageHeader from './PageHeader.vue'
    import SideBar from './SideBar.vue';
    import BasicMessage from './BasicMessage.vue';
    import BasicInformation from './BasicInformation.vue';
    import InformationMsg from './InformationMsg.vue';
    import AlarmModal from './AlarmModal.vue'
    import ModeSwitch from './ModeSwitch.vue'
    import LogModal from './LogModal.vue'
    import SetView from './SetView.vue'
    import Logout from './Logout.vue'
    import MapContainer from './MapContainer.vue'

    let tipTimer = null
    const isShowBasic = ref(true)
    const currentName = ref('basic_message')
    const basciName = ref('basic_message')
    const isShow = ref(false)
    const isShowTip = ref(false)
    const isShowBoxCheck = ref(true)
    const title = ref('')
    const isCloseable = ref(true)
    const currentTag = shallowRef('')
    const sideBarDom = ref(null)
    const vehicleTip = ref('')
    const remaintime = ref('')
    const isFooterHide = ref(true)
    const reloadData = ref(false)
    const boxCheckMsg = reactive({
        checkMsg: {}
    })
    const { checkMsg } = toRefs(boxCheckMsg)
    const instance = getCurrentInstance()
    const { appContext } = instance
    const { $indexRoot } = appContext.config.globalProperties
    const vehicleStore = useVehicleStore()
    const vehicleStoreToRefs = storeToRefs(vehicleStore)
    const { tipInfo, infoPop } = vehicleStoreToRefs

    onBeforeMount(() => {
        window.addEventListener('beforeunload', () => {
            handleSubscribe()
        })
        // // 发送同步地图版本号信息
        // if (!$indexRoot.sock) {
        //     $indexRoot.init()
        // }
    })

    function handleSubscribe() {
        reloadData.value = true
        $indexRoot.destroyData()
    }

    const modalWidth = computed(() => {
        if (currentName.value === 'log' || currentName.value === 'set') return '70%'
        return '520px'
    })

    function handleSend(msg) {
        if ($indexRoot.sock) {
            console.log('发送信息', msg)
            $indexRoot.sock.send(JSON.stringify(msg))
        } else {
            $indexRoot.init().then(socket => {
                console.log('发送信息', msg)
                socket.send(JSON.stringify(msg))
            })
        }
    }

    function doModeSwitch() {
        isCloseable.value = false
        title.value = '确认信息'
        isShow.value = true
        currentTag.value = ModeSwitch
    }

    function handleModal(name) {
        title.value = name === 'log' ? '日志获取' : '设置'
        currentTag.value = name === 'log' ? LogModal : SetView
        isCloseable.value = true
        isShow.value = true
    }

    function handleLogout() {
        title.value = ''
        currentTag.value = Logout
        isCloseable.value = true
        isShow.value = true
    }

    function changeTab(name) {
        console.log(name)
        currentName.value = name
        switch(name) {
            case 'mode_switch':
                doModeSwitch()
                break
            case 'mode_information':
            case 'basic_message':
                basciName.value = name
                break
            case 'log':
            case 'set':
                handleModal(name)
                break
            case 'logout':
                handleLogout()
                break
        }
    }

    function handleClose() {
        isShowBasic.value = false
    }

    function handleShowBasic() {
        isShowBasic.value = true
    }

    function closeModal() {
        isShow.value = false
    }

    function modeChange(visible) {
        if (!visible) {
            let sideBar = sideBarDom.value
            sideBar.changeMode()
        }
    }

    function showModal() {
        isShow.value = true
        currentTag.value = AlarmModal
        title.value = '车辆故障码'
        isCloseable.value = true
    }

    function doClose() {
        isShowTip.value = false
        if (tipTimer) {
            clearTimeout(tipTimer)
            tipTimer = null
        }
    }

    function handleShowBoxCheck(list) {
        let data = list[0]
        if (!data) return
        boxCheckMsg.checkMsg = data
        isShowBoxCheck.value = true
    }

    function handleBoxCheck(accept) {
        let {type, value} = boxCheckMsg.checkMsg
        handleSend({
            type: '/info/popupack',
            msg: {
                type,
                value,
                accept
            }
        })
        vehicleStore.splitInfoPop()
    }

    watch(tipInfo, (msg) => {
        if (!msg) return

        const {type, value, remaintime: vehicleRemainTime, isFirst} = msg
        if (type === 1) {
            isShowTip.value = true
            vehicleTip.value = value
            isFooterHide.value = false
            tipTimer = setTimeout(() => {
                doClose()
            }, 5 * 1000)
        } else if (type === 2) {
            Message.info({
                content: value,
                duration: 10,
                closable: true
            })
        } else {
            isFooterHide.value = true
            if (isFirst === 1) {
                isShowTip.value = true
            }
            vehicleTip.value = value
            remaintime.value = vehicleRemainTime
            if (vehicleRemainTime < 1) {
                isShowTip.value = false
            }
        }
        vehicleStore.setData('tipInfo', null)
    }, {
        deep: true
    })

    watch(infoPop, (list) => {
        if (list.length) {
            handleShowBoxCheck(list)
        } else {
            isShowBoxCheck.value = false
        }
    }, {
        deep: true
    })

    onBeforeUnmount(() => {
        $indexRoot.destroyData()
        window.removeEventListener('beforeunload', handleSubscribe())
    })
</script>

<style lang="less" scoped>
.main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .page-header {
        flex: 0 0 10vh;
        min-height: 46px;
        // align-items: flex-end;
    }
    .page-main {
        background: url('/image/background.png') no-repeat;
        background-size: cover;
        flex: auto;
        display: flex;
        height: calc(100% - 10vh);
        .side-bar {
            flex: 0 0 7vw;
            min-width: 70px;
        }
        .container {
            flex: auto;
            display: flex;
            position: relative;
            .container-message {
                flex: 0 0 22vw;
                min-width: 240px;
                display: flex;
                flex-direction: column;
                overflow-y: auto;
                overflow-x: hidden;
                .container-basic {
                    flex: auto;
                    height: calc(100% - 150px);
                    overflow-y: auto;
                    overflow-x: hidden;
                }
            }
            .container-message-icon {
                position: absolute;
                z-index: 9999;
                top: 5vh;
                left: 1vw;
                background: #4A75A9;
                box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
                border-radius: 10px;
                opacity: 1;
                display: flex;
                cursor: pointer;
            }
            .map {
                flex: auto;
                display: flex;
                flex-direction: column;
            }
        }
    }
}
</style>