<template>
  <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
  <view class="main">
  	  <!-- 头部区域 -->
  		<view class="head" :style="{'padding-top':headerHeight+'px'}" >
  			<view class="head_location head_location_active" @click="location()"><text class="location_title">人间都汇·汤泉养生</text></view>
  			<view class="head_ul">
				<view class="head_l">
					<view class="head_q">购物车</view>
					<view class="head_w">我常买</view>
				</view>
				<view class="head_r">
					<view class="head_li" @click.stop="OpenCoupon()">优惠券(3）</view>
					<view class="head_li" :class="showEdit?'head_edit':''" @click.stop="edit">{{showEdit?'退出管理':'管理'}}</view>
				</view>
			</view>
  		</view>
		<view class="cont">
			<view class="head_fixed" :style="{'height':75+headerHeight+'px'}">下拉刷新...</view>
			<view class="cart">
				<view style="height: 10rpx;"></view>
				<uni-swipe-action>
					<uni-swipe-action-item v-for="(item,index) in cartList"  :key="index" :right-options="options" @click="removeCart(1,item)">
						<view class="cart_item" v-if="item.type == 1">
							<view class="cart_selected" @click="checkedShop(item)">
								<view :class="item.isSelected === '1'?'cart_selected_true':'cart_selected_false'">
									<image v-if="item.isSelected" src="../../static/selected.png"></image>
								</view>
							</view>
							<view class="cart_shop">
								<image class="cart_shop_img" :src="item.imgUrl" mode="widthFix"></image>
							</view>
							<view class="cart_shop_cont">
								<view class="cart_title"><text class="cart_text">{{item.title}}</text></view>
								<view class="cart_desc">{{item.desc}}</view>
								<view class="cart_bottom">
									<view class="cart_price price">{{item.price}}<text class="market_name prices">59.9</text></view>
									<view class="cart_counter" v-if="showEdit" @click="removeCart(1,item)">
										<view class="cart_remove">删除</view>
									</view>
									<view class="cart_counter" v-else>
										<view class="cart_counter_btn border_l" @click="editAmount(1,item)">
											<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
										</view>
										<view class="cart_counter_center">{{item.amount}}</view>
										<view class="cart_counter_btn border_r" @click="editAmount(2,item)">
											<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="cart_items" v-if="item.type == 2">
							<view class="cart_t">
								<view class="cart_selected">
									<view :class="item.isSelected?'cart_selected_true':'cart_selected_false'">
										<image v-if="item.isSelected" src="../../static/selected.png"></image>
									</view>
								</view>
								<view class="cart_view_scroll">
									<view class="cart_scroll">
										<scroll-view class="cart_scroll_ul" :scroll-with-animation="true" :enhanced="true"  :show-scrollbar="false" scroll-x="true">
											<view class="cart_scroll_li" v-for="(i,index) in item.list">
												<view class="cart_scroll_img">
													<image class="cart_scroll_img_url" :src="i.imgUrl" mode="widthFix"></image>
												</view>
												<view class="cart_scroll_title">{{i.title}}</view>
												<view class="cart_scroll_price price">{{i.price}}<text class="market_name prices">59.9</text></view>
											</view>
											
										</scroll-view>
									</view>
									<view class="cart_bottom">
										<view class=""></view>
										<view class="cart_counter" v-if="showEdit" @click="removeCart(1,item)">
											<view class="cart_remove">删除</view>
										</view>
										<view class="cart_counter" v-else>
											<view class="cart_counter_btn border_l">
												<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
											</view>
											<view class="cart_counter_center">1</view>
											<view class="cart_counter_btn border_r">
												<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
							
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
				<!-- 失效商品 -->
				<!-- <view class="cart_lose">
					<view class="cart_lose_top">
						<view class="cart_lose_top_l">共5款失效商品</view>
						<view class="cart_lose_top_r">一键清空</view>
					</view>
					<view class="cart_lose_bottom">
						<view class="cart_lose_img">
							<view class="cart_lose_bcg">
								<view class="cart_lose_text">商品已下架</view>
							</view>
							<image class="cart_lose_img_url" src="../../static/Mask.png" mode="widthFix"></image>
						</view>
						<view class="cart_lose_ly">
							<view class="cart_lose_title">糖醋排骨</view>
							<view class="cart_lose_desc">商品下架了</view>
						</view>
					</view>
					<view class="cart_lose_bottom">
						<view class="cart_lose_img">
							<view class="cart_lose_bcg">
								<view class="cart_lose_text">商品已下架</view>
							</view>
							<image class="cart_lose_img_url" src="../../static/Mask.png" mode="widthFix"></image>
						</view>
						<view class="cart_lose_ly">
							<view class="cart_lose_title">糖醋排骨</view>
							<view class="cart_lose_desc">商品下架了</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<template v-if="!showEdit">
			<recomGoods v-if="token" :apiType="5"></recomGoods>
		</template>
		<view style="height: 200rpx;"></view>
		<view class="footer">
			<view class="footer_l">
				<view class="footer_selected"  @click="allChecked">
					<view :class="allCheckedShow?'footer_selected_true':'footer_selected_false'">
						<image v-if="allCheckedShow" src="../../static/selected.png"></image>
					</view>
					<view class="footer_text">全选</view>
				</view>
			</view>
			<view class="footer_r">
				<view class="footer_edit" v-if="showEdit">
					<view class="footer_edit_li footer_edit_li_border" @click="removeCart(2)">一键清空</view>
					<view class="footer_edit_li" @click="removeCart(3)">删除</view>
				</view>
				<block v-else>
					<view class="footer_v">
						<view class="footer_text">合计:</view>
						<view class="footer_price">{{totalPrice}}</view>
					</view>
					<view class="footer_btn" :class="!totalPrice?'opy':''" @click="orderConfirm">去下单</view>
				</block>
			</view>
		</view>
		
		<uni-popup ref="couponPopup" type="bottom" @change="changeCoupon">
		    <view class="shop_open shop_open_bcg">
				<view class="shop_open_title">优惠券<view class="shop_open_close"  @click="OpenCoupon()"><image src="../../static/order/close.png" mode="widthFix"></image></view></view>
				<view class="shop_open_desc">可使用券(2)</view>
				<view class="coupon_cont">
					<view class="coupon_item">
						<view class="coupon_item_l">
							<view class="coupon_item_absolute"></view>
							<view class="coupon_item_v">
								<view class="coupon_item_price">5</view>
								<view class="coupon_item_desc">满39可用</view>
							</view>
						</view>
						<view class="coupon_item_border"></view>
						<view class="coupon_item_r">
							<view class="coupon_item_r_l">
								<view class="coupon_item_name">新人限时券</view>
								<view class="coupon_item_time">今日23:59到期</view>
							</view>
							<view class="coupon_item_r_r">领取</view>
						</view>
					</view>
					<view class="coupon_item">
						<view class="coupon_item_l">
							<view class="coupon_item_absolute"></view>
							<view class="coupon_item_v">
								<view class="coupon_item_price">10</view>
								<view class="coupon_item_desc">满59可用</view>
							</view>
						</view>
						<view class="coupon_item_border"></view>
						<view class="coupon_item_r">
							<view class="coupon_item_r_l">
								<view class="coupon_item_name">新人限时券</view>
								<view class="coupon_item_time">今日23:59到期</view>
							</view>
							<view class="coupon_item_r_r">领取</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
  </view>
</template>

<script setup>
import recomGoods from '@/components/recomGoods/recomGoods.vue';
import { ref,computed } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
const counterStore = useCounterStore(); // 使用 Store
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,token } = storeToRefs(counterStore);
const couponPopup = ref(null);
const couponShow = ref(false);
const show = ref(false);
const showEdit = ref(false);
const cartList = ref([]);
const allCheckedShow = ref(false)
const options = ref([
  {
    text: '删除',
    style: {
      backgroundColor: '#FD4955'
    }
  }
]);
const OpenCoupon =() =>{
	couponShow.value ? couponPopup.value.close():couponPopup.value.open()
};
const changeCoupon = (e)=>{
	couponShow.value = e.show;
	show.value = e.show;
};
const edit = (e)=>{
	showEdit.value ? showEdit.value = false:showEdit.value = true;
};
const onClick = (e) => {
   console.log('点击删除', e);
};
const goDetail= ()=>{
	uni.navigateTo({
		url:`/shopProDetail/detail/detail`
	})
}
const orderConfirm = ()=>{
	uni.navigateTo({
		url:`/order/orderConfirm/orderConfirm`
	})
}
const cartData =()=>{
	let data = [{
		id:'001',
		imgUrl:'../../static/Mask.png',
		title:'新疆大盘鸡',
		desc:'比加入时下降1.1元',
		amount:1,
		price:'1',
		type:'1',
		isSelected:'1'
	},{
		id:'002',
		imgUrl:'../../static/Mask.png',
		title:'萝卜片炒腊肉',
		desc:'比加入时下降4.5元',
		amount:1,
		price:'1',
		type:'1',
		isSelected:'1'
	},{
		id:'003',
		imgUrl:'../../static/Mask.png',
		title:'盘龙鳝',
		desc:'比加入时下降1.5元',
		amount:5,
		price:'68',
		type:'1',
		isSelected:'0'
	}]
	
	cartList.value = data;
	//更改全选状态
	const allSelected = cartList.value.every(item => item.isSelected !== undefined && item.isSelected === '1');
	if(allSelected){
		allCheckedShow.value = true;
	}else{
		allCheckedShow.value = false;
	}
};
//编辑购物车商品数量
const editAmount=(type,data)=>{
	//减数量
	if(data.amount == 1 && type == 1) return false;
	cartList.value.forEach(item=>{
		if(data.id == item.id){
			item.amount = type == 1 ? item.amount - 1 : item.amount + 1;
		}
	})
};
//全选
const allChecked=()=>{
	if(allCheckedShow.value){
		allCheckedShow.value = false;
		cartList.value.forEach((item,index)=>{
			item.isSelected = '0'
		})
	}else{
		allCheckedShow.value = true;
		cartList.value.forEach((item,index)=>{
			item.isSelected = '1'
		})
	}
};
//商品选中未选中
const checkedShop=(e)=>{
	//更改单商品选中状态
	cartList.value.forEach((item,index)=>{
		if(e.id == item.id){
			item.isSelected = item.isSelected === '1' ? '0' : '1'
		}
	})
	//更改全选状态
	const allSelected = cartList.value.every(item => item.isSelected !== undefined && item.isSelected === '1');
	if(allSelected){
		allCheckedShow.value = true;
	}else{
		allCheckedShow.value = false;
	}
};
//计算总价
const totalPrice = computed(() => {
	//过滤出选中的对象
	const selectedItems = cartList.value.filter(item => item.isSelected === '1');
	//计算总价（考虑数量）
	return selectedItems.reduce((sum, item) => sum + item.price * item.amount, 0);
});
//选中多少数件
const selectedAmount = computed(() => {
	//过滤出选中的对象
	const selectedItems = cartList.value.filter(item => item.isSelected === '1');
	return selectedItems.length
});
const removeCart=(type,item)=>{
	let content = '';
	if(type == 1){
		content = "确定要删除此商品吗?"
	}else if(type == 2){
		content = "确定要清空购物车所有商品吗?"
	}else{
		content = `确定要删除购物车选中的${selectedAmount.value}种商品吗?`
	}
	uni.showModal({
		content:content,
		confirmText:type == 2?'清空':'删除',
		confirmColor:'#F14D48',
		success: ({confirm}) => {
			if (confirm) {
				if(type == 1){
					console.log('单商品删除!');
				}else if(type == 2){
					console.log('清空购物车!');
					cartList.value = []
				}else{
					console.log('选中商品删除!');
				}
			}
		}
	})
};
const location=()=>{
	uni.navigateTo({
		url:`/userserve/location/location`
	})
}
//使用 uni.onLoad 监听页面加载
onLoad((options) => {
	cartData();
});
onShow(() => {
  
});
onPullDownRefresh(()=>{
	uni.stopPullDownRefresh();
})
onReachBottom(()=>{
	
})
</script>

<style lang="scss">
	@import './style.scss';
	.uni-swipe{
		margin: 0rpx 20rpx 0rpx 20rpx !important;
		margin-bottom: 20rpx !important;
		border-radius: 25rpx !important;
		background-color: #fff !important;
	}
</style>