<template>
	<u-skeleton :loading="loading" :animation="true" border-radius="12"></u-skeleton>
	<div class="container g_bg_page" :style="{ minHeight: `calc(100vh - ${tabbarHeight}px)` }" hover-class="none" :hover-stop-propagation="false">
		<div class="g_p_10 g_pb_80 u-skeleton" :class="loading ? 'g_ml_10 g_mr_10' : ''">
			<!-- <div v-if="infoList.length > 0"> -->
			<div class="sub g_bg_f g_radius_8 g_mb_10 flex_center g_p_10" hover-class="none" :data-item="item" v-for="(item, index) in infoList" :key="index">
				<div>
					<div class="g_flex_row_between flex_center" :class="item.classify == 1 ? 'g_fs_17 g_mb_10' : 'g_fs_15'">
						<div class="flex-1 u-skeleton-rect">
							<div class="g_fw_600 g_c_3 g_fs_18" :style="{ width: loading ? 'calc(100vw - 240px)' : '' }">
								{{ item.storeName || "-" }}
							</div>
						</div>
						<div class="g_text_c g_radius_16 g_flex_column_center u-skeleton-rect" :class="loading ? 'g_h_20 g_w_20' : 'g_h_32 g_w_32'" style="background-color: #e5f4ff" hover-stop-propagation hover-class="thover">
							<a :href="`tel:${item.phone}`" @click.stop="makePhoneCall" style="text-decoration: none" hover-class="none">
								<!-- @click.stop="makePhoneCall" -->
								<div class="iconfont icon-a-dianhua1 g_fs_14 g_c_09f" :mark:tel="item.phone" hover-class="none"></div>
							</a>
						</div>
					</div>
					<div v-if="item.classify == 1" hover-stop-propagation hover-class="thover" @click.stop="goDetail(item.id)" :data-item="item">
						<view v-if="item.imgList != ''" class="u-skeleton-rect" hover-class="none" style="width: 100%; height: 200px; overflow: hidden" hover-stop-propagation="false">
							<image :src="item.imgList[0]" mode="aspectFill" style="width: 100%; height: 200px; display: block" class="db toppic"></image>
						</view>
						<!-- <swiper v-if="item.imgList != ''" style="width: 100%; height: 200px; overflow: hidden" :indicator-dots="true" indicator-color="rgba(0,0,0,.3)" :autoplay="true" :interval="5000" :circular="true" class="u-skeleton-rect">
							<swiper-item class="" item-id="" v-for="(item, index) in item.imgList" :key="index">
								<image :src="item" mode="aspectFill" style="width: 100%; height: 200px; display: block" class="db toppic"></image>
							</swiper-item>
						</swiper> -->
						<div class="g_border_c_b g_mb_4" style="padding: 10px 0px">
							<div class="container2 g_flex_row_between flex_center u-skeleton-rect">
								<div class="content1 g_fs_16 g_flex_1" :class="{ expanded: true }">{{ item.desp }}</div>
								<i class="iconfont icon-gengduo11 g_fs_12 g_c_9 g_ml_12" v-if="item.desp"></i>
							</div>
						</div>
					</div>
					<div hover-class="none">
						<div class="g_flex_row_start flex_end flex_nw">
							<div class="g_flex_1 g_mt_4">
								<div class="g_fs_14 g_c_9 g_flex_row_start_none flex_center u-skeleton-rect" style="width: calc(100vw - 150px)">
									<i class="iconfont icon-dizhi1 g_fs_14 g_mr_4" style="line-height: 1"></i>
									<div class="g_ell_1" style="width: calc(100vw - 150px)">
										{{ item.address || "-" }}
									</div>
								</div>
								<div class="g_fs_14 g_c_9 g_flex_row_start_none flex_center g_mt_8 u-skeleton-rect">
									<i class="iconfont icon-lianxiren g_fs_14 g_mr_4" style="line-height: 1; top: 1px"></i>门店联系人:
									{{ item.userName || "-" }}
								</div>
								<div class="g_flex_row_start flex_nw flex_center g_radius_6 g_mt_8 u-skeleton-rect" style="overflow: hidden" @click.stop="showQRCode(item)" hover-stop-propagation hover-class="thover">
									<div class="g_bg_09f g_flex_row_center flex_center g_pl_4 g_pr_4 g_pt_2 g_pb_2">
										<i class="iconfont icon-weixindibulan g_c_f"></i>
									</div>
									<div class="g_p_2 g_pr_6 g_fs_12 g_pl_4 g_c_9" style="background-color: #e5f4ff; border-radius: 0 6px 6px 0">添加门店微信</div>
								</div>
							</div>
							<div class="g_radius_20 g_p_6 g_c_9 g_fs_12 g_flex_row_center flex_center u-skeleton-rect" :class="loading ? 'g_h_20 g_w_40' : 'g_h_32'" :mark:address="item" @click.stop="goMap" style="background-color: #e5f4ff; overflow: hidden;box-sizing:border-box" hover-stop-propagation hover-class="thover">
								<i class="iconfont icon-daohang1 g_fs_18 g_mr_4 g_c_09f"></i>
								{{ item.distance || "-" }}
							</div>
							<!-- <div class="g_mt_4 g_text_c" hover-class="thover" :hover-stop-propagation="false">
							<image class="dhImg" :mark:address="item" @click.stop="goMap" src="//bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/pugongying/daohang.svg"></image>
						</div> -->
						</div>
					</div>
				</div>
			</div>
			<!-- </div> -->

			<div v-if="infoList.length <= 0" style="margin-top: 120px">
				<g-empty text="暂无门店"></g-empty>
			</div>
		</div>
		<u-popup v-model="connectModalShow" mode="center" :closeable="true" border-radius="16" width="80%" :mask-close-able="true">
      <view class="fakerClose g_w_36 g_h_36" style="position: absolute; top: 0; right: 0; z-index: 999" @click="connectModalShow = false"></view>
			<div class="g_text_c">
				<div class="g_pt_32 g_fw_600 g_pb_24 g_fs_18">联系我们</div>
				<div class="g_pb_4 g_fs_14 g_c_6">门店联系人: {{ currentStore.userName }}</div>
				<div class="g_pb_32 g_fs_14 g_c_6" @click.stop="makePhoneCall" :mark:tel="currentStore.phone">联系电话: {{ currentStore.splitPhone }}</div>
				<image class="g_w_184 g_h_184" :src="currentStore.userQrcode" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" show-menu-by-longpress> </image>
				<div class="g_mt_16 g_fs_14 g_pb_32 g_fw_600">长按识别二维码</div>
			</div>
		</u-popup>
	</div>
	<!-- <g-tabbar class="tabbar" :isShow="tabbarShow"></g-tabbar> -->
</template>

<script>
const app = getApp();
// var QQMapWX = require("../../utils/qqmap-wx-jssdk.min.js");
// const commonUtil = require("../../utils/commonUtil");
// pages/company/company/index.js
export default {
	onShareAppMessage() {
		return this.G.shareFun();
	},
	data() {
		return {
			tabbarShow: true,
			tabbarHeight: uni.getStorageSync("TABBAR_HEIGHT"),
			// isExpanded: false,
			loading: true,
			storeInfo: {},
			infoList: ["", "", "", ""],
			agencyId: uni.getStorageSync("apply-agencyId"),
			connectModalShow: false,
			qqmapsdk: null, // 地图插件实例
			currentInfo: {}, // 用户当前位置信息
			currentStore: {},
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad(options) {
		let that = this;
		// console.log(JSON.parse(localStorage.getItem("apply-agencyId")));
		// this.qqmapsdk = new QQMapWX({
		// 	key: "LHQBZ-MLTEG-BO4QK-QJ2TH-NLGZJ-7GFAS",
		// });
		// #ifdef MP-WEIXIN
		that.getLocation().then(() => {
			that.getInfo();
		});
		// #endif
		// #ifdef H5
		that.getInfo();
		// #endif
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady() {},
	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow() {
		let that = this;
		// if (typeof that.$mp.page.getTabBar === "function" && that.$mp.page.getTabBar()) {
		// 	that.$mp.page.getTabBar().setData({
		// 		selected: 1,
		// 		isShow: true,
		// 	});
		// }
	},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide() {},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload() {},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh() {},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom() {},
	computed: {},
	methods: {
		getEmptyDom(text = "暂无数据", subText = "") {
			this.G.getEmptyDom(text, subText);
		},
		getLocation() {
			let that = this;
			return new Promise((resolve, reject) => {
				uni.authorize({
					// 检测是否授权位置信息
					scope: "scope.userLocation",
					success() {
						console.log("用户成功授权位置信息");
						uni.getLocation({
							type: "wgs84",
							success(res) {
								console.log(res);
								that.currentInfo = {
									latitude: res.latitude,
									longitude: res.longitude,
								};
								console.log("that.currentInfo", that.currentInfo);
							},
							fail(err) {
								console.log(err);
							},
							complete() {
								console.log();
								resolve();
							},
						});
					},
					fail(err) {
						console.log(err);
						console.log("用户拒绝授权位置信息，再次提示用户授权");
						uni.showToast({
							title: "请开启定位权限以显示距店铺距离",
							icon: "none",
						});
						resolve();
						// that.showRefuseLocationPermission();
					},
					complete() {
						console.log();
						// resolve();
					},
				});
			});
		},
		toggleExpand() {
			this.isExpanded = !this.isExpanded;
		},

		goDetail(id) {
			console.log("0000");
			// if (e.currentTarget.dataset.item.id) {
			if (id) {
				uni.navigateTo({
					url: "/root/detail/company?id=" + id,
				});
			}

			// }
			// uni.navigateTo({
			// 	url: "/root/detail/company?id=" + e.currentTarget.dataset.item.id,
			// });
		},

		goMap(e) {
			console.log(e.mark.address);
			let that = this;
			var detail = e.mark.address;
			if (that.currentInfo.longitude) {
				uni.openLocation({
					latitude: Number(detail.lat),
					longitude: Number(detail.lng),
					name: detail.storeName,
					address: detail.address,
					scale: 12,
				});
			} else {
				uni.openSetting({
					// 显示授权页面
					success: (res) => {
						console.log("打开设置成功", res);
						if (res.authSetting["scope.userLocation"]) {
							console.log("成功授权userLocation");
							that.getLocation().then(() => {
								that.getInfo();
							});
						}
					},
					fail: (err) => {
						console.log("打开设置失败", err);
					},
				});
			}
		},

		/**
		 * 获取企业信息
		 */
		getInfo() {
			let that = this;
			return that.G.Post(
				that.api.company_list,
				{
					pageSize: 100,
					pageNum: 1,
					keys: "",
					// agencyId: uni.getStorageSync("AGENCY_ID"),
				},
				(res) => {
					console.log(res);
					let temp = false;
					this.loading = false;
					res.recordList.forEach((item) => {
						console.log("that.currentInfo", that.currentInfo.longitude);
						if (that.currentInfo.longitude) {
							let dis = that.gpsDistance([that.currentInfo.longitude, that.currentInfo.latitude], [item.lng, item.lat]);
							if (dis < 1000) {
								item.distance = dis.toFixed(1) + "m";
							} else if (dis > 1 * 1000 * 1000) {
								item.distance = "999+km";
							} else {
								item.distance = (dis / 1000).toFixed(1) + "km";
							}
							item.dis = dis;
						} else {
							item.distance = "-km";
						}
						const content = item.desp || "对方还未介绍自己";

						item.imgList = item.imgs.split(",");

						console.log(item.distance);
					});
					// res.recordList.sort((a, b) => {
					// 	return a.dis - b.dis;
					// });
					console.log("that.infoList", res.recordList);
					that.infoList = res.recordList;
					/* let num = 0;
						let timer = setInterval(() => {
							if (that.currentInfo && num < that.infoList.length) {
								that.getDistance(that.infoList, num);
								num++;
							} else {
								that.$forceUpdate();
								clearInterval(timer);
							}
						}, 500); */
				}
			);
		},
		angle2rad(d) {
			return (d * Math.PI) / 180.0;
		},

		gpsDistance(p1, p2) {
			var lat1 = this.angle2rad(p1[1]);
			var lat2 = this.angle2rad(p2[1]);
			var a = lat1 - lat2;
			var b = this.angle2rad(p1[0]) - this.angle2rad(p2[0]);
			var distance = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(lat1) * Math.cos(lat2) * Math.pow(Math.sin(b / 2), 2)));
			return distance * 6378137;
		},
		// 计算距离
		getDistance(list, ind) {
			let that = this;
			that.G.Post(
				"https://apis.map.qq.com/ws/distance/v1/matrix?mode=driving",
				{
					key: "LHQBZ-MLTEG-BO4QK-QJ2TH-NLGZJ-7GFAS",
					from: that.currentInfo.latitude + "," + that.currentInfo.longitude,
					to: list[ind].lat + "," + list[ind].lng,
				},
				(res) => {
					console.log("res", res);
					let arr = res.result.rows[0].elements[0];
					console.log(arr);
					let distance = arr.distance;
					console.log(distance);

					if (distance < 1000) {
						list[ind].distance = distance + "m";
					} else if (distance > 1 * 1000 * 1000) {
						list[ind].distance = "999+km";
					} else {
						list[ind].distance = (distance / 1000).toFixed(2) + "km";
					}
					console.log("	this.infoList", that.infoList);
				}
			);
		},
		/**
		 * 拨打电话
		 */
		makePhoneCall(e) {
			var that = this;
			if (!e.mark.tel) {
				uni.showToast({
					title: "暂无联系方式",
					icon: "none",
				});
				return;
			}
			uni.makePhoneCall({
				phoneNumber: e.mark.tel,
			});
		},
		showQRCode(item) {
			console.log(item);
			this.connectModalShow = true;
			this.currentStore = {
				...item,
				splitPhone: this.G.splitPhone(item.phone),
			};
			console.log("this.currentStore", this.currentStore);
		},
	},
};
</script>
<style  lang="scss">
page {
	background-color: #ededed;
}
.container2 {
	// display: flex;
	// flex-direction: column;
	// align-items: center;
}

.lists {
	margin: 10px 0;
}

.content1 {
	max-height: 45px;
	// margin-top: 8px;
	/* 控制初始高度 */
	overflow: hidden;
	transition: max-height 0.3s ease-in-out;
	white-space: initial;
	width: 100%;
	color: #333;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	/* 显示两行 */
	-webkit-box-orient: vertical;
}

.expanded {
	max-height: none;
	/* 展开后取消高度限制 */
}

.expand-button1 {
	text-align: center;
	margin-top: 8px;
	color: #999;
	// cursor: pointer;
}

.container {
	position: relative;
	background-color: #ededed;
	min-height: 100vh;
	overflow: hidden;
}

.servicebox {
	padding: 10px;
	background-color: #fff;
}

.servicebox .serviceinfo image {
	width: 52px;
	height: 52px;
}

.servicebox .serviceBottom {
	height: 48px;
	line-height: 48px;
	width: 100%;
	justify-content: space-between;
}

.servicebox .serviceBottom > div {
	flex: 1;
	justify-content: space-between;
	padding: 0 10px 0 16px;
}

.icon-dianhua {
	position: relative;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--color-ysd-bg);
	color: var(--color-hover);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	float: right;
}

.dhImg {
	width: 24px;
	height: 24px;
	// margin-top: 8px;
}

.sub {
	margin-bottom: 10px;
}
</style>
