<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-select
					size="small"
					v-model="base"
					clearable
					@change="selChange"
					placeholder="请选择基地名称"
				>
					<el-option
						v-for="item in baseList"
						:label="item.farmname"
						:value="item.farmname"
						:key="item.id"
					></el-option>
				</el-select>
				<el-select
					size="small"
					v-model="pickcode"
					clearable
					@change="selChange"
					placeholder="请选择采收状态"
				>
					<el-option label="已采收" value="1"></el-option>
					<el-option label="未采收" value="0"></el-option>
				</el-select>
			</div>
			<el-button type="primary" size="mini" @click="sprayAdd">新增</el-button>
		</div>
		<el-row :gutter="10">
			<el-col
				:xs="24"
				:sm="24"
				:md="12"
				:lg="6"
				:xl="6"
				v-for="item in fieldsList"
				:key="item.id"
			>
				<el-card class="box-card">
					<img
						class="tag"
						v-if="item.is_pick == '1'"
						src="@/assets/images/sy/farmThing/picked.png"
					/>
					<div class="img-box">
						<img src="@/assets/images/sy/farmThing/more.png" />
					</div>
					<div class="detail">
						<p class="borderLine">操作基地 : {{ item.farm }}</p>
						<p class="borderLine">操作地块 : {{ item.land }}</p>
						<p class="borderLine">操作事项 : {{ item.jobname }}</p>
						<p class="borderLine">
							操作日期 : {{ (item.uptime * 1000) | formatTime }}
						</p>
						<p class="borderLine">批次名称 : {{ item.batch }}</p>
						<p class="borderLine">操作人 : {{ item.user }}</p>
					</div>
					<div class="btns">
						<a
							:class="{ bg: itemId == item.id && btnindex == 1 ? true : false }"
							@click="sprayEdit(item)"
							>编辑</a
						>
						<a
							:class="{ bg: itemId == item.id && btnindex == 2 ? true : false }"
							@click="sprayDelet(item.id)"
							>删除</a
						>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-pagination
			background
			layout="prev, pager, next"
			:total="totalNum"
			:page-size="8"
			:current-page="page"
			@current-change="changePage"
		></el-pagination>
		<!-- 新增弹框 -->
		<el-dialog
			title="新增"
			:visible.sync="farmThingAddDialogVisible"
			width="30%"
			@close="AddDialogClosed"
		>
			<template v-if="planted.length > 0">
				<el-form
					ref="addFormRef"
					:model="addForm"
					label-width="116px"
					:rules="addFormRules"
				>
					<el-form-item label="所属地块 : " prop="pro_cascader">
						<el-cascader
							style="width: 100%"
							v-model="addForm.pro_cascader"
							:options="planted"
							:props="{
								expandTrigger: 'hover',
								label: 'farmname',
								value: 'farmname'
							}"
						></el-cascader>
					</el-form-item>
					<el-form-item label="操作事项 : " prop="opt_items">
						<el-input v-model="addForm.opt_items"></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>
			</template>
			<template v-else>
				<div class="noPlanted">暂无正在种植的地块！</div>
			</template>
		</el-dialog>
		<!-- 编辑地块弹框 -->
		<el-dialog
			title="编辑"
			:visible.sync="farmThingEditDialogVisible"
			width="30%"
			@close="EditDialogClosed"
		>
			<el-form
				ref="editFormRef"
				:model="editForm"
				label-width="116px"
				:rules="addFormRules"
			>
				<el-form-item label="所属地块 : " prop="pro_cascader">
					<el-input disabled v-model="editForm.pro_cascader"></el-input>
				</el-form-item>
				<el-form-item label="操作事项 : " prop="opt_items">
					<el-input v-model="editForm.opt_items"></el-input>
				</el-form-item>
				<el-form-item label="操作人 : " prop="operator">
					<el-input v-model="editForm.operator"></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 {
			itemId: '',
			btnindex: '',
			base: '',
			pickcode: '',
			farmThingAddDialogVisible: false,
			farmThingEditDialogVisible: false,
			fieldsList: [],
			planted: [],
			baseList: [], //所有基地
			totalNum: null,
			page: 1,
			pro_cascader: [],
			addForm: {
				pro_cascader: [],
				opt_items: '', //操作事项
				operator: '' //操作人
			},
			editForm: {
				pro_cascader: '',
				opt_items: '', //操作事项
				operator: '' //操作人
			},
			addFormRules: {
				pro_cascader: [
					{ required: true, message: '请选择所属地块', trigger: 'change' }
				],
				opt_items: [
					{ required: true, message: '请填写操作事项', trigger: 'blur' }
				],
				operator: [
					{ required: true, message: '请选择操作人', trigger: 'change' }
				]
			}
		}
	},
	mounted() {
		this.getFields()
		this.getPlanted()
		this.getBaseList()
	},
	methods: {
		getBaseList() {
			//获取所有基地
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.all_base'
			}).then((res) => {
				this.baseList = res.data.data.data
			})
		},
		getPlanted() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.already_plant'
			}).then((res) => {
				if (res.data.message == '') {
					let arr = res.data.data.data
					this.planted = arr.filter((item) => {
						if (item.children.length > 0) {
							return item.children.some((item2) => {
								return item2.is_pick != 1
							})
						} else {
							return false
						}
					})
				}
			})
		},
		getFields() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.area_job_info',
				data: this.qs.stringify({
					page: this.page,
					farmname: this.base,
					pickcode: this.pickcode
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.fieldsList = res.data.data.data
					this.totalNum = res.data.data.counts
				}
			})
		},
		sprayAdd() {
			this.farmThingAddDialogVisible = true
		},
		sprayEdit(item) {
			if (item.is_pick == 0) {
				//未采收
				this.editForm.pro_cascader = item.farm + ' / ' + item.land
				this.editForm.opt_items = item.jobname
				this.editForm.operator = item.user
				this.itemId = item.id
				this.btnindex = 1
				this.farmThingEditDialogVisible = true
			} else {
				this.$message.warning('此地块已采收，禁止编辑！')
			}
		},
		sprayDelet(id) {
			this.itemId = id
			this.btnindex = 2
			this.$confirm('确定要删除此地块么?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$axios({
						method: 'POST',
						url: '/api/api_gateway?method=ascend.ascend_manage.del_area_job',
						data: this.qs.stringify({
							id: id
						})
					}).then((res) => {
						if (res.data.message == '') {
							this.$message({
								type: 'success',
								message: '删除成功!'
							})
							this.getFields()
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
		},
		AddDialogClosed() {
			this.$refs.addFormRef.resetFields()
		},
		EditDialogClosed() {
			this.$refs.editFormRef.resetFields()
		},
		addSubm() {
			this.$refs.addFormRef.validate((valid) => {
				if (!valid) return
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=ascend.ascend_manage.area_job',
					data: this.qs.stringify({
						farm: this.addForm.pro_cascader[0],
						land: this.addForm.pro_cascader[1],
						jobname: this.addForm.opt_items,
						user: this.addForm.operator
					})
				}).then((res) => {
					if (res.data.message == '') {
						this.getFields()
						this.farmThingAddDialogVisible = false
					}
				})
			})
		},
		editSubm() {
			this.$refs.editFormRef.validate((valid) => {
				if (!valid) return
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=ascend.ascend_manage.edit_area_job',
					data: this.qs.stringify({
						id: this.itemId,
						jobname: this.editForm.opt_items,
						user: this.editForm.operator
					})
				}).then((res) => {
					if (res.data.message == '') {
						this.getFields()
					} else {
						this.$message.warning(res.data.message)
					}
				})
				this.farmThingEditDialogVisible = false
			})
		},
		changePage(val) {
			this.page = val
			this.getFields()
		},
		selChange() {
			this.page = 1
			this.getFields()
		}
	}
}
</script>

<style lang='less' scoped>
.search-box {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	.filter-box {
		display: flex;
		.el-cascader {
			width: 200px;
			margin-left: 10px;
		}
	}
	.el-input {
		width: 200px;
	}
}
.el-card {
	/deep/.el-card__body {
		position: relative;
	}
	.tag {
		position: absolute;
		top: 0;
		right: 20px;
	}
	text-align: center;
	color: #555;
	font-size: 13px;
	.borderLine {
		border: #eee;
		border-radius: 5px;
		-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		padding: 8px 0;
		margin: 10px 0;
	}
	.btns {
		display: flex;
		width: 180px;
		border-radius: 30px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
		margin: 20px auto 0;
		a.bg {
			background: #17bb89;
			color: #fff;
		}
		a {
			width: 50%;
			height: 30px;
			line-height: 30px;
			cursor: pointer;
			&:first-child {
				border-top-left-radius: 30px;
				border-bottom-left-radius: 30px;
			}
			&:last-child {
				border-top-right-radius: 30px;
				border-bottom-right-radius: 30px;
			}
		}
		a:hover {
			background: #14a478;
			color: #fff;
		}
	}
}
.el-cascader {
	width: 100%;
}
.noPlanted {
	padding: 0 10px 20px 10px;
	color: red;
}
</style>