<template>
    <view>
        <view class="item_goodsItem" v-for="(item, index) in shopList" :key="index">
            <view class="item_goodsItem_tit">
                <image :src="item.photo" mode="" />
            </view>
            <view class="item_goodsItem_msgBox">
                <view>
                    <view class="item_goodsItem_name">{{ item.shop_name }}</view>
                    <view class="item_goodsItem_msg">自提时间：{{ item.opening_time }}-{{ item.closing_time }}</view>
                    <view class="item_goodsItem_btn">
                        <view class="btn" @click="handleOptionClick(item)">
                            <image class="btn_icon"
                                src="https://static.hshuishang.com/community/_assets/Send.png"
                                mode="aspectFill" />
                            导航
                        </view>
                        <view class="btn mobile" @click="headlePhoneClick(item.mobile)">
                            <image class="btn_icon"
                                src="https://static.hshuishang.com/community/_assets/Phone-telephone.png"
                                mode="" />
                            电话
                        </view>
                    </view>
                </view>

                <view class="jl">{{ item.distance ? item.distance + 'km' : '暂无定位' }}</view>
            </view>
        </view>
    </view>
</template>

<script>
	import { apiArr } from '../../api/reservation';
	import { request, picUrl } from '../../utils/index';

	export default {
		data() {
			return {
				page_num: 1,
				page_size: 10,
				shopList: [],
				toArr: "",
				lat: "",
				log: "",
			}
		},
		methods: {
			headlePhoneClick(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				});
			},
			
			handleOptionClick(item) {
				uni.openLocation({
					latitude: Number(item.lat),
					longitude: Number(item.lng),
					address: item.shop_name,
					name: item.shop_name,
					scale: 18,
					fail(err) {
							console.log(err);
					}
				});
			},
			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(';');
			},
			
			async getShopList() {
				const res = await request(apiArr.getShopList,'POST', {
					shop_id: 0,
					page_num: this.page_num,
					page_size: this.page_size,
				});

				let flag = false;
				if (res?.rows && res?.rows?.length == this.page_size) {
					flag = true
				} else {
					flag = false
				}
				res?.rows.forEach(item => {
					item.photo = picUrl + item.photo
				});

				let getDistanceList = this.shopList.concat(res?.rows || []);
				let toArr = this.formatCoordinates(getDistanceList);
				this.shopList = getDistanceList;
				this.toArr = toArr;
				this.page_num = this.page_num + 1;
				this.flag = flag;

				this.caculate()

			},
			
			caculate() {
				const 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: this.toArr
					},
					success: (res) => {
						if (res.data.status == 0) {
							const shopList = this.shopList.map((item, index) => {
								if (res.data.result.rows[0].elements[index]?.distance) {
									item.distance = Number(res.data.result.rows[0].elements[index].distance / 1000).toFixed(2);
								}
								return item;
							});
							this.shopList = shopList;
						}
					}
				});
			},

		},
		
		onLoad(options) {
			console.log('12313', options);
			this.lat = options?.lat;
			this.log = options?.log;
			this.getShopList();
		},
		
		/**
		* 页面上拉触底事件的处理函数
		*/
		onReachBottom() {
			if(this.flag){
				this.getShopList();
			}
		},
	}
</script>

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