<template>
	<view class="p-content">
		<view class="p-head">
			<view>
				<text>条形码：</text>
				<view style="flex-grow: 1;display: flex;align-items: center;">
					<input 
					class="uni-input" 
					placeholder="扫描或输入条码" 
					border="surround" 
					@confirm="queryProduct(0)"
					v-model="query.qrCode">
				</view>
			</view>
			<view>
				<text>产品编码：</text>
				<view style="flex-grow: 1;display: flex;align-items: center;">
					<input 
					class="uni-input" 
					placeholder="请输入产品编码"
					 @confirm="queryProduct(0)"
					border="surround" 
					v-model="query.code">
				</view>
			</view>
			<view>
				<text>产品名称：</text>
				<view style="flex-grow: 1;display: flex;align-items: center;">
					<input  
					class="uni-input" 
					placeholder="请输入产品名称" 
					@confirm="queryProduct(0)"
					border="surround" 
					v-model="query.name">
				</view>
			</view>
			<view>
				<button type="primary" size="mini" @click="queryProduct(0)" :style="{padding:'5px 30px'}">查询</button>
			</view>
		</view>
		<view class="p-body">
			<uni-table border emptyText="暂无数据" :loading="loading" >
				<!-- 表头行 -->
				<uni-tr>
					<uni-td align="center">产品编码</uni-td>
					<uni-td align="center">产品名称</uni-td>
					<uni-td align="center">条形码</uni-td>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr 
				v-for="item in detailList" :key="item.id" 
				:checkedRow="tempProduct&&tempProduct.id == item.id" 
				@click="toEdit(item)">
					<uni-td width="30%" align="center">{{item.code}}</uni-td>
					<uni-td width="40%" align="center">{{item.name}}</uni-td>
					<uni-td width="30%" align="center">{{item.qrCode}}</uni-td>
				</uni-tr>
			</uni-table>
			<view v-if="noMore" style="padding: 30upx;text-align: center;color:#999;font-size: 24rpx;">{{noMore}}</view>
		</view>
		 
		<scanCode></scanCode>
		<uni-popup ref="popup" :mask-click="false" type="dialog">
			<view 
			style="
			font-size: 30rpx;
			background-color: #fff;
			padding: 30rpx 50rpx;
			border-radius: 30rpx;
			width: 80%;
			margin: 0 auto;">
				<view style="line-height: 60rpx;width: 600rpx;" v-if="tempProduct">
					<view>
						产品编码：{{tempProduct.code}}
					</view>
					<view>
						产品名称：{{tempProduct.name}}
					</view>
					<view style="display: flex;align-items: center;padding-top: 15rpx;">
						<text>条形码：</text>
						<input
						:focus="true"
						style="width:350rpx;"
						class="uni-input" 
						placeholder="扫描或输入条码" 
						@confirm="okPop"
						border="surround" 
						v-model="code">
					</view>
				</view>
				<view style="display: flex;padding: 50rpx 15rpx 10rpx;justify-content: center;">
					<button size="mini" @click="closePop" :style="{padding:'5px 20px'}">取消</button>
					<button size="mini" type="primary" :loading="subloading" @click="okPop" :style="{padding:'5px 20px'}">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		dealerProductList, 
		dealerProductSave
	} from '@/config/api.js'
    import scanCode from '@/libs/scan-code.vue';
	import { playAudio } from '@/libs/tools.js'
	export default {
		components: { scanCode },
		data() {
			return {
				loading: false,
				subloading: false,
				query:{
					qrCode:'',
					name:'',
					code:''
				},
				detailList:[],
				code:'',
				tempProduct: null,
				noMore: ''
			};
		},
		onLoad(opts) {
		  var _this = this
		  uni.$on('scancodedate', function(content) {
			  console.log("扫描到的内容为:", content)
			  if(_this.tempProduct){
				_this.code = content||''
			  }else{
				   _this.query.qrCode = content||''
				   _this.queryProduct(0)
			  }
		  })
		  
		},
		onShow() {
			this.hideKeyborder()
		},
		onUnload() {
			uni.$off('scancodedate')
		},
		onBackPress() {
			if(this.tempProduct){
				this.closePop()
				return true
			}
		},
		methods: {
			closePop(){
				this.code = ''
				this.tempProduct = null
				this.$refs.popup.close()
			},
			okPop(){
				if(this.code){
					this.productSave()
				}else{
					uni.$u.toast("请输入或扫描条码！")
				}
			},
			hideKeyborder(){
				uni.hideKeyboard()
			},
			productSave(){
				this.subloading = true
				const prams = JSON.parse(JSON.stringify(this.tempProduct))
				prams.qrCode = this.code
				dealerProductSave(prams).then(res => {
					if(res.status == 200){
						this.queryProduct(1)
						this.closePop()
					}
					this.subloading = false
				})
			},
			// 查询产品
			queryProduct(flag){
				if(this.query.code==''&&this.query.qrCode==''&&this.query.name==''){
				  if(!flag){
					  uni.$u.toast("请输入查询条件！")
					  playAudio('error')
					  return
				  }
				}
				const params = { 
					pageNo:1, 
					pageSize:10 ,
					sysFlag: "0"
				}
				this.loading = true
				dealerProductList({...params,...this.query}).then(res => {
					console.log(res)
					if(res.status == 200){
						this.detailList = res.data && res.data.list || []
					}
					if(res.data.count > 10){
						this.noMore = '最多显示前10条匹配产品！'
					}else{
						this.noMore = ''
					}
					this.loading = false
				})
			},
			// 编辑
			toEdit(item) {
				this.tempProduct = item
				this.code = this.tempProduct.qrCode
				this.$refs.popup.open()
				this.hideKeyborder()
			}
		},
	}
</script>

<style lang="scss">
	.p-content{
		button{
			line-height: 1.7;
		}
		.p-head{
			font-size: 32upx;
			color: $uni-text-color;
			>view{
				display: flex;
				align-items: center;
				padding: 15upx 20upx;
				justify-content: space-between;
				> view{
					display: flex;
					padding: 0 10upx;
					align-items: center;
				}
			}
		}
		.p-body{
			overflow: auto;
			flex-grow: 1;
			height: 50%;
		}
		.uni-input{
			border: 1px solid #eee;
			width: 100%;
			padding:10upx;
			font-size: 32rpx;
		}
		.p-footer{
			padding:20upx 30upx;
			display: flex;
			> button{
				width: 30%;
			}
		}
	}
</style>
