<template>
  <div class="mobile-containter">
    <van-nav-bar :fixed="true" :title="title" />
    <div class="view">
      <router-view />
    </div>
    <van-tabbar v-model="active" route @change="onChange">
      <van-tabbar-item
        v-for="item in menu"
        :key="item.key"
        :icon="item.icon"
        :to="item.path"
        :name="item.name"
        >{{ item.name }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'MobileHome',
  data() {
    return {
      title: '待开会议',
      active: 'unfinished',
      menu: [
        {
          key: 'unfinished',
          name: '待开会议',
          icon: 'apps-o',
          path: '/MobileHome/unfinished',
        },
        {
          key: 'history',
          name: '历史会议',
          icon: 'friends-o',
          path: '/MobileHome/history',
        },
        {
          key: 'order',
          name: '预约会议',
          icon: 'home-o',
          path: '/MobileHome/order',
        },
      ],
    }
  },

  methods: {
    onChange(val) {
      this.title = val
    }
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.mobile-containter {
  width: 100%;
  min-height: 100%;
  // background-color: $--mobile-bg;
}
.view {
  padding-top: 3.5rem;
  padding-bottom: 4.2rem;
}
</style>
