<template>
    <view v-if="loading" :class="'custom-class van-skeleton ' + (animate ? 'van-skeleton--animate' : '')">
        <view v-if="avatar" :class="'avatar-class van-skeleton__avatar ' + (avatarShape ? 'van-skeleton__avatar--' + avatarShape : '')" :style="'width:' + avatarSize + ';height:' + avatarSize"></view>
        <view class="van-skeleton__content">
            <view v-if="title" class="title-class van-skeleton__title" :style="'width:' + titleWidth"></view>
            <view v-for="(item, index) in (rowArray)" :key="item.index" class="row-class van-skeleton__row"  :style="'width:' + (isArray ? rowWidth[index] : rowWidth)"></view>
        </view>
    </view>
    <view v-else class="van-skeleton__content">
        <slot></slot>
    </view>
</template>

<script>
export default {
    props: {
        row: {
            type: Number,
            value: 0
        },
        title: {
            type: Boolean,
            value: false
        },
        avatar: {
            type: Boolean,
            value: false
        },
        loading: {
            type: Boolean,
            value: true
        },
        animate: {
            type: Boolean,
            value: true
        },
        avatarSize: {
            type: String,
            value: '32px'
        },
        avatarShape: {
            type: String,
            value: 'round'
        },
        titleWidth: {
            type: String,
            value: '40%'
        },
        rowWidth: {
            type: null,
            value: '100%'
        }
    },
    watch: {
        row: function (newVal) {
            this.rowObserver(newVal)
        },
        rowWidth: function (newVal) {
            this.rowWidthObserver(newVal)
        },
    },
    data() {
        return {
            classes: ['avatar-class', 'title-class', 'row-class'],
            isArray: false,
            rowArray: [],
        }
    },
    mounted() {
        this.rowObserver(this.row)
        this.rowWidthObserver(this.rowWidth)
    },
    methods: {
        rowObserver(val) {
            this.rowArray = Array.from({ length: val });
        },
        rowWidthObserver(val) {
            this.isArray = val instanceof Array;
        }
    }
}
</script>
<style platform="mp-weixin">@import '../common/index.css';

.van-skeleton {
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 0 16px;
    padding: var(--skeleton-padding, 0 16px)
}

.van-skeleton__avatar {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin-right: 16px;
    margin-right: var(--padding-md, 16px);
    background-color: #f2f3f5;
    background-color: var(--skeleton-avatar-background-color, #f2f3f5)
}

.van-skeleton__avatar--round {
    border-radius: 100%
}

.van-skeleton__content {
    -webkit-flex: 1;
    flex: 1
}

.van-skeleton__avatar+.van-skeleton__content {
    padding-top: 8px;
    padding-top: var(--padding-xs, 8px)
}

.van-skeleton__row,
.van-skeleton__title {
    height: 16px;
    height: var(--skeleton-row-height, 16px);
    background-color: #f2f3f5;
    background-color: var(--skeleton-row-background-color, #f2f3f5)
}

.van-skeleton__title {
    margin: 0
}

.van-skeleton__row:not(:first-child) {
    margin-top: 12px;
    margin-top: var(--skeleton-row-margin-top, 12px)
}

.van-skeleton__title+.van-skeleton__row {
    margin-top: 20px
}

.van-skeleton--animate {
    -webkit-animation: van-skeleton-blink 1.2s ease-in-out infinite;
    animation: van-skeleton-blink 1.2s ease-in-out infinite
}

@-webkit-keyframes van-skeleton-blink {
    50% {
        opacity: .6
    }
}

@keyframes van-skeleton-blink {
    50% {
        opacity: .6
    }
}</style>