<template>
	<view class="page">
		<view class="map-content" style="position: relative;z-index: 1000;">
			<!-- 搜索 -->
			<view class="search-head">
				<view class="search">
					<image src="../../static/fdj1.png"></image>
					<text></text>
					<input type="text" v-model="selectName" placeholder="搜索关键词" @input="getCompanyList" />
				</view>
				<!-- 显示公司选项 -->
				<view class="btn" @click="getCompanyDetail">
					<text>搜索</text>
				</view>
			</view>
			<mo-hu-search :show="selectShow" :list="comList" @select="select" label-name="name"
				value-name="id"></mo-hu-search>
		</view>
		<view class="content">
			<view class="bg" style="z-index: 9;">
				<!-- <web-view src="../../static/html/map.html" style="width: 100%;height: 100%; position: absolute; z-index: 0;"></web-view> -->
				<map style="width: 100%;height: 100%" :latitude="latitude" :longitude="longitude" :markers="covers"
					:show-location="true">


					<cover-view class="invitation-show">
						<cover-view class="icon" v-show="show">
							<cover-image :src=" baseUrl + logo.url"></cover-image>
						</cover-view>
						<cover-view class="item">
							<cover-view class="title-btn">
								<cover-view class="title">
									<cover-view class="bt">{{this.companyName}}</cover-view>
								</cover-view>
							</cover-view>
							<cover-view class="describe">
								{{this.dizhi}}
							</cover-view>
							<cover-view class="describe">
								<cover-view>电话：{{getData.fuzerendianhua}}</cover-view>
								<cover-image style="width: 30rpx;height: 30rpx;;" src="../../static/map1.png"
									@click.stop="callPhone(getData.fuzerendianhua)"></cover-image>
							</cover-view>
							<cover-view class="describe">
								营业时间：10:00-20:00
							</cover-view>
						</cover-view>
						<cover-view class="right">
							<cover-view class="red-btn" @click.stop="handleNavigation">
								<cover-image style="width: 24rpx;height: 24rpx;" src="../../static/dh.png"
									@click.stop="handleNavigation"></cover-image>
								<cover-view style="color: #fff;" @click.stop="handleNavigation">导航</cover-view>
							</cover-view>
						</cover-view>
					</cover-view>

				</map>
			</view>
			<view class="map-content" style="position: relative;z-index: 1000;">
				<!-- 搜索 -->

			</view>

		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	// import moHuSearch from '../../components/qj-fuzzy-search/index.vue'
	import moHuSearch from '../../components/qj-fuzzy-search/index2.vue'
	export default {
		components: {
			moHuSearch
		},
		data() {
			return {
				keyword: '',
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				// latitude: 30.602494,
				// longitude: 104.073004,
				latitude: 30.926786,
				longitude: 104.294514,
				covers: [{
						latitude: 30.926786,
						longitude: 104.294514,
						iconPath: '../../static/map_red.png',
						// width:20,
						// height:26,
					},
					// {
					// 	latitude: 39.90,
					// 	longitude: 116.39,
					// 	iconPath: '../../../static/wuganda.png'
					// },
				],
				getData: {},
				show: false,
				selectShow: false,
				selectName: '',
				selectId: '',
				logo: {},
				baseUrl: 'http://deyanggaoxin.fengshiyun.com',
				comList: [],
				companyName: '德阳高新区管委会',
				dizhi: '广汉市聆湖西路一段一号',
				// 我自己的位置经纬度（百度地图需要传入自己的经纬度进行导航）
				selfLocation: {
					latitude: '',
					longitude: ''
				}
			}
		},
		onLoad() {
			// this.getCompanyDetail()
		},
		methods: {
			callPhone(phoneNum) {
				uni.makePhoneCall({
					phoneNumber: phoneNum //仅为示例
				});
			},
			// 获取公司列表
			getCompanyList() {
				this.selectShow = true
				// this.$refs.sou.open()
				request({
					url: '/api/permission/organize/GetSelectList',
					method: 'get',
					data: {
						keyword: this.selectName,
						currentPage: 1,
						pageSize: 8
					}
				}).then(res => {
					if (res.code === 200) {
						// console.log(res)
						this.comList = res.data.list.map(it => {
							return {
								id: it.id,
								name: it.fullName
							}
						})
						// console.log(this.comList)
						this.comList = JSON.parse(JSON.stringify(this.comList))
					}
				})
			},
			select(item) {
				this.selectShow = false;
				this.selectName = item.name;
				this.selectId = item.id
			},
			// 查询公司
			getCompanyDetail() {
				request({
					url: `/api/permission/organize/${this.selectId}`,
					method: 'get',
					data: {}
				}).then(res => {
					if (res.code === 200) {
						console.log(res)
						// console.log(res.data.list)
						if (res.data.latlong !== null) {
							let position = res.data.latlong.split(',')
							this.latitude = position[1]
							this.longitude = position[0]
							this.covers[0].latitude = position[1]
							this.covers[0].longitude = position[0]
							console.log(position)
						}

						this.getData = res.data
						this.companyName = this.getData.fullName
						this.dizhi = this.getData.dizhi
						// console.log(this.getData.F_Logo.length)
						if (this.getData.logo.length > 0) {
							this.show = true
							this.logo = this.getData.logo[0]
							console.log(this.logo)

						}
					}
				})
			},

			// 点击跳转到本机地图软件
			handleNavigation() {
				// console.log('导航')
				const _this = this
				if (!this.latitude || !this.longitude || !this.companyName) return
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.selfLocation.longitude = res.longitude
						this.selfLocation.latitude = res.latitude
					}
				});
				// 微信
				// #ifdef MP-WEIXIN
				let _obj = {
					latitude: parseFloat(this.latitude),
					longitude: parseFloat(this.longitude),
					name: this.companyName,
				}
				if (this.dizhi) {
					_obj['dizhi'] = this.dizhi
				}
				uni.openLocation({
					..._obj,
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					}
				})
				// #endif

				// #ifdef APP-PLUS
				// 判断系统安装的地图应用有哪些, 并生成菜单按钮
				let _mapName = [{
						title: '高德地图',
						name: 'amap',
						androidName: 'com.autonavi.minimap',
						iosName: 'iosamap://'
					},
					{
						title: '百度地图',
						name: 'baidumap',
						androidName: 'com.baidu.BaiduMap',
						iosName: 'baidumap://'
					},
					{
						title: '腾讯地图',
						name: 'qqmap',
						androidName: 'com.tencent.map',
						iosName: 'qqmap://'
					},
				]
				// 根据真机有的地图软件 生成的 操作菜单
				let buttons = []
				let platform = uni.getSystemInfoSync().platform
				platform === 'android' && _mapName.forEach(item => {
					if (plus.runtime.isApplicationExist({
							pname: item.androidName
						})) {
						buttons.push(item)
					}
				})
				platform === 'ios' && _mapName.forEach(item => {
					console.log(item.iosName)
					if (plus.runtime.isApplicationExist({
							action: item.iosName
						})) {
						buttons.push(item)
					}
				})
				if (buttons.length) {
					plus.nativeUI.actionSheet({ //选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: buttons
					}, function(e) {
						let _map = buttons[e.index - 1]
						_this.openURL(_map, platform)
					})
				} else {
					uni.showToast({
						title: '请安装地图软件',
						icon: 'none'
					})
					return
				}
				// #endif
			},

			// 打开第三方程序实际应用
			openURL(map, platform) {
				let _defaultUrl = {
					android: {
						"amap": `amapuri://route/plan/?sid=&did=&dlat=${this.latitude}&dlon=${this.longitude}&dname=${this.companyName}&dev=0&t=0`,
						'qqmap': `qqmap://map/routeplan?type=drive&to=${this.companyName}&tocoord=${this.latitude},${this.longitude}&referer=fuxishan_uni_client`,
						'baidumap': `baidumap://map/direction?origin=${this.selfLocation.latitude},${this.selfLocation.longitude}&destination=name:${this.companyName}|latlng:${this.latitude},${this.longitude}&coord_type=wgs84&mode=driving&src=andr.baidu.openAPIdemo"`
					},
					ios: {
						"amap": `iosamap://path?sourceApplication=fuxishan_uni_client&dlat=${this.latitude}&dlon=${this.longitude}&dname=${this.companyName}&dev=0&t=0`,
						'qqmap': `qqmap://map/routeplan?type=drive&to=${this.companyName}&tocoord=${this.latitude},${this.longitude}&referer=fuxishan_uni_client`,
						'baidumap': `baidumap://map/direction?origin=${this.selfLocation.latitude},${this.selfLocation.longitude}&destination=name:${this.companyName}|latlng:${this.latitude},${this.longitude}&mode=driving&src=ios.baidu.openAPIdemo`
					}
				}
				let newurl = encodeURI(_defaultUrl[platform][map.name]);
				console.log(newurl)
				plus.runtime.openURL(newurl, function(res) {
					console.log(res)
					uni.showModal({
						content: res.message
					})
				}, map.androidName ? map.androidName : '');
			}

		}
	}
</script>

<style scoped lang="scss">
	@import 'map.scss';
</style>