<template>
    <div class="index">
        <router-view />
        <van-tabbar route>
            <van-tabbar-item replace to="/home">
                <span>首页</span>
                <template #icon="props">
                    <img :src="props.active ? home.s : home.n" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace :badge="unread" to="/notice">
                <span>消息</span>
                <template #icon="props">
                    <img :src="props.active ? msg.s : msg.n" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/mapIndex">
                <span>地图</span>
                <template #icon="props">
                    <img :src="props.active ? map.s : map.n" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/my">
                <span>我的</span>
                <template #icon="props">
                    <img :src="props.active ? my.s : my.n" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import home_n from '@/assets/home_n.png'
import home_s from '@/assets/home_s.png'
import map_n from '@/assets/map_n.png'
import map_s from '@/assets/map_s.png'
import msg_n from '@/assets/msg_n.png'
import msg_s from '@/assets/msg_s.png'
import my_n from '@/assets/my_n.png'
import my_s from '@/assets/my_s.png'
import { get } from '@/utils/http.js';

export default {
    data () {
        return {
            home: {
                n: home_n,
                s: home_s,
            },
            map: {
                n: map_n,
                s: map_s,
            },
            msg: {
                n: msg_n,
                s: msg_s,
            },
            my: {
                n: my_n,
                s: my_s,
            },
            unread: '',
        }
    },
    watch: {
        $route: {
            handler(to) {
                this.getUnreadNum();
            },
            immediate: true,
        },
    },
    methods: {
        getUnreadNum() {
            get('/v2/api/enforce-job/message/count').then(res => {
                const count = res ? parseInt(res) : 0;
                this.unread = count > 0 ? `${count}` : '';
            });
        }
    }
}
</script>