<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="cacheRoutes">
      <component :is="Component" @updateShare="onUpdateShare" />
    </keep-alive>
  </router-view>
  <van-tabbar v-model="DefaultActive" placeholder @change="onTabChange" active-color="#841e36" inactive-color="#1b1b1b"
    fixed>
    <van-tabbar-item v-for="item in Tabbars" :key="item.Name" :name="item.Name" :badge="getBadge(item)" :dot="item.Dot"
      @click="onTabClick(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',
  emits: ['updateShare'],
  data() {
    return {
      DefaultActive: 'Home',
      cacheRoutes: ['Home', 'Gift', 'Mall', 'Social'],
      Tabbars: [
        {
          Name: 'Home',
          Label: '主页',
          Icon_Active: '/img/Home_Active.png',
          Icon_Inactive: '/img/Home_Inactive.png',
        },
        {
          Name: 'Gift',
          Label: '礼包区',
          Icon_Active: '/img/Gift_Active.png',
          Icon_Inactive: '/img/Gift_Inactive.png',
        },
        {
          Name: 'Mall',
          Label: '商城',
          Icon_Active: '/img/Mall_Active.png',
          Icon_Inactive: '/img/Mall_Inactive.png',
        },
        {
          Name: 'Social',
          Label: '加盟店',
          Icon_Active: '/img/Social_Active.png',
          Icon_Inactive: '/img/Social_Inactive.png',
        },
        {
          Name: 'My',
          Label: '我的',
          Icon_Active: '/img/My_Active.png',
          Icon_Inactive: '/img/My_Inactive.png',
        },
      ],
    }
  },
  watch: {
    '$route.path': {
      handler() {
        this.updateActive()
      },
      immediate: true
    }
  },
  created() {
    this.updateActive();
  },
  methods: {
    updateActive() {
      const routeName = this.$route.name
      // if (routeName === 'Social') {
      //   return
      // }
      const tabbar = this.Tabbars.find(item => item.Name === routeName)
      if (tabbar) {
        this.DefaultActive = tabbar.Name
      }
    },
    getBadge(item) {
      return item.Badge || ''
    },
    onTabClick(name) {
      // if (name === 'Social') {
      //   return
      // }
      if (this.$route.name === name) {
        // 当前路由，双击刷新
        // this.$router.replace({ name })
        location.reload();
        window.scrollTo(0, 0)
      } else {
        this.$router.push({ name })
      }
    },
    onTabChange(name) {
      // if (name === 'Social') {
      //   this.$showToast('暂未开放')
      //   this.DefaultActive = this.$route.name;
      //   return
      // }
      this.DefaultActive = name
    },
    onUpdateShare(title, desc, imgUrl) {
      this.$emit('updateShare', title, desc, imgUrl)
    }
  }
}
</script>