<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" clearable v-model="base" @change="selChange" placeholder="请选择基地名称">
					<el-option
						v-for="item in baseList"
						:label="item.farmname"
						:value="item.farmname"
						:key="item.id"
					></el-option>
				</el-select>
			</div>
			<el-button type="primary" size="mini" @click="addfield()"
				>新增地块</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">
					<div class="img-box">
						<img src="@/assets/images/sy/farmThing/more.png" />
					</div>
					<div class="detail">
						<p class="borderLine">地块名称 : {{ item.landname }}</p>
						<p class="borderLine">所属基地 : {{ item.farm }}</p>
						<p class="borderLine">地块面积: {{ item.landarea }}㎡</p>
						<!-- <p class="borderLine">地块位置 : {{ item.landaddr }}</p> -->
					</div>
					<div class="btns">
						<a
							:class="{ bg: itemId == item.id && btnindex == 1 ? true : false }"
							@click="editField(item)"
							>编辑</a
						>
						<a
							:class="{ bg: itemId == item.id && btnindex == 2 ? true : false }"
							@click="deletField(item)"
							>删除</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="addFieldDialogVisible"
			width="500px"
			@close="addFieldDialogClosed"
		>
			<el-form
				ref="addFieldFormRef"
				:model="addFieldForm"
				label-width="110px"
				:rules="editFieldFormRules"
			>
				<el-form-item label="地块名称 : " prop="landname">
					<el-input v-model="addFieldForm.landname"></el-input>
				</el-form-item>
				<el-form-item label="所属基地 : " prop="farm">
					<el-select
						v-model="addFieldForm.farm"
						placeholder="请选择基地"
						style="width: 100%"
					>
						<el-option
							v-for="item in baseList"
							:label="item.farmname"
							:value="item.farmname"
							:key="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item label="地块用途 : " prop="landuse">
					<el-select v-model="addFieldForm.landuse" placeholder="请选择地块用途" style="width: 100%;">
						<el-option v-for="item in usefor" :label="item.label" :value="item.value" :key="item.value"></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item label="地块面积(㎡) : " prop="landarea">
					<el-input type="number" min="0" v-model="addFieldForm.landarea"></el-input>
				</el-form-item>
				<el-form-item label="地块描述 : " prop="landaddr">
					<el-input v-model="addFieldForm.landaddr"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addFieldDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addFieldSubm">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 编辑地块弹框 -->
		<el-dialog
			title="编辑地块"
			:visible.sync="editFieldDialogVisible"
			width="500px"
			@close="editFieldDialogClosed"
		>
			<el-form
				ref="editFieldFormRef"
				:model="editFieldForm"
				label-width="110px"
				:rules="editFieldFormRules"
			>
				<el-form-item label="地块名称 : " prop="landname">
					<el-input :disabled="true" v-model="editFieldForm.landname"></el-input>
				</el-form-item>
				<el-form-item label="所属基地 : " prop="farm">
					<el-select
						:disabled="true"
						v-model="editFieldForm.farm"
						placeholder="请选择基地"
						style="width: 100%"
					>
						<el-option
							v-for="item in baseList"
							:label="item.farmname"
							:value="item.farmname"
							:key="item.farmname"
						></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item label="地块用途 : " prop="landuse">
					<el-select v-model="editFieldForm.landuse" placeholder="请选择地块用途" style="width: 100%;">
						<el-option v-for="item in usefor" :label="item.label" :value="item.value" :key="item.value"></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item label="土地面积(㎡) : " prop="landarea">
					<el-input type="number"  min="0" v-model="editFieldForm.landarea"></el-input>
				</el-form-item>
				<el-form-item label="地块位置 : " prop="landaddr">
					<el-input v-model="editFieldForm.landaddr"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editFieldDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editSumb">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			itemId: '',
			btnindex: '',
			fieldsList: [],
			totalNum: null,
			page:1,
			base:'',
			baseList: [],
			usefor: [
				{ value: '1', label: '小麦' },
				{ value: '2', label: '玉米' },
				{ value: '3', label: '水稻' },
				{ value: '4', label: '水果' },
				{ value: '5', label: '茶园' }
			],
			addFieldForm: {
				landname: '',
				farm: '',
				// landuse: '',
				landarea: '',
				landaddr: ''
			},
			editFieldForm: {
				id: '',
				landname: '',
				farm: '',
				// landuse: '',
				landarea: '',
				landaddr: ''
			},
			editFieldFormRules: {
				landname: [
					{ required: true, message: '请填写地块名称', trigger: 'blur' }
				],
				farm: [{ required: true, message: '请填写所属基地', trigger: 'blur' }],
				// landuse: [
				// 	{ required: true, message: '请填写地块用途', trigger: 'blur' }
				// ],
				landarea: [
					{ required: true, message: '请填写土地面积', trigger: 'blur' }
				]
			},
			addFieldDialogVisible: false,
			editFieldDialogVisible: false
		}
	},
	mounted() {
		this.getFields()
		this.getBaseList()
	},
	methods: {
		getFields() {
			this.$axios({
				method: 'POST',
				url: '/land_info',
				data: this.qs.stringify({
					page: this.page,
					farmname:this.base
				})
			}).then((res) => {
				this.fieldsList = res.data.data
				this.totalNum=res.data.counts
			})
		},
		getBaseList() {
			this.$axios({
				method: 'POST',
				url: '/all_base'
			}).then((res) => {
				this.baseList = res.data.data
			})
		},
		addFieldDialogClosed() {
			this.addFieldForm = {}
		},
		editFieldDialogClosed() {
			this.editFieldForm = {}
		},
		addfield() {
			this.addFieldDialogVisible = true
		},
		addFieldSubm() {
			this.$refs.addFieldFormRef.validate((valid) => {
				if (!valid) return
				this.$axios({
					url: '/add_land',
					method: 'POST',
					data: this.qs.stringify(this.addFieldForm)
				}).then((res) => {
					if (res.data == 1) {
						this.$message.success('地块添加成功！')
						this.getFields()
					} else {
						this.$message.error(res.data.message)
					}
					this.addFieldDialogVisible = false
				})
			})
		},
		editField(item) {
			this.itemId = item.id
			this.btnindex = 1
			this.editFieldForm = Object.assign({}, item)
			this.editFieldDialogVisible = true
		},
		editSumb() {
			this.$refs.editFieldFormRef.validate((valid) => {
				if (!valid) return
				this.$axios({
					url: '/edit_land',
					method: 'POST',
					data: this.qs.stringify({
						id: this.editFieldForm.id,
						// farm: this.editFieldForm.farm,
						landname: this.editFieldForm.landname,
						// landuse: this.editFieldForm.landuse,
						landaddr: this.editFieldForm.landaddr,
						landarea: this.editFieldForm.landarea
					})
				}).then((res) => {
					if (res.data == 1) {
						this.$message.success('地块修改成功！')
						this.getFields()
						this.editFieldDialogVisible = false
					}else{
						this.$message.success(res.data)

					}
				})
			})
		},
		deletField(item) {
			console.log(item)
			this.btnindex = 2
			this.$confirm('确定要删除此地块么?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$axios({
						url: '/del_land',
						method: 'POST',
						data: this.qs.stringify({
							farm: item.farm,
							landname: item.landname,
							landuse: item.landuse,
							landaddr: item.landaddr,
							landarea: item.landarea
						})
					}).then((res) => {
						if (res.data == 1) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							})
							this.getFields()
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
		},
		changePage(val) {
			this.page=val
			this.getFields()
		},
		selChange(){
			this.page=1
			this.getFields()

		}
	},
	filters: {
		useFor(val) {
			switch (val) {
				case '1':
					return '小麦'
					break
				case '2':
					return '玉米'
					break
				case '3':
					return '水稻'
					break
				case '4':
					return '水果'
					break
				case '5':
					return '茶园'
					break
			}
		}
	}
}
</script>

<style lang='less' scoped>
.search-box {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	.el-input {
		width: 200px;
	}
}
.el-card {
	text-align: center;
	color: #555;
	font-size: 13px;
	.borderLine {
		border: #eee;
		border-radius: 5px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		padding: 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%;
			padding: 8px 0;
			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;
		}
	}
}
</style>