<style lang="scss" scoped>
	.tabul{ border-top:1px solid #f1f1f1; z-index:22; width:100%; display:flex; align-items:center; position: fixed; left:0; top:0; height:90rpx; background:#fff; box-shadow:#eee 0 0 15rpx;
		.line{ width:50rpx; transition: all 0.3s ease; height:2px; background:$main-color; position: absolute; bottom:0; left:0; content:''; display:block; z-index:1; }
		.item{ flex:1; height:90rpx; overflow:hidden; position: relative;
			  .text{ position: absolute; left:0; top:22rpx; width:100%; text-align:center; transition:all 0.3s ease; }
					&.on .text{ transform: scale(1.15); color:$main-color; }
			}
	}
	/* #ifdef H5 */
	.tabul{top:44px;}
	/* #endif */
</style>
<template>
	<view class="tabul">
		 <view class="line" :style="'transform:translateX('+translateX+'px)'"></view>
		 <view class="item" @tap="changeType(index)" :class="tabIndex===index?'on':''" v-for="(item,index) in list" :key="index">
			  <view class="text">{{item.txt}}<block v-if="shownum">({{item.num}})</block></view>
			</view>
	</view>
</template>

<script>
	 export default{
			  name:'Tab',
					props:{
						 list:{
									type:Array,
							},
							shownum:{
								 type:Boolean,
									default:false
							}
					},
			  data(){
						 return{
								 tabIndex:0,		
									translateX:0							
							}
					},
					mounted(){
						 this.transTabX();
					},
					
					methods:{
						  //tab底线滚动
						  async transTabX(){
									 const res = await uni.getSystemInfo();
						  	 let windowWidth = res[1].windowWidth;
						  		let itemW = this.tabIndex * (windowWidth / this.list.length);
						  		this.translateX = itemW + (windowWidth / this.list.length / 2 - 10);								
						  },	
															
								changeType(e){
									  this.tabIndex = e;
											this.transTabX();
											this.$emit("change",e);
								},
								
								swipertab(e){
									 this.tabIndex = e;
									 this.transTabX();
								}
					}
		}	
</script>
