<template>
	<view class="p-content">
		<view class="p-head">
			<view v-if="baseData">
				<view>
					<text>盘点单号：</text>
					<text style="color: crimson;">{{baseData.checkWarehouseNo}}</text>
				</view>
				<view>
					<button size="mini" :disabled="loading" type="warn" @click="submitIn"> 提交 <text class="iconfont icon-icon-test43"></text></button>
				</view>
			</view>
			<view>
				<view>
					<text>产品条码：</text>
					<view style="flex-grow: 1;display: flex;align-items: center;">
						<input 
						:focus="true"
						style="width: 150px;text-align: left;font-size: 32rpx;padding: 6rpx 0 6rpx 7rpx;" 
						class="uni-input" 
						placeholder="扫描或输入条码" 
						border="surround" 
						v-model="code">
						<button size="mini" @click="queryProduct" :style="{padding:'2px 10px',color:'#00aaff'}">查询</button>
					</view>
				</view>
				<view></view>
			</view>
			<view v-if="curProduct">
				<view>
					<text style="width:180rpx">产品名称：</text>
					<view>
						 {{curProduct.productName}}
					</view>
				</view>
			</view>
			<view v-if="curProduct">
				<view>盘点数量:<input class="uni-input" v-model="curProduct.checkQty" :min="0" @blur="updateCurr" type="digit"/></view>
				<view>库存数量:{{curProduct.stockQty}}</view>
			</view>
			<view v-if="countData" style="justify-content: flex-start;flex-wrap: wrap;">
				<view>共{{countData.totalCategory||0}}款</view>
				<view>总数量:{{countData.stockQty||0}}</view>
				<view>盈亏数量:<span :style="{ color: countData.totalCheckProfitLossQty>0?'red':countData.totalCheckProfitLossQty<0?'green':'' }">{{ (countData.totalCheckProfitLossQty || countData.totalCheckProfitLossQty==0) ? Math.abs(countData.totalCheckProfitLossQty) : '--' }}</span></view>
			</view>
		</view>
		<view class="p-body">
			<uni-table style="width: 100%;" 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="curProduct&&curProduct.qrCode == item.qrCode" @click="toDetail(item)">
					<uni-td width="40%" align="center">{{item.productCode}}</uni-td>
					<uni-td width="30%" align="center">{{item.stockQty}}</uni-td>
					<uni-td width="30%" align="center">
						 <span :style="{ color: item.checkProfitLossQty>0?'red':item.checkProfitLossQty<0?'green':'' }">{{ (item.checkProfitLossQty || item.checkProfitLossQty==0) ? Math.abs(item.checkProfitLossQty) : '--' }}</span>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="p-footer">
			<button size="mini" type="warn" @click="addQty(false)"> <text class="iconfont icon-reduce-btn"> 减 </text></button>
			<button size="mini" type="primary" @click="addQty(true)"> <text class="iconfont icon-add-btn"> 加 </text></button>
		</view>
		<scanCode></scanCode>
	</view>
</template>

<script>
	import scanCode from '@/libs/scan-code.vue';
	import { playAudio } from '@/libs/tools.js'
	import { 
		checkWarehouseDetailStockList,
		checkWarehouseDetailBySn, 
		checkWarehouseDetailList, 
		checkWarehouseDetailCount,
		checkWarehouseDetailSave,
		checkWarehouseDetailDel,
		checkWarehouseSubmit} from '@/config/api.js'
	export default {
		components: { scanCode },
		data() {
			return {
				checkWarehouseSn: '',
				checkWarehouseId: null,
				loading: false,
				detailList:[],
				countData: null,
				code:'',
				baseData: null,
				curProduct: null,
			};
		},
		onLoad(opts) {
		  var _this = this
		  this.checkWarehouseSn = opts.checkWarehouseSn
		  this.checkWarehouseId = opts.id
		 
		  uni.$on('scancodedate', function(content) {
			  console.log("扫描到的内容为:", content)
			  _this.code = content||''
			  _this.queryProduct()
		  })
		  
		  this.getDetail()
		  this.pageInit()
		},
		onShow() {
			this.pageInit()
			this.hideKeyborder()
		},
		onUnload() {
			uni.$off('scancodedate')
		},
		onNavigationBarButtonTap(e){
			if(e.index == 0){
				uni.navigateTo({
					url: "/pages/stockPan/list"
				})
			}
		},
		methods: {
			pageInit(){
				this.getTotal()
				this.getDetailList()
			},
			hideKeyborder(){
				uni.hideKeyboard()
			},
			// 修改数量和成本
			updateCurr(){
				if(this.curProduct.checkQty>0){
					this.addDetailProduct(this.curProduct, true)
				}else{
					// 删除
					this.delDetailProduct(this.curProduct)
				}
			},
			// 加减数量
			addQty(type){
				playAudio('info')
				const hasProduct = this.detailList.find(item => item.qrCode == this.code)
				if(hasProduct){
				  hasProduct.checkQty = hasProduct.checkQty + (type ? 1 : -1)
				  if(hasProduct.checkQty>0){
					  this.addDetailProduct(hasProduct, true)
				  }else{
					  // 删除
					  this.delDetailProduct(hasProduct)
				  }
				}
			},
			// 删除
			delDetailProduct(item) {
			   checkWarehouseDetailDel({ id: item.id, checkWarehouseSn: this.checkWarehouseSn }).then(res => {
				 if (res.status == 200) {
				   uni.$u.toast(res.message)
				   this.pageInit()
				 }
			   })
			},
			// 查询产品
			queryProduct(){
				if(!this.code){
					uni.$u.toast("请扫码或输入条形码！")
					return
				}
				// 如果已添加产品，则累加数量
				const hasProduct = this.detailList.find(item => item.qrCode == this.code)
				console.log(hasProduct)
				if(!!hasProduct){
				  this.addQty(true)
				  return
				}
				if(this.code==''){
				  uni.$u.toast("未识别到条形码！")
				  playAudio('error')
				  return
				}
				const params = { 
					checkWarehouseId: this.checkWarehouseId, 
					qrCode: this.code, 
					pageNo:1, 
					pageSize:1 ,
				}
				console.log(params)
				checkWarehouseDetailStockList(params).then(res => {
					console.log(res)
					if(res.status == 200){
						const curProduct = res.data && res.data.list[0] || null
						console.log(curProduct)
						if(curProduct){
							// 添加产品
							this.addDetailProduct(curProduct, false)
						}else{
							 uni.$u.toast("此商品不存在！")
							 playAudio('error')
						}
					}
				})
			},
			// 添加明细
			addDetailProduct(row, isEdit){
				const params = isEdit ? row : {
					checkWarehouseSn: this.checkWarehouseSn,
					checkCost: row.putCost,
					productSn: row.productSn,
					productCode: row.productCode,
					productOrigCode: row.productOrigCode || undefined,
					productTypeSn1: row.productTypeSn1,
					productTypeSn2: row.productTypeSn2,
					productTypeSn3: row.productTypeSn3,
					brandSn: row.brandSn,
					stockQty: row.currentQty,
					lastStockTime: row.lastStockTime,
					checkProfitLossCost: row.lastStockCost,
					stockBatchNo: row.stockBatchNo || undefined,
					productProduceDate: row.productProduceDate || undefined,
					productExpiryDate: row.productExpiryDate || undefined,
					warehouseSn: row.warehouseSn || undefined,
					warehouseLocationSn: row.warehouseLocationSn || undefined
				};
				console.log(params)
				this.loading = true
				checkWarehouseDetailSave(params).then(res => {
				  console.log(res,'添加')
				  if (res.status == 200) {
				    this.loading = false
					this.pageInit()
				  } else {
				    this.loading = false
				  }
				})
			},
			// 详情
			getDetail(){
				checkWarehouseDetailBySn({sn: this.checkWarehouseSn}).then(res => {
					if(res.status == 200){
						this.baseData = res.data
					}
				})
			},
			// 已添加产品列表
			getDetailList(){
				checkWarehouseDetailList({pageNo:1,pageSize:1000,checkWarehouseSn:this.checkWarehouseSn}).then(res => {
					console.log(res,'已添加产品列表')
					if(res.status == 200){
						this.detailList = res.data.list
						const curProduct = this.detailList.find(item => item.qrCode == this.code)
						this.curProduct = curProduct || null
					}
				})
			},
			getTotal(){
				checkWarehouseDetailCount({checkWarehouseSn:this.checkWarehouseSn}).then(res => {
					console.log(res,'getTotal')
					this.countData = res.data
				})
			},
			// 商品详情
			toDetail(item) {
				this.$store.state.vuex_tempData = item
				uni.navigateTo({
					url:"/pages/stockPan/detail?state="+this.baseData.state
				})
			},
			// 提交盘点
			submitIn(){
				checkWarehouseSubmit({id: this.checkWarehouseId, auditFlag: true}).then(res => {
					if(res.status == 200){
						uni.$emit("refashList")
						uni.navigateBack()
					}
				})
			}
		},
	}
</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;
				border-bottom: 1px solid #eee;
				justify-content: space-between;
				> view{
					display: flex;
					padding: 0 10upx;
					align-items: center;
				}
			}
			.uni-input{
				border: 1px solid #eee;
				width: 150upx;
				text-align: center;
			}
		}
		.p-body{
			overflow: auto;
			flex-grow: 1;
			height: 50%;
		}
		.p-footer{
			padding:20upx 30upx;
			display: flex;
			> button{
				width: 30%;
			}
		}
	}
</style>
