<template>
	<view>
		<view :style="{backgroundColor:background?background:''}" class="sele_Bar mar">
			<view :style="{transform:`translateX(calc(${barIndex}*100%))`,width:`calc((100% - 20rpx) / ${seleBarData.length})`,backgroundColor:moveBackground?moveBackground:''}" class="move_item"></view>
			<view v-for="(item,index) in seleBarData" @tap="seleBarFn(item,index)" :style="{color:barIndex==index? 'white' : ''}"
				class="sele_Bar_item">
				{{item.lable}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "seleBar",
		props: {
			moveBackground:{
				type:String,
				default:''
			},
			seleBarData: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		created() {
			console.log('%c 组件参数↓', 'color:red;font-size:50px')
			console.log(this.seleBarData)
		},
		onLoad() {

		},
		data() {
			return {
				barIndex:0
			};
		},
		methods:{
			seleBarFn(item,index) {
				this.barIndex = index
				this.$emit('seleBarFn',item,index)
			}
		}
	}
</script>

<style scoped>
	.move_item {
		position: absolute;
		left: 10rpx;
		/* width: calc((100% - 20rpx) / 3); */
		height: 60rpx;
		background: #2866FF;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		z-index: 0;
		transition: all .3s;
	}
	.sele_Bar_item {
		flex: 1;
		height: 60rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		z-index: 1;
		transition: color .4s;
	}

	.sele_Bar {
		/* background-color: #18B566; */
		/* margin: 31rpx 40rpx; */
		padding: 10rpx;
		display: flex;
		position: relative;
		background-color: #FFFFFF;
		border-radius: 10px;
		margin: auto;
		margin-top: 20rpx;
		width:  calc(100% - 54rpx );
	}
</style>