<template>
	<view class="category " :class="['theme', themeObj.name]">
		<!-- 搜索 -->
		<!-- #ifdef APP-PLUS -->
		<div class="status-bar" :style="{height:statusBarHeight+'px'}"></div>
		<!-- #endif -->
		<view class="search">
			<search class="w-100"></search>
		</view>
		
		<view class="VerticalBox">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation 
			:scroll-top="verticalNavTop" style="height:calc(100vh - 140px)">
				<view class="cu-item text-sm" 
				:class="index==tabCur?'text-green cur':''" 
				v-for="(categoryType_item,index) in categoryType" :key="index" @tap="TabSelect"
				 :data-id="index">
					{{categoryType_item.name}}
				
				</view>
				
			
			</scroll-view>
			<scroll-view class="padding-sm" scroll-y scroll-with-animation style="width: calc(100% - 110px); height:calc(100vh - 140px)"
			 :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
				 <view class="type_head">
					<view class="type_head_item text-center text-xs" 
					v-for="(type,index) in subPoiCategories" 
					:class="type.id==tabTypeCur?'type_head_item_cur':''" 
					@tap="TabTypeSelect"  :key="index":data-id="type.id">
						<view class="">{{type.name}}</view>
					</view>
				 </view>
				 
				 <view class="type_good">
				 	<goodList :has-token="hasToken" style="width: 100%; background-color: #FFFFFF;" :propsList = "cateGood"  ></goodList>
				 </view>
				
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { getGoodsList  } from '@/api/index.js'
	import search from "../../commponent/public/search";
	import goodList from '../../commponent/home/goodList';
	import jsonData from "../../../json.js"
import { getCart, getToken } from '@/utils/auth';
import { setTabBarBadge } from '@/utils/util.js'
var app = getApp();
	export default {
		data() {
			return {
				
				mainCur: 0,
				tabCur: 0,
				categoryType:[], //分类	
				verticalNavTop: 0,	
				
				subPoiCategories:[],  //二级分类
				tabTypeCur:0, //二级分类选中id
				
				cateGood:[],

					
				bottoms: '100',
				showHeader: false, //判断当前终端是APP还是h5
				classLevel: true, //控制显示分类菜单  true：二级分类菜单   false：三级分类菜单
				current: "",
				scrollTop: "",
				statusBarHeight: 20,

			
				currentTwo: 0,
				currentThere: 0,
				_goods: [],
				hasToken: true,
				themeObj: app.globalData.themeObj
			};
		},

		components: {
			search,
			goodList
		},

	
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// #ifdef APP-PLUS
			this.showHeader = true   //在APP端对样式进行调整
			this.bottoms = '0'  //在APP下 规格弹窗的位置发生变化
			// #endif
			this.getGoodsList()
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			if (getToken()) {
				this.hasToken = true
				const carts = getCart()
				setTabBarBadge(carts.length)
			} else {
				uni.navigateTo({
					url: '/pages/login/index1'
				})
				this.hasToken = false
				setTabBarBadge(0)
			}
			this.themeObj = app.globalData.themeObj
			
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			getGoodsList() {
				const s = [
				    {
				        "rule": "eq",
				        "type": "string",
				        "dictCode": "",
				        "val": "1",
				        "field": "ifSale"
				    }
				]
				const params = {
					pageNo:1,
					pageSize: 100,
					superQueryParams: encodeURI(JSON.stringify(s)),
					superQueryMatchType: 'and'
				}
				getGoodsList(params).then(res => {
					const result = res.result.records.reduce((c,v) => {
						c[v.category] = c[v.category] || []
						c[v.category].push(v)
						return c
					}, {})
					const data = Object.keys(result).map((v, index) => {
						return {
							name: v,
							id: index,
							children: result[v],
							"leaf": 0,
							"type": 100,
							"subPoiCategories": []
						}
					})	
					this._goods = data
					this.categoryType = data
					
					this.subPoiCategories = []
					this.cateGood = data[this.tabCur].children
					
				})
			},
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50;
		
				this.subPoiCategories = []
				this.cateGood = this._goods[this.tabCur].children
			},
			TabTypeSelect(e) {
				this.tabTypeCur = e.currentTarget.dataset.id;
			},

			VerticalMain(e) {
				
				// #ifdef MP-ALIPAY
				   return false  //支付宝小程序暂时不支持双向联动 
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.categoryType.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.categoryType[i].id);
						view.fields({
							size: true
						}, data => {
							this.categoryType[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.categoryType[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.categoryType.length; i++) {
					if (scrollTop > this.categoryType[i].top && scrollTop < this.categoryType[i].bottom) {
						this.verticalNavTop = (this.categoryType[i].id - 1) * 50
						this.tabCur = this.categoryType[i].id
						console.log(scrollTop)
						return false
					}
				}
			}
			
		}
	};
</script>
<style scoped lang="scss">
	.fixed {
		position: fixed;
		z-index: 99;
	}
	
	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
		background-color: #f1f1f1;
	}
	
	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #f1f1f1 ;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}
	
	.VerticalNav.nav .cu-item.cur {
		background-color: #fff;
	}
	
	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 50upx;
		border-radius: 0 10upx  10upx 0 ;
		position: absolute;
		background-color: #4BDA4D;
		top: 0;
		left: 0;
		bottom: 0;
		margin: auto;
	}
	
	.VerticalBox {
		display: flex;
	}
	
	.VerticalMain {
		background-color: #fff;
		flex: 1;
	}
	
	
	.category {
		background-color: #ffffff;
		position: fixed;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		top: 0;
		bottom: 0;
		z-index: 10;
	}
	.search {
		height: 70px;
		padding: 10upx 10upx;
		padding-left: 10upx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	
	
	.type_head{
		display: grid;
		grid-template-columns: repeat(3,33.33%);
		grid-gap: 10rpx;
	}
	.type_head_item{
		line-height: 65rpx;
		color: #000000;
		background-color: #F5F6F7;
		border-radius: 15rpx;
	}
	.type_head_item_cur{
		line-height: 65rpx;
		color: #1E9C3D;
		background-color: #E4FCDE;
		border-radius: 15rpx;
	}



</style>
