<template>
	<view class="add">
		<!-- 设备信息 -->
		<view class="main">
			<u--form labelPosition="left" labelAlign="center" :model="equip" ref="form1">
				<u-form-item label="设备名称" prop="equipName" labelWidth="auto" borderBottom ref="item1">
					<u--input v-model="equip.equipName" border="none" readonly></u--input>
				</u-form-item>
				<u-form-item label="设备编号" prop="equipNo" labelWidth="auto" borderBottom>
					<u--input v-model="equip.equipNo" border="none" readonly></u--input>
				</u-form-item>
				<u-form-item label="批次" prop="batch" labelWidth="auto" borderBottom>
					<u--input v-model="equip.batch" border="none" readonly></u--input>
				</u-form-item>
				<u-form-item label="入库数量" prop="num" labelWidth="auto" borderBottom>
					<u--input v-model="equip.num" border="none" type="number" readonly></u--input>
				</u-form-item>
				<u-form-item label="剩余数量" prop="rnum" labelWidth="auto" borderBottom>
					<u--input v-model="equip.rnum" border="none" type="number" readonly></u--input>
				</u-form-item>
				<u-form-item label="入库价格(元)" prop="price" labelWidth="auto" borderBottom>
					<u--input v-model="equip.price" type="number" border="none" readonly></u--input>
				</u-form-item>
				<u-form-item label="总价(元)" prop="totalPrice" labelWidth="auto" borderBottom>
					<u--input v-model="equip.totalPrice" type="number" border="none" readonly></u--input>
				</u-form-item>
				<u-form-item label="供应商" prop="supplierName" labelWidth="auto" borderBottom>
					<u--input v-model="equip.supplierName" border="none" readonly></u--input>
				</u-form-item>
				<u-form-item label="生产日期" prop="inTime" labelWidth="auto" borderBottom>
					<u--input v-model="equip.inTime" border="none" readonly></u--input>
				</u-form-item>
				
				
				<u-form-item label="退回数量" prop="returnNum" labelWidth="auto" borderBottom v-if="show2">
					<u--input v-model="equip.returnNum" border="none" type="number" placeholder="请输入退回数量"></u--input>
				</u-form-item>
				<u-form-item label="退回日期" prop="untreadTime"
					labelWidth="auto" @click="thShow = true; " borderBottom ref="item1" v-if="show2">
					<u--input
							v-model="equip.untreadTime"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择退回日期"
							border="none"
					></u--input>
					<u-icon
							slot="right"
							name="arrow-right"
					></u-icon>
					<u-datetime-picker
					        :show="thShow"
					        v-model="pickerTime"
					        mode="date"
							:closeOnClickOverlay="true"
							@close="thShow = false"
							@cancel="thShow = false"
							@confirm="date2Confirm"
					></u-datetime-picker>
				</u-form-item>
				<u-form-item label="退回原因" prop="untreadReason" labelWidth="auto" borderBottom ref="item1" v-if="show2">
					<u--textarea v-model="equip.untreadReason" placeholder="请输入退回原因" confirmType="done"></u--textarea>
				</u-form-item>
				
				
				<u-form-item label="报损数量" prop="damageNum" labelWidth="auto" borderBottom v-if="show3">
					<u--input v-model="equip.damageNum" border="none" type="number" placeholder="请输入报损数量"></u--input>
				</u-form-item>
				<u-form-item label="报损日期" prop="damageTime"
					labelWidth="auto" @click="thShow = true; " borderBottom ref="item1" v-if="show3">
					<u--input
							v-model="equip.damageTime"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择报损日期"
							border="none"
					></u--input>
					<u-icon
							slot="right"
							name="arrow-right"
					></u-icon>
					<u-datetime-picker
					        :show="thShow"
					        v-model="pickerTime"
					        mode="date"
							:closeOnClickOverlay="true"
							@close="thShow = false"
							@cancel="thShow = false"
							@confirm="date2Confirm"
					></u-datetime-picker>
				</u-form-item>
				<u-form-item label="报损原因" prop="damageReason" labelWidth="auto" borderBottom ref="item1" v-if="show3">
					<u--textarea v-model="equip.damageReason" placeholder="请输入报损原因" confirmType="done"></u--textarea>
				</u-form-item>
				
			</u--form>

		</view>

		<view class="submit" v-if="show && equip.rnum > 0">
			<u-button style='width: 140px;float: right;margin-right: 2px;' type="error"
			 @click="handleDamage" text="报 损 设 备"></u-button>
		</view>
		<view class="submit" v-if="show3">
			<view style='width: 140px;float: left;margin-left: 2px;'>
				<u-button type="primary" 
				@click="damageEquip" text="确 认 报 损"></u-button>
			</view>
			<view style='width: 140px;float: right;margin-right: 2px;'>
				<u-button  type="error"
				 @click="cancelDamage" text="取 消 报 损"></u-button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				show: true,
				show2: false,
				show3: false,
				thShow: false,
				equip: {
					id: null,
					equipNo: null,
					equipName: null,
					inTime: null,
					batch: null,
					num: null,
					rnum: null,
					price: null,
					totalprice: null,
					supplierId: null,
					supplierName: null,
					productionTime: null,
					totalPrice: null,
					// 报损参数
					damageNum: null,
					damageTime: null,
					damageReason: null,
					type: '1',
				},
				pickerTime: Number(new Date()),

			}
		},

		onLoad: function(options) {
			if (options.equip) {
				let data = JSON.parse(options.equip);
				this.equip = data
			}
		},

		created() {},
		filters: {},
		mounted() {
		},
		methods: {
			// 报损设备按钮
			handleDamage(){
				this.show = false;
				this.show3 = true;
			},
			date2Confirm(e){
				const timeFormat = uni.$u.timeFormat
				this.thShow = false;
				this.equip.damageTime = timeFormat(e.value, 'yyyy-mm-dd');
			},
			// 确认报损按钮
			async damageEquip(){
				let flag = true;
				if(this.equip.damageNum==null || this.equip.damageNum=='' ){
					flag = false;
				}else{
					if(this.equip.damageNum > this.equip.num){
						flag = false;
						if(!flag) return uni.showToast({
							title: '入库数量不足！',
							icon: 'error'
						})
						return;
					}
				}
				
				if(this.equip.damageTime==null || this.equip.damageTime=='' ){
					flag = false;
				}
				if(this.equip.damageReason==null || this.equip.damageReason=='' ){
					flag = false;
				}
				if(!flag) return uni.showToast({
					title: '请补充报损内容',
					icon: 'error'
				})
				const {
					data: res
				} = await this.$http('/app/addEquipDamage', this.equip)
				if (res.code == 0) {
					this.equip.rnum = this.equip.rnum - this.equip.damageNum
					uni.showToast({
						title: '设备报损成功',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: "设备报损失败",
						icon: 'error'
					})
				}
				this.resetD()
				this.show = true;
				this.show3 = false;
			},
			// 取消报损按钮
			cancelDamage(){
				this.resetD()
				this.show = true;
				this.show3 = false;
			},
			resetD(){
				this.equip.damageNum = null;
				this.equip.damageTime = null;
				this.equip.damageReason = null;
			},
			reset() {
				this.equip = {
					id: null,
					equipNo: null,
					equipName: null,
					inTime: null,
					batch: null,
					num: null,
					rnum: null,
					price: null,
					totalprice: null,
					supplierId: null,
					supplierName: null,
					productionTime: null,
					totalPrice: null,
					// 报损参数
					damageNum: null,
					damageTime: null,
					damageReason: null,
					type: '1'
				}
			},
		},
		
	}
</script>

<style lang="scss">
	.submit {
		margin: 1vh 2.667vw;
	}

	.add {
		background: #f6f6f6;
		padding: 2.667vw;
		height: 95vh;

		.main {
			background: #ffffff;
			margin-bottom: 2.667vw;
			padding: 2vw;
			border-radius: 8px;

			.u-form-item__body__right {
				padding-left: 20vw;
			}

			.u-button {
				border: none !important;
				padding: 0 !important;
				justify-content: flex-start;
			}
		}
	}
</style>
