<style lang="scss">
	.container{
		min-height: 100%;
		background:#F6F6F6;
		padding:30rpx 0;
		.card{
			margin-top:0;
			&>.title{
				display:flex;
				align-items: center;
				justify-content: space-between;
				text:nth-child(2){
					color:#777;
				}
			}
		}
		&>.fertilizer{
			&>.name{
				display:flex;
				align-items: center;
				margin-bottom:14rpx;
				text{
					&:first-child{
						font-size:20rpx;
						color:#fff;
						background:#10C176;
						border-radius: 7rpx;
						min-width:80rpx;
						padding:0 6rpx;
						text-align: center;
						height:40rpx;
						line-height: 40rpx;
						margin-right:16rpx;
						box-sizing: border-box;
					}
					&:nth-child(3){
						border-radius: 50%;
						background:#10C176;
						color:#fff;
						margin-left:auto;
						width:35rpx;
						height:35rpx;
						text-align: center;
						line-height: 35rpx;
					}
				}
			}
			&>.company{
				display:flex;
				align-items: center;
				text{
					&:first-child{
						flex-shrink: 0;
						font-size:20rpx;
						color:#FBA83C;
					}
					&:nth-child(2){
						margin-left:20rpx;
						font-size:20rpx;
						color:#707070;
					}
				}
			}
		}
		&>.specs{
			.select{
				flex-grow: 1;
				height:80rpx;
				line-height: 80rpx;
				background:#F7F7F7;
				border-radius: 24rpx;
				padding:0 28rpx;
				display:flex;
				text{
					color:#999;
					&:first-child{
						flex-grow: 1;
					}
					&:nth-child(2){
						flex-shrink: 0;
						transform: rotate(90deg);
					}
				}
			}
			.plant-xinjian{
				color:#10C176;
				border-radius: 24rpx;
				margin-left:24rpx;
				background:#E7FCF3;
				height:80rpx;
				line-height: 80rpx;
				width:120rpx;
				text-align: center;
				box-shadow: 6rpx 6rpx 8rpx rgba(16,193,118,0.1);
			}
			.tip{
				color:#FBA83C;
				font-size:24rpx;
				margin-top:12rpx;
			}
		}
		&>.purchase{
			.input{
				display:flex;
				background:#F7F7F7;
				border-radius: 24rpx;
				padding:20rpx;
				input{
					flex-grow: 1;
				}
				text{
					color:#999;
					line-height: 40rpx;
					margin-left:20rpx;
				}
			}
		}
		.dPicker{
			.stock-picker{
				display:flex;
				flex-direction: column;
				justify-content: space-evenly;
				padding:0 20rpx;
				&>.info{
					display:flex;
					align-items: center;
					text{
						&:first-child{
							color:#fff;
							background:#10C176;
							height:40rpx;
							min-width:80rpx;
							text-align: center;
							line-height: 40rpx;
							border-radius: 0 20rpx 0 20rpx;
							margin-right:10rpx;
							padding:0 6rpx;
							font-size:24rpx;
						}
						&:nth-child(2){
							&:after{
								content:"("attr(data-unit)")";
								color:#999;
								font-size:18rpx;
								line-height: 40rpx;
								margin-left:6rpx;
							}
						}
						&:nth-child(3){
							margin-left:auto;
							color:#F34848;
							font-size:20rpx;
						}
					}
				}
				&>.company{
					font-size:24rpx;
					display: flex;
					text{
						color:var(--c);
						&:first-child{
							flex-shrink: 0;
						}
					}
				}
			}
		}
	}
</style>
<template>
	<view class="container">
		<view class="card fertilizer">
			<view class="name">
				<text>{{detail.agriculturalGoods}}</text>
				<text>{{detail.substanceName}}</text>
				<!-- <text class="plant-jiantou_zuoyouqiehuan" @click="$refs.dPicker.show=true"/> -->
			</view>
			<view class="company">
				<text>{{detail.detailType}}</text>
				<text>{{detail.supplierName}}</text>
			</view>
		</view>

		<view class="card specs">
			<view class="title">
				<text>规格</text> <text>{{detail.specDescribe}}</text>
			</view>
			<view class="tip">库存：{{detail.equivalentInventory}}{{detail.packgeUnit}}({{detail.equivalentInventory*detail.unitNum}}{{detail.unit}})</view>
		</view>

		<view class="card">
			<u-form class="inline" errorType="toast" :model="formData" ref="form" :rules="rules" labelWidth="auto">
				<d-form
					v-for="(v,k) in fields" :key="k"
					v-bind="v"
					:label="`${({in:'入',out:'出'})[mode]}${v.label}`"
					:field="k"
					:required="!!rules[k]"
					:value="/^select$/.test(v.type)?fields[k].value:formData[k]"
					@select="formData[k]=$event.value[0].value;fields[k].value=[formData[k]]"
					@imgs="fields[k].value=$event"
					@input="formData[k]=$event"/>
			</u-form>
		</view>

		<button class="cu-btn round bg-green shadow submit" @click="submit">确定</button>

	</view>
</template>
<script>
import request from '@/common/request'
import dForm from '../../uni_modules/d-form/components/d-form/d-form.vue'
export default{
  components: { dForm },
	data(){
		return{
			mode:"",
			detail:{},

			fields:{
				inOutType:{label:"库类型",type:"select",columns:[],value:[]},
				inOutBatchNo:{label:"库批次号",btnText:"生成",btnFun:()=>this.formData.inOutBatchNo=`${({in:'RK',out:'CK'})[this.mode]}${new Date().format('yyyyMMdd')}${new Date().getTime()}`},
				pic:{label:"库凭证",type:"upImg",value:"",num:3},
				number:{label:"库数量",placeholder:"请输入采购数量"},
			},
			formData:{
				inOutType:"",
				goodsId:"",
				inOutBatchNo:"",
				pic:[],
				number:"",
				substanceType:"",
			},
			rules:{
				inOutType:{required:true},
				inOutBatchNo:{required:true},
				// pic:{required:true,validator(rule,val,call){
				// 	if(!this.fields.pic.value)call(new Error("请上传库凭证！"));
				// 	else call()
				// }},
				number:{required:true,validator(rule,val,call){
					if(!val)call(new Error(`请输入${({in:'入',out:'出'})[this.mode]}库数量！`));
					else if(this.mode=='out' && val>this.detail.equivalentInventory)call(new Error(`${({in:'入',out:'出'})[this.mode]}库数量不能大于库存数量！`));
					else call()
				},type:"number"},
			},
			mode:"",
			eventChannel:null,
		}
	},
	onLoad(options){
		this.eventChannel=this.getOpenerEventChannel()
		this.eventChannel.on("detail", e=>{
			this.detail=e
			this.fields.number.suffix=(e.specDescribe.match(/\/(.+)/)||['',''])[1]
			this.formData.goodsId=e.id
		})
		this.formData.substanceType = ({nz:1, ncp:2})[options.type],
		this.mode=options.mode
		uni.setNavigationBarTitle({
			title:({out:"出库",in:"入库"})[this.mode]
		})
		this.init()
	},
	methods:{
		async init(){
			var res=await request("/common/api/dict/queryDictItemByDictCode",{
				method:"post",
				params:{dictCode: ({out:"out_type",in:"in_type"})[this.mode]}
			})
			if(res.statu){
				this.fields.inOutType.columns=[res.data]
			}else{
				uni.showModal({
					title:"提示",
					content:res.msg||"获取企业类型选项失败！",
					showCancel:false,
				})
			}
		},
		submit(){
			this.$refs.form.validate().then(async valid=>{
				if(valid){
					var res=await request("/api/Inventory/inventoryOperate",{
						method:"post",
						body:{
							...this.formData,
							inventoryId: this.detail.inventoryId,
							equivalentAmount: this.detail.equivalentInventory,
							supplier: this.detail.supplierName,
							pic:this.fields.pic.value,
							type: ({in:2, out:1})[this.mode],
						}
					})
					if(res.statu){
						uni.navigateBack()
						this.eventChannel.emit("update")
					}else{
						uni.showModal({
							title:"提示",
							content:res.msg||"保存失败！",
							showCancel:false,
						})
					}
				}
			})
		},
	},
}
</script>