<template>
	   <view class="content">
	       <mosowe-invented-list
	         :list="list"
	         :cacheNum="30">
	         <template #default="{ item }">
	           <view class="item">
	             <view class="name">
	               {{ item.list[0].productName }}
	             </view>
	             <view class="age">
	               {{ item.list[0].productCode }}
	             </view>
	           </view>
	         </template>
	       </mosowe-invented-list>
	     </view>
</template>

<script>
	import { queryPromoProductByPage } from '@/api/video.js'
	import { purchaseSave } from '@/api/purchase.js'
	export default {
	        data() {
	            return {
					promoActiveSn: null,
					chooseList: [],
					windowWidth: 0,
					windowHeight: 0,
					showChoosePopu: false,
					queryWord: '',
					ctxScroll: null,
					trigger: false,
					loading: false,
					over: false,
					// 列表数据
					pageNo: 1,
					pageSize: 200,
					list: [],
	            };
	        },
			onLoad(opts) {
				 uni.setNavigationBarTitle({
				 	title: opts.title||'促销活动产品'
				 })
				 this.windowWidth = uni.getSystemInfoSync().windowWidth
				 this.windowHeight = uni.getSystemInfoSync().windowHeight
				 // 初始化数据
				 this.$store.state.vuex_tempData = null
				 this.promoActiveSn = opts.promoActiveSn
				 // 购物车是否有缓存
				 const cacheList = this.$store.state.vuex_cartList.find(k => k.sn == this.promoActiveSn)
				 this.chooseList = cacheList ? JSON.parse(JSON.stringify(cacheList.list)) : []
			},
			onReady() {
				this.loadData()
			},
			onShow() {
				this.showChoosePopu=false
			},
			onUnload() {
				// 存储已选列表值
				const hasCache = this.$store.state.vuex_cartList.find(k => k.sn == this.promoActiveSn)
				if(hasCache){
					hasCache.list = this.chooseList
				}else{
					this.$store.state.vuex_cartList.push({sn:this.promoActiveSn,list: this.chooseList})
				}
				this.$u.vuex('vuex_cartList', this.$store.state.vuex_cartList)
				// 清空数据
				this.chooseList = null
			},
	        methods: {
				// 加载数据
	            loadData() {
					console.log('pageNo',this.pageNo)
					console.log('pageSize',this.pageSize)
					let params = {
					  pageNo: this.pageNo,
					  pageSize: this.pageSize,
					  queryWord: this.queryWord,
					  promoActiveSn: this.promoActiveSn
					}
					queryPromoProductByPage(params).then(res => {
						if (res.status == 200) {
						  const list = res.data.list||[]
						  const ret = []
						  if(list.length%2!=0){
							  list.push(null)
						  }
						  for(let i=0;i<list.length;i=i+2){
							  const a = list[i]
							  const hasAChecked = this.chooseList.find(s=>s.id == a.id)
							  const b = list[i+1]
							  const hasBChecked = this.chooseList.find(s=>s.id == b.id)
							  // 如果超出
							  if(b){
								  ret.push({list:[this.formatData(a,hasAChecked),this.formatData(b,hasBChecked)]})
							  }else{
								  ret.push({list:[this.formatData(a,hasAChecked)]})
							  }
						  }
						  this.total = (res.data.count || 0) + 1
						  this.list = this.list.concat(ret)
						} 
					})
	            },
				// 格式化数据
				formatData(k,hasChecked){
					return {
						id: k.id,
						cost: k.cost,
						checked: !!hasChecked,
						qty: !!hasChecked ? hasChecked.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,
						show: false
					}
				},
				// 添加产品
				chooseProduct(item){
					
				}
	        },
	    };
</script>

<style lang="less" scoped>
.tab-search{
	padding: 15rpx 20rpx;
	background: #fff;
}
.content {
  width: 100vw;
  height: 100vh;
  .name {
    font-size: 32rpx;
    font-weight: bold;
    line-height: 40rpx;
    margin-bottom: 20rpx;
    color: #333;
  }
  .age {
    font-size: 24rpx;
    color: #999;
  }
  .item {
    margin: 30rpx;
    padding: 30rpx;
    box-sizing: border-box;
    background-color: #eee;
    border-radius: 12rpx;
  }
}
</style>
