<template>
	<view>
		<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>

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

					<view class=""
						style="margin-top: 50rpx; margin-left: 22rpx; display: flex; flex-direction: row; align-items: center;">
						<text style="color: white; font-size: 38rpx;">{{userData.nickName}}</text>
						<image v-if="(userData.vip==1)" src="../../static/image/isvip.png"
							style="width: 102.78rpx; height: 34.03rpx; margin-left: 20rpx;" mode="">
						</image>
					</view>


					<text
						style="color: white; font-size: 25rpx;margin-top: 20rpx; margin-left: 22rpx;">音乐点：{{userData.musicPoints}}</text>


				</view>


			<!-- 	<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="" @click="toRecharge()"
				style="width: 100%; height: 103.47rpx; display: flex; align-items: center; justify-content: center;">
				<image :src="myPageMallEntrance" style="width: 683.33rpx; margin-top: 50rpx;" mode="widthFix">
				</image>
			</view>


			<view class=""
				style="display: flex; flex-direction: row; width: 65%; margin-top: 67rpx; align-items: center; justify-content: space-between;">

				<text @click="clickMyMusic(0)" :style="setColor()">我的音乐</text>

				<text @click="clickMyMusic(1)" :style="setColor1()">我的收藏</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="" v-if="currentIndex==0"
							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: 75rpx;">
								<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="" v-if="currentIndex==1"
							style="display: flex; flex-direction: column; margin-left: 42rpx; width: 35%;">

							<text style="font-size: 33rpx; color: white;">{{item.title}}</text>

							<text
								style="font-size: 27rpx; color: #9C9090FF; margin-top: 18rpx;">{{item.authorName}}</text>

							<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="" v-if="currentIndex==0" style="width: 90rpx; height: 90%; margin-left: 50rpx;">

							<view class="" @click.native.stop="deleteMusic(item.id)"
								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">
			<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 class=""
					style="display: flex; flex-direction: row; width: 80%; margin-top: 50rpx; justify-content: space-between;">

					<view class="" @click="cancelDele()"
						style="width: 176.46rpx; height: 59.03rpx; background-color: #7D7D7D; border-radius: 30rpx; display: flex; align-items: center; justify-content: center;">
						<text style="color: white; font-size: 27rpx;">取消</text>
					</view>

					<view class="" @click="confirmDele()"
						style="width: 176.46rpx; height: 59.03rpx; 	 background-image: linear-gradient(to left, #a541ffFF, #3fbbfeFF); border-radius: 30rpx; display: flex; align-items: center; justify-content: center;">
						<text style="color: white; font-size: 27rpx;">确认</text>
					</view>

				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		AppServer
	} from '../../modules/api/AppServer';
	export default {
		data() {
			return {
				systemBarHeight: 0,
				subtractedHeight: 0,
				dataList: [],
				userData: "",
				currentIndex: 0,
				musicList: [],
				favoritesList: [],
				selectedId: 0,
				myPageMallEntrance: "",
			}
		},
		onShow() {
			this.getUserInfo();
			this.getMyMusicList();
			this.getMusicSongFavorites();
			this.currentIndex = 0;
		},
		onLoad() {
			this.systemBarHeight = getApp().globalData.statusBarHeight;
			this.subtractedHeight = getApp().globalData.windowHeight;
			this.myPageMallEntrance = getApp().globalData.myPageMallEntrance;
			this.getUserInfo();

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

		},
		methods: {

			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.musicList = data.data;
					that.dataList = data.data.reverse();
				});
			},

			getMusicSongFavorites() {
				var that = this;
				var appserver = new AppServer();
				appserver.GetMusicSongFavorites().then(data => {
					console.log("getMusicSongFavorites", data);
					that.favoritesList = data.data.reverse();
				});
			},

			//音乐播放页
			toMusicPlay(item) {
				if (this.currentIndex == 1) {
					uni.navigateTo({
						url: '/pages/music/MusicPlayPage?musicUrl=' + item.musicAddress + '&musicName=' +
							item.title + '&lyrics=' + item.lyrics + '&isPublic=' + item.isPublic + '&state=' +
							item.state + '&id=' + item.id + '&isLikes=' + item.isLikes + '&isFavorites=' +
							item.isFavorites + '&coverImage=' + item.coverImage
					});
				} else {
					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 + '&coverImage=' + item.coverImage
						});
					}
				}


			},

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

			//取消
			cancelDele() {
				this.$refs.popup.close();
			},

			//确定删除
			confirmDele() {
				this.$refs.popup.close();
				uni.showLoading({
					title: ' '
				});
				var that = this;
				var appserver = new AppServer();
				appserver.DelMusic(this.selectedId).then(data => {
					console.log("DelMusic", data.data);
					that.getMyMusicList();
					uni.hideLoading();
					uni.showToast({
						title: data.message,
						icon: 'none',
						duration: 2000,
					});
				})

			},


			// 点击
			clickMyMusic(type) {
				this.currentIndex = type;
				if (this.currentIndex == 0) {
					this.dataList = this.musicList;
				} else {
					this.dataList = this.favoritesList;
				}
			},

			setColor() {
				if (this.currentIndex == 0) {
					return {
						color: 'white',
						fontSize: '33rpx'
					}
				} else {
					return {
						color: '#ABABAB',
						fontSize: '28rpx'
					}
				}
			},
			setColor1() {
				if (this.currentIndex == 1) {
					return {
						color: 'white',
						fontSize: '33rpx'
					}
				} else {
					return {
						color: '#ABABAB',
						fontSize: '28rpx'
					}
				}
			}



		}
	}
</script>

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