<template>
	<el-layout>
		<el-navbar v-model:top="navTop" :placeholder="true" :fixed="true" :showLeft="false" :border="true" title="购物车"></el-navbar>
		
		<el-empty v-if="!isLogin"></el-empty>
		
		<el-refresh v-if="isLogin" ref="refreshRef" @refresh="refresh" @scrolltolower="scrolltolower" :scrollHeight="getScrollHeight">
			<view class="wrapper">
				<view class="top-cart" v-if="list.length > 0">
					<view>
						<text>商品数量(<text style="color: red;">{{goodsCount}}</text>)</text>
					</view>
					<view>
						<uni-icons type="compose" color="#888" size="21" style="position: relative; top: 4rpx;"></uni-icons>
						<text @click="isEditor = !isEditor">{{ isEditor ? '完成' : '管理' }}</text>
					</view>
				</view>
				<view class="cart-list">
					<checkbox-group @change="eventHandleChange">
						<view class="cart-box" v-for="(item,index) in list" :key="index" :class="{disabled: item.disabled}">
							<view class="checkbox">
								<checkbox :value="item.id+''" :checked="item.checked" activeBackgroundColor="red" activeBorderColor="red" iconColor="#fff" style="transform:scale(0.8)" />
							</view>
							<view class="thumb-image">
								<image :src="item.photo"></image>
							</view>
							<view class="cart-info">
								<view class="goods-info">
									<view class="goods-name">{{ item.title }}</view>
									<view class="goods-sku" v-if="item.spec.length > 0">{{ item.spec }}</view>
								</view>
								<view class="price-box">
									<view class="price">
										￥<text>{{ item.price }}</text>
									</view>
									<view class="num">
										<uni-number-box :min="item.min" :max="item.max" :value="item.num" @change="onChangeNumber($event,item,index)" style="transform:scale(0.8)"></uni-number-box>
									</view>
								</view>
							</view>
						</view>
					</checkbox-group>
				</view>
				
			</view>
		</el-refresh>
		
		<view class="footer" v-if="isLogin">
			<view class="checkbox">
				<checkbox-group @change="checkboxAll">
					<checkbox value="1" activeBackgroundColor="red" activeBorderColor="red" iconColor="#fff" />
				</checkbox-group>
			</view>
			<view class="order">
				<view class="text">
					<text>合计：</text>
					<text>￥</text>
					<text>{{ total > 0 ? total.toFixed(2) : '0.00' }}</text>
				</view>
				<view v-if="!isEditor" class="btn" :class="{ active: selectedCartId.length }" @click="onBuy">去结算{{ selectedCartId.length ? "("+selectedCartId.length+")" : "" }}</view>
				<view v-if="isEditor" class="btn" :class="{ remove: selectedCartId.length }" @click="onGoodsDelete">删除商品{{ selectedCartId.length ? "("+selectedCartId.length+")" : "" }}</view>
			</view>
		</view>
		<tabbar></tabbar>
	</el-layout>
</template>

<script setup>
	import { onLoad,onShow } from "@dcloudio/uni-app";
	import { ref,computed,nextTick,watch } from "vue";
	import { storeToRefs } from 'pinia';
	import { useAppStore } from "@/store/app";
	import { useUserStore } from "@/store/user";
	import { inArray } from "@/el-ui/libs/check";
	import { navigateTo } from "@/el-ui/libs/navigate";
	
	const userStore 	= useUserStore();
	const { isLogin }   = storeToRefs(userStore);
	
	const refreshRef  = ref();
	const navTop 	  = ref(0);
	const current 	  = ref(0);
	console.log('isLogin',isLogin.value);
	onShow(()=>{
		nextTick(()=>{
			if(isLogin.value){
				init();
				getGoodsCount();
			}
		})
	});
	
	const list = ref([]);
	const init = async ()=>{
		refreshRef.value?.resetPage();
	}
	
	const onBuy = ()=>{
		if(selectedCartId.value.length <= 0){
			uni.$layer.showToast("请选择商品");
			return false;
		}
		
		navigateTo(`/pages/cart/confirm?type=cart&id=${selectedCartId.value}`);
	}
	
	const isEditor = ref(false);
	const goodsCount = ref(0);
	const getGoodsCount = ()=>{
		uni.$http.get("cart/total").then(res=>{
			if(res.code){
				goodsCount.value = res.data;
			}
		});
	}
	
	const onGoodsDelete = ()=>{
		if(selectedCartId.value.length <= 0){
			uni.$layer.showToast("请选择商品");
			return false;
		}
		
		uni.$http.post("cart/delete",{ id: selectedCartId.value }).then(res=>{
			isEditor.value = false;
			if(res.code){
				init();
				getTotal();
				uni.$layer.showToast("删除成功");
			}else{
				uni.$layer.showToast(res.msg);
			}
		});
	}
	
	const selectedCartId = ref([]);
	const total          = ref(0.00);
	const eventHandleChange = (event)=>{
		selectedCartId.value = event.detail.value;
		list.value.forEach((value,index)=>{
			value.checked = inArray(value.id,selectedCartId.value) ? true : false;
		});
		
		getTotal();
	}
	
	const checked = ref(false);
	const checkboxAll = (event)=>{
		checked.value = !checked.value;
		selectedCartId.value = [];
		list.value.forEach((value,index)=>{
			if(!value.disabled){
				value.checked = checked.value;
			}
			
			if(value.checked){
				selectedCartId.value.push(value.id);
			}
		});
		
		getTotal();
	}
	
	const onChangeNumber = (event,value,index)=>{
		uni.$http.post("cart/update",{ id: value.id, num: event }).then(res=>{
			if(res.code){
				uni.$layer.showToast("更新成功");
				list.value[index].num = res.data;
				getTotal();
			}else{
				uni.$layer.showToast(res.msg);
			}
		});
	}
	
	const getTotal = ()=>{
		total.value = 0.00;
		list.value.forEach((value,index)=>{
			if(value.checked && !value.disabled){
				total.value += parseFloat(value.price) * value.num;
			}
		});
	}
	
	const onTabs = (value)=>{
		current.value = value;
		init();
	}
	
	const getScrollHeight = computed(()=>{
		const { windowHeight } = uni.getSystemInfoSync();
		return (windowHeight - navTop.value) - 50;
	})
	
	/**
	 * 下拉刷新
	 */
	const refresh = ()=>{
		init();
	}
	
	/**
	 * 上拉加载
	 */
	const scrolltolower = (data)=>{
		if(refreshRef.value.isMore()) {
			refreshRef.value.loadingPage();
	
			setTimeout(() => {
				uni.$http.get("cart/index",{ page: data.page }).then(res=>{
					if(res.code == 1){
						if(data.page == 1) list.value = [];
						refreshRef.value.setData(res.data.total,res.data.list.length);
						list.value = list.value.concat(res.data.list);
					}else if(res.code == -1){
						if(data.page == 1 && res.data.list.length <= 0) list.value = [];
						refreshRef.value.emptyPage();  
					}
				});
			}, 100)
		}
	}
</script>

<style lang="scss" scoped>
	.top-cart {
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		view {
			padding: 20rpx 0;
			&:nth-child(1){
				
			}
			&:nth-child(2){
				
			}
		}
	}
	.wrapper {
		padding: 0rpx 20rpx 20rpx 20rpx;
		.cart-list {
			.cart-box {
				min-height: 100rpx;
				background-color: #fff;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				padding: 15px 8px;
				margin-bottom: 20rpx;
				position: relative;
				&.disabled {
					&::before {
						z-index: 2;
						position: absolute;
						content: " ";
						width: 100%;
						height: 100%;
						background-color: rgba(255, 255, 255, .5);
					}
				}
				.checkbox {
					border-radius: 50%;
				}
				.thumb-image {
					padding-right: 20rpx;
					image {
						border-radius: 10rpx;
						width: 200rpx;
						height: 200rpx;
					}
				}
				.cart-info {
					display: flex;
					flex-direction: column;
					flex: 1;
					.goods-info {
						.goods-name {
							font-size: 29rpx;
							color: #333;
							min-height: 40rpx;
							max-height: 80rpx;
							display: -webkit-box;
							overflow: hidden; 
							word-break:break-all;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
						.goods-sku {
							word-wrap: break-word;
							word-break: break-all;
							white-space:pre-wrap;
							font-size: 24rpx;
							color: #888;
							padding: 10rpx 0;
						}
					}
					.price-box {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 10rpx 0;
						.price {
							color: red;
							font-size: 24rpx;
							text {
								font-size: 30rpx;
							}
						}
					}
				}
			}
		}
	}
	.footer {
		width: 100%;
		height: 50px;
		position: fixed;
		left: 0;
		bottom: 50px;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.checkbox {
			padding-left: 20rpx;
		}
		.text {
			padding: 0 20rpx;
			text {
				font-size: 28rpx;
				&:nth-child(2){
					font-size: 24rpx;
					color: red;
				}
				&:nth-child(3){
					font-size: 35rpx;
					color: red;
				}
			}
		}
		.order {
			display: flex;
			align-items: center;
			padding-right: 20rpx;
			.btn {
				width: 200rpx;
				background-color: var(--ui-bg-color-light);
				font-size: 28rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				color: #fff;
				border-radius: 50rpx;
				&.active {
					background: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
				}
				&.remove {
					background: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
				}
			}
		}
	}
</style>