<template>
	<view class="scrollPage">
		<!-- head -->
		<sklineHeader :title="title"></sklineHeader>
		<!-- body -->
		<scroll-view 
		class="scrollPage-body" 
		:style="{height: bodyHeight + 'px'}" 
		scroll-y="true" 
		type="custom" 
		:bounces="false"
		@scrolltolower="reachBottom">
			<!-- 搜索，吸顶 -->
			<sticky-header>
				<view class="search-head">
					<uni-search-bar radius="100" placeholder="请输入产品名称/轮胎规格" clearButton="auto" cancelButton="none" @confirm="searchList" @clear="searchList" />
				</view>
			</sticky-header>
			<!-- 产品列表 -->
			<productItem
			v-for="(item,index) in list"
			:key="index" 
			:list="item" 
			:index="index"
			:itemWidth="(screenWidth*0.96-screenWidth*0.02)*0.5"
			:gap="screenWidth*0.02"
			@chooseProduct="chooseProduct"
			></productItem>
			<!-- loading -->
			<view class="loading-bar" v-if="list.length && (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>
</template>

<script>
	import {
	    mapState,
	    mapMutations,
	} from 'vuex'
	import { queryPromoProductByPage } from '@/api/video.js'
	import productItem from '@/pagesB/components/productItemSkline.vue'
	import sklineHeader from '@/components/skline/sklineHeader.vue'
	export default {
		components:{
			productItem,
			sklineHeader
		},
		data() {
			return {
				title: '促销产品列表',
				pageNo:1,
				pageSize:16,
				total:0,
				list:[],
				loading:false,
				loadEnd: false,
				loadText: '加载中...',
				empty: {
					tip: '暂无产品',
					imgUrl: '/static/nodata.png'
				},
				queryWord:'',
				promoActiveSn:'',
				screenWidth: 750,
				screenHeight: 0,
				statusBarHeight: 44,
				safeAreaBottom: 0,
				bodyHeight: 0
			};
		},
		computed: {
			...mapState(['hasLogin']),
			userInfo(){
				return this.$store.state.vuex_userInfo
			},
		},
		onLoad(opts) {
			this.title = opts.title||'促销产品列表'
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			this.screenWidth = uni.getSystemInfoSync().windowWidth
			this.screenHeight = uni.getSystemInfoSync().windowHeight
			this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
			this.bodyHeight = this.screenHeight - this.statusBarHeight - this.safeAreaBottom - 44
			
			// 清空临时数据
			this.$store.state.vuex_tempData = null
			this.promoActiveSn = opts.promoActiveSn
			
			// 查询列表
			this.getList()
		},
		onUnload(){
			this.list = null
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			// 滚动到底部
			reachBottom() {
				if(!this.loading && !this.loadEnd){
					this.pageNo++
					this.getList()
				}
			},
			// 搜索
			searchList(event){
				this.loadEnd = false
				this.loadText = '加载中...'
				this.queryWord = event.value
				this.list = []
				this.pageNo = 1
				this.getList()
			},
			// 列表查询
			getList(){
				this.loading = true
				queryPromoProductByPage({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					queryWord: this.queryWord,
					promoActiveSn: this.promoActiveSn
				}).then(res => {
					this.loading = false
					if(res.status == 200){
						this.total = res.data.count
						if(this.total){
							const list = res.data.list || []
							const ret = []
							// 更新已选状态
							list.forEach(k => {
							  // 如果筛选或分页后，更新页面列表产品数量
							  ret.push({
								  id: k.id,
								  cost: k.cost,
								  checked: false,
								  qty: 0,
								  productCode: k.productCode,
								  productSn: k.productSn,
								  productImage: k.productImage,
								  productName: k.productName,
								  productOrigCode: k.productOrigCode,
								  promoActiveSn: k.promoActiveSn,
								  promoRuleSn: k.promoRuleSn,
								  promoRuleValue: k.promoRuleValue,
								  promoRuleType: k.promoRuleType,
							  })
							})
							// 追加数据
							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 = '暂无产品'
						}
					}
				}).catch(err => {
					this.loading = false
				})
			},
		}
	}
</script>

<style lang="less">
.scrollPage{
	height: 100vh;
	display: flex;
	flex-direction: column;
	.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: 14px;
			color: #999999;
			margin-top: 10px;
		}
	}
	.scrollPage-body{
		height: 100%;
		.search-head{
			background: #fff;
		}
	}
}
</style>
