<template>
	<view>
		<view class="navTab">
			<block v-for="(item, index) in tabsarr">
				<view class="tabItem" :data-index="index" @click="bindChange" :data-value="item.value">
					<text class="tabTxt tabItemOn" v-if="item.checked">{{item.title}}</text>
					<view class="tabItemOnLine" v-if="item.checked"></view>
					<text class="tabTxt " v-else>{{item.title}}</text>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		name: "systabs",
		props: {
			tabsarr: {
				type: Object
			}
		},
		data() {
			return {


			};
		},
		methods: {
			bindChange: function(e) {
				var index = e.currentTarget.dataset.index;
				var value = e.currentTarget.dataset.value;
				var tabs = this.tabsarr;
				for (var m of tabs) {
					m.checked = false
				}
				tabs[index].checked = true;
				this.tabsarr = tabs;
				this.$emit("tabChange", value);
			}
		}

	}
</script>

<style>
	.navTab {
		background: #FAFAFA;
		box-shadow: 0 1px 0 0 #E6E6E6;
		flex-direction: row;
		justify-content: space-around;
		top: 160rpx;
		left: 0;
		position: fixed;
		z-index: 999;
		width: 750rpx;
		display: flex;
	}

	.tabItem {
		align-items: center;
		position: relative;
	}

	.orderGe {
		color: #D8D8D8;
		margin-left: 16rpx;
		margin-right: 16rpx;
		font-size: 28rpx;
	}

	.tabTxt {
		font-size: 28rpx;
		color: #666666;
		text-align: left;
		height: 70rpx;
		line-height: 70rpx;
	}

	.tabItemOn {
		color: #0DC99E;
	}

	.tabItemOnLine {
		background: #0DC99E;
		height: 4rpx;
		width: 100rpx;
		position: absolute;
		bottom: -2rpx;
		left: -10rpx;
	}
</style>
