<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>农场管理</el-breadcrumb-item>
			<el-breadcrumb-item>基地管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card class="box-card pad0">
			<baidu-map
				class="bm-view"
				:center="center"
				@ready="handler"
				:zoom="zoom"
			>
				<bm-polygon
					v-for="(item, index) in polygonPath"
					:key="index"
					:path="item"
					stroke-color="#3173f6"
					fill-color="rgba(48,114,246,.3)"
					:fill-opacity="0.8"
					:stroke-opacity="1"
					:stroke-weight="3"
				/>
			</baidu-map>
		</el-card>
		<el-card class="box-card marT">
			<div class="base-check">
				<el-select
					v-model="baseInfo.id"
					class="new-style-sel"
					@change="selectBase"
				>
					<el-option
						v-for="item in baseList"
						:key="item.id"
						:label="item.farmname"
						:value="item.id"
					></el-option>
				</el-select>
				<div>
					<el-button
						type="primary"
						style="margin-right: 5px"
						size="mini"
						@click="addBase()"
						>新增基地</el-button
					>
					<el-button
						v-if="baseList.length>0"
						type="primary"
						style="margin-right: 5px"
						size="mini"
						@click="editBase()"
						>编辑基地</el-button
					>
					<i class="el-icon-delete" v-if="baseList.length>0" @click="deletBase()"></i>
				</div>
			</div>
			<div class="intro">
				<p>负责人: {{ baseInfo.username }}</p>
				<!-- <p>基地地址: {{baseInfo.addr || '无'}}</p> -->
				<p>基地面积(亩): {{ baseInfo.farmarea || '无' }}</p>
				<p>基地描述: {{ baseInfo.desc || '无' }}</p>
			</div>
		</el-card>
	</div>
</template>

<script>
export default {
	data() {
		return {
			center:{
				lat: 36.746057,
				lng: 118.889935
			},
			zoom:5,
			baseList: [],
			baseInfo: {
				id: '',
				farmname: '',
				username: '',
				addr: '',
				desc: '',
				farmarea: '',
				polygonPath: []
			},
			addBasedialogVisible: false,
			polygonPath: [],
			addBaseFormRules: {
				baseName: [
					{ required: true, message: '请输入基地名称', trigger: 'blur' }
				],
				username: [
					{ required: true, message: '请输入负责人', trigger: 'blur' }
				],
				addr: [{ required: true, message: '请输入基地地址', trigger: 'blur' }]
			}
		}
	},
	created() {
	},
	methods: {
		handler({ BMap, map }) {
			this.BMap = BMap
			this.map = map
			map.enableScrollWheelZoom(true)
			this.getBaseList()
		},
		getBaseList() {
			this.$axios({
				method: 'POST',
				url: '/base_info'
			}).then((res) => {
				if (res.data.counts > 0) {
					this.baseList = res.data.data
					this.baseInfo.id = this.baseList[0].id
					this.baseInfo.farmname = this.baseList[0].farmname
					this.baseInfo.username = this.baseList[0].user
					this.baseInfo.addr = this.baseList[0].farmaddr
					this.baseInfo.desc = this.baseList[0].farmdesc
					this.baseInfo.farmarea = this.baseList[0].farmarea
					this.drapmap(this.baseList[0].farmframe)
				}else{
					this.baseInfo = {
						id: '',
						farmname: '',
						username: '',
						addr: '',
						desc: '',
						farmarea: '',
						polygonPath: []
					}
					this.polygonPath = []
				}
			})
		},
		selectBase(id) {
			this.$axios({
				method: 'POST',
				url: '/base_info',
				data: this.qs.stringify({
					id
				})
			}).then((res) => {
				if (res.data.counts > 0) {
					var data = res.data.data[0]
					this.baseInfo.id = data.id
					this.baseInfo.farmname = data.farmname
					this.baseInfo.username = data.user
					this.baseInfo.addr = data.farmaddr
					this.baseInfo.desc = data.farmdesc
					this.baseInfo.farmarea = data.farmarea
					this.drapmap(data.farmframe)
				}
			})
		},
		drapmap(path){
			if (path) {
				this.polygonPath = []
				let array2 = path.split(';').map((item) => {
					let arr = item.split(',')
					return {
						lng: arr[0],
						lat: arr[1]
					}
				})
				this.polygonPath.push(array2)
			} else {
				this.polygonPath = []
			}
			let view = this.map.getViewport(this.polygonPath[0])
			this.zoom = view.zoom
			this.center = view.center
		},
		addBase() {
			this.$router.push('/index/farmAddBase')
		},
		editBase() {
			this.baseInfo.polygonPath = this.polygonPath
			this.$router.push({ path: '/index/farmEditBase', query:{baseInfo:JSON.stringify(this.baseInfo)}})
		},
		deletBase() {
			const h = this.$createElement;
			this.$msgbox({
				title: '提示',
				message: h('p', null, [
					h('span', null, '确定要删除?'),
					h('br'),
					h('i', { style: 'color: red'}, '注意:此基地下的所有农事操作都会被清除，此操作不可逆')
				]),
				showCancelButton: true,
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			}).then((action) => {
				this.$axios({
						method: 'POST',
						url: '/del_base',
						data: this.qs.stringify({
							id: this.baseInfo.id
						})
					}).then((res) => {
						if (res.data == 1) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							})
							this.getBaseList()
						}
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
			})
			
		}
	}
}
</script>

<style lang='less' scoped>
.bm-view {
	height: 500px;
	overflow: hidden;
}
.marT {
	margin-top: 20px;
}
.new-style-sel /deep/ input {
	font-weight: 800;
	border: none;
	border-left: 6px solid #16c58f;
	border-radius: 0;
	line-height: 25px;
	height: 25px;
}
.new-style-sel /deep/ .el-input__icon {
	line-height: 25px;
}
/* 去掉百度地图左下角的logo */
.bm-view /deep/ .BMap_cpyCtrl {
	display: none;
}
.bm-view /deep/ .anchorBL {
	display: none;
}
.base-check {
	display: flex;
	justify-content: space-between;
	i.el-icon-delete {
		font-weight: 600;
		font-size: 18px;
		cursor: pointer;
	}
}
.intro {
	font-size: 14px;
	line-height: 30px;
	letter-spacing: 1px;
	color: #666;
	text-indent: 20px;
	margin-top: 20px;
	p {
		position: relative;
		&:before {
			content: '';
			position: absolute;
			width: 10px;
			height: 10px;
			border-radius: 100%;
			background: #17bb89;
			left: 0;
			top: 10px;
		}
	}
}
</style>