import {Component, Prop, Vue, Emit, Watch} from 'vue-property-decorator';
import { nextTick } from 'vue/types/umd';

@Component
export default class EflyTable extends Vue {
    @Prop({default: () => ''}) private data!: any[];
    @Prop({default: () => 'loading'}) private status!: any[];
    @Prop({default: () => ''}) private loadingImg?: string;
    @Prop({default: () => 'icon-nodata'}) private nodataIcon!: any[];
    @Prop({default: () => ''}) private monitor?: any;
    @Prop({default: () => 'unset'}) private maxHeight?: any;

    private show: any = 'header';

    private children: any = [];

    private slot: any = [];

    private index = false;

    @Watch('monitor', {deep: true})
    private watchMonitor(value: any) {
        this.headerInit();
        // this.data = JSON.parse(JSON.stringify(this.data))
    }

    @Watch('data', {immediate: true})
    private watchData(value: any) {
        setTimeout(()=>{
            this.init();
            let $children:any = this.$children
            for(let i in $children){
                $children[i].init();
            }
        }, 300)
    }

    private created() {
        this.headerInit();
    }

    // 注释的是兼容固定表头的，有点问题，现在还没写
    private headerInit(){
        let slot: any = this.$slots.default;
        // let tableWidth = (this.$refs.tes as any).clientWidth;
        // let slotWidth = 0;
        // let noWidthSum = 0;
        this.slot = [];
        for (let i in slot) {
            if(slot[i].tag){
                // slot[i].componentOptions.propsData.width ? (slotWidth += +slot[i].componentOptions.propsData.width) : noWidthSum++;
                let data = {
                    width: slot[i].componentOptions.propsData.width,
                    show: slot[i].componentOptions.propsData.show === undefined ? true : slot[i].componentOptions.propsData.show ,
                }
                this.slot.push(data)
            }
        }
        // slotWidth = this.checkWidth(tableWidth, slotWidth, noWidthSum);
        // let otherWidth = (tableWidth - slotWidth) / noWidthSum;
        // this.slot.forEach((item: any) => {
        //     if (!item.width) {
        //         item.width = otherWidth > 0 ? otherWidth : 0;
        //     }
        // })
        Vue.nextTick().then(()=> {
            this.init();
        })
    }

    private mounted() {
        // this.init();
    }

    private init(){
        let children: any = this.$children
        let rowLength = this.slot.length * this.slot.length;
        let row = 0, column = 0;
        let location = 0;
        let columnLength = this.slot.length;
        let rowIndex = 0, columnIndex = 0;
        let delay = setTimeout(()=>{
            for (let i in children) {
                children[i].status.type = row === 0 ? 'header' : 'prop';
                children[i].row = row;
                children[i].column = column;
                children[i].location = row + '-' + location;
                children[i].status.show = column === location ? true : false;
                if (rowIndex >= rowLength - 1) {
                    row++
                    rowIndex = 0;
                    location = -1;
                } else {
                    rowIndex++;
                }
                if (column >= columnLength - 1) {
                    column = 0;
                    location++;
                } else {
                    column++;
                }
            }
            this.$forceUpdate()
            clearTimeout(delay)
        }, 1)
    }

    private checkWidth(tableWidth: number, slotWidth: number, noWidthSum: number) {
        let nowSlotWidth = slotWidth;
        let that = this;
        if ((slotWidth + (noWidthSum * 20)) > tableWidth) {
            nowSlotWidth = 0;
            this.slot.forEach((item: any) => {
                if (item.width) {
                    let nowWidth = item.width - 10;
                    item.width = nowWidth > 20 ? nowWidth : item.width;
                    nowSlotWidth += +item.width;
                }
            })
            nowSlotWidth = that.checkWidth(tableWidth, nowSlotWidth, noWidthSum);
        }
        return nowSlotWidth;
    }

}