<template>
	<view class="button-group">
		<view v-for="(item, index) in btns">
			<!-- 未被选中的按钮 -->
			<view
				:class="[value === item.value ? 'checkeded_button' : 'uncheckeded_button', btns.length > 5 ? 'width-exceedfive' : 'width-five']"
				@click="tapButton(item.value)"
			>
				{{ item.label }}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'lixx-buttongroup',
	props: {
		btns: {
			type: Array,
			value: () => {}
		}, // 按钮配置项
		value: {
			type: String
		}
	},
	onLoad() {},
	computed: {},
	watch: {},
	methods: {
		tapButton(value) {
			this.$emit('input', value);
		}
	}
};
</script>

<style scoped lang="scss">
.button-group {
	display: flex;
	justify-content: space-between;
	margin: 0 32rpx;
	box-sizing: border-box;
}
.width-five {
	width: 124rpx;
	padding: 0 24rpx;
	margin: 0 5rpx;
}
.width-exceedfive {
	padding: 0 10rpx;
	width: 110rpx;
	margin: 0 5rpx;
}

.checkeded_button {
	text-align: center;
	background-color: #ffffff !important;
	color:  #CA151F !important;
	border: none !important;
	border-radius: 10rpx;
	height: 60rpx;
	line-height: 56rpx;
	font-size: 28rpx;
	box-sizing: border-box;
	border: 1rpx solid #fff !important;
}
.uncheckeded_button {
	text-align: center;
	// background-color: #9C222F !important;
	background: linear-gradient(0deg, rgba(202,21,31,0), rgba(202,21,31,0.87));
	color: #fff !important;
	border-radius: 10rpx;
	height: 60rpx;
	line-height: 56rpx;
	box-sizing: border-box;
	font-size: 28rpx;
	border: 1rpx solid #fff !important;
}
</style>
