<template>
	<view class="subscribepage">
		<view v-show="pageInfo.total==0">
			<view class='empty cuIcon-info'></view>
			<view class='empty-text text-gray'>暂无数据</view>
		</view>
		<view class="subscribe  bg-white " v-for="(item,index) in pageInfo.subscribeList" :key='index'>
			<view class="flex justify-between align-center">
				<view>
					<view class="subscribe-t">
						<view class="subscribe-title">
							预约项目:
						</view>
						<text class="subscribe-content projectname">{{item.projectName}}</text>
					</view>
					<view class="subscribe-t">
						<view class="subscribe-title">
							预约时间:
						</view>
						<text class="subscribe-content">{{item.orderDate}}</text>
					</view>
					<view class="subscribe-t">
						<view class="subscribe-title">
							服务人员:
						</view>
						<text class="subscribe-content">{{item.staffName}}</text>
					</view>
				</view>
				<view>
					<navigator 
						:url="'../../../myHome/reservation/resevation-project/resevation-project?item='+ JSON.stringify(item)">
						<view class="text-blue">
							修改
							<text class="cuIcon-right" style="font-size: 30upx;padding-right: 20upx;"></text>
						</view>
					</navigator>
					<view class="text-red" style="margin-top: 30px;margin-right: 20px;" @click="ondel(item,index)">
						取消预约
					</view>
				</view>
			</view>
		</view>
		<text class="margin-left">共 {{pageInfo.total}} 条数据</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				pageInfo: {
					total: 0,
					pageNum: 1,
					pageSize: 5,
					subscribeList: []
				},
			}
		},
		methods: {
			ondel(item,index){
				var page = {
					id:item.id
				}
				this.$api.deleteOrder(page).then(res => {
					if (res.code == '000000') {
						this.orderPage();
					} else if (res.code == '510002' || res.code == '502001') {} else {
						uni.showModal({
							title: '提示',
							content: res.message,
							showCancel: false,
							success: function(res) {}
						})
				
					}
				})
			},
			orderPage() {
				var page = {
					memberId: this.userInfo.id,
					storeId: this.userInfo.storeId,
					pageNum: this.pageInfo.pageNum,
					pageSize: this.pageInfo.pageSize
				}
				this.$api.orderPage(page).then(res => {
					if (res.code == '000000') {
						res.pageInfo.list.forEach(item => {
							item.editOrder = true
						})
						res.pageInfo.subscribeList = res.pageInfo.list
						this.pageInfo = res.pageInfo
					} else if (res.code == '510002' || res.code == '502001') {} else {
						uni.showModal({
							title: '提示',
							content: res.message,
							showCancel: false,
							success: function(res) {}
						})

					}
				})
			}
		},
		onShow: function() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.orderPage()
		},
		onReachBottom: function() {
			this.pageInfo.pageSize = this.pageInfo.pageSize + 5
			this.orderPage()
		},
		onPullDownRefresh: function() {
			setTimeout(function() {
				uni.redirectTo({
					url: './subscribe'
				})
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 2000
				});
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style>
	.subscribepage {
		padding-top: 50upx;
	}

	.subscribe {
		width: 94%;
		height: 200upx;
		border: #dddddd 1upx solid;
		box-shadow: 2upx 2upx 2upx #d0d0d0;
		border-radius: 10upx;
		margin: 20upx 3%;
		padding: 20upx 0;

	}

	.subscribe-title {
		padding-top: 10upx;
		padding-left: 30upx;
		font-size: 28upx;
		font-weight: 700;
		display: inline-block;
	}

	.projectname {
		/* 	overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap; */
	}

	.subscribe text {
		font-size: 26upx;
		font-weight: normal;
		padding-left: 20upx;
	}

	.subscribe-content {
		width: 500upx;
	}
</style>
