<template>
  <div id="bootomMenu">
    <div class="menuItem" :class="{menuItemActive:item.path==active}" v-for="(item,index) in menuData" :key="index" @click="tapMenu(item)">
      <div class="menuImg">
        <img :src="item.icon">
      </div>
      <div class="menuTitle">{{item.title}}</div>
    </div>
  </div>
</template>

<script>
  import {getUserInfo} from "../../../util/util.js"
  export default{
    data(){
      return{
        menuData:[]
      }
    },
    props:{
      active:{
        type:'String',
        default:''
      },
    },
    mounted() {
      if(getUserInfo()){
        this.menuData=[
          {
            title:'小区态势',
            path:'index3',
            icon:require('../../../../public/img/grid/home.png'),
          },{
            title:'人员管理',
            path:'peopleManage',
            icon:require('../../../../public/img/grid/people.png'),
          },{
            title:'智能设备',
            path:'contentUnion',
            icon:require('../../../../public/img/grid/device.png'),
          },{
            title:'视频监控',
            path:'videoSurveillance',
            icon:require('../../../../public/img/grid/video.png'),
          }

        ]
      }else{
        this.menuData=[
          {
            title:'小区态势',
            path:'index3',
            icon:require('../../../../public/img/grid/home.png'),
          },{
            title:'人员管理',
            path:'peopleManage',
            icon:require('../../../../public/img/grid/people.png'),
          },{
            title:'车辆管理',
            path:'carManage',
            icon:require('../../../../public/img/grid/car.png'),
          },
          {
            title:'房屋管理',
            path:'houseManage',
            icon:require('../../../../public/img/grid/room.png'),
          },{
            title:'智能设备',
            path:'contentUnion',
            icon:require('../../../../public/img/grid/device.png'),
          },{
            title:'视频监控',
            path:'videoSurveillance',
            icon:require('../../../../public/img/grid/video.png'),
          }

        ]
      }
    },
    methods:{
      // {
      //   title:'房屋管理',
      //   path:'houseManage',
      //   icon:require('../../../../public/img/grid/room.png'),
      // },
      tapMenu(item){
        this.$router.push({
          path:item.path
        })
      }
    }
  }
</script>

<style lang="less">
  #bootomMenu{
    display: flex;
    box-sizing: border-box;
    .menuItem{
      margin-right: 10px;
    }
    .menuItemActive{
        .menuImg{
                border: 1px solid #6dd9ca;
                background-color: rgba(29,73,178,0.4);
                transition: all 0.5s linear;
              }
              .menuTitle{
                color:#6dd9ca;
                transition: all 0.5s linear;
              }
    }
    .menuItem:hover{
      cursor: pointer;
      .menuImg{
        border: 1px solid #6dd9ca;
        background-color: rgba(29,73,178,0.4);
        transition: all 0.5s linear;
      }
      .menuTitle{
        color:#6dd9ca;
        transition: all 0.5s linear;
      }
    }
    .menuImg{
      transition: all 0.5s linear;
      border-radius: 5px;
      border: 1px solid #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      width: 70px;
      height: 70px;
      background-color: #000b2c;
    }
    img{
      width: 30px;
      height: 30px;
      display: block;
    }
    .menuTitle{
      transition: all 0.5s linear;
      margin-top: 10px;
      font-size: 16px;
      text-align: center;
    }
  }
</style>
