<template>
	<view class="pages">
		<view class="cart-body">
				<!-- 头部 -->
				<view class="cart-head">
					<view class="cart-head-left">共<text>{{total}}</text>款商品</view>
					<view class="cart-head-btton" @click="editFlag=!editFlag"><text>{{editFlag?'完成':'编辑'}}</text></view>
				</view>
				<!-- 内容 -->
				<scroll-view scroll-y class="cart-list" :style="{height:scrollHeight+'px'}"  @scrolltolower="onreachBottom">
					<productItem
					v-for="(item, index) in list"
					:key="item.id"  
					:index="index"
					:list="item" 
					:edit="editFlag" 
					@changeQty="changeQty" 
					@check="chooseItem"
					@remove="removeChoose">
					</productItem>
					<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="cart-footer">
					<view class="cart-footer-left">
							<view class="cart-footer-left-all" @click="chooseAll">
								<view class="cart-footer-left-all-icon">
									<u-icon size="45" :color="allChecked?'#ff0000':'#969799'" :name="allChecked?'roundcheckfill':'round'" custom-prefix="custom-icon"></u-icon>
								</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-footer-right-button">
							<u-button v-if="!editFlag" type="error" shape="circle" @click="settlement">去结算</u-button>
							<u-button v-else type="error" plain shape="circle" @click="batchRemove">删除</u-button>
						</view>
					</view>
				</view>
		</view>
		<u-tabbar :list="vuex_tabBarList" :before-switch="beforeSwitch"></u-tabbar>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations,
	} from 'vuex'
	import productItem from '@/pages/cart/productitem.vue'
	export default {
		components:{
			productItem
		},
		onLoad() {
			this.cacheList = this.getCacheList()
			this.cacheList.forEach(key => {
				this.total += key.length // 总款数
			})
			this.pageInit()
		},
		data() {
			return {
				status: 'loading',
				noDataText: '暂无活动',
				// 查询条件
				pageNo: 1,
				pageSize: 3,
				list: [],
				total: 0,
				totalAmount: 0,
				totalNum: 0,
				editFlag: false,
				allChecked: false,
				cacheList: []
			}
		},
		computed: {
			...mapState(['hasLogin','vuex_vinScanNums','vuex_scanMaxNums','vuex_tabBarList']),
			userInfo(){
				return this.$store.state.vuex_userInfo
			},
			scrollHeight(){
				return uni.getSystemInfoSync().windowHeight - 142
			}
		},
		methods: {
			// 从缓存获取数据
			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
					}
				}
			},
			// 全选
			chooseAll(){
				this.allChecked = !this.allChecked
				this.list.forEach(key => {
					key.forEach(item => {
						item.checked = this.allChecked
					})
				})
				// 合计
				this.getChooseHeji()
			},
			//单个删除
			removeChoose(id){
				// 删除项
				const crow = this.getItemById(id)
				if(crow.p>=0&&crow.s>=0){
					this.list[crow.p].splice(crow.s, 1);
					// 合计
					this.getChooseHeji()
				}
			},
			// 批量删除
			batchRemove(){
				if(this.totalNum==0){
					uni.showToast({
						title: '请选择产品',
						icon: 'none'
					})
					return false
				}
				// 如果是全选
				if(this.allChecked){
					this.list = []
					this.allChecked = false
				}else{
					this.list.forEach(item => {
						item.filter(k=>k.checked).forEach(s=>{
							this.removeChoose(s.id)
						})
					})
				}
				// 合计
				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 // 总数量
					})
				})
			},
			// 扫描vin
			beforeSwitch(index){
				const row = this.$store.state.vuex_tabBarList[index]
				if(row.text == '促销'){
					uni.$emit('refashProm')
				}
				if(row.text == '扫描VIN'){
					this.openCamera()
				}else{
					return true
				}
			},
			// 去扫描
			openCamera(){
				if(this.hasLogin){
					if(this.userInfo.sysUserFlag == '0'){
						if(this.vuex_vinScanNums < this.vuex_scanMaxNums){
							uni.navigateTo({
								url: "/pages/scan-frame/scan-frame"
							})
						}else{
							uni.showModal({
								title: '提示',
								content: '个人用户扫描VIN仅限10次，您的次数已用完！',
								confirmText: '好的',
								showCancel: false,
								success(res) {}
							})
						}
					}else{
						uni.navigateTo({
							url: "/pages/scan-frame/scan-frame"
						})
					}
				}else{
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
		}
	}
</script>

<style lang="less">
.pages{
	height: 100vh;
	display: flex;
	flex-direction: column;
	.cart-body{
		position: relative;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		.cart-head{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			background-color: #FFFFFF;
			.cart-head-left{
				font-size: 28rpx;
				color: #333333;
				text{
					color: #FF0000;
					margin: 0 10rpx;
				}
			}
			.cart-head-btton{
				font-size: 28rpx;
				color: #333333;
			}
		}
		.cart-list{
			flex-grow: 1;
			background-color: #F5F5F5;
			width: 100%;
			height: calc(100% - 180rpx);
			overflow: auto;
		}
		.cart-footer{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 100rpx;
			background-color: #FFFFFF;
			.cart-footer-left{
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				.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: #FF0000;
					}
				}
				.cart-footer-right-button{
					margin-left: 20rpx;
					width: 180rpx;
					text-align: right;
				}
			}
		}
	}
}
</style>
