<template>
	<view>
		<u-popup :show="cartShow" round="10" mode="bottom" @close="closeCart" zIndex="10070">
			<view class="p-24">
				<!-- title -->
				<view class="flex msb md">
					<view class="fz32">购物车</view>
					<view class="fz24 fcb flex md" @click="showModal = true">
						<u-icon name="trash"></u-icon>
						<text>清空购物车</text>
					</view>
				</view>
				<!-- cartBox -->
				<view class="ofa m-t-12 m-b-12 flex column" style="max-height: 60vh;">
					<u-empty v-if="cartList.length === 0" mode="car" icon="/static/car.png" />
					<!-- cart -->
					<cart v-for="(item,index) in cartList" :key="index" :index="index"/>
				</view>
				<!-- 占位 -->
				<view class="extra-space"></view>
			</view>
		</u-popup>
		<!-- 清空购物车按钮 模态框 -->
		<u-modal :show="showModal" @confirm="confirm" ref="uModal" confirmColor="#d43030" :showCancelButton="true"
			:closeOnClickOverlay="true" @close="showModal=false" @cancel="showModal=false" content="确认清空购物车吗"></u-modal>
	</view>
</template>

<script>
	export default {
		name: "cartFold",
		data() {
			return {
				showModal: false, //清空购物车模态框 显隐
			}
		},
		computed: {
			//购物车列表
			cartList() {
				return this.$store.state.cartList
			},
			//购物车折叠框 显隐
			cartShow() {
				return this.$store.state.cartShow
			}
		},
		methods: {
			//清空购物车
			confirm() {
				this.$store.state.cartList = [] //清空购物车列表
				this.showModal = false //关闭模态框
			},
			//关闭购物车折叠面板
			closeCart() {
				this.$store.state.cartShow = false
			}
		},
		watch: {},
		onReady() {}
	}
</script>

<style lang="scss" scoped>
	.extra-space {
		height: 156rpx;
	}
</style>