<template>
	<view>
		<scroll-view scroll-x scroll-with-animation class="segmented-control" :class="rootClass" :style="rootStyle"
		 :scroll-left="scrollLeft" :scroll-into-view="scrollIntoId">
			<!-- <view class="wrapper-h-view" :style="rootStyle"> -->
			<!-- 微信中必须在此设置id才能找到对应的元素 -->
			<slot name="first-item">
				<view class="display-inline-block" :style="{width:padding}"></view>
			</slot>
			<view v-for="(item, index) in tabList" :key="index" :id="'segmented-item-'+index" class="display-inline-block"
			 :style="rootStyle">
				<segmented-item :index="index" :text="item[itemTextKey]">
				</segmented-item>
			</view>
			<slot name="last-item">
				<view class="display-inline-block" :style="{width:padding}"></view>
			</slot>
			<!-- <view v-for="(item, index) in tabList" :key="index" :id="'segmented-item-'+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> -->
		</scroll-view>
	</view>
</template>

<script>
	/// 一个可横向滑动的选项卡组件拆分版
	import segmentedControlSimple from '../segmented-control-simple/segmented-control-simple.vue'
	import segmentedControl from '../segmented-control/segmented-control.vue'
	import segmentedItem from '../segmented-item/segmented-item.vue'
	const SCROLL_LEFT = 'left'
	const SCROLL_CENTER = 'center'
	export default {
		name: 'segmented-control-scroll',
		mixins: [segmentedControl],
		extends: segmentedControlSimple,
		components: {
			segmentedItem
		},
		props: {
			padding: {
				type: String,
				default: '40rpx'
			}
		},
		mounted() {
			this.needChangeScroll = true
			// this.$nextTick(() => {
			// 	this.getTabWidth()
			// })
		}
	}
</script>
