<template>
	<view class="bottom-control">
		<view class="cart flex-center">
			<text class="iconfont icon-Buy cart-icon"></text>
			<text class="cart-price">{{(carts.price/100).toFixed(2)}}元</text>
		</view>
		<view class="add-to-cart" @click="addFoodToCart">
			<text>加入购物车</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { defineComponent, onMounted, ref } from "vue";
	import { addToCart, cartList } from "../service/api";
	defineComponent({ name: "AddToCart" })
	const props = defineProps<{ id : any }>()
	const carts = ref({
		price: 0,
		count: 0
	})
	const loadCartList = () => {
		cartList().then((list) => {
			let count = 0, price = 0;
			list.forEach(c => {
				count += c.count;
				price += c.count * c.foodPrice
			})
			carts.value = {
				count,
				price,
			}
		})
	}
	onMounted(loadCartList)
	function addFoodToCart(){
		if(props.id){
			addToCart(props.id).then(loadCartList).catch(()=>{
				uni.showToast({
					title: '加入购物车失败'
				})
			})
		}
	}
</script>

<style scoped lang="scss">
	$bottom-height: 44px;

	.bottom-control {
		position: fixed;
		left: 30px;
		right: 30px;
		bottom: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 40px;
		box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
		line-height: $bottom-height;
		box-sizing: border-box;
	}

	.add-to-cart {}

	.add-to-cart {
		background-color: $uni-color-primary;
		font-size: 14px;
		height: 100%;
		padding: 0 20px;
		color: #fff;
		border-radius: $bottom-height;
		height: $bottom-height;
		transform: translateX(1px);
		box-sizing: border-box;

		&:active {
			background-color: $uni-color-primary-1;
		}
	}

	.cart {
		height: $bottom-height;
		color: $uni-color-primary;
		border-radius: $bottom-height;
		padding: 0 20px;

		&:active {
			background-color: #fff;
		}
	}

	.cart-icon {
		font-size: 28px;
		margin-right: 10px;
	}

	.cart-price {}
</style>