<template>
  <div class="my-tabbar">
    <van-tabbar v-model="activeIndex" active-color="#EE0A24" route>
      <van-tabbar-item v-for="item in iconList" :to="item.url" :key="item.title">
        <span>{{item.title}}</span>
        <template #icon="props">
          <img :src="props.active ? item.icon.active : item.icon.inactive" />
        </template>
      </van-tabbar-item>
      <!-- <van-tabbar-item icon="search" to="/learn">
        <span>学习项目</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/admin">
        <span>管理员信息</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="/editPsd">
        <span>修改密码</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item> -->
    </van-tabbar>
  </div>
</template>

<script>
export default {
  props: {
    active: {
      type: String,
      default: "0"
    }
  },
  data() {
    return {
      activeIndex: this.active,
      iconList: [
        {
          url: "/commit",
          title: "观影互动",
          icon: {
            inactive: require("@/assets/images/applets/commit.png"),
            active: require("@/assets/images/applets/commit-active.png")
          }
        },
        {
          url: "/learn",
          title: "学习项目",
          icon: {
            inactive: require("@/assets/images/applets/learn.png"),
            active: require("@/assets/images/applets/learn-active.png")
          }
        },
        {
          url: "/admin",
          title: "管理员信息",
          icon: {
            inactive: require("@/assets/images/applets/admin.png"),
            active: require("@/assets/images/applets/admin-active.png")
          }
        },
        {
          url: "/editPsd",
          title: "修改密码",
          icon: {
            inactive: require("@/assets/images/applets/editpsd.png"),
            active: require("@/assets/images/applets/editpsd-active.png")
          }
        }
      ]
    };
  }
};
</script>

<style scoped>
.my-tabbar {
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>