<template>
	<view class="video-pagesCons">
		<view class="tab-search">
			<u-search placeholder="请输入产品名称/轮胎规格" shape="round" :clearabled="true" show-action v-model="queryWord" @clear="getRow" @search="getRow" @custom="getRow"></u-search>
		</view>
		<view class="tab-body">
			<scroll-view scroll-y style="height: 100%;width: 100%;overflow: auto;" @scrolltolower="onreachBottom">
				<view class="product-list">
					<view
					class="check-order-list" 
					v-for="(item,index) in list" 
					:key="item.id" 
					>
						<view class="video-item">
							<view>
								<u-image :src="item.imageSet[0]" height="140px" width="100%"></u-image>
								<view class="back-price">返<text>￥15</text></view>
							</view>
							<view>
								<view class="product-name">{{item.name}}</view>
								<view class="product-guige">{{item.origCode}}</view>
								<view class="product-button">
									<view class="price-txt">￥<text>{{item.price}}</text></view>
									<view>
										<u-button v-if="!item.checked" :throttle-time="50" @click="chooseProduct(item)" size="mini" type="primary" shape="circle"><u-icon name="plus"></u-icon></u-button>
										<u-button v-else :throttle-time="50" @click="chooseProduct(item)" size="mini" type="success" shape="circle"><u-icon name="plus"></u-icon>{{item.qty}}</u-button>
									</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 class="bottom-bar" @click="clearAction">
				<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="chooseLength" :offset="[-7,-8]"></u-badge>
						</view>
					</view>
					<view class="bottom-bar-left-item" v-if="showChoosePopu">
						合计：<view class="price-txt">￥<text>325.63</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>
			<!-- 已选列表 -->
			<u-popup 
			v-model="showChoosePopu" 
			closeable 
			:zIndex="100" 
			mode="bottom" 
			border-radius="14" 
			height="100%" 
			@scrolltolower="onreachPopuBottom"
			@open="openRender"
			@close="closePopu">
				<view :style="{width:screenWidth + 'px'}" @click="clearAction">
					<view class="choose-title">
						<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">左滑或数量0时删除产品</text>
					</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">
								 <view>
									 <view class="choose-product-item-img">
										<u-image :src="item.images" height="200rpx" width="100%"></u-image>
										<view class="back-price">返<text>￥15</text></view>
									 </view>
									 <view class="choose-product-item-info">
										<view class="choose-product-item-left-info-name">{{item.name}}</view>
										<view class="choose-product-item-left-info-guige">{{item.origCode}}</view>
										<view class="choose-product-item-left-info-price">
											<view class="price-txt">￥<text>{{item.price}}</text></view>
											<view>
												<u-number-box v-model="item.qty" :index="item.id" :input-width="60" :input-height="60" size="mini" :min="0" @change="changeQty"></u-number-box>
											</view>
										</view>
									 </view>
								 </view>
							</view>
						</u-swipe-action>
					</view>
				</view>
			</u-popup>
		</view>
		</view>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations,
	} from 'vuex'
	import { queryPromoProductByPage } from '@/api/video.js'
	export default {
		data() {
			return {
				status: 'loading',
				noDataText: '暂无数据',
				queryWord: '',// 关键词查询列表
				// 查询条件
				pageNo: 1, // 当前页
				pageSize: 10,//每页条数
				list: [], // 产品列表
				total: 0, // 总记录
				showChoosePopu: false,//已选列表弹框
				chooseList:[], // 已选数据
				chooseAllList:[], // 已选原始所有数据
				chooseProductList:[], // 已选弹框中当前数据
				chooseOptions:[
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				], // 左滑删除已选产品
				screenWidth: 750, // 屏幕宽度
				showSwipeAction: false, // 已选弹框是否一打开
				choosePageNo: 1, // 已选产品当前页
				choosePageSize: 8, // 已选产品每页数
				chooseTotal: 0 ,// 已选产品总记录数
				promoActiveSn: null
			}
		},
		computed: {
			...mapState(['hasLogin']),
			userInfo(){
				return this.$store.state.vuex_userInfo
			},
			// 已选产品总款数
			chooseLength(){
				return this.chooseList.length
			}
		},
		onLoad(opts) {
			uni.setNavigationBarTitle({
				title: opts.title||'促销活动产品'
			})
			this.promoActiveSn = opts.promoActiveSn
			this.pageInit()
		},
		methods: {
			// 初始化页面
			pageInit(){
				this.screenWidth = uni.getSystemInfoSync().windowWidth
				this.total = 0
				this.pageNo = 1
				// 获取列表数据
				this.getRow()
			},
			// 添加已选产品
			chooseProduct(item){
				if(!item.checked){
					item.checked = true
					item.qty = 1
					item.show = false
					this.chooseList.unshift(item)
				}else{
					// 已添加，则增加数量
					const row = this.chooseList.find(key => key.id == item.id)
					if(row){row.qty = row.qty + 1}
				}
			},
			// 渲染已选产品列表
			openRender(){
				setTimeout(()=>{
					this.showSwipeAction = true
				},100)
			},
			// 关闭已选列表弹框
			closePopu(){
				this.chooseProductList = []
				this.showChoosePopu=false
			},
			// 打开已选产品列表
			openChoose(){
				if(this.chooseLength){
					this.showChoosePopu = !this.showChoosePopu
					if(this.showChoosePopu){
						this.chooseAllList = JSON.parse(JSON.stringify(this.chooseList))
						// 默认加载第一页数据
						this.choosePageNo = 1
						this.chooseTotal = this.chooseAllList.length
						this.chooseProductList = this.chooseTotal > this.choosePageSize ? this.chooseAllList.slice(0,this.choosePageSize) : this.chooseAllList
					}
				}else{
					this.$u.toast(`请选择产品`);
				}
			},
			// 已选产品滚动到底部
			onreachPopuBottom(e){
				const totalPages = Math.ceil(this.chooseTotal/this.choosePageSize)
				if(this.choosePageNo>=totalPages){
					return
				}
				this.choosePageNo = this.choosePageNo + 1
				const start = (this.choosePageNo-1)*this.choosePageSize
				const end = this.choosePageNo*this.choosePageSize
				const list = this.chooseAllList.slice(start,end>this.chooseTotal?this.chooseTotal:end)
				this.chooseProductList = this.chooseProductList.concat(list)
				this.chooseProductList.splice()
			},
			// 已选产品变更数量
			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)
					this.chooseList[rindex].qty = e.value
					this.chooseList.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}
					const rindex = this.chooseProductList.findIndex(item => item.id == index)
					this.chooseProductList.splice(rindex, 1);
					this.chooseList.splice(rindex, 1);
					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.chooseList = []
							_this.chooseProductList = []
							_this.showChoosePopu = false
							// 重置已选状态
							_this.list.filter(item => item.checked).map(item=>item.checked = false)
						}
					}
				})
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if(this.list.length < this.total){
					this.pageNo += 1
					this.getRow()
				}else{
					this.status = "nomore"
				}
			},
			// 查询列表
			getRow (pageNo) {
			  let _this = this
			  if (pageNo) {
			    this.pageNo = pageNo
			  }
			  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) {
				  _this.list = _this.list.concat(res.data.list||[])
				  _this.total = res.data.count || 0
				} else {
				  _this.list = []
				  _this.total = 0
				  _this.noDataText = res.message
				}
				_this.status = _this.total>=_this.list.length ? "nomore" : 'loadmore'
			  })
			},
			// 提交订单
			submitOrder(){
				if(this.showChoosePopu){
					console.log(this.chooseList)
					uni.navigateTo({
						url: '/pagesB/procureOrder?id='
					})
				}else{
					this.openChoose()
				}
			},
		}
	}
</script>

<style lang="less">
    page{
		height: 100vh;
	}
	.video-pagesCons{
		height: 100vh;
		display: flex;
		flex-direction: column;
		.tab-search{
			padding: 15rpx 20rpx;
			background: #fff;
		}
		.tab-body{
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			overflow: auto;
			.bottom-bar{
				height: 130upx;
				z-index: 500;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32upx;
				.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;
				}
			}
			.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;
					> view{
						&:first-child{
							position: relative;
							overflow: hidden;
						}
						&:last-child{
							padding: 20rpx;
							.product-name{
								font-size: 28rpx;
							}
							.product-guige{
								margin: 10rpx 0;
								color: #666;
								text{
									margin-right: 10rpx;
								}
							}
						}
						.product-button{
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
					}
				}
			}
		}
		.price-txt{
			color: red;
			text{
				font-size: 36rpx;
			}
		}
		.choose-title{
			display: flex;
			align-items:center;
			padding: 25rpx;
			position: fixed;
			background: #fff;
			width: 100%;
			z-index: 3;
			.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: 10rpx;
					width: 35%;
					position: relative;
					overflow: hidden;
					.back-price{
						zoom: calc(0.8);
					}
				}
				.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: #666;
						margin: 10rpx 0;
						text{
							margin-right: 10rpx;
						}
					}
				}
			}
		}
		.back-price{
			padding: 6rpx 55rpx;
			background: rgb(255 87 34 / 0.6);
			position: absolute;
			top: 16rpx;
			left: -50rpx;
			color: #fff;
			z-index: 2;
			font-size: 20rpx;
			text-align: center;
			transform: rotate(-40deg);
			display: flex;
			align-items: center;
			text{
				font-size: 28rpx;
			}
		}
	}
</style>
