<template>
  <div class="home">
    <!-- <keep-alive> -->
      <router-view ></router-view>
    <!-- </keep-alive> -->
    <van-tabbar route class="tabbar">
      <van-tabbar-item  v-for="{ text, path, icon} in tabList" :key="text" v-bind="to(path)">
        <span>{{text}}</span>
        <template #icon="props">
          <common-svg :name="props.active? icon[0] : icon[1]"></common-svg>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({
})
export default class Main extends Vue {
  private readonly tabList: any[] = [
    {
      text: '首页',
      path: '/',
      icon: ['shouye-lanse', 'shouye-huise'],
    },
    {
      text: '查询',
      path: process.env.VUE_APP_BROWSER,
      icon: ['suyuanbiaoshi', 'suyuanbiaoshi'],
    },
    {
      text: '存证',
      path: '/proofList',
      icon: ['cunzheng-lanse', 'cunzheng-huise'],
    },
    {
      text: '个人',
      path: '/userCenter/index',
      icon: ['geren-lanse', 'geren-heise'],
    },
  ];
  private to(path: any) {
    if ( typeof path === 'string' && path.startsWith('http')) {
      return {
        url: path,
      };
    }
    return {
      to: path,
      replace: 'replace',
    };
  }
}
</script>
<style scoped>
.tabbar{
  position: fixed;
  z-index: 2;
}
</style>
