<template>
	<view class="p-content">
		<view class="u-forms">
			<u--form
					labelPosition="top"
					:model="form"
					:rules="rules"
					ref="uForm"
					errorType="toast"
					labelWidth="auto"
			>
				<u-form-item
						label="供应商"
						prop="supplierSn"
						borderBottom
						@click="showSupplier = true;"
						ref="item1"
						required
				>
					<u--input
							v-model="supplierName"
							disabled
							inputAlign="right"
							disabledColor="#ffffff"
							placeholder="请选择供应商"
							border="none"
					></u--input>
					<u-icon
							slot="right"
							name="arrow-right"
					></u-icon>
				</u-form-item>
				<u-form-item
						label="散件入库类型"
						prop="sparePartsType"
						borderBottom
						@click="showSparePartsType = true;"
						ref="item2"
						required
				>
					<u--input
							v-model="sparePartsType"
							disabled
							inputAlign="right"
							disabledColor="#ffffff"
							placeholder="请选择散件入库类型"
							border="none"
					></u--input>
					<u-icon
							slot="right"
							name="arrow-right"
					></u-icon>
				</u-form-item>
				<u-form-item
						label="备注"
						ref="item3"
				>
					<u--textarea 
					v-model="form.remarks" 
					:maxlength="200"
					border="bottom"
					placeholder="请输入备注(最多200字符)" 
					count></u--textarea>
				</u-form-item>
			</u--form>
		</view>
		<view class="f-button">
			<u-button @click="cansel" hairline>取消</u-button>
			<u-button type="primary" :loading="spinning" @click="submit" hairline>提交</u-button>
		</view>
		
		<!-- 选择供应商 -->
		<u-picker 
		title="请选择供应商" 
		:show="showSupplier" 
		@cancel="showSupplier = false" 
		@close="showSupplier = false"
		@confirm="supplierSelect" 
		:columns="supplierList" 
		:closeOnClickOverlay="true"
		keyName="supplierName">
		</u-picker>
		<!-- 选择散件入库类型 -->
		<u-picker
			:show="showSparePartsType"
			:columns="sparePartsTypeList"
			title="请选择散件入库类型"
			keyName="name"
			@cancel="showSparePartsType = false"
			@close="showSparePartsType = false"
			@confirm="sparePartsTypeSelect"
			:closeOnClickOverlay="true"
		>
		</u-picker>
	</view>
</template>

<script>
import {sparePartsPurSave} from '@/config/api.js'
export default {
	data() {
		return {
			spinning: false,
			showSupplier: false,
			supplierList: [],
			showSparePartsType: false,
			sparePartsTypeList:[],
			form:{
				supplierSn: undefined,
				sparePartsType: undefined,
				remarks: ''
			},
			supplierName:'',
			sparePartsType:'',
			rules: {
				'supplierSn': {
					type: 'string',
					required: true,
					message: '请选择供应商',
					trigger: ['blur', 'change']
				},
				'sparePartsType': {
					type: 'string',
					required: true,
					message: '请选择散件入库类型',
					trigger: ['blur', 'change']
				},
			}
		};
	},
	methods: {
		// 选择供应商
		supplierSelect(e) {
			console.log(e)
			this.form.supplierSn = e.value[0].supplierSn
			this.supplierName = e.value[0].supplierName
			this.$refs.uForm.validateField('supplierSn')
			this.showSupplier = false
		},
		// 选择散件入库类型
		sparePartsTypeSelect(e) {
			console.log(e)
			this.form.sparePartsType = e.value[0].sparePartsPutTypeSn
			this.sparePartsType = e.value[0].name
			this.$refs.uForm.validateField('sparePartsType')
			this.showSparePartsType = false
		},
		// 保存
		submit() {
			this.$refs.uForm.validate().then(res => {
				this.spinning = true
				this.form.sourceType = 'HAND'
				sparePartsPurSave(this.form,{custom:{catch:true}}).then(res => {
					console.log(res)
					if(res.status == 200){
						uni.redirectTo({
							url:"/pages/stockIn/index?sn="+res.data.sparePartsPurchaseSn+"&id="+res.data.id
						})
					}
					this.spinning = false
				}).catch(res => {
					this.spinning = false
				})
			}).catch(errors => {
				console.log('校验失败')
			})
		},
		cansel(){
			uni.navigateBack()
		}
	},
	onLoad() {
		this.supplierList = [this.$store.state.vuex_supplierList]
		this.sparePartsTypeList = [this.$store.state.vuex_sparePartsTypeList]
		console.log(this.supplierList)
	},
	onBackPress(e) {
		if(this.showSupplier||this.showSparePartsType){
			this.showSupplier = false
			this.showSparePartsType = false
			return true
		}
	},
	onReady() {
		//如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
    	this.$refs.uForm.setRules(this.rules)
    },
};
</script>

<style lang="scss">
	.p-content{
		.u-forms{
			flex-grow: 1;
			height: 100%;
			overflow: auto;
			padding: 0 50upx;
		}
		.f-button{
			display: flex;
			justify-content: space-around;
			padding: 60upx 40upx;
			button{
				width: 40%;
			}
		}
	}
</style>