import {unitPxToRPX} from '../../../utils/tool/unit';
export default {

    data(){
        return {
            number:0,

            sValue:0,   // 选中的值

            width: 0,  // 每一个item 的宽度 left

            offsetLefts:undefined, // 每一个 item 的 宽度

            allWidth: 750,

            lineWidth: 54,

            avgWidth: 0,

            opacity:0,

            sTabs:[],

            headerComponents:{
                default: 'default',
                line: 'line',
                scrollLine: 'scrollLine'
            }
        }
    },

    watch:{
        value:function (value) {
            if (this.sValue !== value) {
                return this.switchTab(value,true);
            }
        }
    },

    methods:{

        // 处理 初始化选中 tabs
        handleTabs:function (tab) {
            let select;
            if (tab[this.value]) {
                select = this.value;
            } else if (tab[this.defaultIndex]) {
                select = this.defaultIndex;
            } else {
                select = 0;
            }

            tab = tab.map((item,index)=>{

                return {
                    loading: select === index,
                    label: item.label || item,
                    slot: item.slot || 'tab-'+index
                }

            });

            if (this.first){
                setTimeout(()=>{
                    this.$emit('change',{
                        item: this.tabs[select],
                        index: select,
                        loading:true
                    });
                },0);
            }

            // 处理tab的宽度问题
            this.handleTabWidth(tab.length);

            return this.setUseData({
                sTabs:tab,
                sValue: select,
                opacity:1
            });


        },

        setUseData(draw){
            for (let key in draw) {
                if (draw.hasOwnProperty(key)) {
                    this[key] = draw[key]
                }
            }
        },

        // 处理 宽度
        handleTabWidth(count){

            if (this.compact) {

                return  setTimeout(()=>{
                    this.createSelectorQuery().selectAll('.tab-header-item').boundingClientRect().exec( (res)=> {
                        let data = res[0];
                        if (data) {

                            // 当前的宽度
                            let offsetLefts = [];
                            // 是否一致
                            let agreement = true;
                            // 当前鉴定宽度
                            let width = 0;
                            // 左侧间距
                            let offsetLeft = 0;

                            data.map((item,index)=>{

                                item.width = unitPxToRPX(item.width);

                                if (index === 0) {
                                    width = item.width;
                                } else if (agreement && width !== item.width) {
                                    agreement = false;
                                }

                                offsetLeft =index *  (item.width + this.margin);
                                offsetLefts.push(offsetLeft + (item.width - this.lineWidth)/2);
                            });

                            return this.setUseData({
                                offsetLefts
                            });

                        }
                    });
                },16);

            } else {

                let width = this.allWidth / count;

                return this.setUseData({
                    width: width,
                    avgWidth: width,
                });
            }

        },

        // 切换
        switchTab:function (e,change =true) {

            let index = typeof e==='object'?e.currentTarget.dataset.index:e;

            if (this.sValue !== index) {

                if (change) {
                    this.$emit('change',{
                        index:index,
                        item: this.sTabs[index],
                        loading: this.sTabs[index]?!this.sTabs[index].loading:true
                    });
                }

                let draw = {
                    sValue:index
                };

                if (this.sTabs[index]){
                    if (!this.sTabs[index].loading) {
                        this.sTabs[index].loading = true;
                        // draw['sTabs['+index+'].loading'] = true;
                    }
                }

                return this.setUseData(draw);

            }

        },

        // swiper 更换
        change:function (e) {

            return this.switchTab(e.detail.current,true);
        },

        changeSwitchTab(e){
            return this.switchTab(e.detail.index,true);
        }

    },

    created(){
        return this.handleTabs(this.tabs);
    }
}

