<template>
    <div class="home">
        <headNav :Larrow="false" title="首页"></headNav>
        <div class="banner">
            <img :src="banner" alt="" srcset="">
            <div class="name">消防执法监管系统</div>
            <div class="title">消防安全▪人人有责</div>
        </div>
        <div class="menu">
            <item v-for="(item, index) in menus" :key="index" :icon="item.icon" :name="item.name" :path="item.url"></item>
        </div>
    </div>
</template>

<script>
import headNav from '@/components/headNav.vue'
import Item from './Item.vue'
import { savePwdTips, getPwdTips, getMenus } from '@/utils/auth'
import { get } from '@/utils/http.js';
import { Dialog } from 'vant';

export default {
    components: {
        headNav,
        Item
    },
    data () {
        return {
            banner: require('@/assets/banner.png'),
            menusConfig: [
                {
                    icon: 'normal',
                    name: '日常检查',
                    path: '/dailyMissionList'
                },
                {
                    icon: 'report',
                    name: '举报检查',
                    path: '/reportList'
                },
                {
                    icon: 'special',
                    name: '专项检查',
                    path: '/special'
                },
                {
                    icon: 'approve',
                    name: '限改审批',
                    path: '/approve'
                },
                {
                    icon: 'town',
                    name: '乡镇检查',
                    path: '/town'
                },
                {
                    icon: 'record',
                    name: '任务记录',
                    path: '/missionRec'
                },
                {
                    icon: 'voice',
                    name: '执法设备',
                    path: '/deviceManage'
                },
                {
                    icon: 'device',
                    name: '执法音视频',
                    path: '/lawAudioVideo'
                },
                {
                    icon: 'car',
                    name: '违法占道',
                    path: '/carList'
                },
                {
                    icon: 'other',
                    name: '其他任务',
                    path: '/otherList'
                },
            ]
        }
    },
    mounted () {
        this.checkPwd();
    },
    methods: {
        checkPwd() {
            const show = getPwdTips();
            if (show == 1) {
                return;
            }
            const vm = this;
            get('/v2/api/old_sys_user/user/password_update_check').then(res => {
                if (res == true) {
                    Dialog.confirm({
                        title: '温馨提示',
                        message: '旧系统密码已更改，请更新密码',
                        confirmButtonText: '更新',
                        cancelButtonText: '取消',
                    }).then(() => {
                        // on confirm
                        vm.$router.push('/my/oldPwd');
                    }).catch(() => {
                        // on cancel
                    });
                    savePwdTips(1);
                }
            });
        }
    },
    computed: {
        menus() {
            const res = getMenus();
            if (res && res.length > 0) {
                res.map(item => {
                    const target = this.menusConfig.filter(obj => obj.path == item.url);
                    if (target.length > 0) {
                        item.icon = target[0].icon;
                    }
                });
            }
            return res || [];
        }
    },
}
</script>

<style lang="scss" scoped>
.home {
    width: 100%;
    display: flex;
    flex-direction: column;
    .banner {
        margin-top: 47px;
        padding: 14px 16px;
        border-radius: 8px;
        position: relative;
        &>img {
            width: 100%;
        }
        .name {
            position: absolute;
            top: 50px;
            left: 44px;
            font-size: 14px;
            font-weight: bolder;
            color: #FFFFFF;
        }
        .title {
            position: absolute;
            top: 90px;
            left: 34px;
            font-size: 20px;
            font-weight: bolder;
            color: #FFFFFF;
        }
    }
    .menu {
        display: flex;
        flex-wrap: wrap;
        padding: 0 24px 24px;
    }
}
</style>