<template>
	<view class="merchantList">
		<view class="merchantItem" v-for="(item, index ) in shopList" :key="index" :data-id="item.shop_id"
			@click="headerNavClick">
			<view class="merchantItem_left">
				<image class="left_pic" :src="item.logo" mode="" />
			</view>
			<view class="merchantItem_left_msg">
				<view class="merchantItem_left_msg_tit">{{item.shop_name}}</view>
				<view class="merchantItem_left_msg_add">{{item.addr}}</view>
				<!-- <view class="merchantItem_left_msg_msg">中国领先的高科技医疗设备研...</view> -->
				<view class="merchantItem_left_msg_tag">{{item.tags}}</view>
			</view>
			<view class="merchantItem_right">
				<view class="lat">{{item.distance ? item.distance + 'km' : '暂无定位'}}</view>
				<view class="tel" @click.stop="call" :data-phone="item.tel">电话询价</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		apiArr
	} from '../../../api/doorToDoor';
	import {
		picUrl,
		request
	} from '../../../utils';
	export default {
		data() {
			return {
				list: [], //商家列表
				page_num: 1,
				page_size: 10,
				flag: false,
				lat: 0,
				log: 0,
				ToArr: [],
				shopList: [],
			}
		},
		methods: {
			async init() {
				const res = await request(apiArr.getGoodsList, "POST", {
					page_num: this.page_num,
					page_size: this.page_size
				});
				if (res.list) {
					let flag = false
					if (res.list.length == this.page_size) {
						flag = true
					} else {
						flag = false
					}
					const newRes = res.list.map(item => {
						return {
							...item,
							photo: picUrl + item.photo,
							logo:  picUrl + item.logo,
						}
					});
					let ToArr = this.formatCoordinates(res.list)
					console.log('newRes', newRes);
					this.list = this.list.concat(newRes || []);
					this.flag = flag;
					this.page_num = this.page_num + 1;
					this.ToArr = ToArr;
					this.caculate();
				}
			},

			call(e) {
				wx.makePhoneCall({
					phoneNumber: e.currentTarget.dataset.phone,
				})
			},

			headerNavClick(e) {
				wx.navigateTo({
					url: `/packages/roundMechant/pages/mechantDesc/mechantDesc?id=${e.currentTarget.dataset.id}`,
				})
			},

			// 对商家进行排序筛选
			formatCoordinates(data) {
				if (!Array.isArray(data)) return "";

				const validData = data.filter(item => {
					// 检查对象是否存在且包含 lat 和 lng
					if (!item || typeof item !== "object") return false;
					// 严格校验 lat 和 lng
					const lat = item.lat;
					const lng = item.lng;

					return (
						lat !== undefined && lat !== null && lat !== "" && !isNaN(lat) &&
						lng !== undefined && lng !== null && lng !== "" && !isNaN(lng)
					);
				});

				// 拼接有效数据
				return validData
					.map(item => `${Number(item.lat)},${Number(item.lng)}`)
					.join(';');
			},

			// 对有经纬度商家获取距离位置
			caculate() {
				let that = this
				let from = this.lat + ',' + this.log
				uni.request({
					url: "https://apis.map.qq.com/ws/distance/v1/matrix?mode=driving",
					method: "POST",
					header: "Content-Type:application/json",
					data: {
						"key": "55NBZ-MUQYW-EAJRL-YIWPA-ZXCR6-4NBPP",
						"from": from,
						"to": that.ToArr
					},
					success(res) {
						console.log(res, 'sdad');
						wx.hideLoading();
						if (res.data.status == 0) {
							let shopList = that.list;
							shopList.forEach((item, index) => {
								if (res.data.result.rows[0].elements[index] && res.data.result.rows[0].elements[index]
									.distance) {
									item.distance = Number(res.data.result.rows[0].elements[index].distance / 1000).toFixed(2);
								}
							})
							shopList.sort((a, b) => a.distance - b.distance);
							that.shopList = shopList
						}
					}
				})
			},


		},
		onLoad(options) {
			this.lat = Number(options.lat);
			this.log = Number(options.log);
			this.init()
		},
		onReachBottom() {
			if (this.flag) {
				this.init()
			}
		},
	}
</script>

<style>
	@import url("./index.css");
</style>