<template>
	<view class="tab-item">
		<view
			@click="handleCheckTab(item)"
			:class="['tab-content u-f u-f-fdc u-f-aic', acitveTab === item.id ? 'active' : '']">
			<text class="name fs30 fw400 mg-bot-10">{{item.name}}</text>
			<image style="width: 32rpx;height: 8rpx;" src="../.././static/common/curve.png" :style="{'visibility': acitveTab !== item.id ? 'hidden' : ''}" />
		</view>
	</view>
</template>

<script>
	export default {
		name: "CommonTab",
		props: {
			item: {
				type: Object,
				default: {}
			},
			acitveTab: {
				type: String,
				default: ''
			}
		},
		methods: {
			handleCheckTab(item) {
				this.$emit('tab-item', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-item {
		position: relative;
		.tab-content {
			.name {
				color: #999999;
				line-height: 38rpx;
			}
			&.active {
				.name {
					color: #333333;
				}
			}
		}	
	}
</style>