<template>
	<view class="segmentedWrapper">
		<view
			class="segmented"
			:style="{ gridTemplateColumns: `repeat(${values.length},minmax(0,1fr))`, paddingBottom: gap, fontSize: fontSize, borderBottomWidth: underLineHeight }"
		>
			<view
				class="segmentedThumb"
				:style="{
					width: (1 / values.length) * 100 + '%',
					height: thumbHeight,
					left: (1 / values.length) * 100 * current + '%'
				}"
			></view>
			<view
				class="segmentedItem"
				:style="{
					color: current === index ? activeColor : inActiveColor,
					fontWeight: current === index ? activeFontWeight : inActiveFontWeight
				}"
				v-for="(item, index) in values"
				:key="index"
				@click="_onClick(index)"
			>
				{{ item }}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Segmented',
	emits: ['clickItem'],
	props: {
		current: {
			type: Number,
			default: 0
		},
		values: {
			type: Array,
			default() {
				return [];
			}
		},
		fontSize: {
			type: String,
			default: '18px'
		},
		thumbHeight: {
			type: String,
			default: '2px'
		},
		underLineHeight: {
			type: String,
			default: '1px'
		},
		gap: {
			type: String,
			default: '10px'
		},
		activeColor: {
			type: String,
			default: '#333333'
		},
		inActiveColor: {
			type: String,
			default: '#999999'
		},
		activeFontWeight: {
			type: Number,
			default: 400
		},
		inActiveFontWeight: {
			type: Number,
			default: 400
		},
		styleType: {
			type: String,
			default: 'button'
		}
	},
	data() {
		return {
			currentIndex: 0
		};
	},
	watch: {
		current(val) {
			if (val !== this.currentIndex) {
				this.currentIndex = val;
			}
		}
	},
	computed: {},
	created() {
		this.currentIndex = this.current;
	},
	methods: {
		_onClick(index) {
			if (this.currentIndex !== index) {
				this.currentIndex = index;
				this.$emit('clickItem', {
					currentIndex: index
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
