<template>
  <router-view></router-view>

  <div class="copyright">
    <span>
      版权所有 微生客 ©<br>
      Copyright 2019. All Rights Reserved. <br>
      浙ICP备13026631号-2
    </span>
  </div>
  <van-tabbar v-model="active" placeholder @change="changeActive" active-color="#00c250" inactive-color="#666" fixed>
    <van-tabbar-item v-for="(item, index) in Tabbars" :name="item.Name" :dot="item.Dot" @click="refresh(item.Name)">
      <span>{{ item.Label }}</span>
      <template #icon="props">
        <img :src="props.active ? item.Icon_Active : item.Icon_Inactive" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      active: this.$route.name,
      Tabbars: [
        {
          Name: 'Home',
          Icon_Inactive: '/img/home_inactive.png',
          Icon_Active: '/img/home_active.png',
          Label: '首页',
        },
        {
          Name: 'About',
          Icon_Inactive: '/img/about_inactive.png',
          Icon_Active: '/img/about_active.png',
          Label: '关于公司',
        },
        {
          Name: 'Service',
          Icon_Inactive: '/img/service_inactive.png',
          Icon_Active: '/img/service_active.png',
          Label: '产品服务',
        },
        {
          Name: 'Apply',
          Icon_Inactive: '/img/apply_inactive.png',
          Icon_Active: '/img/apply_active.png',
          Label: '申请加盟',
        }
      ]
    }
  },
  watch: {
    $route(to, from) {
      this.active = to.name;
    }
  },
  methods: {
    refresh(name) {
      if (this.$route.name == name) {
        location.reload();
      };
      this.active = name;
      this.$router.push({ name: name })
    },
    changeActive(name) {
      this.active = name;
    },
    init() {
      if (this.$route.name == 'Index') {
        location.replace(`/${this.Tabbars[0].Name}`);
      }
    }
  },
  beforeMount() {
    this.init();
  }
}
</script>