<template>
	<view class="">
		<!-- 占位符导航栏 -->
		<navseat :opacity='false' :title='"点单记录"' :titleshow='true' :heightshow='true' :namecolor='"#fff"'
			iconcolor="#fff">
		</navseat>
		<view class="content">
			<scroll-view scroll-y="true" id="demo" style="width:100%;" :style="{'height':Height}" show-scrollbar="false"
				@scrolltolower="lower">
				<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:32rpx auto;" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png"
					v-if="is_end" mode="aspectFill"></image>
				<u-loadmore :status="form.status" fontSize="28" color="#999" iconSize="28" />
			</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: ''
			};
		},
		onLoad(e) {
			this.shopId = e.shopId
		},
		mounted() {
			setTimeout(() => {
				this.GetTop()
			}, 200)
		},
		onShow() {
			this.cashierService()
		},
		methods: {
			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 (res.data.pageNum == 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 - 36 + '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 {
		padding: 32rpx 28rpx 0rpx 28rpx;

		.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>