<template>
	<view class="myShopTour-wrap">
		<!-- 自定义标题 -->
		<u-navbar :is-back="false" :border-bottom="false" :background="background" id="navbar">
			<view class="slot-wrap">
				<view class="back-icon" @click="goBack">
					<u-icon name="arrow-left" color="#fff" size="32"></u-icon>
				</view>
				<view class="left-icon">我的巡店</view>
				<view class="right-icon">
					<u-icon name="more-dot-fill" color="#fff" size="28"></u-icon>
				</view>
			</view>
		</u-navbar>
		<!-- 内容 -->
		<view class="myShopTour-con">
			<u-tabs-swiper ref="uTabs" :list="tabList" name="dispName" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			<swiper class="data-list" :current="swiperCurrent" @transition="transition" @change="swiperChange" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(tabs, index) in tabList" :key="index">
					<scroll-view scroll-y class="scroll-con" @scrolltolower="onreachBottom">
						<view class="record-con">
							<view class="record-item">
								<view class="item-head"></view>
							</view>
						</view>
						<u-empty text="暂无数据" img-width="120" v-if="list.length == 0 && status != 'loading'" mode="list"></u-empty>
						<u-loadmore bg-color="#f8f8f8" v-if="list.length < total || status == 'loading'" :status="status" class="loadmore" />
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			background: {
				// 渐变色
				backgroundImage: 'linear-gradient(45deg, rgb(85, 170, 255), rgb(21, 102, 223))'
			},
			tabList: [  //  tab切换  类型
				{ dispName: '全部', code:'' },
				{ dispName: '进行中', code:'1' },
				{ dispName: '已完成', code:'2' },
				{ dispName: '已过期', code:'3' }
			],
			current: 0,  //  tabs组件的current值，表示当前活动的tab选项
			swiperCurrent: 0,  //  swiper组件的current值，表示当前那个swiper-item是活动的
			pageNo: 1,  //  当前页码
			pageSize: 15,  //  一页多少条
			total: 0,  //  总条数
			// status: 'loading',  //  加载状态
			status: 'loadmore',  //  加载状态
			noDataText: '暂无数据',  //  列表数据为空时提示文字
			list: [],  //  数据列表
		}
	},
	onLoad() {
		this.pageInit()
	},
	methods: {
		//  返回
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		pageInit(){
			this.total = 0
			this.pageNo = 1
		},
		// tabs通知swiper切换
		tabsChange(index) {
			this.swiperCurrent = index
			this.list = []
			this.status = "loading"
		},
		swiperChange(event){
			this.list = []
			this.status = "loading"
		},
		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current
			if(current != this.current){
				this.$refs.uTabs.setFinishCurrent(current)
				this.swiperCurrent = current
				this.current = current
				this.pageInit()
			}
		},
		// scroll-view到底部加载更多
		onreachBottom() {
			if(this.list.length < this.total){
				this.pageNo += 1
				this.pageInit()
			}else{
				this.status = "nomore"
			}
		},
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f8f8f8;
	height: calc(100vh - 44px);
}
.myShopTour-wrap {
	height: 100%;
	/* 自定义导航栏样式 */
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx;
		color: #fff;
		font-size: 28upx;
		.left-icon {
			flex-grow: 1;
			font-size: 32upx;
			margin-right: 10upx;
			text-align: center;
		}
		.right-icon {
			padding-left: 50upx;
		}
		.uni-icons {
			margin-right: 10upx;
		}
	}
	// 内容
	.myShopTour-con{
		.data-list{
			height: calc(100vh - 84px);
			.swiper-item{
				.scroll-con{
					height: 100%;
					.loadmore{
						padding: 30upx;
					}
				}
			}
		}
	}
}
</style>
