<style lang="scss">
	.container{
		background:#f6f6f6;
		min-height: 100%;
		padding:30rpx 0;

		.card{
			margin-top:0;
			&.info{
				.name{
					display: flex;
					align-items: center;
					margin-bottom: 14rpx;
					text{
						&:first-child{
							flex-shrink: 0;
							color:#fff;
							background:#10C176;
							font-size:20rpx;
							height:40rpx;
							width:80rpx;
							border-radius: 4rpx;
							text-align: center;
							line-height: 40rpx;
							margin-right:16rpx;
						}
						&:nth-child(2){
							flex-grow: 1;
						}
						&:nth-child(3){
							flex-shrink: 0;
							color:#fff;
							background:#10C176;
							border-radius: 50%;
							width:34rpx;
							height:34rpx;
							text-align: center;
							line-height: 34rpx;
						}
					}
				}
				.company{
					text{
						font-size:24rpx;
						&:first-child{
							color:#FBA83C;
							margin-right:16rpx;
						}
						&:nth-child(2){
							color:#999;
						}
					}
				}
			}
			.u-form{
				&>.u-form-item{
					&/deep/ {
						.u-form-item__body__left{
							.u-form-item__body__left__content{
								.u-form-item__body__left__content__required{
									position:initial;
									margin-right:4rpx;
								}
							}
						}
						.u-form-item__body__right__message{
							margin-left:0!important;
						}
					}
				}
				.plant-youbian{
					padding:18rpx 18rpx;
					border-radius: 24rpx;
					width:100%;
					display:flex;
					align-items: center;
					flex-direction: row-reverse;
					justify-content: space-between;
					background:#F7F7F7;
					margin-top:14rpx;
					color:rgb(48,49,51);
					&.noData{
						color:rgb(192, 196, 204);
					}
					&:before{
						transform: rotate(90deg);
						color:rgb(48,49,51);
					}
				}
			}
		}

		.agr-picker{
			padding:0 30rpx;
			display:flex;
			flex-direction: column;
			justify-content: space-evenly;
			.name{
				display:flex;
				align-items: center;
				text{
					&:first-child{
						flex-shrink: 0;
						color:#fff;
						font-size:20rpx;
						border-radius: 0px 20rpx 0px 20rpx;
						background:#10C176;
						width:80rpx;
						height:40rpx;
						text-align: center;
						line-height: 40rpx;
						margin-right:10rpx;
					}
					&:nth-child(2){
						flex-grow: 1;
						display:flex;
						align-items: center;
						font-weight: bold;
						margin-right:20rpx;
					}
				}
			}
			.company{
				text{
					font-size:24rpx;
					&:first-child{
						color:#FBA83C;
						margin-right:16rpx;
					}
					&:nth-child(2){
						color:#999;
					}
				}
			}
		}
	}
</style>
<template>
	<view class="container">
		<d-navbar style="--bg:#10C176;--c:#fff;" isBack text="农资规格">
			<button slot="right" class="cu-btn round" @click="submit">确定</button>
		</d-navbar>

		<view class="card info">
			<view class="name">
				<text>{{agrDetail.goodsType}}</text> <text>{{agrDetail.substanceName}}</text> <text @click="$u.route({type:'navigateBack'})" class="plant-jiantou_zuoyouqiehuan"/>
			</view>
			<view class="company">
				<text>{{agrDetail.goodsDetailType}}</text> <text>{{agrDetail.supplier}}</text>
			</view>
		</view>

		<view class="card">
			<u-form class="inline" labelWidth="auto">
				<u-form-item label="规格" prop="specificationId" :required="true">
					<view class="plant-youbian" :class="{noData: !formData.specDescribe}" @click="$refs.Dpicker.show=true">{{formData.specDescribe||"请选择规格"}}</view>
				</u-form-item>
				<d-form v-bind="inputQuantity" :value="formData.inputQuantity" @input="formData.inputQuantity=$event"/>
			</u-form>
		</view>

		<d-picker ref="Dpicker" :list="specs.list" @select="select"/>
	</view>
</template>
<script>
import request from '@/common/request.js'
export default {
	data(){
		return{
			specs:{
				tip:"",
				list:[]
			},
			inputQuantity:{
				label:"投入数量",
				required:true,
				type:"digit",
				field:"inputQuantity",
				suffix:"",
				tip:"",
			},

			formData:{
				specificationId:"",
				number:'',//规格数量
				specDescribe:"",//规格名称

				inputQuantity:"",
				inventoryId:"",
			},
			agrDetail:{},
			eventChannel:null,
		}
	},
	computed:{
		specsVal(){
			return{
				specs:(this.formData.specDescribe.match(/(\d+)(.+?)\/(.+?)/)||[]).slice(1,4),
				num:this.formData.inputQuantity
			}
		},
	},
	watch:{
		specsVal(n){
			this.inputQuantity.suffix=n.specs[1]
			if(n.num>0 && n.specs[0]>0){
				this.$set(this.inputQuantity, "tip", `共${parseFloat(n.num)/parseFloat(n.specs[0])}${n.specs[2]}`)
			}else{
				this.$set(this.inputQuantity, "tip", "")
			}
		}
	},
	async onLoad(options){
		this.eventChannel=this.getOpenerEventChannel()
		this.eventChannel.on("detail", e=>{
			this.agrDetail=e
			this.init()
		})
	},
	methods:{
		async init(){
			var res=await request("/api/plantFarming/getSpecification",{
				params:{
					goodsId: this.agrDetail.goodsId,
					baseId: this.$store.state.baseInfo.id,
				}
			})
			if(res.statu){
				this.$provise.emit("forming_agr", list=>{
					this.specs.list=res.data.map(v=>{
						v.number-=list.reduce((a,b)=>a+(b.inventoryId==v.id?b.inputQuantity:0),0)
						return v
					}).filter(v=>v.number>0)
				})
				this.specs.tip=res.data.inventory
			}else{
				uni.showModal({
					title:"提示",
					content:res.msg||"获取规格选项失败！",
					showCancel:false,
				})
			}
		},
		select(e){
			this.formData.specificationId=e.specId
			this.formData.inventoryId=e.id

			this.formData.number=e.number
			this.formData.specDescribe=e.specDescribe
		},
		check(){
			if(!this.formData.specificationId){
				uni.showToast({title:"规格必选！",icon:"none"})
				return false
			}else if(!(this.formData.inputQuantity>0)){
				uni.showToast({title:"投入数量必填！",icon:"none"})
				return false
			}else if(parseFloat(this.specsVal.num)/parseFloat(this.specsVal.specs[0])>this.formData.number){
				uni.showToast({title:`投入数量不能大于${this.formData.number}${this.specsVal.specs[2]}！`,icon:"none"})
				return false
			}
			return true
		},
		submit(){
			if(this.check()){
				this.eventChannel.emit("update", {
					...this.formData,
					specs:this.specsVal.specs,
					goodsType: this.agrDetail.goodsType,
					substanceName: this.agrDetail.substanceName,
				})
				uni.navigateBack()
			}
		},
	}
}
</script>