<template>
	<view class="content">
		<!-- 占位符导航栏 -->
		<navseat :opacity='false' :title='"歌曲列表"' :titleshow='true' :heightshow='true' :namecolor='"#fff"'
			:iconshow='false'></navseat>
		<view class="search flex-between">
			<view class="searchinput flex-between">
				<input type="text" class="searchinput_input" placeholder-style="color:#FFFFFF" @input="onInput"
					v-model="keyWord" placeholder="搜索" />
				<u-icon name="search" @click="init_fn" color="#fff" size="48"></u-icon>
			</view>
		</view>
		<scroll-view scroll-y="true" id="demo" style="width:100%;" :style="{'height':Height}" @scroll="handleScroll"
			show-scrollbar="false" @scrolltolower="lower">
			<view class="contentclass">
				<view class="contentclassbox">
					<view class="contentclassboxitem flex-between" v-for="(item,index) in list" :key="index">
						<view class="contentclassboxleft flex-start">
							<view class="onecontentclassboxleft flex-colum-start">
								<text class="onecontentclassboxleft_one">{{item.name}}</text>
								<text class="onecontentclassboxleft_tow">{{item.originSinger}}</text>
							</view>
						</view>
						<view class="contentclassboxright" @click="clicshowpopupk(item)">
							点歌
						</view>
					</view>
				</view>
				<!-- <image style="margin:100rpx auto 32rpx auto;"
					src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/nomore.png" v-if="is_end"
					mode="aspectFill"></image> -->

				<u-loadmore :status="form.status" loadmore-text="上滑加载更多" @loadmore="loadmorelang" fontSize="28"
					color="#999" iconSize="28" />
			</view>
		</scroll-view>
		<view class="positionfixed">
			<view class="positionfixedimage flex-colum">
				<image class="positionfixedimage_image"
					:src="songimg?songimg:'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/mei.png'"
					mode="aspectFill">
				</image>
			</view>
			<view class="positionfixedbox flex-between">
				<view class="positionfixedbox_item flex-colum">
					<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/yue.png" mode="aspectFill">
					</image>
					<view class="positionfixedbox_itemtexto">
						<u-notice-bar style="width: 100rpx;" :text="songName" :iconshow='false'
							color='rgba(255, 255, 255, 0.73)' speed='40' fontSize='24'
							bgColor='transparent'></u-notice-bar>
						<!-- <text class="">{{songName || '暂无人点歌，快来...'}}</text> -->
					</view>

				</view>
				<view class="positionfixedbox_item flex-colum" @click="clickrecord">
					<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/yidian.png"
						mode="aspectFill"></image>
					<text>已点</text>
				</view>
			</view>
		</view>
		<u-popup :show="showpopup" @close="showpopup = false" mode="center" :round="24" bgColor="transparent">
			<view class="contentu-popup">
				<view class="contentuPopupOne">
					点歌
				</view>
				<view class="contentuPopupitem flex-between">
					<view class="contentuPopupitemone">
						点歌人昵称：
					</view>
					<view class="contentuPopupiteminput">
						<input type="text" v-model="fromName" placeholder="您的称呼" />
					</view>
				</view>
				<view class="contentuPopupitem flex-between">
					<view class="contentuPopupitemone">
						你想点给谁：
					</view>
					<view class="contentuPopupiteminput">
						<input type="text" v-model="toName" placeholder="TA的称呼" />
					</view>
				</view>
				<view class="contentuPopupitem flex-between">
					<view class="contentuPopupitemone">
						您的祝福语：
					</view>
					<view class="contentuPopupiteminput">
						<input type="text" v-model="note" placeholder=" " />
					</view>
					<!-- <view class="contentuPopupiteminput">
						<u--textarea style="font-size: 24rpx;" v-model="note" placeholder=" "></u--textarea>
					</view> -->
				</view>
				<view class="contentupopupboutton flex-between">
					<view class="contentupopupbouttonO" @click="showpopup = false">
						取消
					</view>
					<view class="contentupopupbouttonT" @tap="$u.debounce(clickervicesongpost, 500)">
						立刻支付
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import navseat from '@/components/navseat.vue'
	import _ from 'lodash'
	export default {
		components: {
			navseat
		},
		data() {
			return {
				Height: '',
				songId: '',
				fromName: '',
				toName: '',
				note: '',
				showpopup: false,
				list: [],
				is_end: false,
				keyWord: '',
				form: {
					page: 1,
					size: 12,
					status: 'loadmore',
				},
				shopId: "11",
				songName: '', //正在播放歌曲名字
				songimg: '',
				timer: null //定时器
			};
		},
		onLoad(e) {
			// 隐藏首页按钮
			if (e.q) {
				this.shopId = this.getQueryString(decodeURIComponent(e.q), 'shopId')
			}
			uni.hideHomeButton();


		},
		computed: {},
		mounted() {},
		onShow() {
			if (!uni.cache.get('miniAppOpenId')) {
				uni.login({
					provider: 'weixin',
					success: async (data) => {
						try {
							let res = await this.api.businessopenId({
								code: data.code, //临时登录凭证
							})
							if (res.code == 0) {
								console.log(res)
								uni.cache.set('miniAppOpenId', res.data)
								this.init_fn()
								// uni.cache.set('userInfo', res.data.userInfo);
							}
						} catch (e) {}
					}
				});
			} else {
				this.init_fn()
			}
			this.createTimer() //单独每20秒请求一次
		},
		onUnload() {
			clearInterval(this.timer)
		},
		onHide() {
			clearInterval(this.timer)
		},
		// onReachBottom() {
		// 	this.cashierService()
		// },
		mounted() {
			setTimeout(() => {
				this.GetTop()
			}, 200)
		},
		methods: {

			handleScroll(e) {
				console.log(e.detail.scrollTop)
			},
			lower() {
				console.log('触底加载')
				this.cashierService()
			},
			createTimer() {
				this.timer = setInterval(() => {
					this.apisongsinging()
				}, 20000)
			},
			async apisongsinging() { //查看现在是否有人点歌
				let {
					data
				} = await this.api.songsinging()
				console.log(data)
				this.songName = data.songName ? data.songName : '暂无人点歌，快来...'
				this.songimg = data.img
			},
			getQueryString(url, name) { //解码
				var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
				var r = url.substr(1).match(reg)
				if (r != null) {
					return r[2]
				}
				return null;
			},
			onInput(e) {
				this.handleClick();
			},
			handleClick: _.debounce(function() {
				this.init_fn();
				// 函数执行内容
			}, 600),
			init_fn() {
				this.list = []
				this.is_end = false
				this.form.page = 1
				this.form.size = 12
				this.form.status = 'loadmore'
				this.cashierService()
				this.apisongsinging()
			},
			// 列表
			async cashierService() {
				let res = await this.api.cashierServicesong({
					keyWord: this.keyWord,
					size: this.form.size,
					page: this.form.page,
					shopId: this.shopId,
				})

				if (res.data.pages < this.form.page) {
					this.form.status = 'nomore'
					if (this.form.page == 1 && res.data.list.length == 0) {
						this.list = []
						this.is_end = true
					}
					return false;
				} else {
					this.form.status = 'loading';
					this.form.page = ++this.form.page;
					setTimeout(() => {
						if (this.form.page == 1) {
							this.list = res.data.list
						} else {
							this.list = [...this.list, ...res.data.list];
						}
						if (this.form.page > res.data.pages) {
							this.form.status = 'nomore';
						} else {
							this.form.status = 'loading';
						}
					}, 1000)
				}
			},
			// 唤起弹框
			clicshowpopupk(item) {
				this.fromName = ''
				this.toName = ''
				this.note = ''
				this.showpopup = true
				this.songId = item.id
			},
			async clickervicesongpost(item) {
				let res = await this.api.cashierServicesongpost({
					songId: this.songId,
					fromName: this.fromName,
					toName: this.toName,
					note: this.note,
					shopId: this.shopId,
				})
				if (res.code == 0) {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					// #ifdef MP-WEIXIN
					uni.requestPayment({
						provider: 'wxpay', //支付类型-固定值
						partnerid: res.data.appId, // 微信支付商户号
						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						nonceStr: res.data.nonceStr, // 随机字符串
						package: res.data.package, // 固定值
						signType: res.data.signType, //固定值
						paySign: res.data.paySign, //签名
						success: (res) => {
							this.showpopup = false
							uni.showToast({
								title: "支付成功"
							})
							setTimeout(res => {
								uni.hideLoading()
								uni.navigateTo({
									url: '/pages/chooseasong/record?shopId=' + this.shopId
								})
								// uni.switchTab({
								// 	url: '/pages/order/order'
								// });
							}, 1000)
						},
						fail: (err) => {
							uni.showToast({
								icon: 'none',
								title: '支付失败'
							})
							setTimeout(res => {
								this.showpopup = false
								uni.hideLoading()
								// uni.switchTab({
								// 	url: '/pages/order/order'
								// });
							}, 500)

						}
					});
					// #endif	
				}
			},
			//获取元素距离顶部的距离
			GetTop() {
				uni.getSystemInfo({
					success: (data) => {
						console.log(data)
						var screenHeight = data.safeArea.height
						let query = uni.createSelectorQuery().in(this);
						query.select('#demo').boundingClientRect(res => {
							console.log(res)
							this.Height = screenHeight - res.top - 10 + 'px'
						}).exec();
						this.$u.getRect('.contentclass').then(res => {
							console.log(res, 111)
							// this.Height = screenHeight - res.top + 'px'
							// console.log(this.Height)
						})
					}
				})
			},
			clickrecord() {
				uni.navigateTo({
					url: '/pages/chooseasong/record?shopId=' + this.shopId
				})
			}
		}
	};
</script>

<style lang="scss">
	// page {

	// }
	:deep(.u-notice__left-icon) {
		display: none;
	}

	.content {
		width: 100%;
		height: 100vh;
		background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/background.png);
		background-size: 100% 100%;

		.search {
			width: 100%;

			padding: 12rpx 28rpx;

			.searchinput {
				padding: 0rpx 32rpx;
				width: 100%;
				height: 70rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 36rpx 36rpx 36rpx 36rpx;

				.searchinput_input {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					flex: auto;

				}

				.searchinputu-icon {
					background: #000;
					padding: 10rpx 24rpx;
					background: #333333;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
				}
			}

			.searchimage {
				margin-left: 40rpx;
				width: 45.25rpx;
				height: 50.12rpx;
			}
		}

		.contentclass {
			padding: 0rpx 28rpx 215rpx 28rpx;
			overflow: auto;

			.contentclassbox {
				width: 100%;
				padding: 12rpx 24rpx;
				// background: #FFFFFF;

				.contentclassboxitem {
					margin-top: 32rpx;

					.contentclassboxleft {
						.contentclassboxleftimage {
							width: 92rpx;
							height: 92rpx;
							border-radius: 16rpx;
						}

						.onecontentclassboxleft {
							margin-left: 16rpx;

							.onecontentclassboxleft_one {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 400;
								font-size: 32rpx;
								color: #FFFFFF;
							}

							.onecontentclassboxleft_tow {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 400;
								font-size: 26rpx;
								color: rgba(255, 255, 255, 0.5);
							}
						}
					}

					.contentclassboxright {
						padding: 8rpx 24rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 26rpx;
						color: #FFF6FF;
						border-radius: 28rpx 28rpx 28rpx 28rpx;
						border: 2rpx solid #FCF4FF;
					}
				}

			}
		}

		.positionfixed {
			position: fixed;
			width: 95%;
			height: 166rpx;
			bottom: 0;
			left: 50%;
			padding: 0 16rpx;
			transform: translate(-50%, 0);
			border-radius: 80rpx 80rpx 0 0;
			background: rgba(129, 125, 207, 0.2);
			backdrop-filter: blur(20px);

			// .positionfixedimage::before {
			// 	content: "";
			// 	position: absolute;
			// 	width: 50px;
			// 	height: 50px;
			// 	top: 100rpx;
			// 	left: -50px;
			// 	background: radial-gradient(circle at 0 0, transparent 50px, rgba(129, 125, 207, 0.2) 50px);
			// 	backdrop-filter: blur(20px);
			// }

			// .positionfixedimage::after {
			// 	content: "";
			// 	width: 180%;
			// 	height: 100%;
			// 	position: absolute;
			// 	left: 50%;
			// 	transform: translate(-50%, 0);
			// 	top: 0;
			// 	z-index: -1;
			// 	content: '';
			// 	border-radius: 0 0 50% 50%; //顶部圆弧，底部圆弧： 0 0 50% 50%
			// 	background: #000000;
			// }

			.positionfixedimage {
				position: absolute;
				top: -70rpx;
				left: 50%;
				transform: translate(-50%, 0);
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				background: #000000;
				z-index: 9;

				.positionfixedimage_image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					animation: rotate 5s linear infinite;
				}

				@keyframes rotate {
					from {
						transform: rotate(0deg);
						/* 动画开始时旋转0度 */
					}

					to {
						transform: rotate(360deg);
						/* 动画结束时旋转360度 */
					}
				}
			}

			.positionfixedbox {
				padding: 44rpx 74rpx 42rpx 74rpx;

				.positionfixedbox_item {
					image {
						width: 40rpx;
						height: 40rpx;
					}



					text {
						margin-top: 10rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
					}

					.positionfixedbox_itemtexto {
						width: 100rpx;
						padding: 0 0;
						overflow: hidden; //超出的文本隐藏
						text-overflow: ellipsis; //溢出用省略号显示
						white-space: nowrap; //溢出不换行
						// animation: aniMove 5s linear infinite;
					}

					@keyframes aniMove {
						0% {
							transform: translateX(50%);
						}

						100% {
							transform: translateX(-50%);
						}
					}
				}
			}
		}

		.contentu-popup {
			width: 694rpx;
			padding: 32rpx 24rpx 32rpx 24rpx;
			border-radius: 24rpx;
			background: rgba(129, 125, 207, 0.2);
			backdrop-filter: blur(20px);

			.contentuPopupOne {
				width: 100%;
				text-align: center;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 32rpx;
				color: #fff;
			}

			.contentuPopupitem {
				margin-top: 32rpx;

				.contentuPopupitemone {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.contentuPopupiteminput {
					margin-left: 16rpx;
					flex: auto;
					padding-bottom: 8rpx;
					border-bottom: 2rpx solid rgba(255, 255, 255, 0.5);

					input {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(255, 255, 255, 0.5);
					}
				}
			}

			.contentupopupboutton {
				padding: 50rpx 70rpx 0 70rpx;

				.contentupopupbouttonO {
					width: 196rpx;
					height: 56rpx;
					line-height: 56rpx;
					background: #FFFFFF;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					text-align: center;
				}

				.contentupopupbouttonT {
					width: 196rpx;
					height: 56rpx;
					background: linear-gradient(180deg, #8864EB 0%, #B349CC 100%);
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					line-height: 56rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
	}
</style>