<template>
  <view>
    <u-tabbar inactive-color="#999"
              active-color="#ea3323"
              :list="list"
              :mid-button="false"
              @change="tabbarSwitch"></u-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          iconPath: "home",
          selectedIconPath: "home-fill",
          text: "首页",
          customIcon: false,
          pagePath: "/package_sub/pages/Shop/Home"
        },
        {
          iconPath: "grid",
          selectedIconPath: "grid-fill",
          text: "分类",
          customIcon: false,
          pagePath: "/package_sub/pages/Shop/ProductList"
        },
        {
          iconPath: "search",
          selectedIconPath: "search",
          text: "搜索",
          customIcon: false,
          pagePath: "/package_sub/pages/Shop/Search"
        },
        {
          iconPath: "shopping-cart",
          selectedIconPath: "shopping-cart-fill",
          text: "购物车",
          customIcon: false,
          pagePath: "/package_sub/pages/Shop/Cart"
        },
        {
          iconPath: "order",
          selectedIconPath: "order",
          text: "订单",
          customIcon: false,
          pagePath: "/package_sub/pages/Shop/Order"
        },
      ]
    };
  },
  created() {
    let curPages = getCurrentPages();
    this.pageUrl = curPages[curPages.length - 1].route;
  },
  methods: {
    tabbarSwitch(e) {
      let curPages = getCurrentPages();
      if (('/' + curPages[curPages.length - 1].route) === this.list[e].pagePath) return
      this.$u.route({
        url: this.list[e].pagePath,
        animationDuration: 500,
        type: 'reLaunch'
      })
    }
  },
}
</script>

<style lang="scss">

</style>
