<template>
  <div class="bottom-tab">
    <div class="bottom-tab-item" v-for="(item,$index) in data" :key="$index" @click="changTab($index,item)">
      <div class="item-image">
        <img v-show="$index!=index" :src="item.defaultImage"/>
        <img v-show="$index==index" :src="item.ActivatedImage"/>
      </div>
      <div class="item-text" :class="{'item-text-default':$index!=index,'item-text-action':$index==index}">
        {{item.textContent}}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'md-bottom-tab',
    props: {
      data: {
        type: Array,
        default () {
          return []
        }
      }
    },
    data () {
      return {
        index: 0,
        dataList: this.data || [
          {
            ActivatedImage: '',
            defaultImage: '',
            textContent: '文本',
            path: ''
          }
        ]
      }
    },
    methods: {
      changTab (_index, item) {
        this.index = _index
        this.$emit('change', item, _index)
      }
    }
  }
</script>

<style lang="stylus">
  .bottom-tab {
    width 100%
    height auto
    display flex
    position fixed
    bottom 0px
    overflow hidden
    background-color #fff
    padding-top 6px
    border-top 1px solid #f5f5f5
    z-index 1000
  }

  .bottom-tab .bottom-tab-item {
    flex-grow 1
    height 60px
  }

  .bottom-tab .bottom-tab-item .item-image {
    height 30px
    width 30px
    margin 0px auto
  }

  .bottom-tab .bottom-tab-item .item-image img {
    height 100%
    width 100%
  }

  .bottom-tab .bottom-tab-item .item-text {
    height 24px
    text-align center
    font-size font-body-large
    line-height 26px
    margin-top 1px
  }
  .item-text-default{
    color : #8a8a8a
  }
  .item-text-action{
    color : color-primary
  }

</style>
