<template>
	<view class="container-main">
		<view class="tabList">
			<view class="" v-for="(item, index) in tabList" :key="index"
				:class="currentIndex == index ? 'activeTab' : ''" @click="clickTab(index)">{{ item.name }}</view>
		</view>
		<view class="data-main" v-show="currentIndex == 0">
			<view class="data-rows" style="padding-top: 0">
				<view class="data-lable">机构名称</view>
				<view class="data-value">{{ form.checkName }}</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">所在城市</view>
				<view class="data-value">{{ form.code }}</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">所在县区</view>
				<view class="data-value">{{ form.quCode }}</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">机构地址</view>
				<view class="data-value">{{ form.address }}</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">联系人</view>
				<view class="data-value">{{ form.contact }}</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">联系电话</view>
				<view class="data-value">{{ form.tel }}</view>
			</view>
			<view class="data-rows">
				<view class="data-lable">服务类别</view>
				<view class="data-value">{{ form.service }}</view>
			</view>
			<view class="data-rows phone-row" style="flex-direction: column; align-items: flex-start"
				v-show="form.checkImg">
				<view class="data-lable" style="margin-bottom: 20rpx">机构照片</view>
				<view class="data-value data-img">
					<image :src="baseUrl + '/common/download/downloadmino?filename=' + item" mode=""
						v-for="(item, index) in form.checkImg" :key="index" @click="
              viewIamge(
                baseUrl + '/common/download/downloadmino?filename=' + item,
                index
              )
            "></image>
				</view>
			</view>
			<view class="map">
				<map style="height: 100%; width: 100%" :show-compass="true" :scale="scale" :longitude="longitude"
					:latitude="latitude" :markers="markers"></map>
				<view class="navigation-btn" @click="clickCell()">地图导航</view>
			</view>
		</view>
		<view class="data-main" v-show="currentIndex == 1" style="min-height: 100rpx">
			<view class="data-rows" style="padding-top: 0">
				<!-- <view class="data-lable">
					证书信息
				</view> -->
				<view class="data-value">{{ form.certificate }}</view>
			</view>
		</view>
		<view class="data-main" v-show="currentIndex == 2" style="min-height: 100rpx">
			<view class="data-rows" style="padding-top: 0">
				<!-- <view class="data-lable">服务内容</view> -->
				<view class="data-value">{{ form.serviceContent }}</view>
			</view>
		</view>
		<!-- 选择导航 -->
		<u-action-sheet :list="list" v-model="show" @click="clickSheet"></u-action-sheet>
	</view>
</template>

<script>
	import config from "@/config";
	import {
		getinfo
	} from "@/api/shianliaoning/check";
	import wexinLoction from '@/utils/wxjsApi.js'
	import {
		getWxConfig
	} from '@/api/wx.js'
	export default {
		data() {
			return {
				baseImgUrl: getApp().globalData.config.iamgeBaseUrl,
				markers: [],
				latitude: 31.299758,
				longitude: 120.585294,
				longitude2: null,
				latitude2: null,
				baseUrl: config.baseUrl,
				scale: 10,
				currentIndex: 0,
				form: {},
				tabList: [{
						name: "基本资料",
					},
					{
						name: "证书信息",
					},
					{
						name: "服务项目",
					},
				],
				list: [{
						text: '高德地图',
					},
					{
						text: '百度地图',
					},
					{
						text: '腾讯地图',
					}
				],
				show: false
			};
		},
		onLoad(option) {
			this.getInfo(option.id);
			console.log(new Date().getTime() / 1000 * 1000, '微信凭证')

		},
		methods: {
			clickSheet(e) {

				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						if (e == 0) {
							//高德
							window.android.openOtherApplication(
								`amapuri://route/plan?sourceApplication=maxuslife&sname=我的位置&slat=${res.latitude}&slon=${res.longitude}&dlat=${this.form.latitude}&dlon=${this.form.longitude}&dname=${this.form.checkName}&dev=0&t=0`,
								'com.autonavi.minimap')
						} else if (e == 1) {
							//百度
							window.android.openOtherApplication(
								`baidumap://map/direction?mode=driving&origin=latlng:${res.latitude},${res.longitude}|name:我的位置&destination=latlng:${this.form.latitude},${this.form.longitude}|name:${this.form.checkName}`,
								'com.baidu.BaiduMap')
						} else {
							// 腾讯
							window.android.openOtherApplication(
								`qqmap://map/routeplan?type=drive&policy=0&referer=zhongshuo&from=我的位置&fromcoord=${res.latitude},${res.longitude}&to=${this.form.checkName}&tocoord=${this.form.latitude},${this.form.longitude}`,
								'com.tencent.map')
						}
					}
				})

			},
			//导航
			clickCell() {
				this.show = true
				return
				// let query = {
				// 	noncestr: this.$u.guid(20), //随机字符
				// 	url: location.href.split('#')[0], //网页地址
				// 	timestamp: Math.round(new Date().getTime() / 1000) //时间戳
				// }
				// let item = {
				// 	lat: this.form.latitude,
				// 	lon: this.form.longitude,
				// 	name: this.form.checkName,
				// 	address: this.form.address
				// }
				// getWxConfig(query).then(res => {
				// 	let resData = {
				// 		appid: 'wxb87922d910215826',
				// 		timestamp: query.timestamp,
				// 		noncestr: query.noncestr,
				// 		signature: res.msg
				// 	}
				// 	let data = {
				// 		...resData,
				// 		...item
				// 	}
				// 	wexinLoction(data)
				// })
			},
			//预览图片
			viewIamge(url, index) {
				uni.previewImage({
					current: index,
					urls: url.split(","),
				});
			},
			getInfo(id) {
				getinfo(id).then((res) => {
					this.form = res.data;
					this.scale = 16;
					this.latitude = this.form.latitude;
					this.longitude = this.form.longitude;
					this.markers.push({
						id: this.form.id,
						title: this.form.checkName,
						latitude: Number(this.form.latitude),
						longitude: Number(this.form.longitude),
						iconPath: this.baseImgUrl + "liao-ning/pointActive.png",
						width: 20,
						height: 30,
					});
					if (this.form.checkImg) {
						this.form.checkImg = this.form.checkImg.split(",");
					}
				});
			},
			clickTab(index) {
				this.currentIndex = index;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container-main {
		box-sizing: border-box;
		padding: 20rpx;

		.tabList {
			height: 88rpx;
			border-radius: 16rpx;
			background: #fff;
			display: flex;
			align-items: center;

			&>view {
				flex: 1;
				text-align: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #34373b;
			}

			&>view:nth-child(1) {
				border-right: 1px solid #dce3ec;
			}

			&>view:nth-child(2) {
				border-right: 1px solid #dce3ec;
			}

			.activeTab {
				font-weight: 600;
				color: #3976f1;
			}
		}

		.data-main {
			min-height: 900rpx;
			border-radius: 16rpx;
			background: #fff;
			box-sizing: border-box;
			padding: 30rpx;
			margin-top: 20rpx;
		}

		.data-rows {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #ecf1f7;
			box-sizing: border-box;
			padding: 30rpx 0;

			.data-lable {
				width: 150rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #34373b;
			}

			.data-value {
				flex: 1;
				font-size: 30rpx;
				font-weight: 400;
				color: #616367;
			}

			.data-img {
				width: 100%;
				display: flex;
				align-items: center;
				gap: 35rpx;
				justify-content: flex-start;

				image {
					width: 30%;
					height: 188rpx;
					border-radius: 16rpx;
				}
			}
		}

		.phone-row {
			border-bottom: none;
		}

		.map {
			width: 100%;
			height: 500rpx;
			border-radius: 20rpx;
			position: relative;

			.navigation-btn {
				position: absolute;
				left: 50%;
				bottom: 10%;
				transform: translateX(-50%);
				width: 180rpx;
				height: 68rpx;
				text-align: center;
				line-height: 68rpx;
				background: #3976f1;
				box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.102);
				border-radius: 90rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
</style>