<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>农场管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/index/farmBaseManger' }"
				>基地管理</el-breadcrumb-item
			>
			<el-breadcrumb-item>添加基地</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card class="box-card">
			<el-form
				ref="addBaseFormRef"
				:model="addBaseForm"
				label-width="120px"
				:rules="addBaseFormRules"
			>
				<el-form-item label="基地名称 : " prop="farmname">
					<el-input v-model="addBaseForm.farmname"></el-input>
				</el-form-item>
				<el-form-item label="基地面积(亩) : " prop="farmarea">
					<el-input type="number" min="0" v-model="addBaseForm.farmarea"></el-input>
				</el-form-item>
				<!-- <el-form-item label="基地地址 : " prop="farmaddr">
					<el-input v-model="addBaseForm.farmaddr"></el-input>
				</el-form-item> -->
				<el-form-item label="基地描述 : " prop="farmdesc">
					<el-input type="textarea" v-model="addBaseForm.farmdesc"></el-input>
				</el-form-item>
				<el-form-item label="负责人 : " prop="username">
					<el-input v-model="addBaseForm.username"></el-input>
				</el-form-item>
				<el-form-item label="基地位置 : " class="map-box" prop="farmframe">
					<el-input
						style="width: 380px"
						size="small"
						@change="addrChange()"
						clearable
						placeholder="请输入地区检索"
						v-model="addr"
					>
						<i slot="suffix" class="el-input__icon el-icon-search"></i>
					</el-input>
					<baidu-map
						class="bm-view"
						:center="center"
						:zoom="zoom"
						:map-click="false"
						@mousemove="syncPolygon"
						@ready="handler"
						style="height: 400px"
						@click="paintPolygon"
						@rightclick="newPolygon"
					>
						<bm-polygon
							:path="path"
							v-for="path of polygonPath.paths"
							:key="path.toString()"
							stroke-color="blue"
							fill-color="red"
							:fill-opacity="0.8"
							:stroke-opacity="0.5"
							:stroke-weight="2"
							@click="alertpath"
						/>
						<bm-control>
							<button @click.prevent="toggle('polygonPath')">
								{{ polygonPath.editing ? '停止绘制' : '开始绘制' }}
							</button>
						</bm-control>
					</baidu-map>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="addBaseSubm">添加</el-button>
					<el-button @click="cancleaddBase">取消</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
export default {
	data() {
		return {
			addBaseForm: {
				farmname: '',
				username: '',
				farmdesc: '',
				farmaddr: '',
				farmarea: ''
			},
			addBaseFormRules: {
				farmname: [
					{ required: true, message: '请填写基地名称', trigger: 'blur' }
				],
				username: [
					{ required: true, message: '请填写负责人', trigger: 'blur' }
				],
				farmaddr: [
					{ required: true, message: '请填写基地地址', trigger: 'blur' }
				],
				farmdesc: [
					{ required: true, message: '请填写基地描述', trigger: 'blur' }
				],
				farmarea: [
					{ required: true, message: '请填写基地面积', trigger: 'blur' }
				]
			},
			haha: '百度地图',
			center: { lng: 116.412732, lat: 39.911707 },
			zoom: 13,
			polygonPath: {
				editing: false,
				paths: [] // 绘制完成后的经纬度，其实是在画的时候动态push的，因为在点击的时候触发了 paintPolygon 函数
			},
			addr: ''
		}
	},
	methods: {
		addBaseSubm() {
			this.$refs.addBaseFormRef.validate((valid) => {
				if (!valid) {
					return
				}
				let farmframe =
					this.polygonPath.paths[0] &&
					this.polygonPath.paths[0]
						.map((item) => {
							return item.lng + ',' + item.lat
						})
						.join(';')
				this.$axios({
					url: '/api/api_gateway?method=ascend.ascend_manage.add_base',
					method: 'POST',
					data: this.qs.stringify({
						farmname: this.addBaseForm.farmname,
						farmdesc: this.addBaseForm.farmdesc,
						username: this.addBaseForm.username,
						farmaddr: this.addBaseForm.farmaddr,
						farmframe,
						farmarea: this.addBaseForm.farmarea
					})
				}).then((res) => {
					if (res.data.message == '') {
						this.$message.success('添加基地成功！')
						this.$router.go(-1)
					} else {
						this.$message.error('添加基地失败！')
					}
				})
			})
		},
		cancleaddBase() {
			this.$router.go(-1)
		},
		handler({ BMap, map }) {
			this.BMap = BMap
			this.map = map
			map.enableScrollWheelZoom(true)
			// map.centerAndZoom('青岛市', 13)
		},
		getClickInfo(e) {
			console.log(e.point.lng)
			console.log(e.point.lat)
		},
		// 开启多边形绘制
		toggle(name) {
			this[name].editing = !this[name].editing
			// 在这里做一步判断，如果有路径且开启绘制就把原来的路径清空
			if (this.polygonPath.paths && this.polygonPath.editing) {
				this.polygonPath.paths = []
			}
		},
		addrChange() {
			let local = new this.BMap.LocalSearch(this.map, {
				renderOptions: { map: this.map, panel: 'r-result' }
			})
			local.search(this.addr)
		},
		// 鼠标移动时
		syncPolygon(e) {
			if (!this.polygonPath.editing) {
				return
			}
			const { paths } = this.polygonPath
			if (!paths.length) {
				return
			}
			const path = paths[paths.length - 1]
			if (!path.length) {
				return
			}
			if (path.length === 1) {
				path.push(e.point)
			}
			this.$set(path, path.length - 1, e.point)
		},
		// 鼠标右键点击时往路径里push一个点
		newPolygon(e) {
			if (!this.polygonPath.editing) {
				return
			}
			// 当开始绘制后把按钮调回开始绘制状态，防止绘制多个图形
			this['polygonPath'].editing = !this['polygonPath'].editing
			const { paths } = this.polygonPath
			if (!paths.length) {
				paths.push([])
			}
			const path = paths[paths.length - 1]
			path.pop()
			if (path.length) {
				paths.push([])
			}
			console.log(this.polygonPath.paths)
		},
		// 鼠标左键多边形绘制
		paintPolygon(e) {
			if (!this.polygonPath.editing) {
				return
			}
			const { paths } = this.polygonPath
			!paths.length && paths.push([])
			paths[paths.length - 1].push(e.point)
		},
		alertpath(e) {
			// console.log(this.polygonPath.paths)
		},
	}
}
</script>

<style lang='less' scoped>
// .el-form{width:500px;}
.bm-view {
	// height: 400px;
	overflow: hidden;
	　/deep/ .anchorBL {
		display: none;
	}
}
.el-form-item {
	width: 500px;
}
.map-box {
	width: 100%;
}
</style>