<template>
	<view class="video-pagesCons">
		<view class="tab-search">
			<u-search placeholder="请输入产品名称/轮胎规格" shape="round" :clearabled="true" show-action v-model="queryWord" @clear="pageInit" @search="pageInit" @custom="pageInit"></u-search>
		</view>
		<view class="tab-body">
				<view class="product-list" id="list">
					<view
					class="check-order-list" 
					v-for="(item,index) in list" 
					:key="item.id" 
					> 
						<productItem 
						v-if="item.top > curScrollTop-showScrollHeight*2 && item.top < curScrollTop + showScrollHeight*3"
						:item="item" 
						:checked="item.checked"
						@chooseProduct="chooseProduct"
						></productItem>
					 </view>
				</view>
				 <view style="padding: 20upx;">
					 <u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty>
					 <u-loadmore v-if="(total>=list.length&&list.length)||status=='loading'" :status="status" />
				 </view>
		</view>
		<!-- 底部栏 -->
		<view class="bottom-bar" @click="clearAction" v-if="total>0">
			<view class="bottom-bar-left">
				<view class="bottom-bar-left-item">
					<view class="bottom-bar-left-item-icon" @click="openChoose">
						<u-icon name="shopping-cart" size="40"></u-icon>
						<u-badge type="error" :count="totalNum" :offset="[-7,-8]"></u-badge>
					</view>
				</view>
				<view class="bottom-bar-left-item" v-if="showChoosePopu">
					合计：<view class="price-txt">￥<text>{{totalAmount}}</text></view>
				</view>
			</view>
			<view :class="'bottom-bar-right bg-'+(showChoosePopu?'1':'0')" @click="submitOrder">
				<view class="bottom-bar-right-item">{{showChoosePopu?'确认采购':'去结算'}}</view>
			</view>
		</view>
		<!-- 已选列表 -->
		<page-container 
		:show="showChoosePopu" 
		:round="true"
		position="bottom" 
		custom-style="height:90%"
		@enter="openRender"
		@afterleave="closePopu">
			<scroll-view 
			:style="{width:screenWidth + 'px',height:'100%'}" 
			scroll-y="true" 
			@scroll="onscrollPopu"
			id="popuScroll"
			>
				<view class="choose-title">
					<view class="flex align_center">
						<view>已选<text class="p-nums">{{chooseLength}}</text>款产品 </view>
						<u-button @click="claerChoose" size="mini" type="error" plain style="margin: 0 20upx;">清空列表</u-button>
						<text class="choose-inf">左滑删除产品</text>
					</view>
					<view class="choose-close" @click="showChoosePopu=false">
						<u-icon name="close" size="30"></u-icon>
					</view>
				</view>
				<view class="choose-product-list" v-if="showSwipeAction">
					<view
					v-for="(item, index) in chooseList" 
					:key="item.id" 
					>
						<u-swipe-action
						:show="item.show" 
						:index="item.id" 
						@click="chooseClick" 
						@open="chooseOpen"
						:options="chooseOptions"
						v-if="item.top > curScrollPopuTop-showScrollPopuHeight && item.top < curScrollPopuTop + showScrollPopuHeight*2"
						>
							<chooseProductItem 
							:item="item" 
							:width="screenWidth-20" 
							@changeQty="changeQty"></chooseProductItem>
						</u-swipe-action>
					</view>
				</view>
			</scroll-view>
		</page-container>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations,
	} from 'vuex'
	import { queryPromoProductByPage } from '@/api/video.js'
	import { purchaseSave } from '@/api/purchase.js'
	import productItem from '@/pagesB/components/productItem.vue'
	import chooseProductItem from '@/pagesB/components/chooseProductItem.vue'
	export default {
		components:{
			productItem,
			chooseProductItem
		},
		data() {
			return {
				status: 'loading',
				noDataText: '暂无数据',
				promoActiveSn: null, // 活动sn
				submitOk: false, // 是否提交
				queryWord: '',// 关键词查询列表
				pageNo: 1, // 当前页
				pageSize: 6,//每页条数
				list: [], // 产品列表
				total: 0, // 总记录
				// 已选列表
				showChoosePopu: false,//已选列表弹框
				chooseList:[], // 已选数据
				chooseOptions:[
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				], // 左滑删除已选产品
				screenWidth: 750, // 屏幕宽度
				showSwipeAction: false, // 已选弹框是否已经打开
				curScrollPopuTop:0, // 当前滚动条top
				showScrollPopuHeight:0, // 可显示区域实际高度
				popuItemHeight: 133, // 已选产品列表项高度
				// 虚拟滚动
				showScrollHeight: 0, // 模块可显示区域高度
				curScrollTop: 0 ,// 当前滚动条top
				scrolltimer: null, // 滚动定时器
			}
		},
		computed: {
			...mapState(['hasLogin']),
			userInfo(){
				return this.$store.state.vuex_userInfo
			},
			// 已选产品总款数
			chooseLength(){
				return this.chooseList.length
			},
			// 已选产品总金额
			totalAmount(){
				let total = 0
				this.chooseList.forEach(key => {
					total = total + key.cost * key.qty
				})
				return total.toFixed(2)
			},
			// 已选产品总数量
			totalNum(){
				let total = 0
				this.chooseList.forEach(key => {
					total = total + key.qty
				})
				return total
			},
		},
		onLoad(opts) {
			uni.setNavigationBarTitle({
				title: opts.title||'促销活动产品'
			})
			this.screenWidth = uni.getSystemInfoSync().windowWidth
			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)) : []
			if(this.chooseList.length){
				this.updateChooseListTop()
			}
			// 查询产品列表
			this.pageInit()
		},
		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
			this.list = null
		},
		// 到底部加载更多
		onReachBottom() {
			if(this.list.length < this.total){
				this.pageNo += 1
				this.getRow()
			}else{
				this.status = "nomore"
			}
		},
		// 页面滚动
		onPageScroll(e){
			console.log(e,'----')
			// 已选列表未打开时，更新当前滚动高度
			if(!this.showChoosePopu){
				// 清除计时器
				clearTimeout(this.scrolltimer)
				// 如果停留则表示滚动结束
				this.scrolltimer = setTimeout(() => {
				  this.curScrollTop = e.scrollTop
				}, 17)
			}
		},
		methods: {
			// 初始化页面
			pageInit(){
				// 重置分页
				this.total = 0
				this.pageNo = 1
				this.list = []
				// 获取列表数据
				this.getRow()
			},
			// 添加已选产品
			chooseProduct(item){
				const rowItem = this.list.find(k => k.id == item.id)
				if(!rowItem.checked){
					rowItem.checked = true
					rowItem.qty = 1
					rowItem.show = false
					this.chooseList.unshift(this.$u.deepClone(rowItem))
					// 更新top值
					this.updateChooseListTop()
				}else{
					rowItem.qty = rowItem.qty + 1
					// 已添加，则增加已选列表中的数量
					const row = this.chooseList.find(key => key.id == rowItem.id)
					if(row){
						row.qty = row.qty + 1
					}
					this.chooseList.splice()
				}
			},
			// 渲染已选产品列表
			openRender(){
				const query = uni.createSelectorQuery().in(this);
				query.select('#popuScroll').boundingClientRect(data => {
				  if (data) {
					const maxRows = Math.ceil(data.height/this.popuItemHeight)
					this.showScrollPopuHeight = this.popuItemHeight * maxRows
					// console.log(this.showScrollPopuHeight,maxRows)
					setTimeout(()=>{
						this.showSwipeAction = true
					},100)
				  }
				}).exec(); 
			},
			// 关闭已选列表弹框
			closePopu(){
				this.showChoosePopu=false
				if(this.submitOk){
					uni.hideLoading()
					uni.navigateTo({
						url: "/pagesB/procureOrder"
					})
				}
			},
			// 更新top值
			updateChooseListTop(){
				this.chooseList.forEach((item,index)=>{
					item.top = (index+1)* this.popuItemHeight
				})
				this.chooseList.splice()
			},
			// 打开已选产品列表
			openChoose(){
				this.submitOk = false
				console.log(this.chooseList)
				if(this.chooseLength){
					this.showChoosePopu = !this.showChoosePopu
				}else{
					this.$u.toast(`请选择产品`);
				}
			},
			// popu 滚动
			onscrollPopu(e){
				console.log(e.detail.scrollTop)
				// 清除计时器
				clearTimeout(this.scrolltimer)
				// 如果停留则表示滚动结束
				this.scrolltimer = setTimeout(() => {
				  this.curScrollPopuTop = e.detail.scrollTop
				}, 17)
			},
			// 已选产品变更数量
			changeQty(e){
				const rowIndex = this.chooseList.findIndex(key => key.id == e.index)
				if(rowIndex>=0){
					this.chooseList[rowIndex].qty = e.value
					this.chooseList.splice()
				}
				// 更新页面产品数据
				const aindex = this.list.findIndex(key => key.id == e.index)
				if(aindex>=0){
					this.list[aindex].qty = e.value
					this.list.splice()
				}
			},
			//已选产品删除
			chooseClick(index, btns){
				if(btns == 0) {
					// 删除项
					const aindex = this.chooseList.findIndex(item => item.id == index)
					if(aindex>=0){
						this.chooseList.splice(aindex, 1);
						// 更新top
						this.updateChooseListTop()
					}
					
					// 更新列表已选状态
					const row = this.list.find(item => item.id == index)
					if(row){
						row.checked = false
						row.qty = 0
					}
					
					// 如果没有数据了
					if(this.chooseList.length==0){
						this.clearChooseData()
					}
					this.$u.toast(`删除成功！`);
				}
			},
			// 同时打开一个
			chooseOpen(index){
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				const row = this.chooseList.find(item => item.id == index)
				if(row) {
					row.show = true
				}
				this.chooseList.map((item, idx) => {
					if(index != item.id) this.chooseList[idx].show = false;
				})
			},
			// 清除滑动按钮
			clearAction(){
				this.chooseList.map(item => {
					item.show = false
				})
				this.chooseList.splice()
			},
			// 确定清空已选列表
			claerChoose(){
				const _this = this
				uni.showModal({
					title: '提示',
					content: '确定清空已选列表？',
					confirmText: '确定',
					success(res) {
						if(res.confirm){
							_this.clearChooseData()
						}
					}
				})
			},
			// 清空已选数据
			clearChooseData(){
				this.chooseList = []
				this.showChoosePopu = false
				// 重置已选状态
				this.list.filter(item => item.checked).map(item=>{
					item.checked = false
					item.qty = 0
				})
			},
			// 查询列表
			getRow () {
			  let _this = this
			  let params = {
			    pageNo: this.pageNo,
			    pageSize: this.pageSize,
				queryWord: this.queryWord,
				promoActiveSn: this.promoActiveSn
			  }
			  
			  const rowHeight = 287 // 行高
			  const pageHeight = uni.getSystemInfoSync().windowHeight // 页面高度
			  const maxShowNums = Math.ceil( pageHeight / rowHeight ) //最大显示行数
			  console.log(maxShowNums)
			  this.showScrollHeight = rowHeight * maxShowNums // 可显示区域高度
			  
			  this.status = "loading"
			  uni.showLoading({
				  title: '加载中',
				  mask: true
			  })
			  queryPromoProductByPage(params).then(res => {
				if (res.code == 200 || res.status == 204 || res.status == 200) {
				  const list = res.data.list||[]
				  const ret = []
				  let curPageNums = (this.pageNo - 1) * this.pageSize / 2
				  // 更新已选状态
				  list.map((k,i) => {
					  // 如果筛选或分页后，更新页面列表产品数量
					  const hasChecked = this.chooseList.find(s=>s.id == k.id)
					  curPageNums = (i+1) % 2 != 0 ? curPageNums + 1 : curPageNums
					  ret.push({
						  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,
						  top: rowHeight * curPageNums
					  })
				  })
				  _this.list = _this.list.concat(ret)
				  console.log(_this.list)
				  _this.total = res.data.count || 0
				} else {
				  _this.list = []
				  _this.total = 0
				  _this.noDataText = res.message
				}
				_this.$nextTick(()=>{
					uni.hideLoading()
				})
				_this.status = _this.total>=_this.list.length ? "nomore" : 'loadmore'
			  })
			},
			// 提交订单
			submitOrder(){
				if(this.showChoosePopu){
					uni.showLoading({
						title: '提交中...',
						mask: true
					})
					const detailList = []
					this.chooseList.map(item => {
						detailList.push({
								promoActiveSn: this.promoActiveSn,
								promoRuleSn:item.promoRuleSn,
								productSn:item.productSn,
								productCode:item.productCode,
								qty:item.qty,
								price:item.cost,
								giveAmount:item.promoRuleValue
						})
					})
					purchaseSave({
						promoActiveSn: this.promoActiveSn,
						detailList: detailList
					}).then(res => {
						if(res.status == 200){
							res.data.detailList = []
							this.$store.state.vuex_tempData = res.data
							this.clearChooseData()
							this.submitOk = true
						}else{
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				}else{
					this.openChoose()
				}
			},
		}
	}
</script>

<style lang="less">
    page{
		height: 100vh;
	}
	.video-pagesCons{
		height: 100vh;
		position: relative;
		.tab-search{
			padding: 15rpx 20rpx;
			background: #fff;
			position: fixed;
			top:0;
			left:0;
			width:100%;
			z-index:20;
		}
		.tab-body{
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			padding: 90rpx 0 170rpx 0;
			.product-list{
				display: flex;
				flex-wrap: wrap;
			}
			.check-order-list{
				width: 50%;
				padding: 10upx;
				height: 287px;
				background: url('/static/def_imgs.png') no-repeat center center;
			}
		}
		.bottom-bar{
			height: 130upx;
			z-index: 200;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32upx;
			position: fixed;
			bottom:0;
			left:0;
			width:100%;
			.bottom-bar-left{
				padding: 0 30upx;
				flex-grow: 1;
				display: flex;
				align-items: center;
			}
			.bottom-bar-left-item{
				padding-right: 20rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;
			}
			.bottom-bar-left-item-icon{
				position: relative;
				background: #2196F3;
				padding: 20rpx;
				border-radius: 100%;
				color: #fff;
			}
			.bottom-bar-right{
				padding: 0 50rpx;
				height: 100%;
				background: #2196F3;
				display: flex;
				align-items: center;
				.bottom-bar-right-item{
					color: #fff;
				}
			}
			.bg-0{
				background: #2196F3;
			}
			.bg-1{
				background: #f44336;
			}
		}
		.price-txt{
			color: red;
			text{
				font-size: 36rpx;
			}
		}
		.choose-title{
			display: flex;
			align-items:center;
			justify-content: space-between;
			padding: 0 25rpx;
			position: fixed;
			background: #fff;
			width: 100%;
			z-index: 3;
			border-bottom: 1px solid #eee;
			border-radius: 40rpx 40rpx 0 0;
			> view{
				padding: 25rpx 0;
			}
			.p-nums{
				color: #2196F3;
				margin: 0 6rpx;
			}
			.choose-inf{
				color: #999;
				font-size: 24rpx;
			}
			.choose-close{
				padding: 25rpx 20rpx;
			}
		}
		.choose-product-list{
			padding: 100rpx 20rpx 150rpx;
			width: 100%;
			position: relative;
			> view{
				height: 133px;
			}
		}
		.back-price{
			padding: 6rpx 65rpx;
			background: rgba(255 ,87 ,34 , 1);
			position: absolute;
			top: 18rpx;
			right: -45rpx;
			color: #fff;
			z-index: 2;
			font-size: 20rpx;
			text-align: center;
			transform: rotate(40deg);
			display: flex;
			align-items: center;
			text{
				font-size: 28rpx;
				margin: 0 5rpx;
			}
		}
	}
</style>
