<template>
  <div class="layout">
    <router-view />

    <!-- 底部导航 -->
    <van-tabbar
      v-model="active"
      safe-area-inset-bottom
      placeholder
      active-color="#F4D022"
      inactive-color="#B8BDC5"
      route
    >
      <van-tabbar-item
        v-for="(item, index) in bottomTabs"
        :key="index"
        :to="item.to"
      >
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.icon.active : item.icon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>

  </div>
</template>

<script>
import { Tabbar, TabbarItem } from "vant";

// import RightPanel from "@/components/RightPanel";
// import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components";
// import ResizeMixin from "./mixin/ResizeHandler";
// import { mapState } from "vuex";

export default {
  name: "Layout",
  components: {
    "van-tabbar": Tabbar,
    "van-tabbar-item": TabbarItem,
  },
  data() {
    return {
      active: 0,
      bottomTabs: [
        //底部导航配置
        {
          to: "/home/live",
          title: "直播",
          icon: {
            active: require("@/assets/images/home/live-active.png"),
            inactive: require("@/assets/images/home/live.png"),
          },
        },
        {
          to: "/home/product",
          title: "产品",
          icon: {
            active: require("@/assets/images/home/product-active.png"),
            inactive: require("@/assets/images/home/product.png"),
          },
        },
        {
          to: "/home/my",
          title: "我的",
          icon: {
            active: require("@/assets/images/home/my-active.png"),
            inactive: require("@/assets/images/home/my.png"),
          },
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
@mixin layout-dev {
  position: fixed;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.layout {
  @include layout-dev;
}
 .van-hairline--top-bottom.van-tabbar.van-tabbar--fixed /deep/ .van-tabbar-item.van-tabbar-item--active{
    color:#F4D022;
  }
// @import "~@/styles/mixin.scss";
// @import "~@/styles/variables.scss";

// .app-wrapper {
//   min-width: 1200px;
//   @include clearfix;
//   position: relative;
//   height: 100%;
//   width: 100%;

//   &.mobile.openSidebar {
//     position: fixed;
//     top: 0;
//   }
// }

// .drawer-bg {
//   background: #000;
//   opacity: 0.3;
//   width: 100%;
//   top: 0;
//   height: 100%;
//   position: absolute;
//   z-index: 999;
// }

// .fixed-header {
//   position: fixed;
//   top: 0;
//   right: 0;
//   z-index: 9;
//   width: calc(100% - #{$sideBarWidth});
//   transition: width 0.28s;
// }

// .hideSidebar .fixed-header {
//   width: calc(100% - 54px);
// }

// .mobile .fixed-header {
//   width: 100%;
// }
</style>
