<template>
  <div class="capsuleContainer">
    <div v-for="(item,index) in config" :class="{'active':activeIndex==index}" :key="index" @click="itemClick(item,index)">
      <span v-if="!item.slot">
        <span v-if="typeof item == 'object'">
          {{item.value}}
        </span>
        <span v-else>
          {{item}}
        </span>
      </span>
      <span v-else>
        <slot :name="item.slot"></slot>
      </span>
    </div>
  </div>
</template>

<script>
    export default {
        name: "index",
        data(){
            return{
                activeIndex:0
            }
        },
        props:{
            config:{
                type:Array,
                default(){
                    return []
                }
            }
        },
        methods:{
            itemClick(item,index){
                this.activeIndex=index;
                this.$emit("click",item,index)
            }
        }
    }
</script>

<style scoped lang="scss">
  .capsuleContainer{
    font-size: 0;
    div{
      display: inline-block;
      background: #fff;
      border: 1px solid #d9d9d9;
      color: #595959;
      border-radius: 3px;
      padding: 6px 12px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.42857143;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      outline: none;
      -webkit-transition: .2s;
      transition: .2s;
      cursor: pointer;
      &:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: none;
        margin-left: -1px;
      }
      &:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: none;
      }
      &.active{
        border: 1px solid #52c41a !important;
        background: #52c41a !important;
        color: #fff !important;
        font-weight: bold;
      }
    }
  }

</style>