<template>
	<view class="p-content">
		<view class="p-body">
			<uni-forms-item label-width="100" label="产品条码:">
				<view style="display: flex;">
					<u-text type="info" :text="formData.qrCode||'--'"></u-text>
					<copyText :text="formData.qrCode" label="产品条码"></copyText>
				</view>
			</uni-forms-item>
			<uni-forms-item label-width="100" label="产品编码:">
				<view style="display: flex;">
					<u-text type="info" :text="formData.productCode||'--'"> </u-text>
					<copyText :text="formData.productCode" label="产品编码"></copyText>
				</view>
			</uni-forms-item>
			<uni-forms-item label-width="100" label="产品名称:">
				<u-text type="info" :text="formData.productName||'--'"></u-text>
			</uni-forms-item>
			<uni-forms-item label-width="100" label="原厂编码:">
				<view style="display: flex;">
					<u-text type="info" :text="formData.productOrigCode||'--'"></u-text>
					<copyText :text="formData.productOrigCode" label="原厂编码"></copyText>
				</view>
			</uni-forms-item>
			<uni-forms-item label-width="100" label="产品品牌:">
				<u-text type="info" :text="formData.brandName||'--'"></u-text>
			</uni-forms-item>
			<uni-forms-item label-width="100" label="单位:">
				<u-text type="info" :text="formData.productUnit||'--'"></u-text>
			</uni-forms-item>
			<uni-forms-item label-width="100" label="库存数量:">
				<u-text type="info" :text="formData.stockQty"></u-text>
			</uni-forms-item>
			<uni-forms-item label-width="100" label="盘点数量:">
				<u-text type="info" :text="formData.checkQty"></u-text>
			</uni-forms-item>
			<uni-forms-item label-width="100" label="盈亏数量:">
				<span :style="{ color: formData.checkProfitLossQty>0?'red':formData.checkProfitLossQty<0?'green':'' }">{{ (formData.checkProfitLossQty || formData.checkProfitLossQty==0) ? Math.abs(formData.checkProfitLossQty) : '--' }}</span>
			</uni-forms-item>
			<uni-forms-item v-if="formData.checkProfitLossCost" label-width="100" label="盈亏成本:">
				<span :style="{ color: formData.checkProfitLossCost>0?'red':formData.checkProfitLossCost<0?'green':'' }">￥{{ (formData.checkProfitLossCost || formData.checkProfitLossCost==0) ? Number(formData.checkProfitLossCost).toFixed(2) : '--' }}</span>
			</uni-forms-item>
			<uni-forms-item label-width="100" label="仓库仓位:">
				<u-text v-if="formData.warehouseName" type="info" :text="formData.warehouseName+'>'+formData.warehouseLocationName"></u-text>
				<u-text v-else type="info" text="--"></u-text>
			</uni-forms-item>
			<u-modal 
			:show="showModal" 
			title="提示" 
			showCancelButton 
			content='删除后不可恢复，确定要进行删除吗？'
			 @confirm="delRow" 
			 @cancel="showModal=false"
			 @close="showModal=false"
			 ></u-modal>
		</view>
		<view class="p-footer" v-if="state == 'WAIT_SUBMIT'">
			<button size="mini" type="warn" @tap="openCon">删除</button>
		</view>
	</view>
</template>

<script>
	import { checkWarehouseDetailDel } from "@/config/api.js"
	import copyText from '@/pages/common/copyText.vue'
	export default {
		components: { copyText },
		data() {
			return {
				formData: null,
				showModal: false,
				state: null
			};
		},
		onLoad(opts) {
			this.formData = this.$store.state.vuex_tempData
			this.state = opts.state
		},
		methods: {
			openCon(){
				this.showModal = true
			},
			delRow() {
			   checkWarehouseDetailDel({ id: this.formData.id, checkWarehouseSn: this.formData.checkWarehouseSn }).then(res => {
				 if (res.status == 200) {
				   uni.$u.toast(res.message)
				   uni.navigateBack()
				 }
			   })
			}
		}
	}
</script>

<style lang="scss">
.p-content{
	padding: 0 40rpx;
	.p-body{
		flex-grow: 1;
		height: 50%;
		overflow: auto;
		.input{
			font-size: 30upx;
			height: 36px;
			line-height: 36px;
		}
		.uni-forms-item{
			margin-bottom: 0;
			padding: 25upx 0;
			border-bottom: 1px solid #eee;
		}
	}
	/deep/ .uni-forms-item__label{
		height: auto;
		width: 180rpx;
		align-items: flex-start;
	}
	.p-footer{
		padding: 20upx;
		text-align: center;
		button{
			width: 60%;
			padding: 10upx 0;
		}
	}
}
</style>
