<template>
	<div class="cart-ft_bx">
		<div class="cart-ct_bx">
			<view class="cart-lf_bx">
				<view class="cart-dot_bx">
					<i class="iconfont icongouwuche"></i>
					<view class="count" v-if="countNumber==0&&count.bigLength>0||countNumber==0&&count.smallLength>0">
						{{ count.bigLength }}<text v-if="count.smallLength>0">/{{count.smallLength}}</text>
					</view>
					<text class="count" v-if="countNumber > 0">
						{{ countNumber }}
					</text>
				</view>
				<view class="price" v-if="!offPrice"> ￥{{ price }} </view>
			</view>
			<view class="cart-rg_bx" @click="confirmEvent">
				选好了
			</view>
		</div>
	</div>
</template>

<script>
export default {
	name: "FooterCart",
	props: {
		offPrice:{
			type: Boolean,
			default: false
		},
		price: {
			type: Number,
			default: 0
		},
		countNumber: {
			type: Number,
			default: 0
		},
		count: {
			type: Object,
			default: {}
		}
	},
	methods: {
		confirmEvent() {
			this.$emit("confirm");
		}
	}
};
</script>

<style lang="scss" scoped>
.cart-ft_bx {
	width: 702px;
	height: 88px;
	background-color: #444444;
	position: fixed;
	bottom: 15px;
	border-radius: 50px;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 200;
	overflow: hidden;
	& .cart-ct_bx {
		display: flex;
		align-items: center;
		height: 100%;
		& .cart-lf_bx {
			flex: 1;
			display: flex;
			align-items: center;
			& .cart-dot_bx {
				position: relative;
				width: 72px;
				height: 72px;
				border-radius: 50%;
				background-color: #3385ff;
				text-align: center;
				line-height: 72px;
				margin-left: 6px;
				.iconfont {
					font-size: 40px;
					color: #fff;
				}
				.count {
					position: absolute;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 30upx;
					padding: 0 10upx;
					right: 0;
					top: 0;
					transform: translateX(50%);
					color: #fff;
					background-color: red;
					border-radius: 10upx;
					font-size: 24upx;
				}
			}
			& .price {
				font-weight: 500;
				color: #ffffff;
				font-size: 36px;
				padding-left: 24px;
			}
		}
		& .cart-rg_bx {
			height: 100%;
			width: 200px;
			text-align: center;
			font-size: 28px;
			color: #ffffff;
			background-color: #3385ff;
			line-height: 88px;
		}
	}
}
</style>
