<template>
	<!-- 平分 -->
	<!-- <scroll-view v-if="equal" scroll-x class="bg-white nav nav-fixed" :style="[{ top: customBar + 'px' }]">
		<view class="flex text-center">
			<view
				class="cu-item flex-sub"
				:class="index == tabCur ? 'main-color cur' : ''"
				v-for="(item, index) in tabList"
				:key="index"
				@tap="tabSelect(index, $event)"
				:data-id="index"
			>
				<text class="text" :class="tabList.length - 1 == index ? '' : 'text-border-right'">{{ item }}</text>
			</view>
		</view>
	</scroll-view> -->
	<!-- 多个滑动 -->
	<scroll-view scroll-x class="bg-white nav nav-fixed" scroll-with-animation :scroll-left="scrollLeft" :style="[{ top: customBar + 'px' }]">
		<view class="cu-item" :class="index == tabCur ? 'main-color cur' : ''" v-for="(item, index) in tabList" :key="index" @tap="tabSelect(index, $event)" :data-id="index">
			<text class="text" :class="tabList.length - 1 == index ? '' : 'text-border-right'">{{ item }}</text>
		</view>
	</scroll-view>
</template>

<script>
export default {
	name: 'q-tab',
	data() {
		return {
			customBar: this.CustomBar
		};
	},
	props: {
		equal: {
			type: Boolean,
			default() {
				return false;
			}
		},
		tabCur: {
			type: Number,
			default() {
				return 0;
			}
		},
		tabList: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	methods: {
		tabSelect(_index, _e) {
			if (this.tabCur === _index) return false;
			this.$emit('update:tabCur', _index);
			this.$emit('change', _index);
		}
	},
	computed: {
		scrollLeft() {
			return (this.tabCur - 1) * 60;
		}
	}
};
</script>

<style lang="scss" scoped>
.nav-fixed {
	position: fixed;
	z-index: 99;
}

.nav .cu-item.cur {
	position: relative; //给当前元素添加相对定位,也就是after的父级
	&:after {
		content: '';
		width: 72rpx;
		height: 8rpx;
		background-color: #166ce5 !important;
		position: absolute;
		bottom: 0rpx;
		left: 50%;
		transform: translateX(-50%); //居中处理
		border-radius: 10rpx;
	}
}

.item-text {
	border-right: 1px solid #166ce5;
}

.nav .cu-item .text {
	padding-right: 30rpx;
}

.text-border-right {
	border-right: 1px solid #d2d2d2;
}
</style>
