<template>
	<uni-popup ref="popup" type="top" is-mask-click>
		<scroll-view scroll-y refresher-enabled="false" refresher-background="none" :refresher-threshold="100" class="scroll">
			<view class="tabs" @touchmove.stop>
				<view v-for="(tab, index) in tabsData" :key="index" class="tab-item" :class="{ active: currentTab === index }" @click="tabsClick(index)">
					{{ tab.name }}
				</view>
			</view>
		</scroll-view>
	</uni-popup>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			default: {}
		},
		itemIndex: {
			type: [String, Number],
			default: ''
		}
	},
	data() {
		return {};
	},
	computed: {
		tabsData() {
			return this.item.data;
		},
		currentTab() {
			return this.item.current;
		}
	},
	methods: {
		tabsClick(index) {
			if (this.itemIndex) {
				let data = { index };
				console.log(data);
				this.$emit('tabClick', this.itemIndex, data);
			} else {
				this.$emit('tabClick', index);
			}
			this.$refs.popup.close('top');
		},
		open() {
			this.$refs.popup.open();
		}
	}
};
</script>

<style lang="scss">
.tabs {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding: 0;
	margin: 0;
}
.scroll {
	background-color: #000;
	height: 500rpx;
	border-radius: 0 0 10px 10px;
	padding: 10px;
}
.tab-item {
	padding: 4px 10px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
	border-radius: 15px;
	margin: 4px;
	cursor: pointer;
	background: transparent;
}

.tab-item.active {
	color: #000;
	background: #bcbcbc;
}
</style>
