<template>
	<view class="u-relative bg border-r-16">

		<view class="u-flex tabs zhanwei u-relative">
			<view class="active-block" :style="computedBlockStyle">
			</view>
			<view class="u-flex-1 u-text-center item" :class="[index===current?'':'active',size]" @tap="changeCurrent(index)"
				v-for="(item,index) in props.list" :key="index">
				{{textKey?item[textKey]:item}}
			</view>

		</view>
		<view class="u-flex tabs u-absolute position-all">

			<view class="u-flex-1 u-text-center item" :class="{active:index===current}" @tap="changeCurrent(index)"
				v-for="(item,index) in props.list" :key="index">
				{{textKey?item[textKey]:item}}
			</view>

		</view>
	</view>

</template>

<script setup>
	import {
		computed,
		ref,
		watch
	} from 'vue';
	const props = defineProps({
		size:{
			type: String,
			default:''
		},
		padding: {
			type: String
		},
		list: {
			type: Array
		},
		textKey: {
			type: String,
			default: ''
		},
		defaultIndex: {
			type: Number,
			default: 0
		},
		modelValue: {
			type: Number,
			default: 0
		}
	})
	const emit = defineEmits(['change', 'update:modelValue'])
	let current = ref(props.modelValue || props.defaultIndex || 0)

	function changeCurrent(index) {
		current.value = index
	}
	const computedBlockStyle = computed(() => {
		const oneWidth = 100 / props.list.length
		const left = current.value * oneWidth
		return {
			width: oneWidth + '%',
			left: left + '%'
		}
	})
	watch(() => props.modelValue, (newval) => {
		current.value = newval
	})
	watch(() => current.value, (newval) => {
		emit('update:modelValue', newval)
		emit('change', newval)
	})
</script>

<style lang="scss" scoped>
	.zhanwei {
		.item {
			opacity: 0;
		}
	}

	.bg {
		background: #E6F0FF;
		padding: 7rpx 10rpx;
	}

	.border-r-16 {
		border-radius: 16rpx;
	}

	.active-block {
		background-color: $my-main-color;
		color: #fff;
		top: 4rpx;
		bottom: 4rpx;
		left: 10rpx;
		position: absolute;
		border-radius: 8rpx;
		transition: all .2s ease-in-out;
		overflow: hidden;
		z-index: 1;
	}

	.tabs {
		border-radius: 16rpx;
		font-size: 28rpx;
		color: #318AFE;
		z-index: 2;

		.active-block {
			background-color: $my-main-color;
			color: #fff;
			top: 4rpx;
			bottom: 4rpx;
			left: 0;
			position: absolute;
			border-radius: 8rpx;
			transition: all .2s ease-in-out;
			overflow: hidden;
			z-index: 1;
		}

		.item {
			padding: 9rpx 0;
			transition: all .2s ease-in-out;
			position: relative;
			background-color: transparent;
			z-index: 2;
			&.large{
				padding: 16rpx 0;
			}
		}

		.item.active {
			border-radius: 8rpx;
			// background-color: $my-main-color;
			color: #fff;
			font-weight: bold;
		}
	}
</style>