<template>
	<el-form label-width="80" size="mini" :inline="inline">
		<el-form-item label="" v-for="(va, key) in value" :key="key">
			<distributed-list v-if="includes(va, 'Object')" :value="va" :keys="keys[key] || {}" />
			<div v-else-if="includes(va, 'Array') && keys[key]">
				<el-table :data="value[key]" border style="width: 100%">
					<el-table-column type="index" width="30"></el-table-column>
					<el-table-column v-for="(name, prop) in keys[key]" :label="name" v-if="prop != '_name'" :key="prop" :width="prop == 'info' && 300">
						<template slot-scope="scope">
							<template v-if="prop == 'info'">
								<el-table :data="scope.row[prop]" border style="width: 100%" :show-header="false">
									<el-table-column>
										<template slot-scope="sc">
											<el-color-picker v-if="prop == 'color'" v-model="sc.row.value"></el-color-picker>
											<template v-else>
												<el-input v-model="sc.row.value"></el-input>
											</template>
										</template>
									</el-table-column>
									<el-table-column width="100">
										<template slot-scope="sc">
											<el-button v-if="sc.$index > 0" type="danger" icon="el-icon-delete" circle @click="scope.row[prop].splice(sc.$index, 1)"></el-button>
											<el-button type="primary" icon="el-icon-plus" circle @click="scope.row[prop].splice(sc.$index, 0, { value: '信息' })"></el-button>
										</template>
									</el-table-column>
								</el-table>
							</template>
							<template v-else-if="prop == 'addmap'">
								<el-button type="primary" @click="mapedit(scope.row, scope.$index)">编辑</el-button>
							</template>
							<template v-else>
								<el-color-picker v-if="prop == 'color'" v-model="scope.row[prop]"></el-color-picker>
								<el-input v-else v-model="scope.row[prop]"></el-input>
							</template>
						</template>
					</el-table-column>
					<el-table-column label="操作" fixed="right" width="100">
						<template slot-scope="scope">
							<el-button v-if="scope.$index > 0" type="danger" icon="el-icon-delete" circle @click="del(scope.$index,value[key])"></el-button>
							<el-button type="primary" icon="el-icon-plus" circle @click="add(scope.$index,value[key])"></el-button>
						</template>
					</el-table-column>
					<template slot="empty">
						<el-button type="primary" @click="add(-1)">新增</el-button>
					</template>
				</el-table>
			</div>
			<template v-else>
				<el-form-item :label="keys[key] || key" v-if="keys[key] && key != '_caveat'"><el-input v-model="value[key]" type="textarea"></el-input></el-form-item>
				<el-alert style="margin-bottom: 10px;" v-if="key == '_caveat'" :title="value[key]" type="error" effect="dark" :closable="false"></el-alert>
			</template>
		</el-form-item>
		<el-drawer class="map-address-drawer" size="60%" direction="ltr" :append-to-body="true" :visible.sync="mapInnerDrawer">
			<template slot="title">
				<div>{{ mapTitle }}</div>
				<el-form style="margin-right: 10px;" label-width="6em" size="mini">
					<el-form-item style="margin-bottom: 0;" label="地名查询">
						<el-select style="width: 26em;" v-model="mapAddress" filterable placeholder="请输入关键字" remote :remote-method="remoteMethod" @change="addressChange">
							<el-option v-for="(item, index) in addressTips" :key="item.id" :label="item.name" :value="index" v-if="item.location">
								<span style="float: left">{{ item.name }}</span>
								<span style="float: right; color: #8492a6; font-size: 13px">{{ item.district + item.address }}</span>
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</template>
			<div ref="amap" style="width: 100%;height: 100%;position: relative;"></div>
			<el-card class="box-card" style="position: absolute;top: 100px;left: 30px;right:30px;z-index: 9999;">
				<el-form ref="form" :model="indexEditValue" label-width="60px" size="mini">
					<el-form-item label="名称"><el-input v-model="indexEditValue.name"></el-input></el-form-item>
					<!-- <el-form-item label="地址">
						<div style="display: flex;">
							<el-input v-model="indexEditValue.url"></el-input>
							<el-button type="primary" size="mini" style="margin-left: 5px;" @click="drawerJkList = true">选择监控</el-button>
						</div>
					</el-form-item> -->
					<el-form-item label="坐标">{{ indexEditValue.lnglat }}</el-form-item>
				</el-form>
			</el-card>
			<el-drawer :modal="false" title="监控列表" :visible.sync="drawerJkList" direction="rtl" class="monitor-list-1">
				<div class="m-box">
					<li v-for="(x, key) in monitorList" :key="key">
						<el-radio v-model="indexEditValue.url" style="padding: 0 2px;" :label="x.url">
							<el-image class="el-image" :src="x.picUrl"></el-image>
							{{ x.channelName }}
						</el-radio>
					</li>
				</div>
			</el-drawer>
		</el-drawer>
	</el-form>
</template>

<script>
import md5 from 'md5';
export default {
	name: 'DistributedList',
	props: {
		value: {
			type: Object,
			default() {
				return {};
			}
		},
		keys: {
			type: Object,
			default() {
				return {};
			}
		},
		inline: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			//地图
			mapInnerDrawer: false,
			mapTitle: '',
			//关键字搜索
			mapAddress: '',
			addressTips: [],
			indexEditValue: {
				id: 0,
				areaId: '区域',
				name: '名称',
				url: '',
				lnglat: []
			},
			drawerJkList: false,
			monitorList: []
		};
	},
	mounted() {
		this.$port.getMonitorList().then(res => {
			this.monitorList = res;
		});
		AMap.plugin('AMap.Autocomplete', () => {
			//输入提示
			this.autocomplete = new AMap.Autocomplete();
			this.autocomplete.on('complete', e => {
				this.addressTips = e.tips || [];
			});
		});
	},
	watch: {
		'indexEditValue.url'(n, v) {
			if (!n.split('ezopen://')[0]) {
				//this.makeUrl(n);
			}
		}
	},
	methods: {
		makeUrl(url) {
			this.$port.getMonitorToken().then(res => {
				this.indexEditValue.url = `https://open.ys7.com/ezopen/h5/iframe?url=
				${this.indexEditValue.url}&autoplay=1&accessToken=${res.accessToken}`;
			});
		},
		mapedit(value) {
			this.mapTitle = '地图数据编辑';
			this.mapInnerDrawer = true;
			this.indexEditValue = value;
			this.initmap(value).then(map => {
				this.mapObject.on('click', e => {
					value.lnglat = [e.lnglat.lng, e.lnglat.lat];
					this.addMarker(value);
				});
				this.addMarker(value);
			});
		},
		initmap(value) {
			return this.getAMap().then(div => {
				this.mapObject = new AMap.Map(div, {
					layers: [
						// 卫星
						// new AMap.TileLayer.Satellite(),
						new AMap.TileLayer.WMTS({
							url: 'http://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
							blend: false,
							tileSize: 256,
							// zIndex:1,
							visible: true,
							params: {
								f: 'jsapi'
							}
						}),
						// 路网
						new AMap.TileLayer.RoadNet()
					],
					resizeEnable: true, //是否监控地图容器尺寸变化
					zoom: 13 //初始化地图层级
				});
				return this.mapObject;
			});
		},
		// 实例化点标记
		addMarker(value) {
			this.mapObject.clearMap();
			//坐标转换
			AMap.convertFrom(value.lnglat, 'amap', (status, result) => {
				if (result.info === 'ok') {
					var resLnglat = result.locations[0];
					const marker = new AMap.Marker({
						content: "<i class='amap-marker-calss-s'></i>",
						position: resLnglat
					});
					marker.setMap(this.mapObject);
					this.mapObject.setFitView(null, true, [0, 0, 0, 0], 17.5);
				}
			});
		},
		getAMap(i = 0) {
			if (this.$refs.amap) {
				return new Promise(r => {
					r(this.$refs.amap);
				});
			} else if (i < 5) {
				return new Promise(r => {
					setTimeout(() => {
						r(this.getAMap(i++));
					}, 500);
				});
			}
		},
		addressChange(e) {
			AMap.convertFrom(this.addressTips[e].location, 'amap', (status, result) => {
				this.mapObject.setZoomAndCenter(17, result.locations[0]);
			});
		},
		remoteMethod(e) {
			if (!this.autocomplete) return;
			this.autocomplete.search(e);
		},
		add(index,value) {
			//如果数据其他项没有ID 则取下标作为ID
			let newId = [],
				time = new Date().getTime();
			value.map((x, i) => {
				const id = x.id || (x.id + '' == 'undefined' ? false : x.id + ''),
					_id = md5(`${i}${time}`);
				id || (value[i].id = _id);
				newId.push(value[i].id);
			});
			newId.push(time);
			value.splice(index + 1, 0, JSON.parse(JSON.stringify({ ...(value[index] || def), id: md5(newId.join('-')) })));
		},
		del(index,value) {
			value.splice(index, 1);
		}
	}
};
</script>
<style lang="less">
@keyframes myfirst {
	from {
		transform: scale(0.5);
		opacity: 1;
	}

	to {
		transform: scale(4);
		opacity: 0;
	}
}
.monitor-list-1 {
	.m-box {
		margin: 20px;
		list-style-type: none;
		height: 92vh;
		overflow: auto;
		& > li {
			border-radius: 4px;
			overflow: hidden;
			box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
			margin: 5px;
			.el-image {
				display: inline-block;
				width: 32%;
			}
		}
	}
}

.amap-marker-calss-s {
	height: 30px;
	width: 30px;
	border-radius: 50%;
	background: red;
	position: relative;
	display: block;
	&:after,
	&:before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		border: 1px solid #ff0000;
		box-shadow: 0 0 5px 0 #ff0000, 0 0 5px 0 #ff0000 inset;
		border-radius: 50%;
	}
	&:after {
		animation: myfirst 1s ease-out infinite;
	}
	&:before {
		animation: myfirst 1s ease-in infinite;
		animation-delay: 500ms;
	}
}
.map-address-drawer #el-drawer__title {
	margin-bottom: 20px;
	flex: none;
}
</style>
