<template>
	<view class="segmented-control-item" @click="onClick(index)">
		<!--  :style="itemStyle" -->
		<view class="item-text" :style="isSelected?activeStyle:''">{{text}}</view>
		<view class="short-border" :style="isSelected?activeBorderStyle:''"></view>
	</view>
</template>

<script>
	import segmentedItemMixins from '../segmented-item-mixins/segmented-item-mixins.vue'
	export default {
		name: 'segmented-item',
		mixins: [segmentedItemMixins],
		props: {
			text: {
				type: String,
				default: ''
			}
		},
		data() {
			return {}
		},
		computed: {
			activeStyle() {
				return this.segmentedParent.activeStyle
			},
			activeBorderStyle() {
				return this.segmentedParent.activeBorderStyle
			}
		}
	}
</script>

<style lang="scss">
	.segmented-control-item {
		min-width: 100rpx;
		padding: 0 20rpx;
		height: 100%;
		color: #000;
		text-align: center;

		.item-text {
			display: flex;
			justify-content: center;
			align-items: center;
			height: calc(100% - 4rpx);
		}

		.short-border {
			width: 48rpx;
			height: 4rpx;
			margin: auto;
		}
	}
</style>
