<template>
	<view>
		<view class="content" :style="'paddingTop: '+systemBarHeight + 'px;'">

			<view class="" style="width: 100%; background-image: url('/static/image/recharge_bg_1.png');
				 background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center;">


				<view class=""
					style="display: flex; height: 45rpx; width: 100%; align-items: center;justify-content: center;"
					:style="{ marginTop: systemBarHeight + 'px' }">

					<image src="/static/image/ic_back.png"
						style="width: 24.31rpx; height: 43.06rpx; margin-left: 36rpx; position: absolute; left: 0;"
						@click="toBack()" alt="" />

					<text style="font-size: 38rpx; color: white;">{{musicName}}</text>
				</view>

				<view class=""
					style="width: 431.25rpx; height: 431.25rpx; background-color: #000000FF; margin-top: 88rpx;">

				</view>

				<view class=""
					style="width: 431.25rpx; display: flex;  align-items: center; justify-content: center; margin-top: 40rpx;">


					<image :src="isPlay?'/static/image/ic_suspend.png':'/static/image/ic_play_music.png'"
						style="width: 37.5rpx; height: 52.78rpx;" @click="musicPlay()" mode="" />

				</view>

				<view class=""
					style="display: flex; flex-direction: row; margin-top: 54rpx; width: 100%; align-items: center;">
					<text style="font-size: 25rpx; color: #3FBBFEFF; margin-left: 34rpx;">{{currentTime}}</text>
					<slider step="1" :value="speedValue" max="100" @change="sliderChange" activeColor="#84bcd2FF"
						style="width: 100%;" backgroundColor="#d8d8d8FF" block-color="#3fbbfeFF" block-size="20" />
					<text style="font-size: 25rpx; color: #3FBBFEFF; margin-right: 34rpx;">{{musicDuration}}</text>
				</view>

				<view class=""
					style="width: 601.39rpx; display: flex; margin-top: 36rpx; flex-direction: row; justify-content: space-between;">

					<view class="" style="display: flex; flex-direction: row; align-items: center;">
						<text style="font-size: 29rpx; color: #999999FF;">歌曲公开展示</text>
						<image :src="(isPublicStatus==true?'/static/image/release_n.png':'/static/image/release_f.png')"
							@click="musicSongsReview()" style="width: 36.11rpx; height: 22.92rpx; margin-left: 20rpx;"
							mode="">
						</image>
						<text v-show="isPublicStatus==true"
							style="font-size: 29rpx; color: #999999FF; margin-left: 20rpx;">审核中...</text>

					</view>


					<view class="" style="display: flex; flex-direction: row; align-items: center;">
						<image src="/static/image/ic_download.png" style="width: 22.92rpx; height: 22.92rpx;" mode="">
						</image>
						<text style="font-size: 29rpx; color: #999999FF; margin-left: 20rpx;">下载</text>
					</view>

				</view>




				<scroll-view scroll-y="true" :scroll-into-view="currentTimeContent"
					style="width: 643.75rpx;height: 200rpx; margin-top: 60rpx;">
					<view v-for="(item,index) in lyricList" :id="'item-'+index"
						style="width: 100%; text-align: center; margin-top: 11rpx; margin-bottom: 11rpx;"
						:style="setlyricColor(index)">
						{{item.content}}
					</view>
				</scroll-view>




				<view class="" style="width: 683.33rpx; height: 83.33rpx; margin-top: 140rpx; display: flex; align-items: center; justify-content: center;
					 background-image: linear-gradient(to left, #a541ffFF, #a541ffFF, #3fbbfeFF); border-radius: 50rpx;">

					<text style="font-size: 38; color: white;">制作同款</text>

				</view>




			</view>

		</view>
	</view>
</template>

<script>
	import {
		AppServer
	} from '../../modules/api/AppServer';
	var innerAudioContext = null;
	export default {
		data() {
			return {
				systemBarHeight: 0,
				speedValue: 0,
				isPlay: true,
				currentTime: "00:00",
				musicDuration: "00:00", //音乐长度
				currentTimeIndex: 0,
				currentTimeContent: "",
				musicName: "",
				lyrics: "",
				isExamine: false,
				isPublic: false,
				state: 0,
				isPublicStatus: false,
				id: 0,
				lyricList: [{
					time: "00:00",
					content: "晴天 - 周杰伦"
				}, {
					time: "00:03",
					content: "词：周杰伦"
				}, {
					time: "00:05",
					content: "曲：周杰伦"
				}, {
					time: "00:08",
					content: "....."
				}, {
					time: "00:11",
					content: "....."
				}, {
					time: "00:29",
					content: "故事的小黄花"
				}, {
					time: "00:32",
					content: "从出生那年就飘着"
				}, {
					time: "00:36",
					content: "童年的荡秋千"
				}, ]
			}
		},
		onLoad: function(options) {
			this.getStatusBarHeight();
			this.musicName = options.musicName;
			this.lyrics = options.lyrics;
			this.isPublic = options.isPublic;
			this.state = options.state;
			this.id = options.id;
			uni.showLoading({
				title: '加载中'
			});

			console.log("this.state", this.state);
			console.log("this.isPublic", this.isPublic);

			if (this.state == 2) {
				this.isPublicStatus = true;
			} else {
				this.isPublicStatus = this.isPublic;
			}

			console.log("this.isPublicStatus", this.isPublicStatus);


			innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.src = options.musicUrl;
			innerAudioContext.autoplay = true;

			innerAudioContext.onTimeUpdate(() => {
				this.currentTime = this.convertSecondsToHMS(innerAudioContext.currentTime);
				this.musicDuration = this.convertSecondsToHMS(innerAudioContext.duration);

				// this.speedValue = innerAudioContext.currentTime;

				this.speedValue = this.getPercentage(innerAudioContext.duration, innerAudioContext.currentTime)

				console.log("进度==", this.speedValue);


				for (let i = 0; i < this.lyricList.length; i++) {
					if (this.currentTime == this.lyricList[i].time) {
						this.currentTimeIndex = i;
						// this.currentTimeContent = this.lyricList[i].content + i;
						this.currentTimeContent = 'item-' + i;
						console.log("歌词", this.currentTimeContent);
					}

				}



			});
			innerAudioContext.onPlay(() => {
				this.isPlay = true;
				uni.hideLoading();
				console.log('开始播放');
			});
			innerAudioContext.onError((res) => {
				console.log(res.errMsg);
				console.log(res.errCode);
			});
		},
		methods: {
			// 获取状态栏高度的方法
			getStatusBarHeight: function() {
				var that = this;
				uni.getSystemInfo({
					success: function(res) {
						that.systemBarHeight = res.statusBarHeight
					}
				});
			},

			toBack() {
				innerAudioContext.destroy();
				uni.navigateBack();
			},

			sliderChange(e) {
				console.log('value 发生变化：' + e.detail.value)

				const timeInSeconds = innerAudioContext.duration * (e.detail.value / 100);

				console.log("timeInSeconds", timeInSeconds);

				innerAudioContext.seek(timeInSeconds);
			},

			musicPlay() {
				console.log(innerAudioContext);
				console.log('66666');

				if (this.isPlay) {
					console.log('111');
					innerAudioContext.pause();
					this.isPlay = false;
				} else {
					innerAudioContext.play() // 播放
					this.isPlay = true;
				}
			},

			convertSecondsToHMS(seconds) {
				// var hours = Math.floor(seconds / 3600);
				var minutes = Math.floor((seconds % 3600) / 60);
				var secs = Math.floor(seconds % 60);

				return [
					// hours ? hours < 10 ? '0' + hours : hours : '00',
					minutes < 10 ? '0' + minutes : minutes,
					secs < 10 ? '0' + secs : secs
				].join(':');
			},

			getPercentage(total, current) {
				const percentage = (current / total) * 100;
				return percentage.toFixed(2);
			},

			setlyricColor(index) {
				if (this.currentTimeIndex == index) {
					return {
						fontSize: "40rpx",
						color: "#FFFFFF"
					}
				} else {
					return {
						fontSize: "25rpx",
						color: "#5D5D5D"
					}
				}
			},

			//歌曲审核
			musicSongsReview() {
				var that = this;
				var appserver = new AppServer();

				if (this.isPublicStatus == true) {
					this.isPublicStatus = false;
					appserver.MusicCancelSongsReview(this.id).then(data => {
						console.log("MusicSongsReview", data);

					})
				} else {
					this.isPublicStatus = true;
					appserver.MusicSongsReview(this.id).then(data => {
						console.log("MusicSongsReview", data);
					})
				}


			}


		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #0E0A10FF;
	}
</style>