<template>
	<view class="content">
		<scroll-view class="scroll" :scroll-into-view="'scroll_view_id_'+(tabIndex-1)" scroll-x="true"
			show-scrollbar="false">

			<div class="scroll_view" :id="'scroll_view_id_'+index" @click="tabClick(index)"
				v-for="(item,index) in tabList" :key="index">
				<text class="tabText" :style="{
								color:tabIndex===index?activeColor:noActiveColor,
								fontWeight:tabIndex===index?'bold':'normal',}">{{item.name}}</text>
				<view class="active_line"
					:style="tabIndex===index?'background-color:'+activeColor:'background-color:#ffffff;'"></view>
			</div>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: {
			activeColor: {
				type: String,
				default: '#1596FE'
			},
			noActiveColor: {
				type: String,
				default: '#333333'
			},
			tabList: {
				type: Array,
				default: ()=>{
					return []
				}
			},
			tabIndex: {
				type: Number,
				default: 0
			}
		},
		methods: {
			tabClick(index) {
				if (this.tabIndex === index) return;
				this.$emit("change", {
					detail: {
						current: index
					}
				})
			},
		}
	}
</script>

<style lang="scss" >
	.content {
		width: 100%;

		.scroll {
			background-color: #efefef;
			white-space: nowrap;
			position: relative;
			line-height: 70rpx;
			.scroll_view {
				display: inline-block;
				padding: 10rpx 15rpx;
				.tabText{
					line-height: 50rpx;
					font-size: 35rpx;
				}
				.active_line{
					width: 100%;
					height: 8rpx;
				}
			}
		}
	}
</style>
