<template>
	<image v-if="selectedItem" :src="selectedItem.image" class="random-image" mode="" />
	<view v-if="selectedItem" class="random-image-name">
		{{selectedItem.name}}
	</view>
	<view v-if="selectedItem" class="random-image-desc">
		{{selectedItem.desc}}
	</view>
	<MusicControl />
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	const props = defineProps({
		images: {
			type: Array,
			required: true
		}
	})
	const selectedItem = ref(null)

	// 随机选择一项
	const selectRandomImage = () => {
		if (props.images && props.images.length > 0) {
			const randomIndex = Math.floor(Math.random() * props.images.length)
			selectedItem.value = props.images[randomIndex]
		}
	}
	onMounted(() => {
		selectRandomImage()
	})
	defineExpose({
		selectRandomImage,
		selectedItem
	})
</script>

<style scoped>
	.random-image {
		width: 100%;
		height: 100%;
	}

	.random-image-name {
		position: absolute;
		bottom: 30%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #ffffff;
		font-size: 52rpx;
	}

	.random-image-desc {
		white-space: nowrap;
		position: absolute;
		bottom: 25%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #ffffff;
		font-size: 24rpx;
		font-weight: 300;
		opacity: .8;
	}
</style>