<template>
	<view>
		<view class="search-user flex-y-center ">
			<view class="search-content flex-y-center">
				<icon type="search" size="18" />
				<input confirm-type="search" v-model="seTval" @confirm="confirm" @input="getSearch" class="flex-grow-1"
					type="text" placeholder-style="font-size:26rpx" placeholder="请输入条形码、商品名称" />
				<view class="flex-center" style="margin-left: 10rpx;" @click.stop="onDel" v-if="seTval">
					<icon type="clear" size="18" />
				</view>
			</view>
			
			<view class="search-btn" @click="search">
				<image src="../static/images/saoma.png" mode=""></image>
			</view>
			
		</view>
		<view style="height: 110rpx;"></view>
		<block v-if='list.length<=0'>
			<no-none></no-none>
			<view class="tips">
				请先搜索需要的商品，再进行选择
			</view>
		</block>
		<block v-else>
			<view class="goodsMain" v-for="(item,index) of list" :key='index' @click="choice(index)">
				<view class="goodsTitle">
					条码：{{item.barcode}}
				</view>
				<view class="flex goodsItem">
					<view class="">
						<image class="goodsCover" @click.stop="previewImage(item.image)" :src="item.image"></image>
					</view>
					<view class="">
						<view class="goodsName">
							{{item.name}}
						</view>
						<view class="goodsCate">
							<span class='cateColor'>分类：</span> {{item.category_name}}
						</view>
						<view class="goodsUnit">
							<span class='cateColor'> 单位：</span>  {{item.unit}}
						</view>
					</view>
				</view>
			</view>
		</block>
		<view style="height: 100rpx;"></view>
		<view class="wyb-pagination-page" v-if="count>0 && list.length>0">
			<wyb-pagination :totalItems="count" :current='pages' :page-items="limit" @change="Change" />
		</view>
	</view>
</template>
<script>
	import wybPagination from "@/components/wyb-pagination/wyb-pagination";
	export default {
		components: {
			wybPagination
		},
		data() {
			return {
				seTval: '',
				list: [],
				count: 1,
				limit: 10,
				pages: 1,
				keywords: '',
			}
		},
		methods: {
			choice(index){
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				// this.list[index].bar_number = this.list[index].barcode;
				let info = {
					unit:this.list[index].unit,
					bar_number:this.list[index].barcode,
					name:this.list[index].name,
				}
				prevPage.$vm.cove_image = this.list[index].image;
				prevPage.$vm.info = info; //修改上一页data里面的sh参数值为100
				uni.navigateBack({
					delta: 1
				})
			},
			getSearch(e) {
				if (!e.detail.value) {
					this.keywords = "";
					this.http();
				}
				this.keywords = e.detail.value;
			},

			onDel() {
				this.seTval = '';
				this.keywords = "";
				this.http();
			},

			confirm(e) {
				this.keywords = e.detail.value;
				this.http();
			},

			search(e) {
				// #ifdef MP-WEIXIN
				 uni.scanCode({
					success: (res)=> {
						console.log(res,"eeeee")
						this.keywords = res.result
						this.http();
					}
				});
				// #endif	
			},
		
			Change(e) {
				this.pages = e.current;
				this.http();
			},
			// 预览图片
			previewImage(img) {
				uni.previewImage({
					urls: [img],
				});
			},
			http() {
				this.request({
					url: "Smdcshop/barcode_lists",
					data: {
						store_id: uni.getStorageSync("store_id"),
						page: this.pages,
						limit: this.limit,
						keywords: this.keywords,
					}
				}).then(res => {
					if (res.code == '200') {
						this.count = res.data.count;
						this.list = res.data.list;
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background: #F1F1F1;
	}

	.search-user {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		height: 100rpx;
		background: #FFFFFF;
	}

	.search-user .search-content {
		width: 83%;
		height: 70rpx;
		background: #F1F1F1;
		border-radius: 100rpx;
		padding: 0 20rpx;

	}

	.search-user .search-content icon {
		margin-right: 10rpx;
	}

	.search-user .search-btn {
		margin-left: 20rpx;
		font-size: 28rpx;
	}
	
	.search-btn image{
		width: 60rpx;
		height: 60rpx;
	}

	.goodsMain {
		background: #fff;
		padding: 0 20rpx;
		margin: 10rpx 20rpx;
		border-radius: 8rpx;
	}

	.goodsTitle {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #F1F1F1;
	}

	.goodsItem {
		padding: 20rpx 0;
		font-size: 26rpx;
	}

	.goodsCover {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
	}

	.goodsCate {
		margin: 10rpx 0;
	}

	.tips {
		text-align: center;
		font-size: 26rpx;
		color: #999
	}

	.wyb-pagination-page {
		position: fixed;
		width: 100%;
		bottom: 0;
		background: #FFFFFF;
		padding: 10rpx 0;
		z-index: 999;
	}
	.cateColor{
		color: #999
	}
</style>
