<template>
	<view class="public_switching" :style="{'grid-template-columns': `repeat(${option.length}, 1fr)`}">
		<view 
			@click="selected(item)"
			:class="{'public_switching-i': true, 'public_switching-i-c': item.value === current} " 
			v-for="item in option" 
			:key="item.value">{{ item.lable }}</view>
	</view>
</template>

<script>
	export default {
		name:"public_switching",
		props: {
			current: {
				type: [String, Number],
				default: ''
			},
			option: {
				type: [Array],
				default: () => []
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			selected(item) {
				this.$emit('change', item.value)
			}
		}
	}
</script>

<style lang="scss" scoped>
.public_switching{
	display: grid;
	padding: 20rpx 0;
	.public_switching-i{
		flex-grow: 1;
		text-align: center;
		color: #F8F8F8;
	}
	.public_switching-i-c{
		color: #F8F8F8;
		position: relative;
		&::before{
			position: absolute;
			content: '';
			width: 38rpx;
			background-color: #fff;
			height: 4rpx;
			bottom: -20rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}
</style>