<template>
    <div class="CinemaList">
        <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 cinemaList" :key="s" @click="goCinema(i)">
                <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>
    </div>
</template>
<script>
import { post } from "@/request/api.js";
export default {
    name: "CinemaList",
    props: {},
    components: {},
    data() {
        return {
            loading: true,
            Query: {
                lat: 22.53332,
                lng: 113.93041,
                page: 1,
                rows: 20
            },
            cinema: {},
            cinemaList: [],
        };
    },
    methods: {
        // 获取附近影院
        getlists() {
            post("local/getCinemaList", this.Query).then(res => {
                if (res.code == 0) {
                    this.loading = false
                    let cinemaList = res.data.data
                    delete res.data.data
                    this.cinema = res.data
                    this.cinemaList = [...this.cinemaList, ...cinemaList]
                    this.Query.page++
                }
            })
        },
        // 获取当前位置
        async getLocation() {
            let adres = await uni.Location();
            this.Query = { ...this.Query, ...adres };
            this.getlists();
        },

        // 进入影院
        goCinema(da) {
            uni.setStorageSync("cinemaItem", da)
            this.goto("/pagesB/cinema/choiceMovie", {
                cinema_id: da.restaurant_id
            })
        },
        // 获取影片列表
        getFilm() {
            post("local/getFilm", this.Query).then(res => {
                if (res.code == 0) {
                    let movies = res.data
                    uni.setStorageSync("movies", movies)
                }
            })
        },
    },
    onLoad(da) {
        this.getLocation();
        this.getFilm();
    },
    onShow() {},
    mounted() {},
    onReachBottom() {
        if (this.Query.page < this.cinema.last_page) this.getlists();
    },
};
</script>
<style scoped lang='scss'>
.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);
    }

    .con_box {
        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;
            text-align: right;
        }
    }
}

.loadingBox {
    text-align: center;
    padding: 100rpx 0;

    .loading {
        width: 280rpx;
        height: 280rpx;
    }
}
</style>