<template>
	<view class="pages">
		<!-- head -->
		<view class="scrollPage-header">
			<view :style="{height:statusBarHeight+'px'}"></view>
			<view class="header-title-box">
				<view class="header-left" @click="goBack">
					<uni-icons type="arrowleft" size="20"></uni-icons>
					<text>返回</text>
				</view>
				<view class="header-title">
					<text :max-lines="1" overflow="ellipsis">{{title}}</text>
				</view>
				<view class="header-right"></view>
			</view>
			<view class="search-head" @click="goSearch">
				<uni-search-bar readonly radius="100" placeholder="请输入商品名称/产品编码/原厂编码" textColor="#666" clearButton="auto" cancelButton="none" />
			</view>
		</view>
		<view class="search-result">
			<view class="tab-left" v-if="clzId&&categoryList.length>0">
				<scroll-view
				:style="{height: (screenHeight - statusBarHeight - 44 - 43) + 'px'}" 
				scroll-y="true" 
				:bounces="false"
				type="list" 
				>
					<view class="item-clz" 
					v-for="item in categoryList" 
					:key="item.categorySn" 
					:class="item.categorySn==categorySn?'active':''" 
					@click="handleTab(item)">
					{{item.categoryName}}
					</view>
				</scroll-view>
			</view>
			<view class="right-box" :style="{width:clzId&&categoryList.length?'75%':'100%'}">
				<!-- body -->
				<scroll-view 
				class="scrollPage-body" 
				:class="clzId&&categoryList.length?'right-item':''"
				:style="{height: (screenHeight - statusBarHeight - 44 - 43) + 'px'}" 
				scroll-y="true" 
				type="list" 
				:bounces="false"
				:refresher-enabled="enableRefresh" 
				:refresher-triggered="triggered" 
				@refresherpulling="onPulling"
				@refresherrefresh="onRefresh"
				@refresherrestore="onRestore"
				@refresherabort="onAbort"
				@scrolltolower="reachBottom">
					<!-- 产品列表 -->
					<chooseProductItem
					v-for="(item, index) in list"
					:key="item.id"  
					:index="index"
					:list="item" 
					:isLogin="hasLogin"
					@toDetail="viewDetail"
					>
					</chooseProductItem>
					<!-- loading -->
					<view class="loading-bar" v-if="total>0 && (loading||loadEnd)">{{loadText}}</view>
					<view class="empty-bar" v-if="total==0&&!loading">
						<image mode="aspectFit" :src="empty.imgUrl"></image>
						<view>{{empty.tip}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations,
	} from 'vuex'
	import chooseProductItem from '@/pagesB/components/chooseProductItemSkline.vue'
	import { getShopCategory, getShopProductList } from '@/api/shop.js'
	export default {
		components:{
			chooseProductItem
		},
		data() {
			return {
				title: '',
				loadText: '加载中...',
				empty: {
					tip: '暂无商品',
					imgUrl: '/static/nodata.png'
				},
				queryWord:'',
				screenWidth: 325,
				screenHeight: 0,
				statusBarHeight: 44,
				safeAreaBottom: 0,
				pageSize: 10,
				pageNo:1,
				total:0,
				list: [],
				loading:false,
				loadEnd: false,
				focus: false,
				expend: false,
				clzId: null, // 一级分类
				categorySn: null ,// 当前分类sn
				categoryList: [], // 二级分类列表
				enableRefresh: true,
				triggered: false,
				pulling: false
			};
		},
		computed: {
			...mapState(['hasLogin']),
			// 登录用户信息
			userInfo(){
				return this.$store.state.vuex_userInfo
			},
		},
		onLoad(opts) {
			// 计算区域高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			this.screenWidth = uni.getSystemInfoSync().windowWidth
			this.screenHeight = uni.getSystemInfoSync().windowHeight
			this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
			
			// 一级分类id
			this.clzId = opts.clzId
			// 一级分类名称
			this.title = opts.clzName
			
			// 一级分类下是二级目录
			if(opts.shopCategoryCount>0){
				// 查二级目录
				this.getCategory()
			}
			// 一级分类下是产品
			if(opts.shopProductCount>0){
				this.categorySn = opts.clzId
				// 目录下商品
				this.searchList()
			}
		},
		methods: {
			// 返回
			goBack(){
				uni.navigateBack()
			},
			// 去搜索产品
			goSearch(event){
				uni.navigateTo({
					url:'/pagesB/shopiing/searchProduct?queryWord='+event.value+'&clzId='
				})
			},
			// 获取二级目录
			getCategory(){
				getShopCategory({
					parentSn: this.clzId,
					categoryLevel: 2
				}).then(res => {
					if(res.status == 200){
						// 二级目录
						this.categoryList = res.data || []
						// 如果有二级目录
						if(this.categoryList.length > 0){
							// 默认显示第一个
							this.categorySn = this.categoryList[0].categorySn
							// 目录下商品
							this.searchList()
						} 
					}else{
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			// 搜索列表
			searchList(event) {
				 this.loadEnd = false
				 this.loadText = '加载中...'
				 this.list = []
				 this.pageNo = 1
				 this.getList()
			},
			// 单击二级分类
			handleTab(item){
				this.categorySn = item.categorySn
				this.queryWord = ''
				this.searchList()
			},
			// 自定义下拉刷新控件被下拉
			onPulling(e){
				console.log('onPulling')
				this.triggered = true
				this.pulling = true
			},
			// 自定义下拉刷新被触发
			onRefresh(e){
				console.log('onRefresh')
				setTimeout(() => {      
					this.triggered = false 
				}, 500); 
			},
			// 自定义下拉刷新被复位
			onRestore(e){
				console.log('onRestore')
				this.queryWord = ''
				if(this.categorySn!=null){
					this.searchList()
				}
			},
			// 自定义下拉刷新被中止
			onAbort(e){
				console.log('onAbort')
				this.triggered = false 
			},
			// 滚动到底部
			reachBottom() {
				if(this.enableRefresh&&this.categorySn!=null){
					if(!this.loading && !this.loadEnd){
						if(!this.pulling){
							this.pageNo++
							this.getList()
						}
					}
					if(this.pulling){
						this.pulling = false
					}
				}
			},
			// 列表查询
			getList(){
				this.loading = true
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				const dealerSn = this.hasLogin && this.userInfo && this.userInfo.sysUserFlag == '1' ? this.$store.state.vuex_storeShelf.dealerSn : ''
				getShopProductList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					queryWord: this.queryWord,
					categorySn: this.categorySn,
					dealerSn: dealerSn,
					status: 1
				}).then(res => {
					if(res.status == 200){
						this.total = Number(res.data.count)
						if(this.total){
							const list = res.data.list || []
							// 更新已选状态
							const ret = list.map(k => {
								const a = k.shopPromoProduct
								if(a){
								  k.promoType = a.promoType
								  k.resultValue = a.resultValue
								  k.conditionValue = a.conditionValue
								  k.discountType = a.discountType
								  k.promoProductSn = a.promoProductSn
								  k.promoSn = a.promoSn
								  k.orginPrice = k.price
								  // 特价
								  if(k.promoType=='PROMO_PROD'){
									  k.price = k.conditionValue
								  }
								}
								return {
								  id: k.id,
								  price: k.price,
								  orginPrice: k.orginPrice,
								  priceStr: Number(k.price).toFixed(2).toString().split('.'),
								  productCode: k.productCode,
								  productSn: k.productSn,
								  productImage: k.productMsg,
								  productName: k.productName,
								  productOrigCode: k.productOrigCode,
								  categorySn: k.categorySn,
								  hotFlag: k.hotFlag,
								  productSn: k.productSn,
								  priceType: k.priceType,
								  shopProductSn: k.shopProductSn,
								  status: k.status,
								  statusDictValue: k.statusDictValue,
								  dealerScopeFlag: k.dealerScopeFlag,
								  promoType: k.promoType,
								  resultValue: k.resultValue,
								  conditionValue: k.conditionValue,
								  discountType: k.discountType,
								  promoProductSn: k.promoProductSn,
								  promoSn: k.promoSn
							  }
							})
							// 追加数据
							this.list.push(ret)
							// 判断是否最后一页
							const maxPages = Math.ceil(this.total / this.pageSize)
							if(this.pageNo >= maxPages){
								this.loadEnd = true
								this.loadText = '没有更多了'
							}
						}else{
							this.loadEnd = false
							this.loadText = '没有找到相关产品'
						}
					}else{
						this.loadEnd = false
						this.loadText = res.message
					}
					uni.hideLoading()
					this.loading = false
				}).catch(err => {
					this.loading = false
				})
			},
			// 产品详情查看
			viewDetail(item){
				uni.navigateTo({
					url:'/pagesB/shopiing/productDetail?sn='+item.shopProductSn
				})
			}
		}
	}
</script>

<style lang="less">
.pages{
	height: 100vh;
	display: flex;
	flex-direction: column;
	.scrollPage-header{
		z-index: 1;
		.header-title-box{
			display: flex;
			align-items: center;
			padding: 0 10px;
			height: 44px;
			background-color: #FFFFFF;
			border-bottom: 1px solid #e8e8e8;
			.header-title{
				flex-grow: 1;
				color: #333333;
				padding: 10px;
				text-align: center;
			}
			.header-left{
				display: flex;
				align-items: center;
				text{
					font-size: 14px;
					color: #333333;
					margin-left: 5px;
				}
			}
			.header-right{
				width: 50px;
			}
		}
	}
	.search-head{
		background-color: #FFFFFF;
		/deep/ .uni-searchbar{
			padding: 5px 6px;
		}
	}
	.search-result{
		flex-grow: 1;
		display: flex;
		justify-content: space-between;
		.tab-left{
			width: 25%;
			flex-grow: 1;
			background: #FFFFFF;
			.item-clz{
				font-size: 14px;
				padding: 8px 10px;
				line-height: 30px;
			}
			.active{
				border-left: 3px solid #00aaff;
				background: #f8f8f8;
			}
		}
		.right-box{
			width: 75%;
			.scrollPage-body{
				width:100%;
				.uni-searchbar{
					background-color: #FFFFFF;
				}
				/deep/ .choose-product-item{
					background-color: #FFFFFF;
					margin: 6px 10px;
					border-radius: 6px;
				}
				.loading-bar{
					text-align: center;
					padding: 10px 0;
					color: #999999;
				}
				.empty-bar{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 20px 0;
					image{
						width: 100px;
						height: 100px;
					}
					view{
						font-size: 12px;
						color: #999999;
					}
				}
				.search-history{
					padding: 0 1.5rem;
					.search-history-title{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 6px 0;
						font-size: 14px;
						color: #333333;
						border-bottom: 1px solid #E6E6E6;
					}
					.search-history-right{
						display: flex;
						align-items: center;
					}
					.search-history-expend{
						display: flex;
						align-items: center;
						font-size: 12px;
						margin-right: 15px;
					}
					.search-history-body{
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						justify-content: space-between;
						padding: 10px 10px;
						.item{
							padding: 6px 0;
							background-color: #f8f8f8;
							border-radius: 20px;
							font-size: 12px;
							color: #333333;
							width: 46%;
						}
					}
				}
			}
			.right-item{
				/deep/ .choose-product-item{
					margin: 5px 8px;
					.choose-product-item-img{
						height: 130rpx;
					}
					.choose-product-item-img .choose-product-item-left-info-code{
						font-size:12px;
					}
					.choose-product-item-info .choose-product-item-left-info-name{
						font-weight: normal;
					}
				}
			}
		}
	}
}
</style>
