<template>
	<view class="footBox-container">
		<view class="footBox">
			<view class="add" @click="leftClick" v-if="leftText">
				<uni-icons type="plus" size="20" color="#fff"></uni-icons>
				{{ leftText }}
			</view>
			<view class="reg" @click="rightClick" v-if="rightText">
				<uni-icons type="scan" size="20" color="#fff" v-if="icon"></uni-icons>
				{{ rightText }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			},
			icon: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {}
		},
		methods: {
			leftClick() {
				this.$emit('leftClick')
			},
			rightClick() {
				this.$emit('rightClick')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footBox-container {
		// height: 100rpx;
		width: 100vw;
	}
	.footBox {
		position: fixed;
		left: 0px;
		bottom: 0px;
		height: 100rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		view {
			width: 100%;
			height: 100%;
			text-align: center;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.add {
			background: $uni-color-success;
		}

		.reg {
			background: $u-success-dark;
		}

		.uni-icons {
			margin-right: 8rpx !important;
			font-weight: bold;
		}
	}
</style>
