<template>
	<view class="page-total">
		<view class="tab-list">
			<view class="list" v-for="(item, index) in tabbar" @click="onTabBar(item, index)" :key="index">
				<image
					:src="tabBarShow == item.index ? item.acImg : item.img"
					mode="widthFix"
					:style="{ width: item.type == 'big' ? '80rpx' : '48rpx', borderRadius: item.type == 'big' ? '20rpx' : '0px' }"
				></image>
<!-- 				<image
					v-show="tabBarShow !== index"
					:src="item.img"
					mode="widthFix"
					:style="{ width: item.type == 'big' ? '80rpx' : '48rpx', borderRadius: item.type == 'big' ? '20rpx' : '0px' }"
				></image> -->
				<!-- background: (index == 2) ?  'red' : '' -->
				<text :class="{ action: tabBarShow === index }" :style="{ marginTop: item.type == 'big' ? '10rpx' : '0px' }">{{ item.name }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps({
	tabBarShow: {
		type: Number,
		default: 0
	},
	tabbar: {
		type: Array,
		default: []
	}
});

// const tabBarShow = ref(0);

const emit = defineEmits(['tabChange']);
const onTabBar = (item, index) => {
	// tabBarShow.value = item.index;
	emit('tabChange', item);
};
</script>

<style scoped lang="scss">
@import 'cc-myTabbar.scss';
</style>
