<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"
			@detail="toDetail"
			></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 { getShopProductList } from '@/api/shop.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:8,
				total:0,
				list:[],
				loading:false,
				loadEnd: false,
				loadText: '加载中...',
				empty: {
					tip: '暂无产品',
					imgUrl: '/static/nodata.png'
				},
				queryWord:'',
				promoSn:'',
				screenWidth: 750,
				screenHeight: 0,
				statusBarHeight: 44,
				safeAreaBottom: 0,
				bodyHeight: 0
			};
		},
		computed: {
			...mapState(['hasLogin']),
			userInfo(){
				return this.$store.state.vuex_userInfo
			},
			storeShelf(){
				return this.$store.state.vuex_storeShelf
			}
		},
		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.promoSn = opts.promoSn
			
			// 查询列表
			this.getList()
		},
		onUnload(){
			this.list = null
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			toDetail(item){
				uni.navigateTo({
					url:'/pagesB/shopiing/productDetail?sn='+item.shopProductSn
				})
			},
			// 滚动到底部
			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
				const dealerSn = this.hasLogin && this.userInfo && this.userInfo.sysUserFlag == '1'&&this.storeShelf ? this.storeShelf.dealerSn : ''
				getShopProductList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					productCode: this.queryWord,
					promoSn: this.promoSn,
					dealerSn: dealerSn
				}).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 => {
								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
								  // 特价
								  if(k.promoType=='PROMO_PROD'){
									  k.orginPrice = k.price
									  // 直降
									  if(k.discountType == 'STRAIGHT_DOWN'){
										  k.price = k.price - k.resultValue
									  }
									  // 折扣
									  if(k.discountType == 'DISCOUNT'){
										 k.price = Number(k.price * k.resultValue).toFixed(2)
									  }
								  }
								}
							  // 如果筛选或分页后，更新页面列表产品数量
							  ret.push({
								  id: k.id,
								  checked: false,
								  qty: 0,
								  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 = '暂无产品'
						}
					}
				}).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>
