<template>
  <div class="dk-tabbar">
    <van-tabbar v-model="tmpActive" :active-color="activeColor" :inactive-color="inactiveColor" :style="{backgroundColor:bgColor}" :fixed="false">
      <van-tabbar-item
        v-for="(item,key) in tabBars"
        :key="key"
        :icon="item.icon"
        :dot="item.badge==='dot'"
        :badge="item.badge==='badge'?item.badge_text:''"
      >
        <span>{{ item.title }}</span>
        <template v-if="item.useImg ===true" #icon>
          <img :src="item.imgIcon" alt="">
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// import { tabbar as VanTabbar, TabbarItem as VanTabbarItem } from 'vant'

export default {
  name: 'DkTabbar',
  components: {
    // VanTabbar, VanTabbarItem
  },
  props: {
    tabBars: {
      default: () => {
        return []
      },
      type: [Array]
    },
    active: { default: 0, type: Number },
    activeColor: { default: '#1989fa', type: String },
    inactiveColor: { default: '#333333', type: String },
    bgColor: { default: '#fff', type: String }
  },
  data() {
    return {
      tmpActive: this.active - 1
    }
  },
  computed: {},
  watch: {
    active() {
      this.tmpActive = this.active
    }
  },
  mounted() {
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.dk-tabbar {
  &::v-deep {
    .van-tabbar-item--active ,.van-tabbar{
      background: none;
    }
  }
}
</style>
