<template>
  <div class="tabs-pane" :class="classes" v-show="active">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "zViewTabsPane",
  inject: ["eventBus"],
  props: {
    name: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      active: false
    };
  },
  computed: {
    classes() {
      return {
        active: this.active
      };
    }
  },
  mounted() {
    // console.log("tabs-pane 收到 tabs 提供的 eventBus");
    // console.log(this.eventBus);
    this.eventBus.$on("update:selected", name => {
      // console.log("pane 组件收到了 update:selected 事件", name);
      this.active = name === this.name;
    });
  }
};
</script>
<style lang="scss">
$blue: blue;
.tabs-pane {
  margin-top: 1em;
  &.active {
    color: $blue;
  }
}
</style>