<template>
	<view class="map-container"  :style="{height:mapheight+'px'}">

		<map id="myMap" style="width: 100%; height: 10vh;" :style="{height:mapheight+'px'}" :latitude="latitude"
			:longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
		</map>
		
		<!-- :style='{bottom:coverbottom}' -->
		<view class="cover-view-loca"  @click="onControl">
			<image class="cover-image" src="../../../static/img/dispos.png"></image>
		</view>
		<!-- 一级分类 -->
		<view class="width100 classify-one  ">
			<scroll-view class="width90 view-cont" scroll-x="true">
				<view class="view-head font14" :class="[typeid == item.id ? 'onclick' : '']"
					v-for="(item,index) in goodsFirstClassList" :key="index" @click="changeType(item)">{{item.name}}
				</view>
			</scroll-view>
			<!-- 二级分类 -->
			<view class="width100 mart15 backcorfff cover-viewchage alijus fotct" style="border-radius: 22px;">
				<!-- :class="[selectFirst == 1? 'onchange' : '']" -->
				<view class="font14 width30w fotct onchange text1" @click="changeChilerType()">{{selectFirstName}}
					<text :class="' margle ic-drec '+(selectChiler == 1?'icon-ymt to-blod-up':'icon-ymt to-blod-down')"></text>
					<!-- <image mode="aspectFit" class="margle" style="width: 8px;height:8px;" :src="imagewxUrl+imgadres2"></image> -->
				</view>
				<view class="font14 width30w onchange" @click="changeChilerdistance()">{{distanceName}}
					<text :class="' margle ic-drec '+(selectChilerdistance == 1?'icon-ymt to-blod-up':'icon-ymt to-blod-down')"></text>
					<!-- <image mode="aspectFit" class="margle" style="width: 8px;height: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-optiac paddbotm20" v-if="selectChiler == 1">
			<scroll-view scroll-y="true" class="width100 height260">
				<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
					v-for="(item,index) in goodsSendotClassList" :key="item.id" @click="changeFirstcont(item)">
					<view class="width90w font14" :class="[selectFirst == item.id? 'onchange' : '']">{{item.name}}
					</view>
					<image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
						v-if="selectFirst == item.id"></image>
				</view>
			</scroll-view>
		</view>
		<!-- 二级距离 -->
		<view class="change-optiac paddbotm20" v-if="selectChilerdistance == 1">
			<scroll-view scroll-y="true" class="width100 height260">
				<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
					v-for="(item,index) in distanceList" :key="index" @click="changeDistance(item)">
					<view class="width90w font14" :class="[ distance== item.id? 'onchange' : '']">{{item.title}}
					</view>
					<image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
						v-if="distance == item.id"></image>
				</view>
			</scroll-view>
		</view>
		<!-- //模态框 -->
		<view class="change-cont" v-if="selectChiler == 1 || selectChilerdistance == 1">
			<view class="width100 backcorfff"></view>
		</view>
		
		
		<touchbox ref="touchBox" :maxTop="maxTop" minTop="0.2" :auto="true" customStyle="border-radius:25px;"
			:disable="isTouchDisable" @get-end-detail="getEndDetail">

			<view class="cover-view-foot-behind" >
				<view class="paddtop10 fcor666 font13 width100">点击发现更多商户</view>
				<view class="input-box">
					<input placeholder="搜索商品" v-model="searchName" placeholder-style="color:#c0c0c0;"
						@input="getMapStore()" />
				</view>
				<scroll-view class="scoroll-cont width94 mart10" :scroll-y="isScrollY">
					<view v-if="marker.length == 0 " class="mart30 fotct font14 fcor666 fotct width100">
						<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres3"></image>
					</view>
					
					<view class="" v-for="(box,i) in marker" :key="i"
							@click="seeloaction(box)">
						<view v-if="box.id != 0" class="width96 height80 bor-botm1 alijusstart" >
							<image mode="widthFix" :src="box.logo" class="recontleft flleft border-r"
							@error="imgerror($event, i )"	style="width: 50px;flex-shrink: 0;">
							</image>
							<view class="fotlt paddleft5 flex-1">
								<view class="text2 width100 font16 fontwig6">
									{{box.callout.content}}
								</view>
								<view class="height22">
									<view class="width70 flleft text1 font13 fcor999">
										{{box.callout.address}}
									</view>
									<view class="width30 flright font13 fcor666 fotrt">
										<image mode="aspectFit" :src="imagewxUrl+imgadres4" class="marglerig" style="width: 10px;height: 10px;"></image>
										{{box.distance}}km
									</view>
								</view>
							</view>
							
						</view>
					</view>
					
				</scroll-view>
			</view>
		</touchbox>
		
	</view>
</template>
<script>
	import {
		getIndustry,
		getMapStore
	} from '../../../Utils/Api.js';
	import touchbox from '@/components/touchbox/touchbox.vue'
	let app = getApp();
	export default {
		data() {
			return {
				mapheight:null,
				latitude: '', //纬度
				longitude: '', //经度
				mapContext: null,
				scale: 13, //缩放级别
				bottomData: false,
				imagewxUrl: app.globalData.imageWxImg,
				imgadres2: 'xiala.png',
				imgadres3: 'noorder.png',
				imgadres4: 'dh.png',
				marker: [], //商户
				typeid: 99999999, //选择分类
				isSelected: 1, //是否选择下拉
				selectFirst: '99999999', //筛选是否有值
				selectFirstName: '全部', //筛选值名字
				selectChiler: 2, // 一级子菜单筛选
				selectChilerdistance: 2, // 二级子菜单筛选
				goodsFirstClassList: [{
					"childIndustry": null,
					"createTime": 1640252815000,
					"name": "全部",
					"id": 99999999,
					"wechatCompanyCode": "716",
					"wechatName": "全部",
					"ext3": null,
					"parentId": 1,
					"wechatSelfEmployedCode": "719",
					"ext2": null,
					"status": 1,
					"ext1": "650"
				}], //商品一级分类
				goodsSendotClassList: [{
					"childIndustry": null,
					"createTime": 1640252998000,
					"name": "全部",
					"id": 99999999,
					"wechatCompanyCode": "716",
					"wechatName": "全部",
					"ext3": null,
					"parentId": 13,
					"wechatSelfEmployedCode": "719",
					"ext2": null,
					"status": 1,
					"ext1": "642"
				}], //商品一级分类
				distanceList: [{
						id: 1,
						title: '1km'
					},
					{
						id: 3,
						title: '3km'
					},
					{
						id: 5,
						title: '5km'
					},
				], //距离
				distance: '3',
				distanceName: '3km',
				searchName: '', //搜索名称
				typeplat: 1, //手机类型
				
				maxTop: 0.7,
				isTouchDisable: false, // 是否禁用滑动
				isScrollY:false,
			}
		},
		onLoad() {
			this.onControltap();
		},
		onShow() {
			// this.latitude = app.globalData.latitude;
			// this.longitude = app.globalData.longitude;
			/* this.onControltap(); */
		},
		components:{
			touchbox,
		},
		onReady() {
			this.mapContext = uni.createMapContext('myMap');
			this.mapheight = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().windowTop - uni
				.getSystemInfoSync().windowBottom
			// console.log(uni.getSystemInfoSync())
		},
		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: {
			getEndDetail({
				minTop,
				maxTop,
				curTop
			}) {
				// console.log(minTop, maxTop, curTop);
				if (curTop == maxTop) this.isScrollY = true
				else this.isScrollY = false
			},
			//查询商户列表
			getIndustry() {
				getIndustry().then(res => {
					 
					this.goodsFirstClassList=[{
						"childIndustry": null,
						"createTime": 1640252815000,
						"name": "全部",
						"id": 99999999,
						"wechatCompanyCode": "716",
						"wechatName": "全部",
						"ext3": null,
						"parentId": 1,
						"wechatSelfEmployedCode": "719",
						"ext2": null,
						"status": 1,
						"ext1": "650"
					}];
					
					if (res.return_code == '000000') {
						for (var i = 0; i < res.return_data.length; i++) {
							this.goodsFirstClassList.push(res.return_data[i]);
						}
						// this.typeid = res.return_data[0].id;
						// this.goodsSendotClassList = res.return_data[0].childIndustry;
						// this.selectFirst = res.return_data[0].childIndustry[0].id;
						// this.selectFirstName = res.return_data[0].childIndustry[0].name;
						let platform = uni.getSystemInfoSync().platform;
						if (platform == 'android') {
							this.typeplat = 2;
							this.getMapStore();
						}
						if (platform == 'ios' || platform == 'devtools') {
							this.typeplat = 1;
							this.getMapStore();
						}
					}
				})
			},
			//查询商户
			getMapStore() {
				uni.showLoading({
					title: '加载中...'
				})
				let childId = '';
				if (this.selectFirst == 99999999) {
					childId = '';
				} else {
					childId = this.selectFirst
				}
				let datas = {
					distance: this.distance,
					name: this.searchName,
					type: this.typeplat,
					childId: childId,
					longitude: this.longitude,
					latitude: this.latitude
				}
				getMapStore(datas).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.marker = res.return_data;
						// console.log(this.marker,"marker")
					} else {
						this.marker = [];
					}

					this.marker.push({
						id: 0,
						latitude: this.latitude,
						longitude: this.longitude,
						iconPath: '/static/img/location.png',
						rotate: 1,
						alpha: 1,
						width: 40,
						height: 40,
						callout:{},

					})

				})
			},
			//选择二级分类数据
			changeFirstcont(item) {
				this.selectFirst = item.id;
				this.selectFirstName = item.name;
				this.selectChiler = 2;
				this.getMapStore();
			},
			//选择距离
			changeDistance(item) {
				this.distance = item.id;
				this.distanceName = item.title;
				this.selectChilerdistance = 2;
				this.getMapStore();
			},
			//地图点击事件,点击标记点时触发
			markertap(e) {
				// console.log(e,"点击标记点时触发");
				let markerId = e.detail.markerId;
				if(markerId == 0) return; /* 点击当前自己定位的标记点*/
				for (var i = 0; i < this.marker.length; i++) {
					if (markerId == this.marker[i].id) {
						this.seeloaction(this.marker[i]);
					}
				}
			},
			//地图点击事件,点击标记点对应的气泡时触发，
			callouttap(e) {
				// console.log(e, "点击标记点对应的气泡")
				let markerId = e.detail.markerId;
				if(markerId == 0) return;
				for (var i = 0; i < this.marker.length; i++) {
					if (markerId == this.marker[i].id) {
						this.seeloaction(this.marker[i]);
					}
				}
			},

			postionIng() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						app.globalData.latitude = res.latitude;
						app.globalData.longitude = res.longitude;
						that.findByLatAndLng(res.longitude, res.latitude);
						// uni.request({
						// 	url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + res.latitude +
						// 		',' + res.longitude + '&key=7UMBZ-HFEHX-HSD4Q-Z3QY6-OQKN7-2QBDB',
						// 	data: {},
						// 	success: function(res) {
						// 		that.city = res.data.result.address_component.city.replace(/市/g,
						// 			'');
						// 		app.globalData.cityId = res.data.result.ad_info.adcode;
						// 		// app.globalData.cityId =  '500100';
						// 		that.getMerchantList();
						// 	}
						// })
					}
				})
			},
			//金纬度转
			findByLatAndLng(item, item1) {
				let datas = {
					lng: item,
					lat: item1
				}
				findByLatAndLng(datas).then(res => {
					if (res.return_code == '000000') {
						this.city = res.return_data.provinceName;
						app.globalData.cityName = res.return_data.provinceName;
						app.globalData.qianzhuCityName = res.return_data.cityName;
						app.globalData.cityId = res.return_data.regionId;
						// app.globalData.cityId = '500100';
						if (res.return_data.result.addressComponent.adcode) {
							this.getMerchantList();
						}
					}
				});
			},
			// 商户列表
			getMerchantList() {
				let params = {
					regionId: app.globalData.cityId
				}
				getMerchantList(params).then(res => {
					if (res.return_code == '000000' && res.return_data != '') {
						this.MerchantList = res.return_data;
						this.showCategoryIndex = res.return_data[0].merchantName;
						this.showCategoryIndexId = res.return_data[0].id;
						this.pageNum = 1;
						this.pageSize = 10;
						this.isNoMoreData = false;
						this.categoryList = [];
						this.getStoreListByMerchant();

					} else {
						this.MerchantList = [];
						uni.showToast({
							title: '暂无数据',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			//跳转位置
			goPostion() {
				uni.navigateTo({
					url: '/pages/user/positioning/positioning'
				})
			},
			//门店列表
			getStoreListByMerchant() {
				console.log(222);
				uni.showLoading({
					title: '加载中...'
				})
				if (this.isNoMoreData) {
					uni.hideLoading()
					return false;
				}
				let pagenum = this.pageNum;
				let params = {
					merchantId: this.showCategoryIndexId,
					longitude: app.globalData.longitude,
					latitude: app.globalData.latitude,
					pageNum: pagenum,
					pageSize: this.pageSize

				}
				getStoreListByMerchant(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						uni.hideLoading();
						this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
						this.categoryList = this.categoryList.concat(res.return_data.list);
						if (res.return_data.total == (this.pageNum * this.pageSize)) {
							this.isNoMoreData = true;
						}
						this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
					} else {
						this.categoryList = [];
					}
				})
			},
			// 定位点击事件
			onControl(){
				if(this.mapContext&&this.latitude&&this.longitude){
					let that = this;
					this.mapContext.moveToLocation({
						latitude: that.latitude,
						longitude: that.longitude,
						success(res){
							// console.log(res,"成功")
						}
					})
					
					
				}else{
					// console.log(this.mapContext,this.latitude,this.longitude)
					this.onControltap();
				}
			},
			onControltap() {
				uni.showLoading({
					title: '定位中'
				})
				uni.getLocation({
					geocode: true,
					type: 'wgs84',
					success: (res) => {
						uni.hideLoading();
						// console.log(res, '获取当前位置')
						this.longitude = res.longitude;
						this.latitude = res.latitude;
						
						if(this.mapContext){
							this.mapContext.moveToLocation({
								latitude: this.latitude,
								longitude: this.longitude,
								success(res){
									// console.log(res,"成功")
								}
							})
						}

						// console.log(this.longitude, this.latitude, "this.longitude,this.latitude")
						this.getIndustry();
					},
					fail() {
						uni.hideLoading();
					},
					address: (res) => {
						console.log('address', res)
					}
				});
			},
			//选择类型
			changeType(item) {
				this.typeid = item.id;
				if (item.id == 99999999) {
					this.goodsSendotClassList = [{
						"childIndustry": null,
						"createTime": 1640252998000,
						"name": "全部",
						"id": 99999999,
						"wechatCompanyCode": "716",
						"wechatName": "全部",
						"ext3": null,
						"parentId": 13,
						"wechatSelfEmployedCode": "719",
						"ext2": null,
						"status": 1,
						"ext1": "642"
					}];
					this.selectFirst = '99999999';
					this.selectFirstName = '全部';
				} else {
					this.goodsSendotClassList = item.childIndustry;
					this.selectFirst = item.childIndustry[0].id;
					this.selectFirstName = item.childIndustry[0].name;
				}

				this.getMapStore();
			},
			//子菜单显示
			changeChilerType() {
				if (this.selectChiler == 1) {
					this.selectChiler = 2;
				} else {
					this.selectChilerdistance = 2;
					this.selectChiler = 1;
				}
			},
			//距离显示
			changeChilerdistance() {
				if (this.selectChilerdistance == 1) {
					this.selectChilerdistance = 2;
				} else {
					this.selectChiler = 2;
					this.selectChilerdistance = 1;
				}

			},
			// 是否选择下拉
			updateSelected(item) {
				this.isSelected = item;
			},
			seeloaction(item) {
				console.log(item,"item");
				uni.openLocation({
					latitude: parseFloat(item.latitude), //目的地的定位
					longitude: parseFloat(item.longitude), //目的地的定位
					name: item.callout.content,
					address: item.callout.address
				})
				

				/* 
				window.location.href =
					`http://apis.map.qq.com/uri/v1/marker?marker=coord:(${item.latitude},${item.longitude})&addr:${item.address}`;
				uni.openLocation({
					latitude: Number(item.latitude), //目的地的定位
					longitude: Number(item.longitude), //目的地的定位
					name: item.store_name,
					address: item.address
				})
				 */

			},
			// 图片出错
			imgerror(e,index){
				console.log(e,index,"图片出错")
				this.marker[index].logo = this.imagewxUrl+this.imgadres3;
			}
		}
	}
</script>
<style lang='scss' scoped>
	
	image{will-change: transform}
	
	.ic-drec{
		font-size: 24rpx !important;
		width: 10px;
		height: 10px;
		line-height: 10px;
		color: #333;
	}
	.map-container {
		position: relative;
		overflow: hidden;
		
		.classify-one{
			position: absolute;
			top:15px;
		}
		

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

		.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;
			border-radius: 50%;
			color: #484848;
			background-color: #fff;
			background-size: 60px 60px;
			background-position: center center;
			position: absolute;
			bottom: 20%;
			right: 16px;
		}

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

		.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:999;
			top: 100px;
			background-color: #333;
			width: 100%;
			opacity: 0.8;
			height: calc(100% - 100px);
		}

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

		.cover-view-foot-behind {
			text-align: center;
			height: calc(100% - 20px);
			background-color: #fff;
			width: 100%;
		}
	}

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

	.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: 35px;
		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;
	}

	.recontleft {
		margin-left: 10px;
	}
</style>