<template>
  <div class="tab-list-wrapper">
    <ul class="tab-list">
      <li
        class="tab-item"
        v-for="item in tabs"
        :key="item.value"
        :class="{current: current == item.value}"
        @click="handleClick(item)"
      >{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
    name: 'TabBar',
    data () {
        return {
            tabs: [{ name: '组织架构', value: 0 }, { name: '自定义分组', value: 1 }],
            current: 0
        }
    },
    methods: {
        handleClick ({ value }) {
            this.current = value
            this.$emit('change', value)
        }
    }
}
</script>

<style lang="stylus" scoped>
.tab-list-wrapper
  padding 10px
  background-color #EFEFF4
  .tab-list
    display flex
    border 1px solid #419df7
    border-radius 5px
    overflow hidden
    .tab-item
      flex 1
      line-height 32px
      text-align center
      background #fff
      transition all 0.3s
      color #303133
      &.current
        background-color #419df7
        color #fff
</style>
