<template>
	<view>
		<status-container :ifReturn="false" titlet="分类">
			<view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;">
				<view class="dis">
					<view>
						<scroll-view scroll-y :style="{height: scrollHeight +'px'}" class="bacf">
							<view class="pad-x160">
								<view class="flexs clips1 pad-z20 fon24" 
								@tap="chooseCate(index)" :style="{backgroundColor: current==index ? '#ff3673' : '#FFFFFF',color: current==index ? '#FFFFFF' : '#000000'}" 
								v-for="(item,index) in cateList" :key="index" style="min-width: 160rpx;height: 86rpx;line-height: 86rpx;box-sizing: border-box;" >{{item.title}}</view>
							</view>
						</scroll-view>
					</view>
					<view class="pad-zy20">
						<view class="pad-sx20" :style="{width: newWidth+'px'}">
							<swiper-tab-jl :list="secendCateList" v-model="activeIndex" @changeEv="clickTab" itemColor="#FFFFFF"></swiper-tab-jl>
						</view>
						<view class="disac bbt-d9 pad-sx30" @tap="goDetail(index)" v-for="(item,index) in dataList" :key="index">
							<image class="radius30 flexs borbot-cc" :src="item.imgsrc" mode="aspectFill" style="width: 240rpx;height: 240rpx;"></image>
							<view class="width100 disjb fc mar-z20" style="height: 240rpx;">
								<view class="fon30 colb clips2">{{item.title}}</view>
								<view class="">
									<view class="fon36 textc mar-x36">￥{{$toolAll.tools.changeNum(item.price)}}</view>
									<view @tap.stop="addCartEv(index)" class="colf disjcac fon24 radius30  cate-btn">
										<i class="icon icon-shop-cart mar-y10" style="font-size: 36rpx;"></i>
										立即选购
									</view>
								</view>
							</view>
						</view>
						<view class="mar-s40"><pitera textStr="——到底啦——"></pitera></view>
					</view>
				</view>
			</view>
		</status-container>
		<!-- 底部tab -->
		<foot-tab current="1"></foot-tab> 
	</view>
</template>

<script>
	import listOne from '@/components/list/list-one';
	import pitera from '@/components/nothing/pitera';
	import swiperTabJl from '@/components/swiper-tab/swiper-tab-jl.vue';
	// 底部组件
	import footTab from '@/components/foot-tabs/foot-tab.vue';
	export default {
		components:{
			'foot-tab' :footTab,
			listOne,
			pitera,
			swiperTabJl
		},
		data() {
			return {
				current:0,
				scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
				newWidth:uni.getSystemInfoSync().windowWidth - 100,
				cateList:[
					{id:1,title:'推荐套装'},
					{id:1,title:'推荐套装'},
					{id:1,title:'推荐套装'},
					{id:1,title:'推荐套装'},
					{id:1,title:'推荐套装'},
					{id:1,title:'推荐套装'},
					{id:1,title:'推荐套装'},
					{id:1,title:'推荐套装'},
					{id:1,title:'推荐套装'},
					{id:1,title:'推荐套装'},
				],
				secendCateList:[
					{title:'标题一'},
					{title:'标题二标题二'},
					{title:'标题三'},
					{title:'标题四'},
					{title:'标题五'},
					{title:'标题六标题六标题六'},
					{title:'标题七'},
					{title:'标题八'},
					{title:'标题九'},
				],
				activeIndex:0,
				dataList:[
					{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题',price:199},
					{imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
				],
				ifloading:false,
				flag:true
			}
		},
		onLoad(op) {
			if(op.index) {
				this.current = op.index;
			}
		},
		methods: {
			scrollBottomEv(e){
				if(this.flag){
					this.flag = false;
					this.ifloading = true;
					setTimeout(()=>{
						for (let i = 0; i < 2; i++) {
							let obj = {
								title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99
							}
							this.dataList[e].push(obj);
						}
						this.ifloading = false;
						this.flag = true;
					},1000)
					// 重新渲染组件
					this.$forceUpdate();
				}
			},
			// 一级分类选择
			chooseCate(index) {
				this.current = index;
			},
			goDetail(id) {
				uni.navigateTo({
					url:'/pagesB/shop-detail/shop-detail'
				})
			},
			addCartEv(id) {
				this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)')
			},
			// tab点击事件
			clickTab(index){
				this.activeIndex = index;
			},
		}
	}
</script>

<style>
.cate-btn{background: linear-gradient(to right,#ff3772 0%,#fd5549 100%);width: 170rpx;height: 60rpx;box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .3);}
</style>
