<template>
	<view>
		<view class="uni-common-mt">
			<view>
				<map
					id="myMap"
					:scale="scale"
					:latitude="latitude"
					:longitude="longitude"
					:polyline="polylines"
					:markers="covers"
					:min-scale="min"
					:max-scale="max"
					:include-points="cloudPoints"
					:show-location="true"
					:enable-rotate="true"
					:enable-3D="true"
					:enable-overlooking="true"
					:enable-indoorMap="true"
					:show-compass="true"
					:enable-poi="false"
					@markertap.stop="tryDemo"
					@updated="showsd"
				>
					<cover-view v-show="showMp3Title" class="showMp3Title">正在播放:{{ pointData.voicerealname }}</cover-view>
					<cover-view slot="callout" v-if="showCover && pointData.content" class="customCallout" @click="goDetail(pointData.id)">
						<cover-view class="close-btn" @tap.stop="closeThis">
							<cover-image style="width: 50rpx; height: 50rpx; padding: 10rpx" src="../../static/img/close.png"></cover-image>
						</cover-view>
						<cover-image style="width: 150rpx; height: 150rpx" mode="scaleToFill" :src="baseUrl + pointData.imgsl"></cover-image>
						<cover-view class="content-box">
							<cover-view class="content-top">
								<cover-view class="content">
									{{ pointData.cname }}
								</cover-view>
							</cover-view>
							<cover-view v-if="plays && pointData.voiceurl" @click.stop="play(pointData.voiceurl)" class="play-stop">
								<cover-image style="width: 30rpx; height: 30rpx; padding: 10rpx" src="../../static/img/icon_play.png"></cover-image>
								<cover-view>语音讲解</cover-view>
							</cover-view>
							<cover-view v-else-if="!plays" @click.stop="pause()" class="play-stop">
								<cover-image style="width: 30rpx; height: 30rpx; padding: 10rpx" src="../../static/img/icon_stop.png"></cover-image>
								<cover-view>语音讲解</cover-view>
							</cover-view>
							<cover-view v-else="!pointData.voiceurl" class="play-stop no-audio">
								<cover-view>暂无讲解</cover-view>
							</cover-view>
							<!-- <cover-view class="go-detail">查看详情>>></cover-view> -->
							<!-- <cover-view > -->
							<!-- <mp-html :content="pointData.content"/> -->
							<!-- {{pointData.content.substring(0, 30)}} -->
							<!-- </cover-view> -->
						</cover-view>
					</cover-view>
					<cover-view class="shaixuan">
						<cover-view class="shaixuan-item" @click="showAllpoint">
							<cover-image v-if="isAllActive" :src="allIcon"></cover-image>
							<cover-image v-else :src="allIcons"></cover-image>
							<cover-view class="small-fnt">全部</cover-view>
						</cover-view>
						<cover-view class="shaixuan-item" @click="showLine">
							<cover-image v-if="isLineActive" :src="lineIcon"></cover-image>
							<cover-image v-else :src="lineIcons"></cover-image>
							<cover-view class="small-fnt">线路</cover-view>
						</cover-view>
						<cover-view class="shaixuan-item" v-for="(item, index) in screenList" @click="screenData(item, index)">
							<cover-image v-if="!item.isActive" :src="'/static/img/' + item.dicremark + '.png'"></cover-image>
							<cover-image v-else :src="'/static/img/' + item.dicremark + '-h.png'"></cover-image>
							<cover-view class="small-fnt">{{ item.dicname }}</cover-view>
						</cover-view>
					</cover-view>
				</map>
				<view>
					<!-- 普通弹窗 -->
					<uni-popup class="popup-content" ref="popup" background-color="#fff" @change="change" type="bottom">
						<view class="popup-content">
							<view class="text" v-for="item in lineData" @click="showlines(item)">
								{{ item.name }}
							</view>
							<view class="clearLine" @tap="clearLine">清除线路</view>
						</view>
					</uni-popup>
				</view>
				<view class="my-location" @tap.stop="getMyLocation">
					<image class="myself-location" src="../../static/img/self-location.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			mapCtx: '',
			scale: 18,
			min: 10,
			max: 20,
			coverImg: 'https://www.lbgjtoa.com//upload/image/2023/8/17/bde77f4e92ff4133aeb3fd2dc33b578a.jpg',
			title: 'map',
			latitude: 37.830562,
			longitude: 115.710722,
			allPointData: [],
			jingdian: [],
			partLoat: [],
			inAndOut: [],
			tolite: [],
			tourisCenter: [],
			covers: [],
			datas: [],
			screenList: [],
			pointData: null,
			lineData: [],
			polylines: [],
			cloudPoints: [],
			showCover: false,
			showMp3Title: false,
			plays: true,
			baseUrl: this.$config.ROOTPATH,
			isAllActive: false,
			isLineActive: true,
			allIcon: '/static/img/quanbu.png',
			lineIcon: '/static/img/icon-xl.png',
			allIcons: '/static/img/quanbu-h.png',
			lineIcons: '/static/img/icon-xl-h.png'
		};
	},
	onLoad() {
		this.mapCtx = uni.createMapContext('myMap');
		this.addThings();
		this.getScreeningData();
		this.getLineData();
		uni.showLoading({
			title: '手绘图加载中...',
			mask: true
		});
		// setTimeout(function () {
		// 	uni.hideLoading();
		// }, 6000);
	},
	onUnload() {
		this.pause();
	},
	methods: {
		showsd(val) {
			console.log(val);
		},
		// 关闭信息框
		closeThis() {
			this.showCover = false;
		},
		// 线路数据
		getLineData() {
			let this_ = this;
			uni.request({
				// url: this.$config.ROOTPATH + '/mobile/mapScenic/qylyScenicLineList?pid=334',
				url: this.$config.ROOTPATH + '/mobile/mapScenic/qylyScenicLineList?pid=363',
				method: 'GET',
				success(res) {
					if (res.data.data && res.data.data.length > 0) {
						res.data.data.forEach((item) => {
							const lines = [];
							const arr = JSON.parse(item.drawlinedata);
							arr.forEach((items) => {
								const obj = {
									longitude: items[0],
									latitude: items[1]
								};
								lines.push(obj);
							});
							const obj = {
								name: item.line_name,
								line: lines
							};
							this_.lineData.push(obj);
						});
					}
				},
				fail(err) {
					console.log(err);
				}
			});
		},
		// 手绘图
		addCoverimg(val) {
			let this_ = this;
			this_.latitude = val.lat;
			this_.longitude = val.lon;
			this_.coverImg = this_.$config.ROOTPATH + val.mapurl;
			this_.mapCtx.addGroundOverlay({
				id: 1,
				src: this_.coverImg,
				bounds: {
					southwest: {
						longitude: val.leftdown_lng,
						latitude: val.leftdown_lat
					},
					northeast: {
						longitude: val.rigthup_lng,
						latitude: val.rigthup_lat
					}
				},
				success(res) {
					console.log(res);
					uni.hideLoading();
				},
				fail(err) {
					console.log(err);
					uni.hideLoading();
				},
				complete(das) {
					console.log(das);
					uni.hideLoading();
				}
			});
		},
		// 点击点位
		tryDemo(val) {
			let this_ = this;
			this_.pause();
			this.datas.forEach((item) => {
				if (item.id == val.detail.markerId) {
					this.pointData = item;
					this.showCover = true;
				}
			});
		},
		// 点位数据
		addThings() {
			let this_ = this;
			uni.request({
				url: this.$config.ROOTPATH + '/mobile/mapScenic/qylyMapScenicAndSpotInfo',
				method: 'get',
				data: {
					userkey: '95034a2bb9a843b79dbc93f74599282b',
					// id: '334',
					id: '363',
					spotType: ''
				},
				success(res) {
					const arr = res.data.data;
					this_.datas = arr;
					//确定中心点和手绘图
					arr.forEach((item) => {
						if (item.id == 363) {
						// if (item.id == 334) {
							this_.addCoverimg(item);
							console.log(item);
							this_.longitude = item.lon;
							this_.latitude = item.lat;
							this_.scale = item.start_maplevel;
							this_.min = item.min_maplevel;
							this_.max = item.max_maplevel;
						}
					});
					//添加标点
					this_.addMarker(arr);
				},
				fail(err) {
					console.log(err);
				}
			});
		},
		// 获取分类信息
		getScreeningData() {
			let this_ = this;
			uni.request({
				url: this.$config.ROOTPATH + '/mobile/mapScenic/qylyScenicType',
				method: 'post',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					userkey: this_.$param.userkey
				},
				success(res) {
					let arr = [];
					if (res.data.data) {
						res.data.data.forEach((item) => {
							if (item.dicnum != 3605 && item.dicnum != 3606) {
								item.isActive = false;
								arr.push(item);
							}
						});
					}
					this_.screenList = arr;
				},
				fail(err) {
					console.log(err);
				}
			});
		},
		// 筛选
		screenData(val) {
			let this_ = this;
			this_.isAllActive = true;
			this_.isLineActive = true;
			this_.screenList.forEach((item) => {
				item.isActive = false;
			});
			val.isActive = !val.isActive;
			this_.covers = [];
			if (val.dicnum == 3602) {
				this_.covers = this_.partLoat;
				this_.cloudPoints = this_.partLoat;
			} else if (val.dicnum == 3603) {
				this_.covers = this_.inAndOut;
				this_.cloudPoints = this_.inAndOut;
			} else if (val.dicnum == 3604) {
				this_.covers = this_.tolite;
				this_.cloudPoints = this_.tolite;
			} else if (val.dicnum == 3607) {
				this_.covers = this_.tourisCenter;
				this_.cloudPoints = this_.tourisCenter;
			} else {
				this_.covers = this_.jingdian;
				this_.cloudPoints = this_.jingdian;
			}
		},
		// 全部
		showAllpoint() {
			let this_ = this;
			this_.isAllActive = false;
			this_.showCover = false;
			this_.isLineActive = true;
			this_.screenList.forEach((item) => {
				item.isActive = false;
			});
			this_.covers = this_.allPointData;
      this_.cloudPoints = this_.covers;
    },
		// 线路
		showLine() {
			let this_ = this;
			this_.isLineActive = false;
			this_.showCover = false;
			this_.isAllActive = true;
			this_.screenList.forEach((item) => {
				item.isActive = false;
			});
			// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
			this.$refs.popup.open();
		},
		change(e) {},
		showlines(val) {
			let this_ = this;
			(this_.polylines = [
				{
					points: val.line,
					color: '#3269B2',
					arrowLine: true,
					width: 10
				}
			]),
				this_.$forceUpdate();
			this.$refs.popup.close();
		},
		clearLine() {
			let this_ = this;
			this_.polylines = [];
			this.$refs.popup.close();
		},
		// 添加点位
		addMarker(val) {
			let this_ = this;
			this_.covers = [];
			if (val && val.length) {
				let obj = {};
				let pathurl = '';
				val.forEach((item) => {
					if (item.id && item.id != '' && item.id != null && item.id != 363) {
					// if (item.id && item.id != '' && item.id != null && item.id != 334) {
						if (item.types == 3604) {
							pathurl = '/static/img/cesuodian.png';
						} else if (item.types == 3603) {
							pathurl = '/static/img/churudian.png';
						} else if (item.types == 3602) {
							pathurl = '/static/img/tingchedian.png';
						} else if (item.types == 3607) {
							pathurl = '/static/img/youkezhongxindian.png';
						} else {
							pathurl = '/static/img/jingqudian.png';
						}
						obj = {
							id: Number(item.id),
							latitude: item.lat,
							longitude: item.lon,
							title: item.types,
							label: {
								content: item.cname,
								padding: 5,
								anchorX: 20,
								anchorY: -30,
								color: '#600000',
								borderWidth: 0.5,
								borderColor: '#600000',
								borderRadius: 5,
								bgColor: '#fff'
							},
							iconPath: pathurl,
							width: 33,
							height: 35,
							customCallout: {
								anchorY: 0,
								anchorX: 0,
								display: 'BYCLICK'
							}
						};
						this_.allPointData.push(obj);
						if (obj.title == 3604) {
							this_.tolite.push(obj);
						} else if (obj.title == 3603) {
							this_.inAndOut.push(obj);
						} else if (obj.title == 3602) {
							this_.partLoat.push(obj);
						} else if (obj.title == 3607) {
							this_.tourisCenter.push(obj);
						} else {
							this_.jingdian.push(obj);
						}
					}
				});
				this_.covers = this_.allPointData;
				// this_.cloudPoints = this_.allPointData;
			}
		},
		// 播音频
		play(val) {
			this.showMp3Title = true;
			this.plays = false;
			uni.playBackgroundAudio({
				dataUrl: this.$config.ROOTPATH + val
			});
		},
		// 停音频
		pause() {
			let this_ = this;
			uni.stopBackgroundAudio({
				success: function () {
					this_.showMp3Title = false;
					this_.plays = true;
				}
			});
		},
		// 去详情
		goDetail(val) {
			let this_ = this;
			this_.pause();
			uni.navigateTo({
				url: './pointDetail?id=' + val
			});
		},
		// 我的位置
		getMyLocation() {
			let this_ = this;
			uni.getLocation({
				type: 'gcj02',
				success(res) {
					this_.longitude = res.longitude;
					this_.latitude = res.latitude;
				}
			});
		}
	}
};
</script>
<style scoped>
map {
	width: 100%;
	height: 100vh;
}
.customCallout {
	box-sizing: border-box;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 30rpx;
	width: 90vw;
	height: 220rpx;
	display: inline-flex;
	padding: 10rpx 40rpx;
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom: 50rpx;
	left: 5vw;
	z-index: 9999;
	display: flex;
	justify-content: space-between;
}

.content {
	flex: 0 1 auto;
	margin: 0 10px;
	font-size: 36rpx;
	display: inline-flex;
	max-width: 50vw;
	text-overflow: ellipsis;
	overflow: hidden;
}
.showMp3Title {
	position: fixed;
	top: 50rpx;
	left: 22.5vw;
	width: 48vw;
	height: 46rpx;
	line-height: 46rpx;
	padding: 10rpx 40rpx;
	background-color: #333;
	color: #eee;
	text-align: center;
	border-radius: 50rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 9999;
}
.shaixuan {
	width: 125rpx;
	position: fixed;
	right: 30rpx;
	top: 30rpx;
	display: flex;
	flex-direction: column;
}
.shaixuan-item {
	margin: 15rpx;
	background: #fff;
	padding: 10rpx;
	border-radius: 10rpx;
	box-shadow: 0 0 4px 0px #717171;
}
.shaixuan-item cover-image {
	width: 50rpx;
	margin: 0 auto;
}
.small-fnt {
	font-size: 18rpx;
	margin-top: 10rpx;
	text-align: center;
}
.popup-content {
	padding-bottom: 50rpx;
	position: relative;
}
.text {
	padding: 10rpx 0;
	border-bottom: 1rpx dashed #999;
}
.clearLine {
	width: 18vw;
	background: #eee;
	padding: 10rpx 10rpx;
	text-align: center;
	margin: 0 auto;
	margin-top: 25rpx;
	border-radius: 10rpx;
}
.content-box {
	flex: 1;
	margin-left: 30rpx;
}
.play-stop {
	background-color: #f86458;
	color: #eee;
	display: inline-flex;
	align-items: center;
	padding: 3rpx 20rpx 3rpx 0;
	border-radius: 10rpx;
	font-size: 24rpx;
	margin-top: 25rpx;
	margin-left: 15rpx;
}
.no-audio{
	padding: 13rpx 20rpx;
}
.go-detail {
	margin-top: 20rpx;
	margin-left: 24rpx;
	color: #484848;
	font-size: 28rpx;
}
.content-top {
	align-items: center;
	display: flex;
}
.my-location {
	position: fixed;
	left: 40rpx;
	bottom: 40rpx;
	width: 100rpx;
	height: 100rpx;
	z-index: 9;
}
.myself-location {
	width: 100%;
	height: 100%;
}
.close-btn {
	position: absolute;
	right: 10rpx;
	top: 0rpx;
	z-index: 99;
}
</style>
