<template>
	<div class="container" hover-class="none" :hover-stop-propagation="false">
		<u-skeleton :loading="loading" :animation="true" border-radius="12"></u-skeleton>

		<div class="g_p_10 g_pb_80 u-skeleton" :class="loading ? 'g_ml_10 g_mr_10' : ''"
			style="min-height: calc(100vh - 30px)">
			<!-- <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' : ''" :mark:address="item" @click.stop="goMap"
								style="background-color: #e5f4ff; overflow: hidden" 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="//matripe-cms.oss-cn-beijing.aliyuncs.com/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 class style="text-align: center" hover-class="none" :hover-stop-propagation="false">
					<div class="t-icon t-icon-zanwu" style="width: 80px; height: 80px; margin: 180px auto 20px"></div>
					<div class="g_text_c g_fs_14 c045">暂无门店</div>
				</div> -->
			</div>
		</div>
		<u-popup v-model="connectModalShow" mode="center" :closeable="true" border-radius="16" width="80%"
			:mask-close-able="true">
			<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>
</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 {
				// 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: {
			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 scoped lang="less">
	.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: #f5f5f5;
		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>