<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">产品分类</block>
		</cu-custom>
		<vertical-nav v-if="categoryList" :containerHeight="containerHeight" :navList="level0CategoryList" :list="categoryList" :isClick2ShowProducts="true"></vertical-nav>
	</view>
</template>

<script>
	import verticalNav from '@/components/multi-level-nav/vertical-nav.vue';
	
	export default {
		components: {
			verticalNav
		},
		data() {
			return {
				containerHeight: '100vh - ' + this.CustomBar + 'px - 46px',
				level0CategoryList: [],
				categoryList: [],
				deptGoodsCategoryIds: []
			}
		},
		onLoad() {
			this.loadData();
			this.bindEvent();
		},
		onUnload() {
			this.offBindEvent();
		},
		methods: {
			async loadData(params = {}, type = 1) {
				let res0 = await this.$request.listByStep({
					level: 0
				});
				this.level0CategoryList = res0.data;
				this.curUserInfo = this.$request.getCurUserInfo();
				if(this.curUserInfo) {
					const res = await this.$request.getChooseCategories({
						selectionType: 1,
						customerId: this.curUserInfo.customerId
					})
					this.deptGoodsCategoryIds = res[1].data.data
					// this.deptGoodsCategoryIds = [16,234,106,113]
					// [16,234,106,113]
				} 
				this.loadTargetTypeCategoryList(params, type);
			},
			async loadTargetTypeCategoryList(params = {}, type = 1) {
				this.categoryList = [];
				// this.categoryList = await this.$api.data('categoryList');
				let res = await this.$request.getProductCategories({
					...params,
					type: type
				});
				res = res[1].data.data;
				res.forEach(firstCategory => {
					if (firstCategory.child && firstCategory.child.length) {
						if(this.deptGoodsCategoryIds.length === 0) {
							this.categoryList = this.categoryList.concat(firstCategory.child)
						} else {
							this.categoryList = this.filterDataInSelect(firstCategory.child)
							console.log(this.categoryList);
						}
					}
				})
			},
			filterDataInSelect(data) {
				const newData = []
				for(let i = 0; i < data.length; i++) {
					const newChild = []
					if(!data[i].child) continue;
					for(let j = 0; j < data[i].child.length; j++) {
						const filterChild = (data[i].child[j].child || []).filter(item => this.deptGoodsCategoryIds.includes(item.goodsCategoryId))
						if(filterChild.length) {
							data[i].child[j].child = filterChild
							newChild.push(data[i].child[j])
						}
					}
					if(newChild.length) {
						data[i].child = newChild
						newData.push(data[i])
					}
				}
				return newData
			},
			bindEvent() {
				uni.$on(this.$globalFun.VERTICAL_NAV_GET_ITEM, this.chooseSubType);
				uni.$on(this.$globalFun.VERTICAL_NAV_SEARCH, this.searchType);
				uni.$on(this.$globalFun.VERTICAL_NAV_CHANGE_MAIN_NAV_ITEM, this.changeLevel0Category);
			},
			offBindEvent() {
				uni.$off(this.$globalFun.VERTICAL_NAV_GET_ITEM);
				uni.$off(this.$globalFun.VERTICAL_NAV_SEARCH);
				uni.$off(this.$globalFun.VERTICAL_NAV_CHANGE_MAIN_NAV_ITEM);
			},
			chooseSubType(item) {
				let params = {
					category: item
				};
				uni.navigateTo({
					url: '/pages/product/filtered-products?params=' + encodeURIComponent(JSON.stringify(params))
				})
			},
			searchType(keyWords) {
				this.loadData({
					goodsCategoryName: keyWords
				});
			},
			changeLevel0Category(category) {
				this.loadTargetTypeCategoryList({}, category.type);
			}
		}
	}
</script>

<style>
</style>
