<template>
	<view class="pages">
		<!-- head -->
		<view class="scrollPage-header">
			<view :style="{height:statusBarHeight+'px'}"></view>
			<view class="header-title">
				<view class="header-left" @click="goBack">
					<image style="width: 16px; height: 16px;margin-right:3px;" mode="aspectFit" src="../static/arrow-left.png"></image>
					<text>返回</text>
				</view>
				<view class="header-title"><text class="ellipsis-one" overflow="ellipsis">购物车</text></view>
				<view class="header-right"></view>
			</view>
		</view>
		<view class="cart-body">
				<!-- 内容 -->
				<scroll-view 
				scroll-y 
				class="cart-list" 
				type="custom" 
				@scrolltolower="onreachBottom">
					<sticky-header>
						 <!-- 头部 -->
						 <view class="cart-head">
						 	<view class="cart-head-left">共<text>{{total}}</text>款商品</view>
						 	<view class="cart-head-right">
								<view class="cart-head-btton blue" @click="editAll">
									<text>{{editFlag?'完成':'编辑'}}</text>
								</view>
							</view>
						 </view>
					</sticky-header>
					<productItem
					v-for="(item, index) in list"
					:key="item.id"  
					:index="index"
					:list="item" 
					@changeQty="changeQty" 
					@check="chooseItem"
					@remove="removeChoose">
					</productItem>
					<!-- loading -->
					<view class="loading-bar" v-if="list.length==0 && status!='loading'">{{noDataText}}</view>
					<view class="empty-bar" v-if="(total>=list.length&&list.length)||status!='loading'">
						<image mode="aspectFit" :src="empty.imgUrl"></image>
						<view>{{empty.tip}}</view>
					</view>
				</scroll-view>
				<!-- 底部 -->
				<view class="cart-footer">
					<view class="cart-footer-box">
						<view class="cart-footer-left">
								<view class="cart-footer-left-all" @click="chooseAll">
									<view class="cart-footer-left-all-icon">
										<image style="width: 24px;height: 24px;" mode="aspectFill" :src="'../static/'+(allChecked?'round_check_fill':'round')+'.png'"></image>
									</view>
									<view class="cart-footer-left-all-text">
										<text>全选</text>
									</view>
								</view>
						</view>
						<view class="cart-footer-right">
							<view class="cart-footer-left-price" v-if="!editFlag">
								<view class="cart-footer-left-price-text">
									<text>合计：</text>
								</view>
								<view class="cart-footer-left-price-num">
									<text>￥{{totalAmount}}</text>
								</view>
							</view>
							<view class="cart-head-btton red" v-if="editFlag" @click="clearAll">
								<text>清空购物车</text>
							</view>
							<view class="cart-footer-right-button">
								<u-button v-if="!editFlag" type="error" shape="circle" @click="settlement">去结算</u-button>
								<u-button v-else type="error" plain style="border:none;" shape="circle" @click="batchRemove">删除</u-button>
							</view>
						</view>
					</view>
					<view :style="{height:safeAreaBottom+'px'}"></view>
				</view>
		</view>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations,
	} from 'vuex'
	import productItem from '@/pagesB/cart/productitem.vue'
	export default {
		components:{
			productItem
		},
		onLoad() {
			// 计算区域高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			this.screenWidth = uni.getSystemInfoSync().windowWidth
			this.screenHeight = uni.getSystemInfoSync().windowHeight
			this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
			
			this.cacheList = this.getCacheList()
			this.cacheList.forEach(key => {
				this.total += key.length // 总款数
			})
			this.pageInit()
		},
		data() {
			return {
				status: 'loading',
				noDataText: '暂无活动',
				empty: {
					tip: '暂无产品',
					imgUrl: '/static/nodata.png'
				},
				// 查询条件
				pageNo: 1,
				pageSize: 3,
				list: [],
				total: 0,
				totalAmount: 0,
				totalNum: 0,
				editFlag: false,
				allChecked: false,
				cacheList: [],
				screenWidth: 325,
				screenHeight: 0,
				statusBarHeight: 44,
				safeAreaBottom: 0,
			}
		},
		computed: {
			...mapState(['hasLogin']),
			userInfo(){
				return this.$store.state.vuex_userInfo
			}
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			// 从缓存获取数据
			getCacheList(){
				const cacheList = this.$store.state.vuex_cartList.find(k => k.sn == '693459699332595712')
				return cacheList ? JSON.parse(JSON.stringify(cacheList.list)) : []
			},
			pageInit(){
				this.pageNo = 1
				this.list = []
				this.getRow()
			},
			// 查询列表
			getRow (pageNo) {
			  let _this = this
			  if (pageNo) {
			    this.pageNo = pageNo
			  }
			  let params = {
			    pageNo: this.pageNo,
			    pageSize: this.pageSize,
				queryWord: this.queryWord
			  }
			  const storeShelf = this.$store.state.vuex_storeShelf
			  this.status = "loading"
			  setTimeout(()=>{
				  let list = this.cacheList.slice(this.list.length,this.pageNo*this.pageSize)||[]
				  list.forEach(key => {
					  key.forEach(s => {
						   s.checked = this.allChecked
					  })
				  })
				  this.list = this.list.concat(list)
				  this.status = this.total>=this.list.length ? "nomore" : 'loadmore'
			  })
			 //  promoTerminalListByPage(params).then(res => {
				// if (res.code == 200 || res.status == 204 || res.status == 200) {
				//   const list = res.data.list
				//   if(_this.pageNo>1){
				// 	  _this.list = _this.list.concat(list)
				//   }else{
				// 	  _this.list = 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'
			 //  })
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if(this.list.length < this.total){
					this.pageNo += 1
					this.getRow()
				}else{
					this.status = "nomore"
				}
			},
			// 根据id查找
			getItemById(id){
				const a = this.list.findIndex(k => k.find(s=> s.id == id))
				const b = a>=0 ? this.list[a].findIndex(s=> s.id == id) : -1
				return {p:a,s:b}
			},
			// 已选产品变更数量
			changeQty(val,id){
				const crow = this.getItemById(id)
				if(crow.p>=0&&crow.s>=0){
					this.list[crow.p][crow.s].qty = val
					this.list[crow.p].splice()
					// 合计
					this.getChooseHeji()
				}
			},
			// 选择
			chooseItem(id){
				const crow = this.getItemById(id)
				if(crow.p>=0&&crow.s>=0){
					this.list[crow.p][crow.s].checked = !this.list[crow.p][crow.s].checked
					// 合计
					this.getChooseHeji()
					// 判断是否全选
					if(this.list.every(key => key.every(item => item.checked))){
						this.allChecked = true
					}else{
						this.allChecked = false
					}
				}
			},
			// 编辑
			editAll(){
				this.editFlag = !this.editFlag
				this.list.forEach(key => {
					key.forEach(item => {
						item.edit = this.editFlag
					})
				})
			},
			// 清空购物车
			clearAll(){
				const _this = this
				uni.showModal({
					title: '提示',
					content: '确定清空购物车？',
					confirmText: '确定',
					success(res) {
						if(res.confirm){
							// uni.showLoading({
							// 	title: '正在清空...',
							// 	mask: true
							// })
							_this.list = []
							_this.cacheList = []
							_this.allChecked = false
							_this.editFlag = false
							_this.getChooseHeji()
						}
					}
				})
			},
			// 全选
			chooseAll(){
				this.allChecked = !this.allChecked
				this.list.forEach(key => {
					key.forEach(item => {
						item.checked = this.allChecked
					})
				})
				// 合计
				this.getChooseHeji()
			},
			//单个删除
			removeChoose(id,isBatch){
				// 删除项
				const crow = this.getItemById(id)
				if(crow.p>=0&&crow.s>=0){
					this.list[crow.p].splice(crow.s, 1);
					this.total = this.total - 1
					// 合计
					if(!isBatch){
						this.getChooseHeji()
					}
				}
			},
			// 批量删除
			batchRemove(){
				if(this.totalNum==0){
					uni.showToast({
						title: '请选择产品',
						icon: 'none'
					})
					return false
				}
				const _this = this
				uni.showModal({
					title: '提示',
					content: '确定删除商品吗？',
					confirmText: '确定',
					success(res) {
						if(res.confirm){
							 // 如果是全选
							 if(_this.allChecked){
							 	_this.list = []
								_this.cacheList = []
							 	_this.allChecked = false
							 }else{
							 	_this.list.forEach(item => {
							 		item.filter(k=>k.checked).forEach(s=>{
							 			_this.removeChoose(s.id,true)
							 		})
							 	})
							 }
							 // 合计
							 _this.getChooseHeji()
						}
					}
				})
			},
			// 去结算
			settlement(){
				if(this.totalAmount>0){
					 
				}else{
					uni.showToast({
						title: '请选择产品',
						icon: 'none'
					})
				}
			},
			// 计算总款数、合计、数量
			getChooseHeji(){
				this.totalAmount = 0
				this.totalNum = 0
				this.list.forEach(key => {
					key.filter(item=>item.checked).forEach(item => {
						this.totalAmount += item.cost * item.qty // 总金额
						this.totalNum += item.qty // 总数量
					})
				})
			},
		}
	}
</script>

<style lang="less">
.pages{
	height: 100vh;
	display: flex;
	flex-direction: column;
	.scrollPage-header{
		z-index: 1;
		.header-title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10px;
			height: 44px;
			background-color: #FFFFFF;
			box-shadow: 0px 1px 0px 0px #E6E6E6;
			.header-title{
				font-size: 16px;
				color: #333333;
				max-width: 70%;
			}
			.header-left{
				display: flex;
				align-items: center;
				text{
					font-size: 14px;
					color: #333333;
					margin-left: 5px;
				}
			}
			.header-right{
				width: 50px;
			}
		}
	}
	.cart-body{
		position: relative;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		.cart-head{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			background-color: #FFFFFF;
			height: 40px;
			.cart-head-left{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #333333;
				height: 100%;
				text{
					color: #d81e06;
					margin: 0 10rpx;
				}
			}
			.cart-head-right{
				display: flex;
				align-items: center;
			}
			.red{
				color: #d81e06;
			}
			.blue{
				color: #2196F3;
			}
			.cart-head-btton{
				height: 100%;
				font-size: 28rpx;
				margin-right: 10px;
			}
		}
		.cart-list{
			flex-grow: 1;
			background-color: #F5F5F5;
			width: 100%;
			.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;
				}
			}
		}
		.cart-footer{
			width: 100%;
			background-color: #FFFFFF;
			.cart-footer-box{
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.cart-footer-left{
				display: flex;
				align-items: center;
				padding: 0 20rpx 0 36rpx;
				.cart-footer-left-all{
					display: flex;
					align-items: center;
					.cart-footer-left-all-text{
						margin-left: 10rpx;
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
			.cart-footer-right{
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.cart-footer-left-price{
					display: flex;
					align-items: center;
					.cart-footer-left-price-text{
						font-size: 28rpx;
						color: #333333;
					}
					.cart-footer-left-price-num{
						font-size: 28rpx;
						color: #d81e06;
					}
				}
				.red{
					color: #d81e06;
				}
				.cart-head-btton{
					height: 100%;
					font-size: 28rpx;
					color: #333333;
				}
				.cart-footer-right-button{
					display: flex;
					align-items: center;
					margin-left: 20rpx;
					text-align: right;
				}
			}
		}
	}
}
</style>
