<template>
	<view class="container">
		<!-- Tab 切换栏 -->
		<view class="tabs-bar">
			<view
				class="tab-item"
				:class="{ 'tab-active': currentTab === 'coil' }"
				@click="currentTab = 'coil'"
			>
				<text class="tab-text">钢卷操作</text>
			</view>
			<view
				class="tab-item"
				:class="{ 'tab-active': currentTab === 'inspect' }"
				@click="currentTab = 'inspect'"
			>
				<text class="tab-text">设备巡检</text>
			</view>
		</view>

		<!-- Tab 内容 -->
		<view class="tab-content">
			<view v-show="currentTab === 'coil'" class="tab-panel">
				<scan-coil ref="scanCoil" />
			</view>
			<view v-show="currentTab === 'inspect'" class="tab-panel">
				<scan-inspect ref="scanInspect" />
			</view>
		</view>
	</view>
</template>

<script>
import ScanCoil from '@/components/scan-coil/scan-coil.vue'
import ScanInspect from '@/components/scan-inspect/scan-inspect.vue'

export default {
	components: { ScanCoil, ScanInspect },
	data() {
		return {
			currentTab: 'coil'
		}
	}
}
</script>

<style scoped lang="scss">
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f7fa;
	overflow: hidden;
}

// ========== Tab 栏 ==========
.tabs-bar {
	display: flex;
	background: #fff;
	border-bottom: 2rpx solid #f0f0f0;
	flex-shrink: 0;

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 24rpx 0;
		position: relative;

		.tab-text {
			font-size: 28rpx;
			color: #666;
		}

		&.tab-active {
			.tab-text {
				color: #1a73e8;
				font-weight: 600;
			}
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 20%;
				right: 20%;
				height: 4rpx;
				background: #1a73e8;
				border-radius: 2rpx;
			}
		}
	}
}

// ========== Tab 内容 ==========
.tab-content {
	flex: 1;
	overflow: hidden;
}

.tab-panel {
	height: 100%;
	overflow-y: auto;
	padding: 15rpx;
	box-sizing: border-box;
}
</style>