<template>
	<view>
		<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>
		</scroll-view>
		<view class="bg-white" v-show="TabCur==1">
			<view class="experience-title bg-gray">全部商品</view>
			<view v-if="cardStoreProjectList.lengths==0">
				<view class='empty cuIcon-info'></view>
				<view class='empty-text text-gray'>暂无数据</view>
			</view>
			<view style="display: flex;flex-wrap: wrap;background-color: #f0f0f0;">
				<view class="experience" v-for="(item,index) in cardStoreProjectLists" :key="index" @click="setTitle"
					data-projectId="item.projectId" data-projectNum="item.projectNum" data-title="item.projectName"
					style="">
					<navigator :url="'./shopcar-detail/shopcar-detail?item='+JSON.stringify(item)">
						<view
							style="display: flex;flex-direction: column;height: 100%;width: 100%;justify-content: center">
							<view style="height: 69%;background-color: aqua;">
								<img src="g" alt="" style="width: 100%;">
							</view>
							<view style="height: 31%;background-color:white">
								<view
									style="width: 100%;height: 50%;font-size: 32rpx;padding-left: 20rpx;line-height: 64rpx;padding-top: 20rpx;">
									艾灸体验卡</view>
								<view
									style="width: 100%;height: 50%;display: flex;padding-left: 20rpx;line-height: 64rpx;">
									<view>￥<span style="color:red;font-size:40rpx"> 288</span> <span
											style="text-decoration:line-through;margin-left: 20rpx">￥350</span> </view>
									<view style="margin-left: 50rpx;">已售300</view>
								</view>
							</view>
						</view>
					</navigator>
				</view>
			</view>

		</view>
		<view class="bg-white" v-show="TabCur==2">
			<view class="experience-title bg-gray">使用商品</view>
			<view v-if="cardStoreProjectList.lengths==0">
				<view class='empty cuIcon-info'></view>
				<view class='empty-text text-gray'>暂无数据</view>
			</view>
			<view style="display: flex;flex-wrap: wrap;background-color: #f0f0f0;">
				<view class="experience" v-for="(item,index) in cardStoreProjectLists" :key="index" @click="setTitle"
					data-projectId="item.projectId" data-projectNum="item.projectNum" data-title="item.projectName"
					style="">
					<navigator :url="'./shopcar-detail/shopcar-detail?item='+JSON.stringify(item)">
						<view
							style="display: flex;flex-direction: column;height: 100%;width: 100%;justify-content: center">
							<view style="height: 69%;background-color: aqua;">
								<img src="" alt="" style="width: 100%;">
							</view>
							<view style="height: 31%;background-color:white">
								<view
									style="width: 100%;height: 50%;font-size: 32rpx;padding-left: 20rpx;line-height: 64rpx;padding-top: 20rpx;">
									艾灸体验卡</view>
								<view
									style="width: 100%;height: 50%;display: flex;padding-left: 20rpx;line-height: 64rpx;">
									<view>￥<span style="color:red;font-size:40rpx"> 288</span> <span
											style="text-decoration:line-through;margin-left: 20rpx">￥350</span> </view>
									<view style="margin-left: 50rpx;">已售300</view>
								</view>
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>

		<view class="bg-white" v-show="TabCur==3">
			<view class="experience-title bg-gray">服务商品</view>
			<view v-if="cardStoreProjectList.lengths==0">
				<view class='empty cuIcon-info'></view>
				<view class='empty-text text-gray'>暂无数据</view>
			</view>
			<view style="display: flex;flex-wrap: wrap;background-color: #f0f0f0;">
				<view class="experience" v-for="(item,index) in cardStoreProjectLists" :key="index" @click="setTitle"
					data-projectId="item.projectId" data-projectNum="item.projectNum" data-title="item.projectName">
					<navigator :url="'./shopcar-detail/shopcar-detail?item='+JSON.stringify(item)">
						<view
							style="display: flex;flex-direction: column;height: 100%;width: 100%;justify-content: center">
							<view style="height: 69%;background-color: aqua;">
								<img src="" alt="" style="height: 100%;">
							</view>
							<view style="height: 31%;background-color:white">
								<view
									style="width: 100%;height: 50%;font-size: 32rpx;padding-left: 20rpx;line-height: 64rpx;padding-top: 20rpx;">
									艾灸体验卡</view>
								<view
									style="width: 100%;height: 50%;display: flex;padding-left: 20rpx;line-height: 64rpx;">
									<view>￥<span style="color:red;font-size:40rpx"> 288</span> <span
											style="text-decoration:line-through;margin-left: 20rpx">￥350</span> </view>
									<view style="margin-left: 50rpx;">已售300</view>
								</view>
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				reservationForm: {},
				cardStoreProjectList: [],
				cardStoreProjectLists: [{
						courseProjectName: "满100减20",
						courseStandardMoney: "2022-09-05"
					},
					{
						courseProjectName: "满200减50",
						courseStandardMoney: "2022-09-05"
					},
					{
						courseProjectName: "满100减20",
						courseStandardMoney: "2022-09-05"
					},
					{
						courseProjectName: "满200减50",
						courseStandardMoney: "2022-09-05"
					},
					{
						courseProjectName: "满100减20",
						courseStandardMoney: "2022-09-05"
					},
					{
						courseProjectName: "满200减50",
						courseStandardMoney: "2022-09-05"
					},
					{
						courseProjectName: "满100减20",
						courseStandardMoney: "2022-09-05"
					},
					{
						courseProjectName: "满200减50",
						courseStandardMoney: "2022-09-05"
					},
				],
				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: {
			noselect() {
				this.TabCur = 2
				console.log(this.TabCur)
			},
			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: 48%;
		height: 33vh;
		display: flex;
		/* align-items: center; */
		border-bottom: 10px solid #eee;
		margin-left: 1%;
		margin-right: 1%;
	}

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

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

	.experience-content {
		width: 475rpx;
		height: 110rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.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;
		margin-top: 12rpx;
	}

	.experience-price text {
		color: #333333;
	}

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