<template>
    <view class='container'>
		<view class="wapper">
			<view class="left-box">
				<view class="left">
					<scroll-view scroll-y style="height: 100%;">
						<view v-for="(item, index) in 8" :key="index" @click="onClickLeftIfy(index)" :class="{'active': currentIfy === index}" class="left-item">
							<text>分类</text>
						</view>
					</scroll-view>
				</view>
			</view>
			
			<!-- 一级分类 -->
			<view v-if="true" class="right-box">
				<view id="right" class="right">
					<scroll-view scroll-y class="children-scroll" @scrolltolower="scrolltolower">
						<view class="goods-box-yiji">
							<view
							@click="$wskj.to('/pages/home/twolevelclassify?pid=' + item.id)"
							class="good-item-yiji"
							v-for="(item, index) in 20"
							:key="index"
							>
								<image src="@/static/logo.png"></image>
								<view style="flex:1;" class="fs-28 ptb-10 flex flex-column flex-row-between">
									<text>男士多口袋后宫嘻哈流行裤长裤街头服装运动裤休闲</text>
									<view class="flex-between-center">
										<view class="flex-column-center">
											<text style="color: #FE2C24;" class="fs-36"><text class="fs-24">￥</text>200</text>
											<text class="fs-24 ml-15" style="text-decoration: line-through;color: #999999;">￥180</text>
										</view>
										<text class="fs-24" style="color: #999999;">销量：200</text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			
			<!-- 二级分类 -->
			<view v-if="false" class="right-box">
				<view id="right" class="right">
					<scroll-view scroll-y class="children-scroll" @scrolltolower="scrolltolower">
						<view class="goods-box">
							<view
							@click="$wskj.to('/pages/home/twolevelclassify?pid=' + item.id)"
							class="good-item"
							v-for="(item, index) in 20"
							:key="index"
							:style="{'margin-right': (index + 1) % 3 === 0? '0' : '20rpx'}"
							>
								<image src="@/static/logo.png"></image>
								<view class="center fs-28" style="color: #666;">
									<text>二级</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			
			<!-- 三级分类 -->
			<view v-if="false" class="right-box">
				<view id="right" class="right">
					<scroll-view scroll-y class="children-scroll" @scrolltolower="scrolltolower">
						<view v-for="(item, index) in 3" class="goods-box-sanji">
							<view class="mb-24 flex flex-column-center fw-600">
								<text>二级分类名称</text>
								<image class="ml-8 w-24 h-24" src="@/static/right.png"></image>
							</view>
							<view class="sanji-box">
								<view
								@click="$wskj.to('/pages/home/twolevelclassify?pid=' + item.id)"
								class="good-item"
								v-for="(item, index) in 10"
								:key="index"
								:style="{'margin-right': (index + 1) % 3 === 0? '0' : '20rpx'}"
								>
									<image src="@/static/logo.png"></image>
									<view class="center fs-24" style="color: #999999;">
										<text>三级</text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
	import {
		mapState
	} from "vuex"
export default {
    data() {
        return {
			classIfyList: [],
			cartLen: 0,
			currentIfy: 0,
			
			currentPid: '',
			
			secondClassIfyList: [],
			currentPage: 1,
			isEmpty: false
        };
    },
    onLoad() {
		
    },
	computed:{
		...mapState(['cart'])
	},
	// 监听切换上级门店或返回我的门店重新获取数据
	onShow(){
		this.currentIfy = 0
		this.currentPid = ''
		this.secondClassIfyList = []
		this.currentPage = 1
		this.isEmpty = false
		this.getClassIfy()
		this.getCartList()
	},
    methods: {
		getClassIfy(){
			const params = {
				url: '/api/index/getcatelist',
				data: {
					pid: 'all'
				}
			}
			this.$request(params).then(res => {
				// console.log(res)
				this.classIfyList = res.data.catelist
				this.currentPid = this.classIfyList[0].id
				this.getSecondClassIfyList()
			}).catch(err => {
				
			})
		},
		// 获取二级分类列表
		getSecondClassIfyList(){
			const params = {
				url: '/api/index/getcatelist',
				data: {
					pid: this.currentPid, // 一级分类的ID
					page: this.currentPage,
					// pid: 'all'
				}
			}
			this.$request(params).then(res => {
				// console.log(res)
				this.secondClassIfyList = this.secondClassIfyList.concat(res.data.ercate)
				if(res.data.ercate.length === 0) {
					this.isEmpty = false
				}
			}).catch(err => {
				
			})
		},
		getCartList(){
			const params = {
				url: '/api/userinfo/carlist',
				data: {
					page: 1
				}
			}
			
			this.$request(params).then(res => {
				this.cartLen = res.data.list.length
			}).catch(err => {
				
			})
		},
		scrolltolower(){
			if(!this.isEmpty) {
				this.currentPage += 1
				this.getSecondClassIfyList()
			}
		},
		// 点击左侧分类
		onClickLeftIfy(index){
			// console.log(index)
			this.currentIfy = index
			this.currentPid = this.classIfyList[index].id
			
			this.secondClassIfyList = []
			this.currentPage = 1
			this.isEmpty = false
			this.getSecondClassIfyList()
		},
		toCart(){
			uni.switchTab({
				url: '/pages/cart'
			})
		}
    },
};
</script>

<style scoped>
	.container {
		height: 100%;
		padding: 0 0;
	}
	.wapper {
		height: 100%;
		display: flex;
		justify-content: space-between;
	}
	
	.left-box {
		width: 180rpx;
	}
	.left {
		width: 100%;
		height: 100%;
		background-color: #F7F8FA;
	}
	.left-item {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #F5F5F5;
		color: #000000;
		word-break: break-all;
		word-wrap: break-word;
		position: relative;
	}
	.active {
		color: #FF0000;
		font-weight: 600;
		background-color: #FFF;
		position: relative;
	}
	.active::before {
		content: '';
		background-color: #FF0000;
		width: 6rpx;
		height: 48rpx;
		border-radius: 4rpx;
		position: absolute;
		left: 0;
	}
	
	.right-box {
		width: calc(100% - 180rpx);
		height: calc(100% - 24rpx);
		background-color: #FFF;
		padding: 24rpx 24rpx 0;
	}
	.right {
		width: 100%;
		height: 100%
	}
	.right-item {
		height: 100%;
		padding: 0 20rpx;
		background-color: #FFF;
	}
	
	.children-scroll {
		height: 100%;
	}
	.goods-box {
		display: flex;
		flex-wrap: wrap;
		align-content : flex-start;
	}
	.good-item {
		width: calc((100% - 40rpx) / 3);
		text-align: center;
		margin-bottom: 24rpx;
		font-size: 28rpx;
	}
	.good-item > image {
		width: 100%;
		height: 160rpx;
		margin-bottom: 8rpx;
		border-radius: 16rpx;
	}
	
	
	/* 一级分类 */
	.good-item-yiji:first-child {
		padding-top: 0;
	}
	.good-item-yiji {
		display: flex;
		/* margin-bottom: 24rpx; */
		padding: 24rpx 0;
		border-bottom: 2rpx solid #F5F5F5;
	}
	.good-item-yiji > image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	
	
	/* 三级分类 */
	.goods-box-sanji {
		margin-bottom: 48rpx;
	}
	.sanji-box {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
	}
</style>
