<template>
    <view :class="'weui-tabbar ' + extClass">
        <!-- 选中的时候往 weui-tabbar__item 加 class:weui-bar__item_on -->
        <view :data-index="index" @tap="tabChange" :class="'weui-tabbar__item ' + (index === currentClone ? 'weui-bar__item_on' : '')" v-for="(item, index) in list" :key="index">
            <view style="position: relative; display: inline-block">
                <image :src="currentClone === index ? item.selectedIconPath : item.iconPath" class="weui-tabbar__icon"></image>
                <mp-badge v-if="item.badge || item.dot" :content="item.badge" style="position: absolute; top: -2px; left: calc(100% - 3px)"></mp-badge>
            </view>

            <view class="weui-tabbar__label">{{ item.text }}</view>
        </view>
    </view>
</template>

<script>
import mpBadge from '../badge/badge';

export default {
    components: {
        mpBadge
    },
    data() {
        return {
            currentClone: ''
        };
    },
    options: {
        addGlobalClass: true
    },
    props: {
        extClass: {
            type: String,
            default: ''
        },
        list: {
            type: Array,
            default: () => []
        },
        current: {
            type: Number,
            default: 0
        }
    },
    methods: {
        tabChange(e) {
            const { index } = e.currentTarget.dataset;
            if (index === this.current) {
                return;
            }
            this.setData({
                currentClone: index
            });
            this.$emit('change', {
                detail: {
                    index,
                    item: this.list[index]
                }
            });
        }
    },
    created: function () {},
    watch: {
        current: {
            handler: function (newVal, oldVal) {
                this.currentClone = newVal;
            },

            immediate: true
        }
    }
};

/***/
</script>
<style></style>
