<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://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Send.png"
                                mode="aspectFill" />
                            导航
                        </view>
                        <view class="btn mobile" @click="headlePhoneClick(item.mobile)">
                            <image class="btn_icon"
                                src="https://wechat-img-file.oss-cn-beijing.aliyuncs.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 {
				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', {});
					console.log('ress', res);
					return;
					res.list.forEach(item=>{
					    item.photo = picUrl + item.photo
					})
					let ToArr = this.formatCoordinates(res.list)
					this.ShopList = res.list;
					this.ToArr = ToArr;
	
					that.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();
    }
}
</script>

<style>
.item_goodsItem {
    display: flex;
    margin: 0 20rpx;
    padding-bottom: 30rpx;
    padding-top: 30rpx;
    border-bottom: 1rpx solid #E6E6E6;
}

.item_goodsItem:last-child {
    border: none;
}

.item_goodsItem_tit {
    width: 180rpx;
    height: 180rpx;
    margin-right: 30rpx;
    margin-left: 19rpx;
}

.item_goodsItem_name {
    font-weight: 400;
    font-size: 26rpx;
    color: #222222;
    margin-top: 20rpx;
    margin-left: 10rpx;
}

.item_goodsItem_msg {
    font-weight: 400;
    font-size: 24rpx;
    color: #555555;
    margin-top: 24rpx;
}


.item_goodsList {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
}

image {
    width: 100%;
    height: 100%;
}

.list_item {
    padding-bottom: 32rpx;
}

.item_goodsItem_btn {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
}

.btn {
    width: 110rpx;
    height: 40rpx;
    background: rgba(255, 81, 42, 0.1);
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    font-size: 22rpx;
    color: #555555;
    display: flex;
    align-items: center;
    font-weight: 400;
    justify-content: center;
}

.mobile {
    background: #FFF2DA;
    margin-left: 20rpx;
}

.item_goodsItem_btn image {
    width: 24rpx;
    height: 24rpx;
}

.item_goodsItem_msgBox {
    display: flex;
    justify-content: space-between;
    flex: 1;
}

.jl {
    font-weight: 400;
    font-size: 22rpx;
    color: rgba(168, 104, 43, 0.8);
    margin-top: 26rpx;
}

.banner {
    width: 710rpx;
    height: 300rpx;
    border-radius: 30rpx;
    margin: 0 auto;
    margin-top: 30rpx;
}

.banner_pic {
    width: 710rpx;
    height: 300rpx;
    border-radius: 20rpx;
}

.tit {
    font-weight: bold;
    font-size: 40rpx;
    color: #000000;
    margin-top: 40rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #E6E6E6;
}

.msg_left_1 {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
}

.msg_left_2 {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
}

.msg_left_1 image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 20rpx;
}

.msg_left_2 image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 20rpx;
}

.msg_left_1 view {
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    border: 1rpx solid #D5AC66;
    font-weight: 400;
    font-size: 22rpx;
    color: #D5AC66;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20rpx;
    padding: 2rpx 10rpx;
}

.msg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 20rpx;
    margin-right: 48rpx;
    margin-top: 28rpx;
}

.msg_right {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
}

.msg_right image {
    width: 60rpx;
    height: 60rpx;
    margin-bottom: 10rpx;
}

.msg_right2 {
    margin-left: 40rpx;
}

.tag {
    font-weight: 400;
    font-size: 22rpx;
    color: #FF512A;
    background: #FFD8D0;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    border: 1rpx solid #FF512A;
    display: inline-block;
    padding: 2rpx 10rpx;
    margin-left: 18rpx;
}

.imgList {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 30rpx 20rpx;
}

.imgList image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 30rpx 30rpx 30rpx 30rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
}

.subtit {
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
    margin-top: 30rpx;
    margin-left: 20rpx;
}

.subCon {
    font-weight: 400;
    font-size: 24rpx;
    color: #222222;
    display: flex;
    align-items: center;
    margin-left: 20rpx;
    margin-right: 20rpx;
    margin-bottom: 30rpx;
    margin-top: 20rpx;
}

.subCon view {
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    margin-left: 20rpx;
}

.payList {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 60rpx;
}

.payBtn {
    font-weight: 400;
    font-size: 36rpx;
    color: #FFFFFF;
    width: 650rpx;
    height: 80rpx;
    background: #FF512A;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40rpx;
}

.payBtn2 {
    font-weight: 400;
    font-size: 36rpx;
    color: #FF512A;
    width: 650rpx;
    height: 80rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    border: 1rpx solid #FF512A;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>