<template>
	<div class="skeleton animated">
		<div class="skeleton-row" v-for="(item, index) in rowList" :style="item.style || {}" :key="index">
			<div class="skeleton-row-item" v-for="(colItem, colIndex) in item.colItems"
				:class="[colItem.childRowItems ? 'no-height' : '']" :key="colIndex" :style="colItem.style">
				<template v-if="colItem.childRowItems">
					<div class="skeleton-row-item" v-for="(childRowItem, childRowIndex) in colItem.childRowItems"
						:key="childRowIndex" :style="childRowItem.style || {}"></div>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Skeleton',
		props: {
			rowList: {
				type: Array,
				default: () => []
			},
		},
	}
</script>

<style lang="scss" scoped>
	.skeleton {
		width: 100%;
		--color: #F6F6F6;

		&.animated {
			animation: blink 1.2s ease-in-out infinite;
		}

		* {
			box-sizing: border-box;
		}
	}

	.skeleton-row {
		display: flex;
		width: 100%;
		align-content: space-between;
	}

	.skeleton-row-item {
		height: 26px;
		border-radius: 12rpx;
		display: inline-block;

		&:not(.no-height) {
			background: var(--color);
		}

		&.no-height {
			height: auto;
		}
	}

	@keyframes blink {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.6;
		}

		100% {
			opacity: 1;
		}
	}
</style>