<template>
	<view class="shop-cart">
		<view class="u-m-32">
			<view class="u-text-right nr" v-if="cartLists.length > 0" @click="isEdit = !isEdit">{{ !isEdit ? '编辑' : '完成' }}</view>
			<view class="u-m-t-40" v-for="(item, index) in cartLists" :key="index">
				<view class="bg-white br16 u-p-24 row">
					<view class="select checkbox">
						<checkbox  type="circle" class="checkbox" :value="item.cart_id + ''" :checked="item.selected == 1" @click="changOneSelect(item.cart_id, item.selected)"></checkbox>
					</view>
					<view class="row flex1 u-col-top">
						<view>
							<u-image :src="item.img" width="160" height="160" border-radius="8"></u-image>
						</view>
						<view class="u-m-l-16">
							<navigator :url="`/pages/shop/shop?id=${item.goods_id}`" hover-class="none">
								<view class="u-line-2">{{ item.name }}</view>
							</navigator>
							<view class="sm text-999 u-m-t-8 attr u-text-center u-p-l-16 u-p-r-16 u-p-6-8 u-p-b-8">
								<text>味浓芳香</text>
								<text class="u-m-l-8 u-m-r-8">|</text>
								<text>味浓芳香</text>
								<text class="u-m-l-8 u-m-r-8">|</text>
								<text>味浓芳香</text>
							</view>
							<view class="u-m-t-16 row-between">
								<view class="primary">
									<price-format :price="item.price" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
								</view>
								<view>
									<view v-if="!isEdit">
										<u-number-box :disabled="item.cart_status != 0" :value="item.goods_num" :min="1" :max="item.item_stock" @change="countChange($event, item.cart_id, item)" />
									</view>
									<view v-if="isEdit" @click.stop="deleteCartGoods(item.cart_id)">
										<u-icon name="trash" size="32" color="#999"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="!(cartType != 2)" class="cart-null column-center mb20" style="padding: 80rpx 0 50rpx" v-show="!(cartType != 2)">
				<image class="img-null" :src="cloudPath + 'img/cart_null.png'"></image>
				<view class="muted mb20">购物车暂无任何商品~</view>
			</view>
		</view>
		
		<view v-if="!isLogin" class="login column-center u-m-t-80">
			<image class="img-null" :src="cloudPath + 'img/cart_null.png'" width="1200" height="1200" mode="aspectFill"></image>
			<view class="muted mt20">登录后才能查看购物车哦</view>
			<navigator class="mt20 br60 row-center btn text-default" url="/pages/login/login" hover-class="none">
				<text>去登录</text>
			</navigator>
		</view>
		
		<view class="fixed footer bg-white w-full row-between u-col-center px32" v-if="!(cartType != 1)">
			<view>
				<!-- <u-checkbox shape="circle" :active-color="themeColor">全选</u-checkbox> -->
				<checkbox-group class="row checkbox" @change="changeAllSelect">
					<checkbox id="checkAll" value="all" :checked="isSelectedAll"></checkbox>
					<label for="checkAll" class="ml10">全选</label>
				</checkbox-group>
			</view>
			<view class="row">
				<view class="row-center">
					<view>合计：</view>
					<view class="primary u-m-l-8" style="margin-top: -8rpx;">
						<price-format :price="totalPrice" :subscriptSize="32" :firstSize="40" :secondSize="32"></price-format>
					</view>
				</view>
				<view class="u-m-l-24">
					<u-button @click="goToConfirm" hover-class="none" :customStyle="{width: '228rpx', height: '80rpx', backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0', borderRadius: '64rpx'}" :hair-line="false">结算</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCartList,
		changeCartSelect,
		changeGoodsCount,
		deleteGoods,
	} from "@/api/store";
	import {
		mapGetters,
		mapActions
	} from "vuex";
	export default {
		data() {
			return {
				isEdit: false,
				cartType: 0,
				isShow: false,
				cartLists: [],
				delPopup: false,
				totalPrice: "",
			}
		},
		
		onPullDownRefresh() {
			this.getCartListFun();
		},

		onShow() {
			this.isLogin && this.getCartListFun();
		},

		methods: {
			...mapActions(["getCartNum"]),

			// 获取购物车商品
			getCartListFun() {
				getCartList().then((res) => {
					uni.stopPullDownRefresh({
						success: (res) => {},
					});

					if (res.code == 1) {
						let {
							lists,
							total_amount
						} = res.data;
						let cartType = 0;

						if (lists.length == 0) {
							cartType = 2;
						} else {
							cartType = 1;
						}

						this.cartLists = lists;
						this.cartType = cartType;
						this.totalPrice = total_amount;
						this.isShow = true;
						this.getCartNum();
					}
				});
			},

			// 购物车数组加减
			countChange({
				value
			}, cartId, item) {
				console.log("countChange", value, cartId, item);
				changeGoodsCount({
					cart_id: cartId,
					goods_num: value,
				}).then((res) => {
					if (res.code == 1) {
						this.getCartListFun();
					} else {
						this.getCartListFun();
					}
				});
			},

			// 删除购物车商品
			deleteCartGoods(cartId) {
				uni.showModal({
					title: "温馨提示",
					content: "是否确认删除该商品？",
					success: ({ confirm }) => {
						if (!confirm) return;
						deleteGoods({
							cart_id: cartId,
						}).then((res) => {
							if (res.code == 1) {
								this.getCartListFun();
							}
						});
					},
				});
			},
			
			// 选择单个商品
			changOneSelect(cartId, selected) {
				selected = !selected;
				this.changeCartSelectFun([cartId], selected);
			},
			
			// 更改全选状态
			changeAllSelect() {
				const {
					isSelectedAll,
					cartLists
				} = this
				let cartid = cartLists.map((item) => item.cart_id);
				this.changeCartSelectFun(cartid, !isSelectedAll);
			},

			changeCartSelectFun(cartId, selected) {
				console.log("selected ", selected);
				changeCartSelect({
					cart_id: cartId,
					selected: selected ? 1 : 0,
				}).then((res) => {
					if (res.code == 1) {
						this.getCartListFun();
					}
				});
			},

			// 去结算
			goToConfirm() {
				let {cartLists} = this
				let goods = []
				cartLists.forEach((item) => {
					if (item.selected && item.cart_status == 0) {
						goods.push({
							item_id: item.item_id,
							num: item.goods_num,
						});
					}
				});
				console.log("this.cartList1>>>", goods);
				
				if (goods.length == 0) return this.$toast({
					title: "您还没有选择商品哦",
				});
				uni.navigateTo({
					url: "/pages/order_now/order_now?data=" +
						encodeURIComponent(
							JSON.stringify({
								goods,
								type: "cart",
							})
						),
				});
			},
		},

		computed: {
			...mapGetters(["cartNum"]),
			nullSelect() {
				let index = this.cartLists.findIndex(
					(item) => item.selected == 1 && item.cart_status == 0
				);

				if (index == -1) {
					return true;
				}

				return false;
			},
			isSelectedAll() {
				let index = this.cartLists.findIndex(
					(item) => item.selected == 0 && item.cart_status == 0
				);

				if (index == -1) {
					return true;
				}

				return false;
			},
		},

	}
</script>

<style lang="scss">
	.shop-cart {
		padding-bottom: 200rpx;
	}
	
	.attr {
		background-color: #F5F5F5;
		border-radius: 88rpx;
	}
	
	.fixed {
		height: 112rpx;
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
	}
</style>