<template>
	<view class="navTabBox">
		<view class="longTab">
			<scroll-view scroll-x="true" style="white-space: nowrap; display: flex" scroll-with-animation
				:scroll-left="tabLeft">
				<view class="longItem" :style='"width:"+isWidth+"px"' :data-index="index"
					:class="index===tabClick?'click':''" v-for="(item,index) in tabTitle" :key="index" :id="'id'+index"
					@click="longClick(index)">{{item}}
					<text v-if="tabNum[index]!=0 && tabNum.length == tabTitle.length && tabNum[index] != undefined"
						style="color: #FFFFFF;font-size: 10rpx;background-color: red; width: 20rpx; height: 20rxp; border-radius: 20rpx;padding-left: 2rpx;padding-right: 2rpx;">{{tabNum[index]}}</text>
				</view>
				<view class="underlineBox" :style='"transform:translateX("+isLeft+"px);width:"+isWidth+"px"'>
					<view class="underline"></view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'navTab',
		props: {
			tabTitle: {
				type: Array,
				default: []
			},
			tabNum: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				tabClick: 0, //导航栏被点击
				isLeft: 0, //导航栏下划线位置
				isWidth: 0, //每个导航栏占位
				tabLeft: 0,
				current: 0 //当前的tab
			};
		},
		created() {
			var that = this
			// 获取设备宽度
			uni.getSystemInfo({
				success(e) {
					if (that.tabTitle.length <= 5) {
						that.isWidth = e.windowWidth / that.tabTitle.length //宽度除以导航标题个数=一个导航所占宽度	
					} else {
						that.isWidth = e.windowWidth / 5
					}
				}
			})
		},
		methods: {
			// 导航栏点击
			longClick(index) {

				if (this.tabTitle.length > 5) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				this.tabClick = index //设置导航点击了哪一个
				this.isLeft = index * this.isWidth //设置下划线位置

				if (this.current != index) {
					this.$emit('onTabClick', index); //设置swiper的第几页
					this.current = index
				}
			}
		}
	}
</script>

<style lang="scss">
	.navTabBox {
		width: 100vw;
		color: rgba(255, 255, 255, 0.50);

		.click {
			color: white;
		}

		.longTab {
			width: 100%;

			.longItem {
				height: 45px;
				display: inline-block;
				line-height: 45px;
				text-align: center;
				font-size: 28rpx;
			}

			.underlineBox {
				height: 3px;
				width: 20%;
				display: flex;
				align-content: center;
				justify-content: center;
				transition: .5s;

				.underline {
					width: 42upx;
					height: 2px;
					background-color: white;
				}
			}
		}
	}
</style>
