<template>
	<!-- 选项卡切换 -->
	<view class="tab-bar">
		<view class="tab-item" :class="{ active: activeTab === 'isbn' }" @click="$emit('change', 'isbn')" key="isbn-tab">
			ISBN-上传
		</view>
		<view class="tab-item" :class="{ active: activeTab === 'title' }" @click="$emit('change', 'title')" key="title-tab">
			仅书名-上传
		</view>
	</view>
</template>

<script>
	export default {
		name:"tab-bar",
		props: {
		    activeTab: {
				type: String,
				default: 'isbn',
				validator: value => ['isbn', 'title'].includes(value)
		    }
		}
	}
</script>

<style scoped>
	.tab-bar {
		display: flex;
		background-color: #fff;
		margin-bottom: 30rpx;
		overflow: hidden;
	}

	.tab-item {
		flex: 1;
		padding: 10rpx 0;
		text-align: center;
		font-size: 29rpx;
		color: #666;
		position: relative;
	}

	.tab-item.active {
		color: #03A9F4;
		background-color: rgba(0, 122, 255, 0.1);
	}
</style>