<template>
	<view>
		<!-- 预约服务 -->
		<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="100" duration="0" @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">
					<!-- <navigator :url="'resevation-project/resevation-project?item=' + JSON.stringify(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>
					<!-- </navigator> -->
				</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 class="experience" v-for="(item,index) in 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/95327411_1.jpg"></image>
				</view>
				<view class="experience-content">
					<view class="experience-name">{{item.projectname}}</view>
					<view class="experience-explain">介绍：{{item.explain}}</view>
					<view class="experience-price">体验价：
						<text>￥{{item.price}}</text>
					</view>
				</view>
				<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 class="experience" v-for="(item,index) in 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/95327411_1.jpg"></image>
					</view>
				<navigator url="./resevation-project/resevation-project">
					<view class="experience-content">
						<view class="experience-name">{{item.projectname}}</view>
						<view class="experience-explain">介绍：{{item.explain}}</view>
						<view class="experience-price">体验价：
							<text>￥{{item.price}}</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 class="experience" v-for="(item,index) in 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/95327411_1.jpg"></image>
				</view>
				<view class="experience-content">
					<view class="experience-name">{{item.projectname}}</view>
					<view class="experience-explain">介绍：{{item.explain}}</view>
					<view class="experience-price">体验价：
						<text>￥{{item.price}}</text>
					</view>
				</view>
				<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 class="experience" v-for="(item,index) in 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/95327411_1.jpg"></image>
				</view>
				<view class="experience-content">
					<view class="experience-name">{{item.projectname}}</view>
					<view class="experience-explain">介绍：{{item.explain}}</view>
					<view class="experience-price">体验价：
						<text>￥{{item.price}}</text>
					</view>
				</view>
				<view class="experience-icon">
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reservationForm: {},
				dotStyle: false,
				cardCur: 1,
				TabCur: 1,
				// 轮播图
				swiperList: [{
						id: 1,
						type: 'image',
						url: "../../../../static/image/95327411_1.jpg"
					},
					{
						id: 2,
						type: 'image',
						url: "../../../../static/image/95327411_2.jpg"
					},
					{
						id: 3,
						type: 'image',
						url: "../../../../static/image/95327411_3.jpg"
					},
					{
						id: 4,
						type: 'image',
						url: "../../../../static/image/95327411_4.jpg"
					},
					{
						id: 5,
						type: 'image',
						url: "../../../../static/image/95327411_5.jpg"
					},

					{
						id: 6,
						type: 'image',
						url: "../../../../static/image/95327411_6.jpg"
					},
					{
						id: 7,
						type: 'image',
						url: "../../../../static/image/95327411_7.jpg"
					},
					{
						id: 8,
						type: 'image',
						url: "../../../../static/image/95327411_8.jpg"
					},
					{
						id: 9,
						type: 'image',
						url: "../../../../static/image/95327411_9.jpg"
					}
				],
				experiencelist: [{
					projectname: "精品美容A套餐",
					explain: "精品美容,你的明智之选,限时推出的新品,全新的体验,全新的美容方式",
					price: 188
				}, {
					projectname: "精品美容B套餐",
					explain: "精品美容,你的明智之选,限时推出的新品,全新的体验,全新的美容方式",
					price: 288
				}, {
					projectname: "精品美容C套餐",
					explain: "精品美容,你的明智之选,限时推出的新品,全新的体验,全新的美容方式",
					price: 588
				}]

			}
		},
		methods: {
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id * 1;
			},
			setTitle() {

			}
		},
		onLoad: function(option) {
			if (option.item != undefined) {
				const item = JSON.parse(option.item);
				this.reservationForm = item
			}
		},
		onShow: function() {
			console.log(this.reservationForm);
			// this.swiperList.forEach()
			this.swiperList.reverse()
			this.swiperList = [...this.swiperList, ...this.swiperList.reverse()]
		}
	}
</script>

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

	/* 推荐疗程 */
	.experience {
		width: 750rpx;
		height: 150rpx;
		display: flex;
		/* align-items: center; */
		border-bottom: 1px solid #eee;
		padding: 20rpx 15rpx;
	}

	.experience-img {
		width: 135rpx;
	}

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

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

	.experience-name {
		height: 40rpx;
		font-size: 30rpx;
	}

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