export default {
    data() {
        // 隨機生成20個測試數據
        const num = 20;
        var list = new Array(num).fill(0).map((v, i) => {
            return this.createItem(i);
        })
        return {
            list,
        }
    },
    // 直接用render函數來寫，因為我覺得這樣寫props更直觀一點
    render(h){
        return h('tag-autoflow', {
            props:{
                // 設置列數量
                column_size:3,
                // 數據源
                data: this.list,
                // 渲染item的方法，參數目前提供三個
                // h 瀑布流組件的createElement方法，非父組件的
                // item 要渲染的元素對象
                // next 必須主動調用next，插件才會自動去渲染下一個元素，詳細說明見下文
                renderItem(h, item, next){
                    // 簡單的渲染一個img跟一個p標簽
                    // 因為img標簽的圖片加載需要時間，而圖片影響了計算所在列的高度
                    // 所以需要在img觸發(fā)了load事件后，再去調用next渲染下一個item。
                    return h('div', [
                        h('img', {
                            attrs: {
                                src: item.img
                            },
                            on: {
                                load: e => {
                                    next();
                                }
                            }
                        }),
                        h('p', item.title)
                    ])
                },
            },
        });
    },
    methods:{
        createItem(i) {
            var title = i + ',' + new Array(_.random(10, 150)).fill('哈').join('');
            var img = `http://via.placeholder.com/${_.random(100, 400)}x${_.random(100, 400)}`;
            return {
                img,
                title,
            }
        },
    }
}

renderItem(h, item, next){
    this.$nextTick(function(){
        next();
    });
    return h('p', item.title);
},