<template>
    <view class="navbar">
        <view class="navbar-box">
            <view class="navbar-box-info">
                <image src="/static/mocp/image/panel/logo.png" />
            </view>
            <view class="navbar-box-weather" v-if="weatherInfo">
                <!-- <image src="/static/mocp/image/panel/weather.png" /> -->
                <view class="info">
                    <view class="place">{{ baseStore.getTerminalObject[userStore.userInfo?.terminal || 'WUH'] }}</view>
                    <view class="msg">
                        <up-parse :content="weatherInfo.weatherInfoTxt"></up-parse>
                        <view class="txt">{{ weatherInfo.temperature }}°</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="navbar-bottom-list">
            <view class="list-item" @tap="goMyToDo">
                <image class="list-item-image" src="/static/mocp/image/panel/wddb.png" />
                <view class="list-item-msg">
                    <view class="list-item-title">我的待办</view>
                    <view class="list-item-txt">{{ getTotal }}</view>
                </view>
            </view>
            <view class="list-item-line"></view>
            <view class="list-item">
                <image class="list-item-image" src="/static/mocp/image/panel/wdxx.png" />
                <view class="list-item-msg">
                    <view class="list-item-title">我的消息</view>
                    <view class="list-item-txt">-</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import useUserStore from 'mocp/store/user'
import useBaseStore from 'mocp/store/base'
import useMyToDoStore from 'mocp/store/my-toDo'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()
const baseStore = useBaseStore()
const weatherInfo = ref()
//渲染天气信息
uni.$on('sendWeatherInfo', (info) => {
    weatherInfo.value = info
})
//我的待办
const myToDoStore = useMyToDoStore()
onMounted(() => {
    myToDoStore.initData()
})
const { getTotal } = storeToRefs(myToDoStore)
//跳转我的待办
const goMyToDo = () => {
    uni.$mocpJump.navigateTo('/panel/my-toDo/index')
}
</script>
<style lang="scss" scoped>
@import '../constants/panel-navbar.scss';
:deep(._block) {
    display: flex !important;
}
</style>
