<template>
	<view>
		<view class="content" :style="'paddingTop: '+systemBarHeight + 'px;'">
			<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="" />
			</view>


			<image src="/static/image/ic_record.png" style="width: 431.25rpx; height: 431.25rpx; margin-top: 88rpx;"
				mode=""></image>

			<text style="font-size: 33rpx; color: white; margin-top: 75rpx;">{{state}}</text>

			<!-- <text style="font-size: 33rpx; color: #3FBBFEFF; margin-top: 27rpx;">35%</text> -->

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

<script>
	import {
		AppServer
	} from '../../modules/api/AppServer';
	export default {
		data() {
			return {
				systemBarHeight: 0,
				musicId: 0,
				state: "正在生成中",

			}
		},
		onLoad: function(options) {
			console.log('传递的参数:', options.id);
			this.musicId = options.id;
			this.getStatusBarHeight();

			this.getMusicSchedule(this.musicId);

		},
		methods: {
			// 获取状态栏高度的方法
			getStatusBarHeight: function() {
				var that = this;
				uni.getSystemInfo({
					success: function(res) {
						that.systemBarHeight = res.statusBarHeight
					}
				});
			},
			toBack() {
				uni.navigateBack();
				this.stopRequests();
			},

			//生成进度
			getMusicSchedule(id) {
				var that = this;
				var appserver = new AppServer();
				appserver.GetMusicSchedule(id).then(data => {
					console.log("getMusicSchedule", data);
					if (!data.data) {
						setTimeout(function() {
							that.getMusicSchedule(that.musicId);
						}, 2000);
					} else {
						this.state = "生成完成"
					}
				});

			},



		}
	}
</script>

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