<template>
    <div class="header">
        <div class="header-logo">
            <img class="header-logo" src="/image/logo.png" alt="">
            <span>矿卡作业管理系统</span>
        </div>
        <div class="header-detail">
            <p v-show="isShow" class="tips">
                网络异常，请检测网络！连接超时{{timeout}}s
            </p>
            <img :src="`/image/${gps}.png`" alt="">
            <img :src="`/image/${wifi}.png`" alt="">
            <p class="time">{{currentTime}}</p>
        </div>
    </div>
</template>

<script setup>
    import { ref, computed, watch } from 'vue'
    import { useStateStore } from '@/store/StateStore.js'
    import { storeToRefs } from 'pinia'

    const stateStore = useStateStore()
    const stateStoreToRefs = storeToRefs(stateStore)
    const { isShowNetworkTip } = stateStoreToRefs

    const gps = computed(() => {
        const currentGps = stateStoreToRefs.gps.value
        return `GPRS0${currentGps || 1}`
    })

    const wifi = computed(() => {
        const currentWifi = stateStoreToRefs.wifi.value
        return `connect00${currentWifi + 1}`
    })

    const isShow = computed(() => {
        return isShowNetworkTip.value
    })

    const currentTime = computed(() => {
        const time = stateStoreToRefs.currentTime.value
        return new Date(time).format('yyyy-MM-dd hh:mm:ss')
    })

    const timeout = computed(() => {
        return stateStoreToRefs.netWorkTipCount
    })
</script>

<style lang="less" scoped>
.header {
    background: #0B0D12;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header-logo {
        display: flex;
        align-items: center;
        height: calc(100% - 17px);
        img {
            width: 1rem;
            height: auto;
            margin-right: .1rem;
        }
    }
    image {
        width: 30px;
        height: 30px;
    }

    @keyframes roll{
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-200px);
        }
    }
    .header-detail {
        display: flex;
        align-items: center;
        .tips {
            color: #FF6363;
            animation: roll 5s infinite;
        }
    }
    .time {
        margin: 0 5px;
        font-size: 16px;
        white-space: nowrap;
    }
}
</style>