<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">
			<!-- <scroll-view scroll-y style="height: 100%;width: 100%;overflow: auto;" @scrolltolower="onreachBottom"> -->
				<view class="product-list" v-if="list.length">
					<view
					class="check-order-list" 
					v-for="(item,index) in list" 
					:key="item.id" 
					>
						<view class="video-item">
							<view>
								<u-image :src="item.productImage+'?x-oss-process=image/resize,p_50'" height="140px" width="100%"></u-image>
								<view class="back-price" v-if="item.promoRuleValue">返<text>{{item.promoRuleValue}}</text>元</view>
								<view class="product-code">{{item.productCode}}</view>
							</view>
							<view>
								<view class="product-name">{{item.productName}}</view>
								<view class="product-guige ellipsis-two">{{item.productOrigCode}}</view>
								<view class="product-button">
									<view class="price-txt">￥<text>{{item.cost}}</text></view>
									<view @click="chooseProduct(item)">
										<view class="cart-add" :class="!item.checked?'colr-add':'colr-checks'">
											<u-icon v-if="!item.checked" color="#fff" name="plus"></u-icon>
											<view v-else>
												<u-icon name="plus" color="#fff"></u-icon>{{item.qty}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					 </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>
			<!-- </scroll-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>
		<!-- 分页 -->
		<view class="pages-box" v-if="showPage">
			<uni-pages-nav :totalPages="totalPages" :currentPage="pageNo" @pagechanged="pagechanged"></uni-pages-nav>
		</view>
		<!-- 已选列表 -->
		<page-container 
		:show="showChoosePopu" 
		:round="true"
		position="bottom" 
		custom-style="height:80%"
		@enter="openRender"
		@afterleave="closePopu">
			<scroll-view :style="{width:screenWidth + 'px',height:'100%'}" scroll-y="true" @scrolltolower="onreachPopuBottom">
				<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>
					<u-icon name="close" size="30" @click="showChoosePopu=false"></u-icon>
				</view>
				<view class="choose-product-list" v-if="showSwipeAction">
					<u-swipe-action 
					:show="item.show" 
					v-for="(item, index) in chooseProductList" 
					:index="item.id" 
					:key="item.id" 
					@click="chooseClick" 
					@open="chooseOpen"
					:options="chooseOptions"
					>
						<view class="choose-product-item" :style="{width:(screenWidth-20) + 'px'}">
							 <view>
								 <view class="choose-product-item-img">
									<u-image :src="item.productImage+'?x-oss-process=image/resize,p_50'" height="200rpx" width="100%"></u-image>
									<view class="back-price" v-if="item.promoRuleValue">返<text>{{item.promoRuleValue}}</text>元</view>
									<view class="choose-product-item-left-info-code">{{item.productCode}}</view>
								 </view>
								 <view class="choose-product-item-info">
									<view class="choose-product-item-left-info-name">{{item.productName}}</view>
									<view class="choose-product-item-left-info-guige ellipsis-two">{{item.productOrigCode}}</view>
									<view class="choose-product-item-left-info-price">
										<view class="price-txt">￥<text>{{item.cost}}</text></view>
										<view>
											<u-number-box v-model="item.qty" :index="item.id" :input-width="60" :input-height="60" size="mini" :min="1" @change="changeQty"></u-number-box>
										</view>
									</view>
								 </view>
							 </view>
						</view>
					</u-swipe-action>
				</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'
	export default {
		data() {
			return {
				status: 'loading',
				noDataText: '暂无数据',
				queryWord: '',// 关键词查询列表
				// 查询条件
				pageNo: 1, // 当前页
				pageSize: 12,//每页条数
				list: [], // 产品列表
				total: 0, // 总记录
				showChoosePopu: false,//已选列表弹框
				chooseList:[], // 已选数据
				chooseProductList:[], // 已选弹框中当前数据
				chooseOptions:[
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				], // 左滑删除已选产品
				screenWidth: 750, // 屏幕宽度
				showSwipeAction: false, // 已选弹框是否一打开
				choosePageNo: 1, // 已选产品当前页
				choosePageSize: 4, // 已选产品每页数
				chooseTotal: 0 ,// 已选产品总记录数
				promoActiveSn: null, // 活动sn
				submitOk: false,
				// 分页
				showPage: false,
				maxScrollTop: 0
			}
		},
		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
			},
			// 总页数
			totalPages(){
				return Math.ceil(this.total / this.pageSize)
			}
		},
		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)) : []
			// 查询产品列表
			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() {
			this.showPage = true
			if(this.list.length < this.total){
				// this.pageNo += 1
				// this.getRow()
			}else{
				this.status = "nomore"
			}
		},
		onPageScroll(e){
			if(this.showPage && this.maxScrollTop == 0){
				this.maxScrollTop = e.scrollTop
			}
			// console.log(this.maxScrollTop , e.scrollTop)
			if(this.showPage && this.maxScrollTop>0 && (e.scrollTop < (this.maxScrollTop/10)*9)){
				this.showPage = false
			}
			// 最后一页显示
			if(this.pageNo >= this.totalPages){
				this.showPage = true
			}
		},
		methods: {
			pagechanged(page){
				this.pageNo = page
				this.getRow()
			},
			// 初始化页面
			pageInit(){
				// 重置分页
				this.total = 0
				this.pageNo = 1
				this.list = []
				// 获取列表数据
				this.getRow()
			},
			// 添加已选产品
			chooseProduct(item){
				if(!item.checked){
					item.checked = true
					item.qty = 1
					item.show = false
					this.chooseList.unshift(this.$u.deepClone(item))
				}else{
					item.qty = item.qty + 1
					// 已添加，则增加数量
					const row = this.chooseList.find(key => key.id == item.id)
					if(row){
						row.qty = row.qty + 1
					}
					this.chooseList.splice()
				}
			},
			// 渲染已选产品列表
			openRender(){
				setTimeout(()=>{
					this.showSwipeAction = true
				},100)
			},
			// 关闭已选列表弹框
			closePopu(){
				this.chooseProductList = []
				this.showChoosePopu=false
				if(this.submitOk){
					uni.hideLoading()
					uni.navigateTo({
						url: '/pagesB/procureOrder'
					})
				}
			},
			// 打开已选产品列表
			openChoose(){
				this.submitOk = false
				if(this.chooseLength){
					this.showChoosePopu = !this.showChoosePopu
					if(this.showChoosePopu){
						console.log(this.chooseList)
						// 默认加载第一页数据
						this.chooseTotal = this.chooseList.length
						this.choosePageNo = 0
						this.onreachPopuBottom()
					}
				}else{
					this.$u.toast(`请选择产品`);
				}
			},
			// 已选产品滚动到底部
			onreachPopuBottom(){
				const totalPages = Math.ceil(this.chooseTotal/this.choosePageSize)
				if(this.choosePageNo>=totalPages){
					return
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.choosePageNo = this.choosePageNo + 1
				const start = (this.choosePageNo-1)*this.choosePageSize
				const end = this.choosePageNo*this.choosePageSize
				const list = this.chooseTotal > this.choosePageSize ? this.chooseList.slice(start,end>this.chooseTotal?this.chooseTotal:end) : this.chooseList
				this.chooseProductList = this.chooseProductList.concat(list)
				this.chooseProductList.splice()
				this.$nextTick(()=>{
					uni.hideLoading()
				})
			},
			// 已选产品变更数量
			changeQty(e){
				const _this = this
				const rowIndex = this.chooseProductList.findIndex(key => key.id == e.index)
				if(e.value>0){
					this.chooseProductList[rowIndex].qty = e.value
					// 更新原始数据
					const rindex = this.chooseList.findIndex(key => key.id == e.index)
					if(rindex>=0){
						this.chooseList[rindex].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()
					}
				}else{
					// 数量为0时，删除
					// this.chooseClick(e.index,0)
				}
			},
			//已选产品删除
			chooseClick(index, btns){
				if(btns == 0) {
					// 更新列表已选状态
					const row = this.list.find(item => item.id == index)
					if(row){
						row.checked = false
						row.qty = 0
					}
					const rindex = this.chooseProductList.findIndex(item => item.id == index)
					if(rindex>=0){
						this.chooseProductList.splice(rindex, 1);
						this.chooseList.splice(rindex, 1);
					}
					// 如果数量小于每页数量，自动加载下一页
					if(this.chooseProductList.length < this.choosePageSize){
						this.onreachPopuBottom()
					}
					this.$u.toast(`删除成功！`);
				}
			},
			// 同时打开一个
			chooseOpen(index){
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				const row = this.chooseProductList.find(item => item.id == index)
				if(row) {
					row.show = true
				}
				this.chooseProductList.map((item, idx) => {
					if(index != item.id) this.chooseProductList[idx].show = false;
				})
			},
			// 清除滑动按钮
			clearAction(){
				this.chooseProductList.map(item => {
					item.show = false
				})
				this.chooseProductList.splice()
			},
			// 确定清空已选列表
			claerChoose(){
				const _this = this
				uni.showModal({
					title: '提示',
					content: '确定清空已选列表？',
					confirmText: '确定',
					success(res) {
						if(res.confirm){
							_this.clearChooseData()
						}
					}
				})
			},
			// 清空已选数据
			clearChooseData(){
				this.chooseList = []
				this.chooseProductList = []
				this.showChoosePopu = false
				// nav.navigateBack()
				// 重置已选状态
				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
			  }
			  this.status = "loading"
			  queryPromoProductByPage(params).then(res => {
				if (res.code == 200 || res.status == 204 || res.status == 200) {
				  const list = res.data.list||[]
				  const ret = []
				  // 更新已选状态
				  list.map(k => {
					  // 如果筛选或分页后，更新页面列表产品数量
					  const hasChecked = this.chooseList.find(s=>s.id == k.id)
					  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
					  })
				  })
				  
				  // _this.list = _this.list.concat(ret)
				  _this.list = ret
				  _this.total = res.data.count || 0
				} else {
				  _this.list = []
				  _this.total = 0
				  _this.noDataText = res.message
				}
				// 滚动到顶部
				_this.showPage = false
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
				_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){
							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;
		.pages-box{
			position: fixed;
			left: 10%;
			bottom: 140rpx;
			z-index: 90;
			width: 80%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.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 130rpx 0;
			.product-list{
				display: flex;
				flex-wrap: wrap;
			}
			.check-order-list{
				width: 50%;
				padding: 10upx;
				.video-item{
					background: #ffffff;
					border-radius: 10upx;
					box-shadow: 1px 1px 3px #EEEEEE;
					height: 100%;
					display: flex;
					flex-direction: column;
					> view{
						&:first-child{
							position: relative;
							overflow: hidden;
							border-bottom: 1px solid #eee;
							.product-code{
								color: #666;
								position: absolute;
								width: 100%;
								left:0;
								bottom:0;
								background: rgba(255,255,255,0.7);
								text-align: center;
							}
						}
						&:last-child{
							padding: 20rpx 20rpx 70rpx 20rpx;
							position: relative;
							flex-grow: 1;
							.product-name{
								font-size: 28rpx;
							}
							.product-guige{
								margin: 10rpx 0 20rpx 0;
								color: #2196F3;
								text{
									margin-right: 10rpx;
								}
							}
						}
						.product-button{
							display: flex;
							justify-content: space-between;
							align-items: center;
							position: absolute;
							bottom: 20rpx;
							left: 0;
							width: 100%;
							padding: 0 20rpx;
						}
						.cart-add{
							padding: 6rpx 15rpx;
							border-radius: 30rpx;
							background: #2196F3;
							color: #fff;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 24rpx;
						}
						.colr-add{
							background: #2196F3;
							padding: 10rpx 20rpx;
						}
						.colr-checks{
							background: #00aa00;
						}
					}
				}
			}
		}
		.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: 25rpx;
			position: fixed;
			background: #fff;
			width: 100%;
			z-index: 3;
			border-bottom: 1px solid #eee;
			.p-nums{
				color: #2196F3;
				margin: 0 6rpx;
			}
			.choose-inf{
				color: #999;
				font-size: 24rpx;
			}
		}
		.choose-product-list{
			padding: 100rpx 20rpx 130rpx;
			width: 100%;
			.choose-product-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0;
				border-bottom: 1px solid #eee;
				> view{
					 display: flex;
					 align-items: center;
					 justify-content: space-between;
					 flex-grow: 1;
					 width: 100%;
				}
				.choose-product-item-img{
					margin-right: 20rpx;
					width: 35%;
					position: relative;
					overflow: hidden;
					border: 1px solid #eee;
					padding: 10rpx;
					.back-price{
						zoom: calc(0.8);
					}
					.choose-product-item-left-info-code{
						color: #666;
						position: absolute;
						width: 100%;
						left:0;
						bottom:0;
						background: rgba(255,255,255,0.7);
						text-align: center;
					}
				}
				.choose-product-item-info{
					margin-right: 10rpx;
					width: 65%;
					flex-grow: 1;
					.choose-product-item-left-info-price{
						display: flex;
						align-items:center;
						justify-content: space-between;
						>view{
							&:last-child{
								display: flex;
								align-items:center;
							}
						}
					}
					.choose-product-item-left-info-name{
						font-size: 28rpx;
					}
					.choose-product-item-left-info-guige{
						color: #2196F3;
						margin: 10rpx 0;
						text{
							margin-right: 10rpx;
						}
					}
				}
			}
		}
		.back-price{
			padding: 6rpx 55rpx;
			background: rgba(255 ,87 ,34 , 1);
			position: absolute;
			top: 10rpx;
			right: -40rpx;
			color: #fff;
			z-index: 2;
			font-size: 20rpx;
			text-align: center;
			transform: rotate(40deg);
			display: flex;
			align-items: center;
			text{
				font-size: 28rpx;
			}
		}
	}
</style>
