Component({
    options: {
        addGlobalClass: true,
        pureDataPattern: /^_/,
        multipleSlots: true
    },
    properties: {
        tabs: {
            type: Array,
            value: []
        },
        tabClass: {
            type: String,
            value: ''
        },
        swiperClass: {
            type: String,
            value: ''
        },
        activeClass: {
            type: String,
            value: ''
        },
        tabUnderlineColor: {
            type: String,
            value: '#07c160'
        },
        tabActiveTextColor: {
            type: String,
            value: '#000000'
        },
        tabInactiveTextColor: {
            type: String,
            value: '#000000'
        },
        tabBackgroundColor: {
            type: String,
            value: '#ffffff'
        },
        activeTab: {
            type: Number,
            value: 0
        },
        swipeable: {
            type: Boolean,
            value: true
        },
        animation: {
            type: Boolean,
            value: true
        },
        duration: {
            type: Number,
            value: 500
        }
    },
    data: {
        currentView: 0,
        scrollLeft: 0
    },
    observers: {
        activeTab(_activeTab) {
            this.init(_activeTab);
        },
        tabs() {
            this.init(this.data.activeTab);
        }
    },
    lifetimes: {
        ready() {
            
        }
    },
    methods: {
        init(_activeTab) {
            const len = this.data.tabs.length;
            if (len === 0) return;
            let currentView = _activeTab - 1;
            if (currentView < 0) currentView = 0;
            if (currentView > len - 1) currentView = len - 1;
            this.setData({
                currentView: currentView
            });
            const self = this;
            const query = this.createSelectorQuery();
            query.select('.weui-tabs-bar__item').boundingClientRect();
            query.selectViewport().scrollOffset()
            query.exec(function(res){
                const width = res[0].width;
                const num = Math.floor((_activeTab) / 6);
                self.setData({
                    scrollLeft: width * num * 6
                });
            })
        },
        handleTabClick: function handleTabClick(e) {
            var index = e.currentTarget.dataset.index;
            this.setData({
                activeTab: index
            });
            this.triggerEvent('tabclick', {
                index: index
            });
        },
        handleSwiperChange: function handleSwiperChange(e) {
            var index = e.detail.current;
            this.setData({
                activeTab: index
            });
            this.triggerEvent('change', {
                index: index
            });
        }
    }
});