<template>
	<view style="position: relative;">
		<!--顶部导航栏-->
		<view class="uni-top-tabbar">
			<scroll-view scroll-x="true" class="uni-swiper-tab" :style="{backgroundColor:bgColor}">
				<view v-for="(tabBar,index) in tabBars" :key="index" class="swiper-tab-list"
					:class="{'active': tabIndex==index}" :style="{color:tabIndex==index?selectedTextColor:textColor}"
					@tap="toggleTab(index)">
					<view class="title">
						{{tabBar.goodsCategoryName}}
					</view>
					<view class="swiper-tab-line"
						:style="{backgroundColor:tabIndex==index?selectedBottomColor:bgColor}"></view>
				</view>
			</scroll-view>
			<view class="fenlei" @tap='toggleTab(1111111111111)'>
				<image src="../../static/fenlei.png" mode=""></image>
				<view class="">
					分类
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "topTabbar",
		props: {
			//选中标签栏的索引
			tabIndex: {
				type: Number,
				default: 0
			},
			//导航栏标签内容
			tabBars: {
				type: Array,
				default: [{
						goodsCategoryName: '标签1',
						id: 1
					},
					{
						goodsCategoryName: '标签2',
						id: 2
					},
					{
						goodsCategoryName: '标签3',
						id: 3
					},
					{
						goodsCategoryName: '标签4',
						id: 4
					},
					{
						goodsCategoryName: '标签5',
						id: 5
					},
					{
						goodsCategoryName: '标签6',
						id: 6
					}
				]
			},
			//选中时底部横条颜色
			selectedBottomColor: {
				type: String,
				default: '#30c58d'
			},

			//导航区背景颜色
			bgColor: {
				type: String,
				default: '#ffffff'
			},

			//选中时文字颜色
			selectedTextColor: {
				type: String,
				default: '#343434'
			},

			//默认文本颜色
			textColor: {
				type: String,
				default: '#7d7e80'
			}
		},
		data() {
			return {}
		},
		methods: {
			//点击导航栏标签触发
			toggleTab(index) {
				this.$emit("toggleToptab", index)
			}
		}
	}
</script>
<style lang="scss">
	.fenlei {
		width: 25%;
		display: inline-block;
		background-color: #fff;
		line-height: 70rpx;
		font-weight: normal;
		height: 75rpx;
		text-align: center;
		color: #7d7e80;
		position: absolute;
		right: 0;
		top: 0;

		view {
			position: absolute;
			right: 25%;
		}

		image {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			left: 25%;
			top: 50%;
			transform: translateY(-55%);
		}
	}

	.title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

	.uni-top-tabbar {
		/* 以下3项设置用于开启底部阴影显示 */
		/* position: relative;
		z-index: 1;
		overflow: visible; */
		width: 75%;

		.uni-swiper-tab {
			height: 75rpx;
			//设置底部阴影
			//box-shadow: rgba(170, 170, 170, 0.5) 0 2rpx 8rpx 0;
			white-space: nowrap;

			.swiper-tab-list {
				font-size: 28rpx;
				font-weight: normal;
				line-height: 70rpx;
				//设置标签宽度
				width: 25%;
				text-align: center;
				display: inline-block;
			}

			.active {
				.swiper-tab-line {
					height: 4rpx;
					width: 80rpx;
					margin: auto;
				}
			}
		}
	}
</style>
