<template>
	<!-- :style="{backgroundImage:`url(${musicList.listImg})`}" -->
	<view class="hot-music">
		<image :src="musicList.listImg" mode="widthFix"></image>
		<view class="hot-music-left">
			<view class="">{{musicList.listDesc}}</view>
		</view>
	</view>
	<view class="content">
		<view class="music-list-box">
			<view class="music-list" v-for="item in musicList.songs" :key="item.id" @click="playMusic(item)">
				<view class="list-left">
					<view class="music-id text-ellipsis">{{item.id}}</view>
					<view class="music-info">
						<view class="music-name">{{item.name}}</view>
						<view class="singer-name">{{item.artistsname}}</view>
					</view>
				</view>
				<view class="music-more">...</view>
			</view>
		</view>
		<view class="music-play-card" v-if="isplay">
			<audio style="width: 100%;" :src="playMusicInfo.url" :poster="playMusicInfo.picurl"
				:name="playMusicInfo.name" :author="playMusicInfo.artistsname" :action="audioAction" controls></audio>
			<!-- 			<view class="music-card-info">
				<image src="../../static/logo.png" mode=""></image>
				<view class="">
					<view class="">歌曲名</view>
					<view class="">歌手名</view>
					</view>
					<view class="">></view>
				</view> -->
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from 'vue'
	import { http } from '@/utils/http'
	const musicList = ref();
	const playMusicInfo = ref();
	const isplay = ref(false)
	onMounted(() => {
		get_musiclsit()
	})
	const get_musiclsit = () => {
		http.get('/api/wangyi/musicChart', { loading: true })
			.then(res => {
				musicList.value = res
			})
	}
	const playMusic = (e) => {
		const innerAudioContext = uni.createInnerAudioContext();
		if (e.url === null) {
			uni.showToast({
				title: '暂无音源',
				icon: 'none'
			})
			return
		}
		console.log(innerAudioContext);
		playMusicInfo.value = e
		isplay.value = true
		innerAudioContext.autoplay = true;
		innerAudioContext.onError((err) => {
			console.error('音频错误:', err);
		});
	}
</script>

<style lang="less" scoped>
	.hot-music {
		position: relative;

		&>image {
			width: 100%;
		}

		.hot-music-left {
			position: absolute;
			top: 20rpx;
			font-size: @main-fontsize;
			color: @white-bg;
		}
	}

	.music-list-box {
		margin-top: 20rpx;
		background-color: @white-bg;
		border-radius: 10rpx;
		padding: 10rpx;

		.music-list {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #f5f5f5;

			.list-left {
				display: flex;
				align-items: center;

				.music-id {
					width: 80rpx;
				}

				.music-info {
					margin-left: 20rpx;

					.music-name {
						font-size: @main-fontsize;
					}

					.singer-name {
						font-size: 26rpx;
						color: #8f8f94;
					}
				}
			}
		}
	}

	.music-play-card {
		position: fixed;
		text-align: center;
		bottom: 0;
		left: 0;
		border-radius: 20rpx;
		background-color: rgb(252, 252, 252);
		width: 100%;
		height: 300rpx;
	}
</style>