<template>
	<view class="skeleton-main">
		<template v-if="props.show">
			<view class="fade-in">
				<slot></slot>
			</view>
		</template>
		<template v-else>
			<view class="skeleton sk-w-100 sk-h-35"></view>
			<view class="skeleton-info flex-column">
				<view class="skeleton sk-w-70 sk-h-4"></view>
				<view class="flex-row u-m-t-32">
					<view class="skeleton sk-w-8 sk-h-2 u-m-r-12"></view>
					<view class="skeleton sk-w-8 sk-h-2 u-m-r-12"></view>
					<view class="skeleton sk-w-8 sk-h-2 u-m-r-12"></view>
				</view>
				<view class="flex-row flex-between u-m-t-32">
					<view class="skeleton sk-w-30 sk-h-2 "></view>
					<view class="skeleton sk-w-8 sk-h-2 "></view>
				</view>
			</view>
			<view class="skeleton-info">
				<view class="skeleton sk-w-80 sk-h-2 u-m-b-12"></view>
				<view class="skeleton sk-w-40 sk-h-2 u-m-b-12"></view>
				<view class="skeleton sk-w-60 sk-h-2 u-m-b-12"></view>
				<view class="skeleton sk-w-20 sk-h-2 u-m-b-12"></view>
				<view class="skeleton sk-w-90 sk-h-2 u-m-b-12"></view>
				<view class="skeleton sk-w-40 sk-h-2 u-m-b-12"></view>
				<view class="skeleton sk-w-60 sk-h-2 u-m-b-12"></view>
				<view class="skeleton sk-w-60 sk-h-2 u-m-b-12"></view>
				<view class="skeleton sk-w-60 sk-h-2 "></view>
			</view>
			<view class="skeleton-footer">
				<view class="skeleton sk-w-10 sk-h-5 u-m-r-32"></view>
				<view class="skeleton sk-w-10 sk-h-5 u-m-r-32"></view>
				<view class="skeleton sk-w-70 sk-h-6 u-m-l-auto" style="border-radius: 50rpx;"></view>
			</view>
		</template>
	</view>
</template>

<script lang="ts" setup>
	const props = defineProps({
		show: Boolean
	})
</script>

<style lang="scss" scoped>
	.skeleton-main {
		flex: 1;
		display: flex;
		flex-direction: column;
		background-color: #f7f7f7;

		.skeleton-info {
			width: 100vw;
			min-height: 30vw;
			background-color: #fff;
			margin-bottom: 16rpx;
			padding: 32rpx;
		}

		.skeleton-footer {
			width: 100vw;
			height: 98rpx;
			background-color: #fff;
			padding: 0 32rpx;
			position: fixed;
			bottom: 0;
			right: 0;
			display: flex;
			align-items: center;
		}
	}
</style>