<template>
    <div :class="classes" v-if="loading">
        <div v-if=" !!avatar || avatar === ''" :class="[prefixCls + '-header']">
            <ht-base-avatar v-bind=[avatar]>
                <slot></slot>
            </ht-base-avatar>
        </div>
        <div :class="[prefixCls + '-content']">
            <h3 :class="[prefixCls + '-title']" :style="titleStyle"></h3>
            <ul :class="[prefixCls + '-paragraph']">
                <li v-for="(item,index) of this.rows" :key="index" :style=childrenStyle(index)></li>
                <!--<li></li>
                <li></li>
                <li style="width: 61%;"></li>-->
            </ul>
        </div>
    </div>
    <div v-else>
        <slot></slot>
    </div>
</template>

<script>
    const prefixCls = 'ht-base-skeleton';
    let width = null;

    export default {
        name: 'HtBaseSkeleton',
        props: {
            avatar: {
                type: [Boolean, Object],
                default: false
            },
            active: {
                type: Boolean,
                default: false
            },
            loading: {
                type: Boolean,
                default: true
            },
            paragraph: {
                type: [Boolean, Object],
                default: true
            },
            title: {
                type: [Boolean, Object],
                default: true
            },
        },
        data() {
            return {
                prefixCls: prefixCls,
                width: width,
                size: 38,
                rows: 2,
                rowList: null
            }
        },
        computed: {
            classes() {
                return [
                    `${prefixCls}`,
                    {
                        [`${prefixCls}-with-avatar`]: this.avatar,
                        [`${prefixCls}-active`]: this.active,
                    }
                ]
            },
            titleStyle() {
                let style = {};
                if (this.title === true) {
                    style = {
                        width: `${this.size}%`,
                    };
                } else {
                    style = {
                        width: this.title.width !== '' ? `${this.title.width}%` : `${this.size}%`,
                    };
                }
                return style;
            },
            childrenStyle(index) {
                return function (index) {
                    console.log(88, index, 34, width, this.width, typeof width, Array.isArray(this.width))
                    let style = {};
                    if (Array.isArray(this.width)) {
                        console.log(9, this.rowList)
                        style = {
                            width: `${this.rowList[index]}px`
                        }
                    } else if (typeof width === 'number' || 'string') {
                        style = {
                            width: typeof width === 'number' ? `${width}px` : width
                        }
                    }
                    return style;
                }

            }
        },
        methods: {
            getWidth(index) {
                // console.log(this,9,index,this.paragraph.rows - 1 === index,11,Array.isArray(this.paragraph.width))
                console.log(123, this.paragraph.rows, index, 666, this.paragraph.rows - 1 === index)
                this.rows = this.paragraph.rows ? this.paragraph.rows : 2
                console.log('this.rows', this.rows)
                if (Array.isArray(this.paragraph.width)) {
                    this.width = []
                    this.width = this.paragraph.width
                    console.log(456, this.width, this.width[index], 'rows', this.rows)
                    return this.width[index];
                }

                // last paragraph
                if (this.paragraph.rows - 1 === index) {
                    this.width = this.paragraph.width
                    return this.width;
                    console.log(23, this.width, this.paragraph.width)
                }
                return undefined;
            },
        },
        created() {
            this.rowList = [...Array(this.paragraph.rows)].map((_, index) => {
                width = this.getWidth(index);
                console.log(77, width)
                return width
            });
        }
    }
</script>
<style lang="less">
    .ht-base-skeleton {

    }
</style>

