import classNames from '../common/classNames'

Component({
    options: {
        addGlobalClass: true,
        multipleSlots: true
    },
    properties: {
        prefixCls: {
            type: String,
            value: 'wux-skeleton-paragraph',
        },
        rows: {
            type: Number,
            value: 3,
        },
        rounded: {
            type: Boolean,
            value: true,
        },
        widths: {
            type: Array,
            value: [],
        }
    },
    data: {
        active: true,
        rowList: [],
    },
    lifetimes: {
        attached: function () {
            this.updateRows()
            this.setData({
                classes: this.initwrap(this.data.prefixCls, this.data.active, this.data.rounded)
            })
        }
    },
    methods: {
        initwrap: function (prefixCls, active, rounded) {
            const wrap = classNames(prefixCls, {
                [`${prefixCls}--active`]: active,
                [`${prefixCls}--rounded`]: rounded,
            })
            const row = `${prefixCls}__row`
            return {
                wrap,
                row,
            }
        },
        updated(active) {
            if (this.data.active !== active) {
                this.setData({
                    active,
                })
            }
        },
        updateRows(rows = this.data.rows) {
            this.setData({
                rowList: [...Array(rows)].map((_, index) => index),
            })
        },
    }
})