<template>
<view>

	<view class="flex-row justify-between" :style="{'height':height}">

		<view class="left-box  flex-col">
			<scroll-view scroll-y :style="{'height':height}">
				<view class="flex-col">
					<view class="tab" :class="{'checked-tab':current===index}" v-for="(item,index) in productList" :key="index" @click="clickTab(index)">
						<text :class="{'unselected-text': current !== index,'checked-text': current !== index}">{{item.title}}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="right-box   flex-col">
			<swiper :style="{'height':height}" :current="current" duration="0">
				<swiper-item v-for="(tab,index) in productList" :key="index" :catchtouchmove="false">
					<view>
						<mescroll-item ref="MescrollItem"  :i="index" :index="current" :productId="tab.id"   :height="height">
						</mescroll-item>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>

</view>
</template>

<script>
import MescrollItem from "./module/mescrollUni-item.vue";
import { getCategoryOne, getCategoryTwo, getGoodsList } from '@/api/home.js'
export default {
components: {
	MescrollItem,
},
data () {
	return {
		vGoodsList:[],
		productList:[],
		current:0,
		height:'',
	}
},

created () {
	let sysInfo = uni.getSystemInfoSync();
	this.height = sysInfo.windowHeight*0.8+'px'
	console.log(this.height)
	this.getCategoryOne();
},

onShow(){


},
methods: {

	delVGood(item){
		for (let i =0;i<this.productList.length;i++){
			this.$refs.MescrollItem[i].delVGood(item);
		}
	},

	returnVGoods(){
		let arr=[];
		this.vGoodsList=[];
		for (let i =0;i<this.productList.length;i++){
			arr = this.$refs.MescrollItem[i].getvGoodsList();
			this.vGoodsList = this.vGoodsList.concat(arr)
		}
		return  this.vGoodsList
	},


	clickTab(index){
		this.current =index
	},

	getCategoryOne () {
		getCategoryOne({
			parentId: 0
		}).then(res => {
			if (res.data.length > 0) {
				this.productList = res.data
			}
		})
	},

}
}


</script>

<style scoped lang="scss">
@import '/static/css/common.css';
@import './index.rpx.css';
</style>
