<template>
  <div class="mobile-terminal">
    <div class="mobile-main">
      <keep-alive>
        <router-view v-if="$route.meta.isKeepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.isKeepAlive"></router-view>
    </div>
    <van-tabbar v-model="tabbarActive">
      <van-tabbar-item to="/mobile-terminal">
        <span>首页</span>
        <template #icon>
          <span class="font_family icon-icon_sy_mr"></span>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/mobile-terminal/more">
        <span>功能</span>
        <template #icon>
          <span class="font_family icon-leibie1"></span>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/mobile-terminal/warn">
        <span>预警</span>
        <template #icon>
          <span class="font_family icon-yujingquanzu"></span>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  created () {
    if (this.$route.path === '/mobile-terminal') {
      this.tabbarActive = 0
    } else if (this.$route.path === '/mobile-terminal/warn') {
      this.tabbarActive = 2
    } else {
      this.tabbarActive = 1
    }
  },
  data () {
    return {
      // tabbar
      tabbarActive: 0,
      // loading
      loadingShow: true
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.mobile-terminal {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .mobile-main {
    width: 100%;
    height: 100%;
    padding-bottom: 50px;
    background-color: #fff;
    overflow: hidden;
  }
  .van-hairline--top-bottom {
    box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.2);
  }
  .loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .loading-box ::v-deep {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 115px;
      height: 115px;
      border-radius: 15px;
      background-color: rgba(0, 0, 0, 0.8);
      .van-loading__text {
        color: #fafafa;
      }
    }
  }
}
</style>
