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

<script>
import MusicControl from './MusicControl.vue'

export default {
  components: {
    MusicControl
  },
  props: {
    images: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      selectedItem: null
    }
  },
  mounted() {
    this.selectRandomImage()
  },
  methods: {
    selectRandomImage() {
      if (this.images && this.images.length > 0) {
        const randomIndex = Math.floor(Math.random() * this.images.length)
        this.selectedItem = this.images[randomIndex]
      }
    }
  },
  computed: {
    exposedMethods() {
      return {
        selectRandomImage: this.selectRandomImage,
        selectedItem: this.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>