<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>农事管理</el-breadcrumb-item>
			<el-breadcrumb-item>入库</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="search-box">
			<div class="filter-box">
				<el-input size="small" placeholder="请输入物料名称" v-model="item_name">
					<i slot="suffix" class="el-input__icon el-icon-search"></i>
				</el-input>
				<el-select size="small" v-model="category" placeholder="请选择品类">
					<el-option label="肥料" value="1"></el-option>
					<el-option label="农药" value="2"></el-option>
					<el-option label="种苗" value="3"></el-option>
					<el-option label="其他" value="4"></el-option>
				</el-select>
			</div>
			<el-button type="primary" size="mini" @click="stockInAdd">入库</el-button>
		</div>
		<el-card class="box-card">
			<el-table :data="tableData" stripe style="width: 100%">
				<el-table-column type="index" label="序号" width="50"></el-table-column>
				<el-table-column prop="stockbatch" label="入库批次"></el-table-column>
				<el-table-column prop="uptime" label="入库日期"></el-table-column>
				<el-table-column prop="typename" label="品类"></el-table-column>
				<el-table-column prop="suppliesname" label="物料名称"></el-table-column>
				<el-table-column prop="suppliescode" label="物料编号"></el-table-column>
				<el-table-column prop="firm" label="生产企业"></el-table-column>
				<el-table-column prop="stocknum" label="入库数量(kg)"></el-table-column>
				<el-table-column prop="farm" label="入库基地"></el-table-column>
				<el-table-column prop="land" label="入库地块"></el-table-column>
				<el-table-column prop="user" label="经办人"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="warning" size="mini" @click="stockInEdit(scope.row)">
							<i class="el-icon-edit"></i>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				layout="prev, pager, next"
				:total="totalNum"
				@current-change="changePage"
			></el-pagination>
		</el-card>
		<!-- 新增入库弹框 -->
		<el-dialog
			title="新增"
			:visible.sync="farmThingAddDialogVisible"
			width="30%"
			@close="AddDialogClosed"
		>
			<el-form ref="addFormRef" :model="addForm" label-width="100px" :rules="addFormRules">
				<el-form-item label="所属地块 : " prop="pro_cascader">
					<el-cascader
						style="width:100%"
						v-model="addForm.pro_cascader"
						:options="FieldCascader"
						:props="{ expandTrigger: 'hover',label:'farmname',value:'farmname'}"
					></el-cascader>
				</el-form-item>
				<el-form-item label="品类 : " prop="category">
					<el-select v-model="addForm.category" style="width: 100%;">
						<el-option label="肥料" value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="物料名称 : " prop="item_name">
					<el-input v-model="addForm.item_name"></el-input>
				</el-form-item>
				<el-form-item label="物料编号 : " prop="item_num">
					<el-input v-model="addForm.item_num"></el-input>
				</el-form-item>
				<el-form-item label="生产企业 : " prop="firm">
					<el-input v-model="addForm.firm"></el-input>
				</el-form-item>
				<el-form-item label="入库批次 : " prop="batch">
					<el-input v-model="addForm.batch"></el-input>
				</el-form-item>
				<el-form-item label="入库数量(kg) : " prop="pro_weight">
					<el-input v-model="addForm.pro_weight"></el-input>
				</el-form-item>
				<el-form-item label="经办人 : " prop="operator">
					<el-input v-model="addForm.operator"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="farmThingAddDialogVisible=false">取 消</el-button>
				<el-button type="primary" @click="addSubm">确认</el-button>
			</span>
		</el-dialog>
		<!-- 编辑入库弹框 -->
		<el-dialog
			title="编辑"
			:visible.sync="farmThingEditDialogVisible"
			width="30%"
			@close="EditDialogClosed"
		>
			<el-form ref="editFormRef" :model="editForm" label-width="100px" :rules="addFormRules">
				<el-form-item label="入库日期 : " prop="date">
					<el-date-picker type="date" placeholder="选择日期" v-model="editForm.date" style="width: 100%;"></el-date-picker>
				</el-form-item>
				<el-form-item label="品类 : " prop="category">
					<el-select v-model="editForm.category" style="width: 100%;">
						<el-option label="肥料" value="1"></el-option>
						<el-option label="农药" value="2"></el-option>
						<el-option label="种苗" value="3"></el-option>
						<el-option label="其他" value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="物料名称 : " prop="item_name">
					<el-input v-model="editForm.item_name"></el-input>
				</el-form-item>
				<el-form-item label="生产企业 : " prop="pro_enterprise">
					<el-input v-model="editForm.pro_enterprise"></el-input>
				</el-form-item>
				<el-form-item label="物料编号 : " prop="item_num">
					<el-input v-model="editForm.item_num"></el-input>
				</el-form-item>
				<el-form-item label="入库数量(kg) : " prop="pro_weight">
					<el-input v-model="editForm.pro_weight"></el-input>
				</el-form-item>
				<el-form-item label="经办人 : " prop="operator">
					<el-select v-model="editForm.operator" style="width: 100%;">
						<el-option label="小张" value="1"></el-option>
						<el-option label="小王" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="备注 : ">
					<el-input type="textarea" v-model="editForm.remark"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="farmThingEditDialogVisible=false">取 消</el-button>
				<el-button type="primary" @click="editSubm">确认</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			tableData: [],
			item_name: '', //筛选物料名称
			category: '', //筛选品类
			farmThingAddDialogVisible: false,
			farmThingEditDialogVisible: false,
			addForm: {
				pro_cascader: [],
				category: '',
				item_name: '',
				item_num: '',
				firm: '',
				batch: '',
				pro_weight: '',
				operator: ''
			},
			editForm: {},
			addFormRules: {
				pro_cascader: [
					{ required: true, message: '请选择所属地块', trigger: 'change' }
				],
				category: [
					{ required: true, message: '请选择品类', trigger: 'change' }
				],
				item_name: [
					{ required: true, message: '请选择物料名称', trigger: 'blur' }
				],
				item_num: [
					{ required: true, message: '请填写物料编号', trigger: 'blur' }
				],
				firm: [{ required: true, message: '请填写生产企业', trigger: 'blur' }],
				batch: [{ required: true, message: '请填写入库批次', trigger: 'blur' }],
				pro_weight: [
					{ required: true, message: '请填写入库数量', trigger: 'blur' }
				],
				operator: [{ required: true, message: '请选择经办人', trigger: 'blur' }]
			},
            totalNum: 1,
            FieldCascader:[]
		}
	},
	created() {
        this.getList()
        this.getAllFieldsCascader()
		// this.$store.dispatch('getBaseLandList');
	},
	computed: {
		//    baseLandList(){
		//        return this.$store.state.baseLandList
		//    }
	},
	methods: {
		getAllFieldsCascader() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.all_base'
			}).then((res) => {
				if (res.data.message == '') {
					this.FieldCascader = res.data.data.data  //所有地块
				}
			})
		},
		getList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.put_stock_info',
				data: this.qs.stringify({
					page: 1
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.tableData = res.data.data.data
					this.totalNum = res.data.data.counts
				}
			})
		},

		stockInEdit(row) {
			console.log(row)
			this.editForm = row
			this.farmThingEditDialogVisible = true
		},
		stockInAdd() {
			this.farmThingAddDialogVisible = true
		},
		addSubm() {
			this.$refs.addFormRef.validate((valid) => {
				if (!valid) return
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=ascend.ascend_manage.put_stock',
					data: this.qs.stringify({
						farm: this.addForm.pro_cascader[0],
						land: this.addForm.pro_cascader[1],
						suppliesname: this.addForm.item_name,
						suppliescode: this.addForm.item_num,
						typename: this.addForm.category,
						stockbatch: this.addForm.batch,
						stocknum: this.addForm.pro_weight,
						firm: this.addForm.firm,
						user: this.addForm.operator
					})
				}).then((res) => {
					if (res.data.message == '') {
						this.getList()
						this.farmThingAddDialogVisible = false
					}
				})
			})
		},
		editSubm() {
			this.$refs.editFormRef.validate((valid) => {
				if (valid) {
					this.farmThingEditDialogVisible = false
				} else {
					console.log('error submit!!')
					return false
				}
			})
		},
		AddDialogClosed() {
			this.$refs.addFormRef.resetFields()
		},
		EditDialogClosed() {
			this.$refs.editFormRef.resetFields()
		},
		changePage(val) {}
	}
}
</script>

<style lang='less' scoped>
.search-box {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	.el-input {
		width: 200px;
	}
}
</style>