<template>
	<view class="shop-car mg-lr-24">
		<view class="u-f u-f-jcsb u-f-aic fs24 fw400 light-black mg-bot-42">
			<text>共 {{goodsAccount}} 件 商品</text>
			<text @click="editShopCar">{{ currentStatus === 1 ? '编辑' : '完成' }}</text>
		</view>
		
		<view classs="shop-car-list">
			<shop-car-item
				:item="item"
				v-for="item in shopCarInfo"
				:key="item.shopCarId"
				@checked="handleChecked"
				@change-num="handleChangeNum"
			></shop-car-item>
		</view>
		
		<view class="fix-bot">
			<view class="content u-f u-f-jcsb u-f-aic">
				<view :class="['fs24 fw400', allSelect ? 'main-color' : 'light-gray']" @click="handleAllSelect">全选</view>
				<view v-show="currentStatus === 1">
					<view class="u-f u-f-aic u-f-fdc">
						<view class="u-f u-f-aic u-f-jcfs">
							<text class="fs24 light-black mg-right-6">合计</text>
							<view class="main-color">
								<text class="fs24">￥</text>
								<text class="fs32">{{orderPrice}}</text>
							</view>
						</view>
						<text class="light-gray fs24 fw400">共{{goodsAccount}}件 已优惠￥{{discountAmount}}</text>
					</view>
				</view>
				<view class="line-gradient-btn" @click="handleOperate">
					{{ currentStatus === 1 ? '结算商品' : '删除商品' }}
				</view>
			</view>
		</view>
		
		<uni-popup :position="'middle'"  class="middle-wrap" :show="showDeleteGood" @hidePopup="hideDeletePopup">
			<view class="sys-mes-nofity">
				<view class="top u-f u-f-aic u-f-jcc">删除商品</view>
				<view class="mg-top-38 deep-gray u-f u-f-jcc u-f-aic">
					<text>确认将这{{goodsAccount}}个宝贝删除吗?</text>
				</view>
				<view class="bot u-f u-f-jcc u-f-aic" @click="confirmDeleteGood"><text class="confirm">删除</text></view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import uniNumber from "../.././components/uni-number-box/uni-number-box.vue"
	import uniPopup from "../.././components/uni-popup/uni-popup.vue"
	import shopCarItem from "../.././components/shop-car-item/shop-car-item.vue"
	export default {
		components: {
			uniNumber,
			uniPopup,
			shopCarItem
		},
		data() {
			return {
				number: 1,
				currentStatus: 1,
				showDeleteGood: false,
				pageNum: 1,
				pageSize: 10,
				shopCarInfo: [],
				discountAmount: 0,
				orderPrice: 0
			}
		},
		computed: {
			allSelect() {
				return this.shopCarInfo.every(item => item.isChecked)
			},
			goodsAccount() {
				return this.shopCarInfo.reduce((num, item) => num += item.goodsNum == null ? 0 : item.goodsNum, 0)
			}
		},
		onLoad() {
			this.getReviewsList()
		},
		methods: {
			async getReviewsList() {
				let data = {
					"pageNum": this.pageNum,
					"pageSize": this.pageSize,
				}
			
				let res = await this.$http.post('/api/client/shopping/list', data, {token: true, checkToekn: true})
				let resData = res.data.data.rows
				let shopCarInfo = resData.map(item => { return Object.assign(item, {isChecked: true})})
				this.shopCarInfo = shopCarInfo;
				console.log("this.shopCarInfo", this.shopCarInfo)
				this.handleDiscountAmount()
			},
			async editShopCarNum(value) {
				let data = {
				  "shopCarId": value.shopCarId,
				  "goodsId": value.goodsId,
				  "goodsNum": value.goodsNum
				}
			
				let res = await this.$http.post('/api/client/shopping/editShopGoodsNum', data, {token: true, checkToekn: true})
				let resData = res.data.data
				
				this.getReviewsList()
			},
			async delGoods(value) {
				let selectList = this.shopCarInfo.filter(item => item.isChecked)
				let shopIdList = selectList.map(item => item.shopCarId)
				let data = { 'shopIdList': shopIdList }
				
				this.hideDeletePopup()
				uni.showLoading({ title: '正在删除中' });
				let res = await this.$http.post('/api/client/shopping/delShopCar', data, {token: true, checkToekn: true})
				let resData = res.data
				uni.hideLoading()
				uni.showToast({
					title: resData.msg,
					icon: 'none',
					duration: 500
				})
				this.getReviewsList()
			},
			async settlement(value) {
				let selectList = this.shopCarInfo.filter(item => item.isChecked)
				let shopIdList = selectList.map(item => item.shopCarId)
				let data = {
					"lon": this.User.curcity.lng,
					"lat": this.User.curcity.lat,
					"shopCarIdList": shopIdList,
				}
				
				uni.showLoading({ title: '正在结算...' });
				let res = await this.$http.post('/api/client/shopping/settlement', data, {token: true, checkToekn: true})
				let resData = res.data.data
				
				console.log("resData", resData)
		
				uni.hideLoading()
				this.User.navigate({ url: '/pagesB/shop-sure-bill/shop-sure-bill?id=' + resData+'&isShopCarSettle=' + true }, "navigateTo", true)
			},
			async handleDiscountAmount() {
				let selectList = this.shopCarInfo.filter(item => item.isChecked)
				let shopIdList = selectList.map(item => item.shopCarId)
				let data = {
					"shopCarIdList": shopIdList,
				}
				
				let res = await this.$http.post('/api/client/shopping/calculateDiscountAmount', data, {token: true, checkToekn: true})
				let resData = res.data.data

				this.discountAmount = resData.discountAmount
				this.orderPrice = resData.orderPrice
			},
			editShopCar() {
				if (this.currentStatus === 1) {
					this.currentStatus = 2
				} else {
					this.currentStatus = 1
				}
			},
			handleOperate() {
				let isSelect = this.shopCarInfo.some(item => item.isChecked)
				if (!isSelect) {
					uni.showToast({
						title: '请先选择商品',
						icon: 'none',
						duration: 500
					})
					return
				}
				
				if (this.currentStatus === 1) {
					// 结算商品
					this.settleGoods()
				} else {
					// 删除商品
					this.showDeletePopup()
				}
			},
			showDeletePopup() {
				this.showDeleteGood = true;
			},
			hideDeletePopup() {
				this.showDeleteGood = false;
			},
			confirmDeleteGood() {
				this.delGoods()
			},
			settleGoods() {
				this.settlement()
			},
			handleChecked(value) {
				let { shopCarId, isChecked } = value;
				this.shopCarInfo = this.shopCarInfo.map(item => item.shopCarId === shopCarId ? Object.assign(item, {isChecked: isChecked}) : item)
				this.handleDiscountAmount()
			},
			handleChangeNum(value) {
				let { shopCarId, goodsId, goodsNum } = value;
				this.editShopCarNum(value)
			},
			handleAllSelect() {
				if (this.allSelect) {
					this.shopCarInfo = this.shopCarInfo.map(item => Object.assign(item, {isChecked: false}))
					this.discountAmount = 0
					this.orderPrice = 0
				} else {
					this.shopCarInfo = this.shopCarInfo.map(item => Object.assign(item, {isChecked: true}))
					this.handleDiscountAmount()
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FAFBFF;
	}
</style>

<style lang="scss" scoped>
	.shop-car {
		.shop-car-item {
			padding: 20rpx 10rpx;
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
		}
	}
	.fix-bot {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 333;
		.content {
			background-color: #ffffff;
			padding: 10rpx 24rpx;
		}
	}
	
	.line-gradient-btn {
		background: linear-gradient( 90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		text-align: center;
		padding: 22rpx 120rpx;
		color: #ffffff;
	}
	
	.sys-mes-nofity {
		padding-bottom: 50rpx;
		position: relative;
		width: 100%;
		border-radius: 14rpx;
		background-color: #ffffff;
		
		.top {
			width: 100%;
			background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
			border-radius: 14rpx;
			height: 148rpx;
		}
	
		.bot {
			margin-top: 72rpx;
	
			.confirm {
				padding: 10rpx 60rpx;
				border-radius: 30rpx;
				color: #ffffff;
				background-color: #FF4502;
			}
		}
	}
	.middle-wrap :deep(.uni-popup-insert) {
	    width: 624rpx!important;
	}

</style>
