<template>
	<view style="position: relative;">
		<image src="../../static/image/banner_bg.png" style="width: 100%; position: absolute;" mode="widthFix"></image>
		<view class="content" :style="'paddingTop: '+systemBarHeight + 'px; height:' +subtractedHeight+'px'">

			<view class="" style="display: flex; flex-direction: row; width: 100%; align-items: center;"
				:style="{ marginTop: systemBarHeight + 'px' }">


				<view class="" style="width: 138rpx; height: 138rpx; margin-top: 80rpx; margin-left: 33rpx;">
					<image :src="userData.userIconUrl" style="width: 138rpx; height: 138rpx; border-radius: 50%;">
					</image>
				</view>

				<text
					style="color: white; font-size: 38rpx;margin-top: 80rpx; margin-left: 22rpx;">{{userData.nickName}}</text>

				<image src="/static/image/ic_setting.png" @click="toSet()"
					style="width: 54rpx; height: 54rpx; position: absolute; top: 200rpx; right: 33rpx;" mode=""></image>

			</view>

			<view class="" style="width: 100%; height: 103.47rpx; display: flex; align-items: center; justify-content: center;">
				<image src="/static/image/vip.png" style="width: 683.33rpx; margin-top: 50rpx;" @click="toRecharge()"
					mode="widthFix">
				</image>
			</view>


			<view class=""
				style="display: flex; flex-direction: row; width: 100%; margin-top: 67rpx; align-items: flex-end;">

				<text style="color: white; font-size: 33rpx; margin-left: 33rpx;">我的音乐</text>

				<text style="color: white; font-size: 25rpx; margin-left: 52rpx;">总点赞 {{userData.likeCount}}</text>

				<text style="color: white; font-size: 25rpx; margin-left: 52rpx;">总收藏 1.1万</text>

			</view>

			<view class=""
				style="display: flex; flex-direction: column; width: 100%; align-items: center; margin-top: 38rpx; overflow: auto;">

				<view class="" v-for="(item,index) in dataList"
					style="display: flex; justify-content: center; margin-bottom: 28rpx;">
					<view class="" @click="toMusicPlay(item)"
						style="background-color: #302D4EFF; width: 683.33rpx; height: 213.89rpx; border-radius: 10rpx; display: flex; flex-direction: row; align-items: center;">

						<view class=""
							style="width: 152rpx; height: 152rpx; background-color: #3c3a3eFF; display: flex; position: relative; align-items: center; justify-content: center; margin-left: 24rpx;">
							<image :src="item.coverImage" style="width: 152rpx; height: 152rpx; position: absolute;"
								mode=""></image>
							<img src="/static/image/ic_play.png"
								style="width: 45rpx; height: 45rpx; position: absolute;" alt="" />
						</view>

						<view class="" style="display: flex; flex-direction: column; margin-left: 42rpx; width: 50%;">

							<view class="" style="display: flex; flex-direction: row;">

								<text
									style="font-size: 33rpx; color: white; width: 200rpx; overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;">{{item.title}}
								</text>

								<text v-show="item.state==0" style="font-size: 20rpx; color: grey; margin-left: 50rpx;">
									生成中...</text>
								<text v-show="item.state==3"
									style="font-size: 20rpx; color: #84BCD2; margin-left: 50rpx;">
									已发布</text>
							</view>



							<view class=""
								style="display: flex; flex-direction: row; align-items: center; margin-top: 20rpx;">
								<image src="../../static/image/ic_like.png" style="width: 16rpx; height: 16rpx;"
									mode=""></image>
								<text
									style="color: white; font-size: 22rpx; margin-left: 9rpx;">{{item.likeCount}}</text>

								<image src="../../static/image/ic_collect.png"
									style="width: 16rpx; height: 16rpx; margin-left: 34rpx;" mode=""></image>
								<text
									style="color: white; font-size: 22rpx; margin-left: 9rpx;">{{item.favoritesCount}}</text>
							</view>
						</view>


						<view class="" style="width: 90rpx; height: 90%; margin-left: 50rpx;">

							<view class="" @click.native.stop="deleteMusic()"
								style="width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center;">

								<image src="../../static/image/ic_delete.png" style="width: 18rpx; height: 18rpx;"
									mode="">
								</image>
								<text style="font-size: 21rpx; color: #ABABAB; margin-left: 11rpx;">删除</text>
							</view>


						</view>

					</view>

				</view>

			</view>
		</view>

		<uni-popup ref="popup" @change="change">
			<view class=""
				style="width: 518.75rpx; height: 289.58rpx; background-color: #474747; border-radius: 14rpx; display: flex; flex-direction: column; align-items: center;">
				<text class="" style="font-size: 33rpx; color: white; margin-top: 31rpx;">删除音乐</text>
				<text class="" style="font-size: 28rpx; color: #ABABAB; margin-top: 39rpx;">删除后将无法找回，确认删除吗？</text>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		AppServer
	} from '../../modules/api/AppServer';
	export default {
		data() {
			return {
				systemBarHeight: 0,
				subtractedHeight: 0,
				dataList: [],
				userData: ""

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

			getSubtractedHeight() {
				const systemInfo = uni.getSystemInfoSync();
				const screenWidth = systemInfo.screenWidth;
				const windowHeight = systemInfo.windowHeight;
				console.log("windowHeight", windowHeight);
				// 将167rpx转换为px
				const rpxToPx = (rpx) => (rpx * screenWidth) / 750;
				// this.subtractedHeight = windowHeight - rpxToPx(167);
				this.subtractedHeight = windowHeight;
				console.log("subtractedHeight", this.subtractedHeight);
			},


			toRecharge() {
				uni.navigateTo({
					url: '/pages/recharge/RechargePage'
				});
			},

			toSet() {
				uni.navigateTo({
					url: '/pages/me/SettingPage'
				});
			},


			getUserInfo() {
				var that = this;
				var appserver = new AppServer();
				appserver.GetUserInfo().then(data => {
					console.log("getUserInfo", data);
					that.userData = data.data;
				});
			},

			getMyMusicList() {
				var that = this;
				var appserver = new AppServer();
				appserver.GetMyMusicList().then(data => {
					console.log("getMyMusicList", data);
					that.dataList = data.data.reverse();
				});
			},

			//音乐播放页
			toMusicPlay(item) {

				if (item.state == 0) {
					uni.navigateTo({
						url: '/pages/create/CreateInfoPage?id=' + item.id
					});
				} else {
					uni.navigateTo({
						url: '/pages/music/MyMusicPlayPage?musicUrl=' + item.musicAddress + '&musicName=' +
							item.title + '&lyrics=' + item.lyrics + '&isPublic=' + item.isPublic + '&state=' +
							item.state + '&id=' + item.id
					});
				}
			},

			//删除音乐
			deleteMusic() {
				this.$refs.popup.open('center')
			},

		}
	}
</script>

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