<template>
	<view class="map-container">
		<map style="width: 100%; height: 10vh;" :style="{height:mapheight}" :show-location='true' :latitude="latitude"
			:longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
			<!-- 	<cover-view class="cover-view-loca" :style='{bottom:coverbottom}' @click="onControltap">
				<cover-image class="cover-image" @click="play" src="../../../static/img/adresw.png"></cover-image>
				<cover-view>
					定位
				</cover-view>
			</cover-view> -->
			<!-- 一级分类 -->
			<view class="width100 cover-views  mart15">
				<scroll-view class="width90 cover-view-cont" scroll-x="true">
					<view class="cover-view-head font14" :class="[typeid == item.id ? 'onclick' : '']"
						v-for="(item,index) in marker" :key="index" @click="changeType(item)">全部全部{{index}}</view>
				</scroll-view>
				<!-- 二级分类 -->
				<view class="width100 mart15 backcorfff cover-viewchage alijus fotct" style="border-radius: 22px;">
					<view class="font14 width30w" :class="[selectFirst == 1? 'onchange' : '']"
						@click="changeChilerType()">全部
						<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image>
					</view>
					<view class="font14 width30w" :class="[selectFirst == 1? 'onchange' : '']">全部
						<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image>
					</view>
					<view class="font14 width30w">
						<!-- 全部
						<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> -->
					</view>
				</view>
			</view>
			<!-- //模态框 -->
			<view class="change-cont" v-if="selectChiler == 1">
				<view class="width100 backcorfff"></view>
			</view>
			<!-- //显示内容 -->
			<view class="change-optiac paddbotm20" v-if="selectChiler == 1">
				<scroll-view scroll-y="true" class="width100 height260">
					<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
						<view class="width90w" :class="[selectFirst == 1? 'onchange' : '']">发生地方是发生地方</view>
						<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
					</view>
					<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
						<view class="width90w">发生地方是发生地方</view>
						<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
					</view>
					<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
						<view class="width90w">发生地方是发生地方</view>
						<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
					</view>
					<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
						<view class="width90w">发生地方是发生地方</view>
						<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
					</view>
					<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
						<view class="width90w">发生地方是发生地方</view>
						<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
					</view>
					<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
						<view class="width90w">发生地方是发生地方</view>
						<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
					</view>
					<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
						<view class="width90w">发生地方是发生地方</view>
						<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
					</view>
				</scroll-view>
			</view>

			<!-- 未打开筛选前 -->
			<view class="cover-view-foot" @click="updateSelected(2)" v-if="isSelected == 1">
				<view class="line-view"></view>
				<view class="mart10 fcor666 font13 width100">发现更多商户</view>
				<view class="input-box">
					<input placeholder="搜索商品" v-model="couponName" placeholder-style="color:#c0c0c0;"
						@input="toSearch()" />
				</view>
			</view>

			<!-- 打开筛选后 -->
			<view class="cover-view-foot-behind" @click="updateSelected(1)" v-if="isSelected == 2">
				<view class="line-view"></view>
				<view class="mart10 fcor666 font13 width100">发现更多商户</view>
				<view class="input-box">
					<input placeholder="搜索商品" v-model="couponName" placeholder-style="color:#c0c0c0;"
						@input="toSearch()" />
				</view>
				<scroll-view class="scoroll-cont width94 mart10" scroll-y="true">
					<view class="width94 alijusstart" @click.stop="updateSelected(1)">
						<view class="width30">
							<image src="../../../static/img/jfx.png" class="icon45" mode="widthFix">
							</image>
						</view>
						<view class="width70"></view>
					</view>
				</scroll-view>
			</view>

		</map>
	</view>
</template>
<script>
	let app = getApp();
	export default {
		data() {
			return {
				latitude: 23.106574, //纬度
				longitude: 113.324587, //经度
				scale: 13, //缩放级别
				bottomData: false,
				imagewxUrl: app.globalData.imageWxImg,
				imgadres2: 'xiala.png',
				marker: [{
						id: 0,
						latitude: 23.13065, //纬度
						longitude: 113.3274, //经度
						iconPath: '../../../static/img/user/user5.png', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						//   title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '天宝大厦', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					{
						id: 1234597,
						latitude: 23.106574, //纬度
						longitude: 113.324587, //经度
						iconPath: '../../../static/img/user/user5.png', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						//  title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						//      label:{//为标记点旁边增加标签   //因背景颜色H5不支持
						//   color:'red',//文本颜色
						//      },
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '广州塔', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					{
						id: 2,
						latitude: 23.1338, //纬度
						longitude: 113.33052, //经度
						iconPath: '../../../static/img/user/user5.png', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '德隆大厦', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					{
						id: 3,
						latitude: 23.136455, //纬度
						longitude: 113.329002, //经度
						iconPath: '../../../static/img/user/user5.png', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '羊城国际商贸中心', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					{
						id: 4,
						latitude: 23.224781, //纬度
						longitude: 113.293911, //经度
						iconPath: '../../../static/img/user/user5.png', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '天瑞广场A座', //文本
							color: '#ffffff', //文字颜色
							fontSize: 16, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '12',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					{
						id: 5,
						latitude: 23.072726, //纬度
						longitude: 113.277921, //经度
						iconPath: '../../../static/img/user/user5.png', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '大米和小米儿童康复(广州盈丰)中心', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '8',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
				],
				typeid: 0, //选择分类
				isSelected: 1, //是否选择下拉
				selectFirst: 1, //筛选是否有值
				selectChiler: 1, // 子菜单筛选


			}
		},
		onLoad() {

		},
		computed: {
			mapheight() {
				let data = ''
				if (this.bottomData) {
					if (this.upTop) {
						data = '50px'
					} else {
						data = '200px'
					}
				} else {
					data = '100vh'
				}
				return data
			},
			coverbottom() {
				let data = ''
				if (this.bottomData) {
					data = '20rpx'
				} else {
					data = '200rpx'
				}
				return data
			}
		},

		methods: {
			//地图点击事件
			markertap(e) {},
			//地图点击事件
			callouttap(e) {
				console.log('地图点击事件', e)
			},
			// 定位点击事件
			onControltap() {

			},
			//选择类型
			changeType(item) {
				this.typeid = item.id;
			},
			//子菜单显示
			changeChilerType() {
				if (this.selectChiler == 1) {
					this.selectChiler = 2;
				} else {
					this.selectChiler = 1;
				}
			},
			// 是否选择下拉
			updateSelected(item) {
				this.isSelected = item;
			}
		}
	}
</script>
<style lang='less' scoped>
	.map-container {
		position: relative;
		overflow: hidden;

		.cover-views {
			position: absolute;
			z-index: 99999;
		}

		.cover-view-cont {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			white-space: nowrap;
		}

		.cover-view-head {
			height: 35px;
			line-height: 35px;
			background-color: #fff;
			display: inline-table;
			flex-direction: column;
			text-align: center;
			position: relative;
			margin-right: 15px;
			border-radius: 22px;
			padding: 0 10px;
		}

		.cover-viewchage {
			height: 35px;
		}

		.onchange {
			color: #089bf5;
		}

		.onclick {
			background-color: #089bf5;
			color: #fff;
		}

		.cover-view-loca {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 40px;
			height: 40px;
			color: #484848;
			background-color: #fff;
			background-size: 60px 60px;
			background-position: center center;
			position: absolute;
			bottom: 100px;
			right: 16px;
		}

		.cover-image {
			display: inline-block;
			width: 15px;
			height: 15px;
		}

		.cover-view-foot {
			text-align: center;
			height: 200rpx;
			background-color: #fff;
			position: absolute;
			bottom: 0px;
			width: 100%;
			border-radius: 18px 18px 0 0;
		}

		.change-cont {
			position: absolute;
			z-index: 99999999;
			top: 100px;
			background-color: #333;
			width: 100%;
			opacity: 0.8;
			height: calc(100% - 100px);
		}

		.change-optiac {
			position: absolute;
			z-index: 99999999;
			top: 100px;
			width: 100%;
			background-color: #fff;
			height: 260px;
		}

		.cover-view-foot-behind {
			text-align: center;
			height: calc(100% - 110px);
			background-color: #fff;
			position: absolute;
			z-index: 999999;
			bottom: 0px;
			width: 100%;
			border-radius: 18px 18px 0 0;
		}
	}

	.scoroll-cont {
		height: calc(100% - 80px);
	}

	.line-view {
		width: 10%;
		margin-left: 45%;
		height: 5px;
		border-radius: 12px;
		margin-top: 10px;
		background-color: #f0f0f0;
	}

	.input-box {
		width: 90%;
		margin-left: 5%;
		margin-top: 5px;
		text-align: left;
		height: 70rpx;
		background-color: #f0f0f0;
		border-radius: 22px;
		position: relative;
		align-items: center;
		display: flex;

		input {
			padding-left: 12px;
			padding-right: 12px;
			height: 30px;
			color: #666;
			font-size: 14px;
			width: 100%;
		}
	}

	.onclick {
		background-color: #089bf5;
		color: #fff;
	}
</style>