<template>
  <view class="lists">
	<u-sticky offset-top='0'>
		<NavBar title="仓位转移"></NavBar>
		<view class="selectSheet">
			<u-row gutter="16">
				<u-col span="6">
					<u-input v-model="value" placeholder='请选择工厂' :type="type" :border="border" @click="show = true" />
					<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></u-action-sheet>
				</u-col>
				<u-col span="6">
					<u-input v-model="value" placeholder='请选择仓库别' :type="type" :border="border" @click="show = true" />
					<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></u-action-sheet>
				</u-col>
			</u-row>
		</view>
		<view class="scanningBtn">
		  <uni-easyinput prefixIcon="search" class="topSearch" v-model="value" focus placeholder="请扫描库位" @input="handleInput"></uni-easyinput>
		  <uni-easyinput prefixIcon="search" v-model="value" focus placeholder="请扫描产品包装条码/外箱码" @input="handleInput"></uni-easyinput>
		</view>
	</u-sticky>
	<view class="cardbox">
		<view class="cardContent">
			<view class="cardTitle">
				<text class="cardItemLabel">物料批号：</text>
				<text class="cardItemValue">123</text>
			</view>
			<view class="cardItem">
				<view class="cardItemDetail">
					<text class="cardItemLabel">物料编号</text>
					<text class="cardItemValue itemValueWidth">L4375907435u23</text>
					<u-icon name="trash-fill" size="40" @click="deleteItem()"></u-icon>
				</view>
				<view class="cardItemDetail">
					<text class="cardItemLabel">物料描述</text>
					<text class="cardItemValue">物料编号物料编号物料编号物料编号物料编号物料编号</text>
				</view>
				<view class="cardItemDetail">
					<text class="cardItemLabel">数量</text>
					<text class="cardItemValue">3000</text>
				</view>
				<view class="cardItemDetail">
					<text class="cardItemLabel">单位</text>
					<text class="cardItemValue">M</text>
				</view>
			</view>
		</view>
		<view class="cardContent">
			<view class="cardTitle">
				<text class="cardItemLabel">物料批号：</text>
				<text class="cardItemValue">123</text>
			</view>
			<view class="cardItem">
				<view class="cardItemDetail">
					<text class="cardItemLabel">物料编号</text>
					<text class="cardItemValue itemValueWidth">L4375907435u23</text>
					<u-icon name="trash-fill" size="40" @click="deleteItem()"></u-icon>
				</view>
				<view class="cardItemDetail">
					<text class="cardItemLabel">物料描述</text>
					<text class="cardItemValue">物料编号物料编号物料编号物料编号物料编号物料编号</text>
				</view>
				<view class="cardItemDetail">
					<text class="cardItemLabel">数量</text>
					<text class="cardItemValue">3000</text>
				</view>
				<view class="cardItemDetail">
					<text class="cardItemLabel">单位</text>
					<text class="cardItemValue">M</text>
				</view>
			</view>
		</view>
		<view class="cardContent">
			<view class="cardTitle">
				<text class="cardItemLabel">物料批号：</text>
				<text class="cardItemValue">123</text>
			</view>
			<view class="cardItem">
				<view class="cardItemDetail">
					<text class="cardItemLabel">物料编号</text>
					<text class="cardItemValue itemValueWidth">L4375907435u23</text>
					<u-icon name="trash-fill" size="40" @click="deleteItem()"></u-icon>
				</view>
				<view class="cardItemDetail">
					<text class="cardItemLabel">物料描述</text>
					<text class="cardItemValue">物料编号物料编号物料编号物料编号物料编号物料编号</text>
				</view>
				<view class="cardItemDetail">
					<text class="cardItemLabel">数量</text>
					<text class="cardItemValue">3000</text>
				</view>
				<view class="cardItemDetail">
					<text class="cardItemLabel">单位</text>
					<text class="cardItemValue">M</text>
				</view>
			</view>
		</view>
		<view class="cardContent">
			<view class="cardTitle">
				<text class="cardItemLabel">物料批号：</text>
				<text class="cardItemValue">123</text>
			</view>
			<view class="cardItem">
				<view class="cardItemDetail">
					<text class="cardItemLabel">物料编号</text>
					<text class="cardItemValue itemValueWidth">L4375907435u23</text>
					<u-icon name="trash-fill" size="40" @click="deleteItem()"></u-icon>
				</view>
				<view class="cardItemDetail">
					<text class="cardItemLabel">物料描述</text>
					<text class="cardItemValue">物料编号物料编号物料编号物料编号物料编号物料编号</text>
				</view>
				<view class="cardItemDetail">
					<text class="cardItemLabel">数量</text>
					<text class="cardItemValue">3000</text>
				</view>
				<view class="cardItemDetail">
					<text class="cardItemLabel">单位</text>
					<text class="cardItemValue">M</text>
				</view>
			</view>
		</view>
	</view>
	<u-loadmore class="bottomArea" :status="status" />
	<view class="bottom">
		<u-button class="btn" type="warning">
			<text class="btn-text">取消</text>
		</u-button>
		<u-button class="btn" type="primary">
			<text class="btn-text">提交</text>
		</u-button>
	</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        type: 'select',
        show: false,
        border: true,
        actionSheetList: [
        	{
        		text: '男'
        	},
        	{
        		text: '女'
        	},
        	{
        		text: '保密'
        	}
        ],
		status: 'loadmore',
      };
    },
    methods: {
	  // 点击actionSheet回调
	  actionSheetCallback(index) {
	  	this.value = this.actionSheetList[index].text;
	  },
	  handleInput(e) {
	    console.log(e, 'eee')
	  },
	  deleteItem(){
		  console.log('删除')
	  },
	  // 加载更多
	  onReachBottom() {
		  console.log('加载更多')
	  	// if(this.page >= 3) return ;
	  	// this.status = 'loading';
	  	// this.page = ++ this.page;
	  	// setTimeout(() => {
	  	// 	this.list += 10;
	  	// 	if(this.page >= 3) this.status = 'nomore';
	  	// 	else this.status = 'loading';
	  	// }, 2000)
	  }
    }
  }
</script>

<style lang="scss">
page {
  background: #f8f8f8;
}
.lists {
	flex: 1;
	flex-direction: column;
}
.scanningBtn {
  padding: 20rpx;
  background: #fff;
  .topSearch{
    margin-bottom: 20rpx;
  }
}
.selectSheet{
	padding: 20rpx;
	padding-bottom: 0;
	background: #fff;
}
.cardbox {
  min-height: calc(100vh - 480rpx);
  padding: 0rpx 20rpx;
  margin-top: 20rpx;
}
.cardContent{
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
}
.cardTitle{
	font-size: 32rpx;
	color: #000;
	display: flex;
	margin: 20rpx 20rpx 0 20rpx;
	padding-bottom: 20rpx;
	border-bottom: 2px solid #f8f8f8;
}
.cardItem{
	padding: 20rpx 20rpx 0 20rpx;
}
.cardItemDetail{
	display: flex;
	padding-bottom: 20rpx;
}
.cardItemLabel{
	width: 200rpx;
}
.cardItemValue{
	width: 500rpx;
}
.bottom {
	position: fixed;
	display: flex;
	bottom: 0;
	left: 0;
	z-index: 10;
	width: 750rpx;
	height: 140rpx;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	.u-btn {
	  width: 300rpx;
	}
}
.bottomArea{
	padding-bottom: 160rpx;
}
.itemValueWidth{
	width: 450rpx;
}
/deep/ .u-sticky{
	top: 0!important;
}
</style>
