<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">
			<view class="uni-table">
				 <!-- 表头行 -->
				<uni-tr>
					<uni-td width="30%" align="center">产品编码</uni-td>
					<uni-td width="40%" align="center">产品名称</uni-td>
					<uni-td width="30%" align="center">条形码</uni-td>
				</uni-tr>
			</view>
			<scroll-view enable-flex scroll-y="true" class="table-scroll-body" @scrolltolower="scrolltolower">
				<uni-table style="width: 100%;" border :loading="loading">
					<!-- 表格数据行 -->
					<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>
			</scroll-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,
				pageNo: 1,
				pageSize: 10,
				total: 0,
			};
		},
		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
				console.log(prams)
				dealerProductSave(prams).then(res => {
					if(res.status == 200){
						this.pageNo = 1
						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:this.pageNo, 
					pageSize: this.pageSize ,
					sysFlag: "0"
				}
				this.loading = true
				dealerProductList({...params,...this.query}).then(res => {
					console.log(res)
					if(res.status == 200){
						const list = res.data.list||[]
						this.total = res.data.count
						if(this.pageNo == 1){
							this.detailList = list
						}else{
							this.detailList = this.detailList.concat(list)
						}
					}
					this.loading = false
				})
			},
			scrolltolower(e){
				const pageNums = Math.ceil(this.total / this.pageSize)
				if(this.pageNo < pageNums){
					this.pageNo = this.pageNo + 1
					this.queryProduct()
				}else{
					uni.$u.toast("没有更多数据了!")
				}
			},
			// 编辑
			toEdit(item) {
				this.tempProduct = item
				this.code = item.qrCode || ''
				this.$refs.popup.open()
				this.hideKeyborder()
			}
		},
	}
</script>

<style lang="scss">
	$border-color:#EBEEF5;
	.p-content{
		button{
			line-height: 1.7;
		}
		.uni-table {
			position: relative;
			width: 100%;
			border-radius: 5px;
			background-color: #fff;
			/* #ifndef APP-NVUE */
			box-sizing: border-box;
			display: table;
			overflow-x: auto;
			::v-deep .uni-table-tr:nth-child(n + 2) {
				&:hover {
					background-color: #f5f7fa;
				}
			}
			::v-deep .uni-table-td{
				border-right: 1px $border-color solid;
			}
			/* #endif */
		}
		.table-scroll-body{
			height: calc(100% - 32px);
			width: 100%;
			overflow: auto;
		}
		.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>