<template>
	<view class="">
		<!-- 占位符导航栏 -->
		<navseat :opacity='false' :title='"点单记录"' :titleshow='true' :heightshow='true' :namecolor='"#fff"'
			iconcolor="#fff" @Topdistance='Topdistance'>
		</navseat>
		<view class="content" :style="{'height':Height}">
			<scroll-view scroll-y="true" style="width:100%;" :style="{'height':Height}" show-scrollbar="false"
				@scrolltolower="lower">
				<view class="scrollview" :style="{'height':Height}">
					<view class="contentbox" v-for="(item,index) in list" :key="index">
						<view class="contentboxtop flex-between">
							<text class="contentboxtopname">{{item.name}}</text>
							<text v-if="item.state == '-1'" class="contentboxtopname_weizhifu">未支付</text>
							<text v-if="item.state == '0'">已取消</text>
							<view class="contentboxtopone" v-if="item.state == '1'">
								<text class="contentboxtopone_one">前面还有{{item.preCount}}首</text>
								<text class="contentboxtopone_tow">已支付</text>
							</view>
							<text class="contentboxtopnametow" v-if="item.state == '2'">演唱中</text>
							<text class="contentboxtopnametowthere" v-if="item.state == '3'">已演唱</text>
						</view>
						<view class="contentboxtopO">
							¥{{item.price}}
						</view>
						<view class="contentboxtopT">
							下单时间：{{$u.timeFormat(item.create_time,'yyyy-mm-dd hh:MM') || '无'}}
						</view>
						<image class="contentboxafter" src="" mode=""></image>
					</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> -->
					<view style="padding: 32rpx 0;">
						<u-loadmore :status="form.status" fontSize="28" color="#999" iconSize="28" />
					</view>
				</view>


			</scroll-view>

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

<script>
	import navseat from '@/components/navseat.vue'
	export default {
		components: {
			navseat
		},
		data() {
			return {
				Height: '',
				list: [],
				is_end: false,
				form: {
					page: 1,
					size: 10,
					status: 'loadmore',
				},
				shopId: '10'
			};
		},
		onLoad(e) {
			this.shopId = e.shopId
		},
		mounted() {
			setTimeout(() => {
				// this.Topdistance()
			}, 500)
		},
		onShow() {
			this.cashierService()
		},
		methods: {
			Topdistance(res) {
				// console.log(res,111)
				var resdata = res
				uni.getSystemInfo({
					success: (data) => {
						console.log(data)
						this.Height = data.screenHeight - 32 - resdata + 'px'
						// console.log(this.Height)
						// console.log(this.Height)
					}
				})
			},
			lower() {
				console.log('触底加载')
				this.cashierService()
			},
			async cashierService() {
				let res = await this.api.cashierServicerecord({
					size: this.form.size,
					page: this.form.page,
					state: '', //-1 未支付 0 已取消 1 已支付 2 演唱中 3 已演唱
					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];
						}
						this.form.status = 'loading';
						if (this.form.page > res.data.pages) {
							this.form.status = 'nomore';
						} else {
							this.form.status = 'loading';
						}
					}, 500)

				}
			},
			//获取元素距离顶部的距离
			GetTop() {
				uni.getSystemInfo({
					success: (data) => {
						console.log(data)
						this.$u.getRect('.content').then(res => {
							console.log(res, 111)
							this.Height = data.safeArea.height - 32 + 'px'
							// console.log(this.Height)
						})
						// console.log(this.Height)
					}
				})
			},
		}
	};
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/background.png);
		background-size: 100% 100%;
	}

	.content {
		position: relative;
		z-index: 99;
		padding: 32rpx 28rpx 0rpx 28rpx;
		overflow: auto;

		.scrollview {
			overflow: auto;

			.contentbox:nth-child(1) {
				margin-top: 0;
			}

			.contentbox {
				position: relative;
				margin-top: 48rpx;
				width: 100%;
				background: rgba(129, 125, 207, 0.2);
				border: 2px solid #828282;
				backdrop-filter: blur(20px);
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.contentboxafter {
					position: absolute;
					bottom: 0;
					width: 482rpx;
					height: 14rpx;
					background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/dibuyin.png);
					background-size: 100% 100%;
					left: 50%;
					transform: translate(-50%, 0);
				}

				.contentboxtop {
					padding: 16rpx 24rpx;
					border-bottom: 2rpx solid #F6F6F6;

					.contentboxtopname {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 32rpx;
						color: #fff;
					}

					.contentboxtopone {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.contentboxtopone_one {
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #F9DDF9;
						}

						.contentboxtopone_tow {
							margin-left: 16rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 28rpx;
							color: #32AA52;
							text-shadow: 0px 6px 6px rgba(50, 170, 82, 0.55);
						}
					}

					.contentboxtopnametow {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #FF9C39;
						text-shadow: 0px 4px 4px rgba(255, 156, 57, 0.37);
					}

					.contentboxtopname_weizhifu {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: rgba(255, 255, 255, 0.5);
						text-shadow: 0px 4px 4px rgba(255, 255, 255, 0.37);
					}

					.contentboxtopnametowthere {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
						text-shadow: 0px 4px 4px rgba(255, 255, 255, 0.37);
					}
				}

				.contentboxtopO {
					padding: 0 24rpx;
					margin-top: 10rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
				}

				.contentboxtopT {
					padding: 0rpx 24rpx 32rpx 24rpx;
					margin-top: 16rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

	}
</style>