<template>
	<view class="goods-navbar">
		<view class="navbar">
			<view class="navbar-left">
				<view class="item" @click="$emit('leftClick', 0)">
					<!-- 首页 -->
					<view class="iconfont icon-fanhuishouye"></view>
					<view class="label">首页</view>
				</view>
				<button class="item contact" @click="$emit('leftClick', 1)" open-type="contact">
					<!-- 客服 -->
					<view class="iconfont icon-kefu"></view>
					<view class="label">客服</view>
				</button>
				<view class="item cart" @click="$emit('leftClick', 2)">
					<!-- 购物车 -->
					<view class="iconfont icon-gouwuche"></view>
					<view class="label">购物车</view>
					<view class="badge" v-text="kindCount"></view>
				</view>
			</view>
			<view class="navbar-right">
				<view class="control" @click="$emit('rightClick', 0)"><slot name="left"></slot></view>
				<view class="control" @click="$emit('rightClick', 1)"><slot name="right"></slot></view>
			</view>
		</view>
		<!-- 安全区域 -->
		<cm-safe-area-bottom></cm-safe-area-bottom>
	</view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
	name: 'goods-navbar',
	data() {
		return {}
	},
	computed: {
		...mapGetters(['kindCount'])
	}
}
</script>

<style lang="scss" scoped>
.goods-navbar {
	@extend .fixed-bottom;
	background-color: #fff;
	border-top: 1rpx solid #efefef;

	.navbar {
		width: 100%;
		min-height: 100rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		@extend .cm-flex-between;

		.navbar-left {
			flex: 1;
			@extend .cm-flex-around;
			margin-right: 16rpx;
			.item {
				flex: 1;
				@extend .cm-flex-center;
				flex-direction: column;
				color: #333333;

				.iconfont {
					font-size: 36rpx;
				}

				.label {
					margin-top: 4rpx;
					font-size: 22rpx;
				}

				&.contact {
					margin: 0;
					padding: 0;
					line-height: inherit;
					background: #fff;
					&::after {
						display: none;
					}
				}

				&.cart {
					position: relative;
					.badge {
						top: -8rpx;
						right: 0;
						position: absolute;
						width: 36rpx;
						height: 36rpx;
						background-color: #ff457b;
						border-radius: 18rpx;
						@extend .cm-flex-center;
						font-size: 22rpx;
						color: #fff;
					}
				}
			}
		}

		.navbar-right {
			width: 420rpx;
			@extend .cm-flex-between;

			.control {
				width: 210rpx;
				height: 84rpx;

				&:first-child {
					@extend .cm-flex-center;
					flex-direction: column;
					border-radius: 40rpx 0 0 40rpx;
					background-color: #ffeff4;
				}

				&:last-child {
					@extend .cm-flex-center;
					flex-direction: column;
					border-radius: 0 40rpx 40rpx 0;
					background: linear-gradient(92deg, #fc32b4 0%, #f83c6c 100%);
				}
			}
		}
	}
}
</style>
