<template>

  <div class="button-tab clearfix">
    <button v-for="(item,index) in tab" :key="index"
            :class="[cls,'relative',currentIndex===index?'active':'']"
            @click="btnHandle(index)">
      <touch-ripple class="h100 middle_before">
        <div class="middle ">
          {{item}}
        </div>
      </touch-ripple>
    </button>
  </div>
</template>

<script type="text/babel">
  import TouchRipple from '../TouchRipple/index'

  export default {
    name: 'ZghButtonTab',
    components: {
      'touch-ripple': TouchRipple
    },
    props: {
      tab: {
        type: Array,
        default () {
          return [
            '名称1', '名称2', '名称2'
          ]
        }
      },
      cls: {
        type: String,
        default: 'col-xs-4'
      },
      initIndex: {
        type: Number,
        default: 0
      }
    },
    data () {
      return {
        hover: false,
        currentIndex: this.initIndex
      }
    },
    computed: {},
    mounted () {

    },
    methods: {
      btnHandle(index){
        this.currentIndex = index
        this.$emit('btnClick',index)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import url("../../assets/config.less");

  .button-tab {

    /*border: 1px solid #ccc;*/
    overflow: hidden;

    button {
      height: 30px;
      text-align: center;
      /*line-height: 30px;*/
      border: 1px solid #ccc;
      color: #666;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      /*transition: all .5s;*/
      &:first-child {
        border-radius: 30px 0 0 30px;
        border-right-color: transparent;
      }
      &:last-child {
        border-radius: 0 30px 30px 0;
        border-left-color: transparent;
      }
      &.active {
        background: @common_cl;
        color: #fff;
      }
    }
  }
</style>
