<template>
	<view class="p-content">
		<view class="p-head" v-if="baseData">
			<view>
				<view>
					<text>盘点单号：</text>
					<text style="color: crimson;">{{baseData.checkWarehouseNo}}</text>
				</view>
			</view>
			<view>
				<view>
					<text>盘点类型：</text>
					<view>
						{{baseData.checkTypeDictValue}}
					</view>
				</view>
				<view>
					<text>创建人：</text>
					<view>
						{{baseData.creatorName}}
					</view>
				</view>
			</view>
			 <view>
				 <view>
				 	<text>盘点仓库：</text>
				 	<view>
				 		{{baseData.warehouseNameList||'--'}}
				 	</view>
				 </view>
			 </view>
			 <view>
			 	<view>
			 		<text>创建时间：</text>
			 		<view>
			 			{{baseData.createDate}}
			 		</view>
			 	</view>
			 </view>
			 <view>
			 	<view>
			 		<text>审核时间：</text>
			 		<view>
			 			{{baseData.checkSuperviseTime}}
			 		</view>
			 	</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 v-if="baseData&&baseData.state == 'FINISH'">盈亏总成本:<span :style="{ color: countData.totalCheckProfitLossCost>0?'red':countData.totalCheckProfitLossCost<0?'green':'' }">￥{{ (countData.totalCheckProfitLossCost || countData.totalCheckProfitLossCost==0) ? Number(countData.totalCheckProfitLossCost).toFixed(2) : '--' }}</span></view>
			</view>
		</view>
		<view class="p-body">
			<view class="uni-table">
				 <!-- 表头行 -->
				 <uni-tr>
				 	<uni-td width="30%" align="center">产品编码</uni-td>
				 	<uni-td width="22%" align="center">库存</uni-td>
				 	<uni-td width="26%" align="center">盈亏数量</uni-td>
				 	<uni-td width="22%" align="center" v-if="baseData&&baseData.state == 'FINISH'" >盈亏成本</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" @click="toDetail(item)">
						<uni-td width="30%" align="center">{{item.productCode}}</uni-td>
						<uni-td width="22%" align="center">{{item.stockQty}}</uni-td>
						<uni-td width="26%" 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-td width="22%" align="center" v-if="baseData&&baseData.state == 'FINISH'" >
							<span :style="{ color: item.checkProfitLossCost>0?'red':item.checkProfitLossCost<0?'green':'' }">￥{{ (item.checkProfitLossCost || item.checkProfitLossCost==0) ? Number(item.checkProfitLossCost).toFixed(2) : '--' }}</span>
						</uni-td>
					</uni-tr>
				</uni-table>
			</scroll-view>
		</view>
		<view class="p-footer" v-if="baseData&&baseData.state == 'WAIT_CHECK_WAREHOUSE'">
			<button size="mini" type="warn" @click="showModal=true"> 重盘 <text class="iconfont icon-icon-test43"></text></button>
		</view>
		<u-modal
		:show="showModal" 
		title="提示" 
		showCancelButton 
		content='重新盘点后，盘点单状态回退到待提交。确认重新盘点吗？'
		 @confirm="submitIn" 
		 @cancel="showModal=false"
		 @close="showModal=false"
		 ></u-modal>
	</view>
</template>

<script>
	import { playAudio } from '@/libs/tools.js'
	import { 
		checkWarehouseDetailStockList,
		checkWarehouseDetailBySn, 
		checkWarehouseDetailList, 
		checkWarehouseDetailCount,
		checkWarehouseReInventory} from '@/config/api.js'
	export default {
		components: { },
		data() {
			return {
				showModal: false,
				checkWarehouseSn: '',
				checkWarehouseId: null,
				loading: false,
				detailList:[],
				countData: null,
				code:'',
				baseData: null,
				pageNo: 1,
				pageSize: 10,
				total: 0,
			};
		},
		onLoad(opts) {
		  var _this = this
		  this.checkWarehouseSn = opts.checkWarehouseSn
		  this.checkWarehouseId = opts.id
		  this.getDetail()
		  this.pageInit()
		},
		onShow() {
			this.pageInit()
		},
		methods: {
			pageInit(){
				this.pageNo = 1
				this.getTotal()
				this.getDetailList()
			},
			// 详情
			getDetail(){
				checkWarehouseDetailBySn({sn: this.checkWarehouseSn}).then(res => {
					if(res.status == 200){
						this.baseData = res.data
					}
				})
			},
			// 已添加产品列表
			getDetailList(){
				this.loading = true
				uni.showLoading({
					title: '正在加载...',
					icon: 'none'
				})
				checkWarehouseDetailList({pageNo:this.pageNo,pageSize:this.pageSize,checkWarehouseSn:this.checkWarehouseSn}).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)
						}
					}
					uni.hideLoading()
					this.loading = false
				})
			},
			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(){
				checkWarehouseReInventory({id: this.checkWarehouseId}).then(res => {
					if(res.status == 200){
						uni.navigateBack()
					}
				})
			},
			scrolltolower(e){
				const pageNums = Math.ceil(this.total / this.pageSize)
				if(this.pageNo < pageNums){
					this.pageNo = this.pageNo + 1
					this.getDetailList()
				}else{
					uni.$u.toast("没有更多数据了！")
				}
			}
		},
	}
</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;
				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>
