<template>
	<view class="tab-nav-box">
		<view 
			class="tab-list acea-row row-between" 
			:style="{ color: dColor,fontSize: fontSize + 'rpx' }">
			<view 
				class="tab-item" 
				:class="active == index ? 'active' : '' " 
				v-for="(item,index) in tabList" :key="index"
				@click="tabItemClick(index)"
			>
			{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			tabList: {
				type: Array,
				default: ()=> []
			},
			dColor: {
				type: String,
				default: '#9F9F9F'
			},
			fontSize: {
				type: Number,
				default: 32
			}
		},
		data(){
			return {
				active: 0
			}
		},
		methods:{
			tabItemClick(i){
				this.active = i
				this.$emit('tabItemClick',i)
			},
			tabItemClick(i){
				this.active = i
				this.$emit('tabItemClick',i)
			},
		}
	}
</script>

<style lang="less" scoped>
	.tab-nav-box{
		width: 100%;
		padding: 8rpx 80rpx;
		background: #fff;
		border-bottom: 2rpx solid #F5F5F5;
		.tab-list{
			width: 100%;
			height: 100%;
			.tab-item{
				position: relative;
				&::after{
					display: block;
					content: '';
					width: 48rpx;
					height: 4rpx;
					border-radius: 2rpx;
					background: #06050A;
					position: absolute;
					bottom: -8rpx;
					left: 50%;
					opacity: 0;
					margin-left: -24rpx;
					transform: scaleX(0);
					transition: all .2s ease, opacity .15s ease;
				}
				&.active{
					color: #06050A;
					&::after{
						opacity: 1;
						transform: scaleX(1);
					}
				}
			}
		}
	}
</style>
