<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" :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',
				categoryList: null
			}
		},
		onLoad() {
			this.loadData();
			this.bindEvent();
		},
		onUnload() {
			this.offBindEvent();
		},
		methods: {
			async loadData(params = {}) {
				// this.categoryList = await this.$api.data('categoryList');
				let res = await this.$request.getProductCategories(params);
				this.categoryList = res[1].data.data;
			},
			bindEvent() {
				uni.$on(this.$globalFun.VERTICAL_NAV_GET_ITEM, this.chooseSubType);
				uni.$on(this.$globalFun.VERTICAL_NAV_SEARCH, this.searchType);
			},
			offBindEvent() {
				uni.$off(this.$globalFun.VERTICAL_NAV_GET_ITEM);
				uni.$off(this.$globalFun.VERTICAL_NAV_SEARCH);
			},
			chooseSubType(item) {
				let params = {
					category: item
				};
				uni.navigateTo({
					url: '/pages/product/filtered-products?params=' + encodeURIComponent(JSON.stringify(params))
				})
			},
			searchType(keyWords) {
				this.loadData({
					goodsCategoryName: keyWords
				});
			}
		}
	}
</script>

<style>
</style>
