<template>
	<uni-popup ref="scanPopup" :isMaskClick="false">
		<view class="popup-content">
			<view class="popup-main">
				<view class="form">
					<view class="formItem">
						<text class="label">入库仓库</text>
						<uni-data-select
							class="inputStyle"
						    v-model="value"
						    :localdata="range"
						    @change="change"
							placeholder="默认仓库"
						></uni-data-select>
					</view>
					<view class="formItem">
						<text class="label">生成垛标</text>
						<switch color="#0079FE" style="transform:scale(0.7)"/>
						<text>箱标入库同步生成虚拟垛标</text>
					</view>
					<view class="formItem">
						<view class="tabbar">
							<view class="barItem" @click="changeBar(0)" :class="activeIndex === 0?'active':''">
								<text v-if="isPDA">PDA扫码入库</text>	
								<text v-else>手机扫码入库</text>	
							</view>
							<view class="barItem" @click="changeBar(1)" :class="activeIndex === 1?'active':''">
								<text>手动输入入库</text>							
							</view>
						</view>
					</view>
					
				</view>
			</view>
			<image @click="colse" class="up22" src="@/PDA/static/up22.png" mode="aspectFill"></image>
		</view>
	</uni-popup>
</template>

<script setup>
import { reactive, ref } from 'vue';

const scanPopup = ref(null)
const props = defineProps(()=>{
	
})
const isPDA = ref(false);
const range = reactive([
    { value: 0, text: "篮球" },
    { value: 1, text: "足球" },
    { value: 2, text: "游泳" },
])
const value = ref('')
const change = (e)=> {
    console.log("e:", e);
}
const activeIndex = ref(0)
const changeBar = (index)=>{
	if(activeIndex.value === index) return;
	activeIndex.value = index
}











const open = ()=>{
	scanPopup.value.open('top')
}
const colse = ()=>{
	scanPopup.value.close()
}
defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.popup-content{
	width: 100%;
	background: #FFFFFF;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	box-sizing: border-box;
	padding: 26rpx;
	position: relative;
	.up22{
		width: 204rpx;
		height: 56rpx;
		position: absolute;
		left: 50%;
		transform: translate(-50%,0);
		bottom: -56rpx;
	}
}
.popup-main{
	.form{
		.formItem{
			margin: 26rpx 0;
			@include flexBox(start,center);
			@include fontStyle(28rpx,#333333,left,400,38rpx);
			.label{
				@include fontStyle(28rpx,#000000,left,bold,38rpx);
				margin-right: 16rpx;
			}
			.inputStyle{
				flex: 1;
				height: 80rpx;
				border-radius: 9rpx 9rpx 9rpx 9rpx;
				border: 1rpx solid #999999;
				@include fontStyle(28rpx,#333333,left,500,48rpx);
				@include flexBox(start,center);
			}
			 
		}
	
		.tabbar{
			width: 100%;
			height: 80rpx;
			border-radius: 10rpx;
			border: 1rpx solid #0079FE;
			@include flexBox();
			.barItem{
				width: 50%;
				height: 100%;
				text-align: center;
				@include flexBox();
				@include fontStyle(28rpx,#0079FE,center,500,38rpx);
			}
			.active{
				background: #0079FE !important;
				color: #FFFFFF !important;
				font-weight: bold;
			}
		}
	}
	
}	

</style>