<template>
	<view :style="themeColor">
		<view class="category-page-wrap category-template-1" style="height: calc(-56px + 100vh);">

		<!-- 	<view class="search-box" @click="$util.redirectTo('/pages_tool/goods/search')">
				<view class="search-content">
					<input type="text" class="uni-input" maxlength="50" placeholder="商品搜索" confirm-type="search" disabled="true" />
					<text class="iconfont icon-sousuo3"></text>
				</view>
			</view> -->
			<view class="content-box" v-if="categoryTree">
				<block v-if="categoryTree.length">
					<scroll-view scroll-y="true" class="tree-wrap">
						<view class="category-item-wrap">
							<view class="category-item" v-for="(item, index) in categoryTree" :key="index" :class="[
									{ select: select == index },
								]" @click="switchOneCategory(index)">
								<view class="">{{ item.category_name }}</view>
							</view>
						</view>
					</scroll-view>
	
					<view class="right-flex-wrap">
						<scroll-view scroll-y="true" class="content-wrap" ref="contentWrap" :scroll-into-view="categoryId" :scroll-with-animation="true"
						@scroll="listenScroll" @touchstart="touchStart" :refresher-enabled="true"
						refresher-default-style="none" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
						@refresherrestore="onRestore">
							<view class="child-category"  v-for="(item, index) in categoryTree" :key="index" :id="'category-' + index" v-if="item.child_list.length > 0">
								<!---->
								<view class="item-wrap category">
									<view class="category-title">{{ item.category_name }}</view>
									<view class="category-list">
										<view class="category-item" v-for="(one, oneIndex) in item.child_list" :key="oneIndex" @click="$util.redirectTo('/pages_promotion/merch/detail', { merch_id: one.merch_id })">
											<view class="img-box">
												<image :src="$util.img(one.merch_image)" mode="widthFix"/>
											</view>
											<view class="name">{{ one.merch_name }}</view>
										</view>
									</view>
								</view>
								<!-- <view class="category-empty" v-else>
									<image src="/static/common-empty.png" mode="widthFix"/>
								</view> -->
							</view>
						</scroll-view>
					</view>
				</block>
		<!-- 		<view class="category-empty">
					<image :src="$util.img('public/uniapp/category/empty.png')" mode="widthFix"></image>
					<view class="tips">暂时没有分类哦！</view>
				</view> -->
			</view>
		</view>


		<ns-login ref="login"></ns-login>
	<!-- 	<loading-cover ref="loadingCover"></loading-cover> -->

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				scrollTop: 0,
				
				select: 0,
				categoryId: 'category-0',
				scrollLock: false,
				triggered: true,
				heightArea: [],
				loadType: '',
				categoryTree:[
					/*{
						category_id:6277,
						category_name:"物业",
						child_list:[
							{
								category_id:6572,
								category_name:"鞋里革",
								image:"attachment\/images\/979\/2024\/04\/y46Gg41i552o9iq9249295oz991444.jpg",
							}
						]
					},*/
					
			],
			user_type:uni.getStorageSync('user_type')
		};
		},
		onLoad() {
			uni.hideTabBar()
			this.getCategory()
			// this.getgoodslist()
		},
		onShow() {
			if (this.$refs.category) this.$refs.category[0].pageShow();
		},
		onUnload() {
			if (!this.storeToken && this.$refs.login) this.$refs.login.cancelCompleteInfo();
		},
		methods: {
			switchOnetype(e){
				this.goods_type = e
				this.select = -1;
				this.categoryId = ''
				this.getgoodslist()
			},
			/**
			 * 切换一级分类
			 * @param {Object} index
			 */
			switchOneCategory(index) {

				if (index >= this.categoryTree.length) return;
				this.select = index;
				this.categoryId = 'category-' + index;
				// 阻止切换分类之后滚动事件也立即执行
				this.scrollLock = true;
				console.log(index)

				// this.goodsList = []
				// this.getgoodslist()
			},
			touchStart() {
				this.scrollLock = false;
			},
			/**
			 * 监听滚动
			 * @param {Object} event
			 */
			listenScroll(event) {
				if (this.scrollLock) return;
				let scrollTop = event.detail.scrollTop;
				if (this.heightArea.length) {
					for (let i = 0; i < this.heightArea.length; i++) {
						if (scrollTop >= this.heightArea[i][0] && scrollTop <= this.heightArea[i][1]) {
							this.select = i;
							break;
						}
					}
					if (this.value.template != 1 && this.value.loadType == 'all' && this.heightArea[this.select][1] -
						scrollTop - contentWrapHeight < 300) {
						this.$refs.categoryItem[this.select].getGoodsList();
					}
				}
			},
			sethead(item,type){
				var is_select = item.is_select
				this.$api.sendRequest({
					url: 'app.ajax_batchheads',
					data: {
						goods_id:item.actId,
						is_select:is_select
					},
					success: res => {
						this.$util.showToast({
							title: res.result.message
						});
						this.getgoodslist()
					},
					fail: () => {
						this.$util.showToast({
							title: 'request:fail'
						});
					}
				});
			},
			//获取分类列表
			getCategory(){
				this.$api.sendRequest({
					url: '/merch/api/merch/getcategory',
					data: {
						is_type_show:1,
					},
					success: res => {
						console.log( res.data)
						this.categoryTree = res.data
					},
					fail: () => {
						this.$util.showToast({
							title: 'request:fail'
						});
					}
				});
			},
			onRefresh() {
				this.triggered = false;
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			/**
			 * 触摸开始
			 * @param {Object} e
			 */
			// touchstart(e) {
			// 	this.touchstartPosition = e.changedTouches[0].clientY;
			// },
			/**
			 * 触摸结束
			 * @param {Object} e
			 */
			touchend(e) {
				let end = e.changedTouches[0].clientY;
				if ((this.scrollType == 'top' || this.scrollType == 'none') && end - this.touchstartPosition > 100) {
					// this.switchCategory('prev');
				} else if ((this.scrollType == 'bottom' || this.scrollType == 'none') && this.touchstartPosition - end >
					100) {
					// this.switchCategory('next');
				}
			},
			getDiyInfo() {
				
			},
			toLogin() {
				this.$refs.login.open('/pages_goods/category')
			}
		},
		// onPullDownRefresh() {
		// 	uni.hideTabBar();
		// 	this.getDiyInfo();
		// }
	};
</script>

<style lang="scss">
	@import './public/category.scss';
	
	/deep/ .uni-popup__wrapper.uni-center {
		background: rgba(0, 0, 0, 0.6);
	}

	/deep/ .uni-popup__wrapper-box {
		border-radius: 0 !important;
	}

	/deep/ .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
		overflow-y: visible;
	}

	/deep/ .loading-layer {
		background: #fff !important;
	}

	// 分类四一级展开
	/deep/ .category-template-4 .template-four .uni-popup__wrapper-box {
		border-radius: 0px 0px 14px 14px !important;
		overflow: hidden;
	}

	/deep/ .category-template-4 .content-wrap .categoty-goods-wrap .goods-list {
		margin-top: 30rpx;
	}

	/deep/ .category-template-4 .content-wrap .goods-list .goods-item .footer-wrap .right-wrap .num-action {
		width: 46rpx;
		height: 46rpx;
	}

	/deep/ .uni-page-refresh-inner .uni-page-refresh__path {
		stroke: rgb(1, 1, 1) !important;
	}
</style>