<template>
	<!-- <view class="segmented-control-root"> -->
	<view class="segmented-control flex-h" :class="rootClass" :style="rootStyle">
		<view v-for="(item, index) in tabList" :key="index">
			<segmented-item :index="index" :text="item[itemTextKey]">
			</segmented-item>
		</view>
		<!-- <view v-for="(item, index) in tabList" :key="index" class="segmented-control-item"
		 :style="index===currentIndex?activeStyle:''" @click="onClick(index)">
			<view class="item-text">{{item.text}}</view>
			<view class="short-border" :style="index===currentIndex?activeBorderStyle:''"></view>
		</view> -->
	</view>
	<!-- </view> -->
</template>

<script>
	import segmentedControl from '../segmented-control/segmented-control.vue'
	import segmentedItem from '../segmented-item/segmented-item.vue'
	/// 一个简单的选项卡组件
	export default {
		name: 'simple-segmented-control',
		mixins: [segmentedControl],
		components: {
			segmentedItem
		},
		props: {
			tabHeight: {
				type: String,
				default: '90rpx'
			},
			tabBgColor: {
				type: String,
				default: '#ffffff'
			},
			activeColor: {
				type: String,
				default: '#007aff'
			},
			itemTextKey: {
				type: String,
				default: 'text'
			}
		},
		computed: {
			rootStyle() {
				return `height:${this.tabHeight};background-color:${this.tabBgColor};`;
			},
			activeStyle() {
				return `color:${this.activeColor};`;
			},
			activeBorderStyle() {
				return `background-color:${this.activeColor};`;
			}
		}
	}
</script>
