<template>
	<view class="wanlshop-category-container">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
			<view
				class="cu-bar fixed bg-white solid-bottom"
				:style="{
					height: $wanlshop.wanlsys().height + 'px',
					paddingTop: $wanlshop.wanlsys().top + 'px'
				}"
			>
				<view class="action" @tap="handleGroups">
					<text class="wlIcon-pintuan3"></text>
					<!-- <view class="cu-tag badge">拼</view> -->
				</view>
				<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold"></text>
					<swiper
						class="search-swiper placeholder"
						vertical
						autoplay
						circular
						interval="3000"
					>
						<swiper-item @tap="productSearch('')">搜索商品、类目</swiper-item>
						<swiper-item
							v-for="(item, index) in common.modulesData.searchModules"
							:key="item.keywords"
							@tap="productSearch(item.keywords)"
						>
							{{ item.keywords }}
						</swiper-item>
					</swiper>
				</view>
				<!-- #ifndef MP -->
				<view class="action" @tap="showModal('menu')">
					<text class="wlIcon-gengduo"></text>
					<!-- {{( statistics.notice.notice + statistics.notice.order + statistics.notice.chat + statistics.order.pay + statistics.order.delive + statistics.order.receiving + statistics.order.evaluate + cart.cartnum )}} -->
					<view
						class="cu-tag badge bg-orange"
						v-if="
							statistics.notice.notice +
								statistics.notice.order +
								statistics.notice.chat +
								statistics.order.pay +
								statistics.order.delive +
								statistics.order.receiving +
								statistics.order.evaluate +
								cart.cartnum >
								0
						"
					></view>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<!-- 加载类目 -->
		<wanl-shop-classify
			:mainHeight="height"
			:categoryStyle="parseInt(common.appStyle.category_style)"
			:categoryData="common.modulesData.categoryModules"
			:adverData="common.adData.categoryAdverts"
		/>
		<!-- 模态框 -->
		<view class="WANL-MODAL" @touchmove.stop.prevent="moveHandle">
			<view
				class="cu-modal top-modal"
				:class="modalName == 'menu' ? 'show' : ''"
				@tap="hideModal()"
			>
				<view class="wanl-modal-menu cu-dialog" @tap.stop="">
					<wanl-direct @change="hideModal" />
				</view>
			</view>
			<!-- 分享 -->
			<view
				class="cu-modal wanl-share bottom-modal"
				:class="modalName == 'share' ? 'show' : ''"
				@tap="hideModal()"
			>
				<view class="cu-dialog" @tap.stop="">
					<wanl-share
						ref="wanlShare"
						page="pages/category"
						:scene="{qr:'c'}"
						:scrollAnimation="scrollAnimation" 
						@change="hideModal"
					/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import wanlShopClassify from '@/components/wanl-shop/classify';
export default {
	data() {
		return {
			height: 0,
			modalName: null,
			scrollAnimation: 300
		};
	},
	components: {
		wanlShopClassify
	},
	computed: {
		...mapState(['common', 'statistics', 'cart'])
	},
	onLoad() {
		let wanlsys = this.$wanlshop.wanlsys();
		// #ifdef APP-PLUS
		this.height = wanlsys.windowHeight + wanlsys.windowBottom - wanlsys.height;
		// #endif
		// #ifdef H5
		this.height = wanlsys.windowHeight + wanlsys.windowBottom - wanlsys.height - 50;
		// #endif
		// #ifdef MP
		this.height = wanlsys.windowHeight - wanlsys.height;
		// #endif
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
	},
	methods: {
		// 弹出层
		showModal(name) {
			// 滚动下分享
			if (name == 'share' && this.modalName != 'share') {
				setTimeout(() => {
					this.scrollAnimation = 0;
				}, 300);
			}
			this.modalName = name;
		},
		hideModal(name) {
			if (name) {
				this.showModal(name);
			} else {
				// 强制关闭海报
				if(this.modalName == 'share'){
					this.$refs.wanlShare.closePoster();
				}
				this.modalName = null;
			}
		},
		handleGroups() {
			this.$wanlshop.to('/pages/apps/groups/index');
		},
		productSearch(text) {
			this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}`, 'fade-in', 100);
		},
		//禁止父元素滑动 1.0.3升级
		moveHandle() {}
	}
};
</script>

<style>
.cu-custom .cu-bar {
	z-index: 99;
}
.cu-bar .action {
	position: relative;
}

/* #ifdef MP */
.cu-bar .search-form {
	margin: 0 0 0 25rpx;
}
/* #endif */
</style>
