<template>
	<view class="add">
		<!-- 添加设备出库记录 -->
		<view class="main">
			<u--form labelPosition="left" labelAlign="center" :model="form" ref="form1">

				<u-form-item label="设备名称" prop="equipName" labelWidth="auto" borderBottom @click="showName = true">
					<u--input v-model="form.equipName" border="none" placeholder="请选择设备"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<u-picker :show="showName" :columns="columns" keyName="name"  @cancel='showName=false' @confirm='confirm'></u-picker>
				</u-form-item>

				<u-form-item label="设备编号" prop="equipNo" labelWidth="auto" borderBottom>
					<u--input v-model="form.equipNo" border="none" readonly></u--input>
				</u-form-item>
				
				<u-form-item label="批次" prop="batch" labelWidth="auto" borderBottom @click="showB = true">
					<u--input v-model="form.batch" border="none" placeholder="请选择批次"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<u-picker :show="showB" :columns="columns2" keyName="name"  @cancel='showB=false' @confirm='confirm2'></u-picker>
				</u-form-item>
				<u-form-item label="客户" prop="cName" labelWidth="auto" borderBottom @click="showC = true">
					<u--input v-model="form.cName" border="none" placeholder="请选择客户"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<u-picker :show="showC" :columns="columns3" keyName="name"  @cancel='showC=false' @confirm='confirm3'></u-picker>
				</u-form-item>
				
				<u-form-item label="出库日期" prop="outTime" labelWidth="auto" @click="cgShow = true; " borderBottom
					ref="item1">
					<u--input v-model="form.outTime" disabled disabledColor="#ffffff" placeholder="请选择出库日期"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<u-datetime-picker :show="cgShow" v-model="pickerTime" mode="date" :closeOnClickOverlay="true"
						@close="cgShow = false" @cancel="cgShow = false" @confirm="date2Confirm"></u-datetime-picker>
				</u-form-item>
				<u-form-item label="剩余数量" prop="rnum" labelWidth="auto" borderBottom>
					<u--input v-model="form.rnum" type="number" border="none" readonly></u--input>
				</u-form-item>
				<u-form-item label="出库数量" prop="num" labelWidth="auto" borderBottom>
					<u-input v-model="form.num" type="number" border="none"
					 placeholder="请输入出库数量"
						@click='setTotal()'></u-input>
				</u-form-item>
				<u-form-item label="出库价格" prop="outPrice" labelWidth="auto" borderBottom>
					<u--input v-model="form.outPrice" border="none" type="number" readonly>
					</u--input>
				</u-form-item>
			</u--form>
		</view>

		<view class="submit">
			<u-button type="primary" @click="submit" text="添 加 出 库"></u-button>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				show: true,
				scShow: false,
				cgShow: false,
				form: {
					id: null,
					equipNo: null,
					equipName: null,
					outTime: null,
					batch: null,
					num: null,
					rnum: null,
					outPrice: null,
					totalprice: 0,
					cid: null,
					cName: null,
				},
				pickerTime: Number(new Date()),
				showName: false,
				showB: false,
				showC: false,
				deviceList: [],
				inList: [],
				batchList: [],
				cList: [],
				columns: [],
				columns2: [],
				columns3: [],
			}
		},

		onLoad: function(options) {
			if (options.form) {
				let data = JSON.parse(options.form);
				this.form = data
			}
		},
		onShow: function() {
			this.getList()
			this.getCustomerList()
		},
		created() {},
		methods: {
			async getCustomerList() {
				const {
					data: res
				} = await this.$http('/app/customerList');
				if (res.code) return
				this.cList = res.data;
				this.columns3.push(this.cList)
			},
			async getList() {
				const {
					data: res
				} = await this.$http('/app/equipList')
				if (res.code) return
				this.deviceList = res.data
				this.columns.push(this.deviceList)
			},

			async confirm(d){
				this.form.equipName = d.value[0].name
				this.form.equipNo = d.value[0].eno
				this.form.outPrice = d.value[0].outPrice
				// 重新赋值
				this.inList = [];
				this.batchList = [];
				this.columns2 = [];
				this.form.rnum = null
				this.form.batch = null
				// 发起请求 获取当前设备的所有批次
				const {
					data: res
				} = await this.$http('/app/inList',{"equipName": this.form.equipName})
				if (res.code) return
				this.inList = res.data
				for (var i = 0; i < this.inList.length; i++) {
					this.batchList.push({
						id: this.inList[i].id,
						name: this.inList[i].batch,
						rnum: this.inList[i].rnum
					})
				}
				this.columns2.push(this.batchList)
				this.showName = false;
			},
			confirm2(d){
				this.form.batch = d.value[0].name
				this.form.rnum = d.value[0].rnum
				this.showB = false;
			},
			confirm3(d){
				this.form.cid = d.value[0].id
				this.form.cName = d.value[0].name
				this.showC = false;
			},
			// 添加采购记录
			async submit() {
				let flag = true;
				if(this.form.equipName==null || this.form.equipName=='' ){
					flag = false;
				}
				if(this.form.num == null || this.form.num==''){
					flag = false;
				}else{
					if(this.form.num > this.form.rnum){
						flag = false;
						if(!flag) return uni.showToast({
							title: '剩余数量不足！',
							icon: 'error'
						})
						return;
					}else{
						this.form.totalprice = this.form.num * this.form.outPrice
					}
				}
				if(this.form.batch == null || this.form.batch==''){
					flag = false;
				}
				if(this.form.cName == null || this.form.cName==''){
					flag = false;
				}
				if(this.form.outTime == null || this.form.outTime==''){
					flag = false;
				}
				if(!flag) return uni.showToast({
					title: '请补充设备出库内容',
					icon: 'error'
				})
				const {
					data: res
				} = await this.$http('/app/addEquipOut', this.form)
				if (res.code == 0) {
					uni.showToast({
						title: '添加出库成功',
						icon: 'success'
					});
					this.reset();
					uni.navigateTo({
						url: 'outList',
					})
				} else {
					uni.showToast({
						title: "添加出库失败！",
						icon: 'error'
					})
				}
				
			},
			date2Confirm(e) {
				const timeFormat = uni.$u.timeFormat
				this.cgShow = false;
				this.form.outTime = timeFormat(e.value, 'yyyy-mm-dd');
			},
			reset() {
				this.form = {
					id: null,
					equipNo: null,
					equipName: null,
					outTime: null,
					batch: null,
					num: null,
					rnum: null,
					outPrice: null,
					totalprice: 0,
					cid: null,
					cName: null,
				}
			},
		}
	}
</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>
