<template>
	<view>
		<!-- 预约服务 -->
		<!-- <swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="2000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
		 indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
				</view>
			</swiper-item>
		</swiper> -->
		<scroll-view scroll-x class="bg-white nav text-center" style="margin-top: 20upx;">
			<view class="flex text-center">
				<view class="cu-item light flex-sub" :class="[TabCur==1?'bg-red cur text-white':'']" @tap="tabSelect"
					:data-id="1">
					卡内
				</view>
				<view class="cu-item light flex-sub" :class="[TabCur==2?'bg-red cur text-white':'']" @tap="tabSelect"
					:data-id="2">
					新品
				</view>
				<view class="cu-item light flex-sub" :class="[TabCur==3?'bg-red cur text-white':'']" @tap="tabSelect"
					:data-id="3">
					全部
				</view>
				<view class="cu-item light flex-sub" :class="[TabCur==4?'bg-red cur text-white':'']" @tap="tabSelect"
					:data-id="4">
					已预约
				</view>


			</view>
		</scroll-view>
		<view class="bg-white" v-show="TabCur==1">
			<view class="experience-title bg-gray">卡内项目</view>
			<view v-if="cardStoreProjectList.length==0">
				<view class='empty cuIcon-info'></view>
				<view class='empty-text text-gray'>暂无数据</view>
			</view>
			<view class="experience" v-for="(item,index) in cardStoreProjectList" :key="index" @click="setTitle"
				data-projectId="item.projectId" data-projectNum="item.projectNum" data-title="item.projectName">
				<view class="experience-img">
					<image src="../../../../static/image/project-iocn.png"></image>
				</view>
				<navigator :url="'./resevation-project/resevation-project?item='+JSON.stringify(item)">
					<view class="experience-content ">
						<view class="experience-name   ">{{item.courseProjectName}}</view>
						<view class="experience-explain">可用次数：{{item.courseConsumeCount}}</view>
						<view class="experience-price">卡包价值：
							<text>￥{{item.courseStandardMoney}}</text>
						</view>
					</view>
				</navigator>
				<view class="experience-icon">
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>
		<view class="bg-white" v-show="TabCur==2">
			<view class="experience-title bg-gray">新品推荐</view>
			<view v-if="pageInfo2.total==0">
				<view class='empty cuIcon-info'></view>
				<view class='empty-text text-gray'>暂无数据</view>
			</view>
			<view class="experience" v-for="(item,index) in pageInfo2.experiencelist" :key="index" @click="setTitle"
				data-projectId="item.projectId" data-projectNum="item.projectNum" data-title="item.projectName">
				<view class="experience-img">
					<image src="../../../../static/image/project-iocn.png"></image>
				</view>
				<navigator :url="'./resevation-project/resevation-project?item='+JSON.stringify(item)">
					<view class="experience-content">
						<view class="experience-name ">{{item.projectName}}</view>
						<view class="experience-explain">介绍：{{item.label==null?'该项目暂时没有介绍':item.label}}</view>
						<view class="experience-price">价格：
							<text>￥{{item.priceMember}}</text>
						</view>
					</view>
				</navigator>
				<view class="experience-icon">
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>

		<view class="bg-white" v-show="TabCur==3">
			<view class="experience-title bg-gray">门店项目</view>
			<view v-if="pageInfo3.total==0">
				<view class='empty cuIcon-info'></view>
				<view class='empty-text text-gray'>暂无数据</view>
			</view>
			<view class="experience" v-for="(item,index) in pageInfo3.allStoreProjectList" :key="index"
				@click="setTitle" data-projectId="item.projectId" data-projectNum="item.projectNum"
				data-title="item.projectName">
				<view class="experience-img">
					<image src="../../../../static/image/project-iocn.png"></image>
				</view>
				<navigator :url="'./resevation-project/resevation-project?item='+JSON.stringify(item)">
					<view class="experience-content">
						<view class="experience-name ">{{item.projectName}}</view>
						<view class="experience-explain">介绍：{{item.label==null?'该项目暂时没有介绍':item.label}}</view>
						<view class="experience-price">价格：
							<text>￥{{item.priceMember}}</text>
						</view>
					</view>
				</navigator>
				<view class="experience-icon">
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>
		<view class="bg-white" v-show="TabCur==4">

			<view class="experience-title bg-gray">门店项目</view>
			<view v-if="pageInfo4.total==0">
				<view class='empty cuIcon-info'></view>
				<view class='empty-text text-gray'>暂无预约信息</view>
			</view>
			<!-- <view >
				<uni-list >
					<uni-list-item  class="subscribe  bg-white " v-for="(item,index) in pageInfo4.subscribeList"
						:key='index'>
						<template v-slot:body>
							<navigator class="flex justify-between align-center"
								:url="'./resevation-project/resevation-project?item='+ JSON.stringify(item)">
								<view>
									<view class="subscribe-t">
										<view class="subscribe-title margin-right ">
											预约项目
										</view>
										<text class="subscribe-content projectname">{{item.projectName}}</text>
									</view>
									<view class="subscribe-t">
										<view class="subscribe-title margin-right">
											预约时间
										</view>
										<text class="subscribe-content">{{item.orderDate}}</text>
									</view>
									<view class="subscribe-t">
										<view class="subscribe-title margin-right">
											服务人员
										</view>
										<text class="subscribe-content">{{item.staffName}}</text>
									</view>
								</view>
				
							</navigator>
						</template>
						
					</uni-list-item>
				</uni-list>
			</view> -->
			<view class="subscribe  bg-white " v-for="(item,index) in pageInfo4.subscribeList" :key='index'>

				<!-- <navigator class="flex justify-between align-center"
					:url="'./resevation-project/resevation-project?item='+ JSON.stringify(item)"> -->
				<view class="flex justify-between align-center">


					<view>
						<view class="subscribe-t">
							<view class="subscribe-title margin-right ">
								预约项目
							</view>
							<text class="subscribe-content projectname">{{item.projectName}}</text>
						</view>
						<view class="subscribe-t">
							<view class="subscribe-title margin-right">
								预约时间
							</view>
							<text class="subscribe-content">{{item.orderDate}}</text>
						</view>
						<view class="subscribe-t">
							<view class="subscribe-title margin-right">
								服务人员
							</view>
							<text class="subscribe-content">{{item.staffName}}</text>
						</view>
					</view>
					<view>
						<navigator class="flex justify-between align-center"
							:url="'./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>
				<!-- </navigator> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reservationForm: {},
				cardStoreProjectList: [],
				pageInfo2: {
					total: 0,
					experiencelist: [],
				},
				pageInfo3: {
					total: 0,
					allStoreProjectList: [],
				},
				pageInfo4: {
					total: 0,
					subscribeList: [],
				},
				userInfo: null,
				dotStyle: false,
				cardCur: 1,
				TabCur: 1,
				// 轮播图
				swiperList: [{
					id: 1,
					type: 'image',
					url: "../../../../static/image/title.png"
				}, ],

			}
		},
		methods: {
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id * 1;
				this.projectPage()
			},
			setTitle() {},
			projectPage() {
				var that = this
				let page = {
					storeId: this.userInfo.storeId,
					pageNum: 1,
					pageSize: 100,
					directConsumption: 1,
					state: 1
				}
				var form = {
					storeId: that.userInfo.storeId,
					memberId: that.userInfo.id
				}
				var page1 = {
					storeId: that.userInfo.storeId,
					pageNum: 1,
					pageSize: 100,
					state: 1,
					type: 1
				}
				if (this.TabCur == 1) {
					that.$api.couAccountlist(form).then(res => {
						if (res.code == '000000') {
							res.rows.forEach(item => {
								item.projectName = item.courseProjectName
								item.priceMember = item.courseProjectMoney
							})
							that.cardStoreProjectList = res.rows
						}
					})
				}
				if (this.TabCur == 2) {
					that.$api.projectPage(page1).then(res => {
						if (res.code == '000000') {
							res.pageInfo.experiencelist = res.pageInfo.list
							that.pageInfo2 = res.pageInfo
						} else {}

					})
				}
				if (this.TabCur == 3) {
					that.$api.projectPage(page).then(res => {
						if (res.code == '000000') {
							res.pageInfo.allStoreProjectList = res.pageInfo.list
							that.pageInfo3 = res.pageInfo
						} else {}

					})
				}
				if (this.TabCur == 4) {
					this.orderPage()
				}


			},
			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: 1,
					pageSize: 50
				}
				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.pageInfo4 = res.pageInfo
					} else if (res.code == '510002' || res.code == '502001') {} else {
						uni.showModal({
							title: '提示',
							content: res.message,
							showCancel: false,
							success: function(res) {}
						})

					}
				})
			}
		},
		onLoad: function(option) {
			if (option.item != undefined) {
				const item = JSON.parse(option.item);
				this.reservationForm = item
			}
		},
		onShow: function() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.projectPage()
			this.swiperList.reverse()

		},
		onPullDownRefresh: function() {
			setTimeout(function() {
				uni.redirectTo({
					url: './reservation'
				})
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 2000
				});
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style>
	.experience-title {
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 34rpx;
		/* font-weight: 550; */
	}

	/* 推荐疗程 */
	.experience {
		width: 100%;
		height: 165rpx;
		display: flex;
		/* align-items: center; */
		border-bottom: 20upx solid #eee;
		padding: 20rpx 15rpx;
	}

	.experience-img {
		width: 135rpx;
		padding: 10upx;
	}

	.experience-img image {
		width: 110rpx;
		height: 110rpx;
	}

	.experience-content {
		width: 575rpx;
		height: 110rpx;
	}

	.experience-name {
		height: 40rpx;
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.experience-explain {
		height: 36rpx;
		font-size: 26rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #505050;
	}

	.experience-price {
		height: 24rpx;
		font-size: 26rpx;
	}

	.experience-price text {
		color: red;
		font-weight: 550;
	}

	.experience-icon {
		width: 30rpx;
		display: flex;
		align-items: center;
		color: #ccc;
	}

	.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;
	}
</style>
