<template>
    <view class="loadingBox" v-if="loading">
        <img class="loading" src="http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/2caa2ae4dc849856f3eca4ff2b3abf7fd19e7632gif" />
    </view>
    <div class="list" v-else>
        <div class="li_item" v-for="(i,s) in merchantList" :key="s" @click="goMerchant(i)">
            <div class="li_title">{{ i.brand_name }}</div>
            <div class="logo_img">
                <img :src="i.restaurant_img" alt="">
            </div>
            <div class="con_box">
                <div class="p1 ellipsis">{{ i.restaurant_name }}</div>
                <div class="p2">{{ i.restaurant_address }}</div>
                <div class="p3">{{ $h.Div(i.distance, 1000).toFixed(2) }} km</div>
            </div>
        </div>
    </div>
</template>

<script>
import { post } from "@/request/api.js";
export default {
    name: "fineFood",
    props: {},
    components: {},
    data() {
        return {
            loading: true,
            Query: {
                lat: 113.9367,
                lng: 22.5325,
                page: 1,
                rows: 20
            },
            merchant: {},
            merchantList: [],
        };
    },
    methods: {
        // 获取附近商家
        getlists() {
            post("local/getMerchant", this.Query).then(res => {
                if (res.code == 0) {
                    this.loading = false
                    let merchantList = res.data.data
                    delete res.data.data
                    this.merchant = res.data
                    this.merchantList = [...this.merchantList, ...merchantList]
                    this.Query.page++
                }
            })
        },
        // 获取当前位置
        async getLocation() {
            let adres = await uni.Location();
            console.log("adres",adres);
            this.Query = { ...this.Query, ...adres };
            this.getlists();
        },
        // 去店铺
        goMerchant(da) {
            uni.setStorageSync("MerchantItem", da)
            this.goto("/pagesB/orderingfood/orderingfood", {
                brand_id: da.brand_id,
                restaurant_id: da.restaurant_id
            })
        },
    },
    onLoad(da) {
        this.getLocation();
    },
    onShow() {},
    mounted() {},
    onReachBottom() {
        if (this.Query.page < this.merchant.last_page) this.getlists();
    },
};
</script>

<style scoped lang='scss'>
.loadingBox {
    text-align: center;
    padding: 100rpx 0;

    .loading {
        width: 280rpx;
        height: 280rpx;
    }
}
.list {
    padding: 30rpx;

    .li_item {
        margin-bottom: 20rpx;
        padding: 28rpx 32rpx;
        background-color: #fff;
        border-radius: 10rpx;
        box-shadow: 4rpx 4rpx 16rpx 10rpx rgba($color: #000, $alpha: 0.15);
    }

    .li_title {
        font-size: 36rpx;
        margin-bottom: 16rpx;
    }

    .logo_img,
    .con_box {
        display: inline-block;
        vertical-align: top;
    }

    .logo_img {
        img {
            height: 180rpx;
            width: 180rpx;
            border-radius: 10rpx;
        }
    }

    .con_box {
        height: 180rpx;
        width: calc(100% - 180rpx - 28rpx);
        margin-left: 28rpx;
        position: relative;

        .p1 {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 6rpx;
        }

        .p2 {
            font-size: 24rpx;
            color: #999;
        }

        .p3 {
            font-size: 24rpx;
            color: #666;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }
}
</style>