<template>
    <view class="content">
		<u-sticky>
			<view class="status">
				<view class="top">
					<view class="top-name">
						ZH-HEALTH生活
					</view>
					<view class="top-card">
						会员卡
					</view>
				</view>
				<view class="site">
					<view class="site-name">
						<u-icon name="map" style="margin-right: 10rpx;"></u-icon>
						全国
					</view>
					<view class="site-number">
						共<text>{{ total }}</text>家
					</view>
				</view>
			</view>
		</u-sticky>
        <view class="list">
            <view class="label" v-for="(item, index) in lists" :key="index" @click="$Router.push({name: 'serviceDetails', params: {id: item.hall_id, title: item.title + ' ' + item.subtitle}})">
                <view class="labelImg">
                    <image :src="item.cover" mode="aspectFill"></image>
                </view>
                <view class="labelCont">
                    <view class="nowrap name">
                        {{ item.title }} · {{ item.subtitle }}
                    </view>
                    <view class="nowrap address">
                        {{ item.address }}
                    </view>
                    <view class="area">
                        {{ item.areas }} ㎡
                    </view>
                    <view class="see">
                        去看看<u-icon name="rewind-right" color="#34CE98" size="18" style="margin-left: 5rpx;"></u-icon>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { index } from '@/apis/interfaces/service'
    export default {
        data() {
            return {
                lists   : [],
                total   : '',
                status  : 'loadmore',
                page    : ''
            };
        },
        mounted() {
            // 获取首页
            this.getService()
        },
        methods: {
            // 首页
            getService(pages){
            	index({page: pages}).then(res => {
                    if(res.data.page.current == 1){
                        this.lists = []
                    }
                    this.lists    = this.lists.concat(res.data.data)
                    this.status   = this.page.has_more ? 'loadmore': 'nomore'
                    this.page     = res.data.page
                    this.total    = res.total
            	})
            }
        },
        // 下拉加载
        onReachBottom() {
            if(this.page.has_more){
                this.status = 'loading'
                let pages = this.page.current + 1
                // 获取列表
                this.getService(pages)
                return
            }
            this.status = 'nomore'
        }
    };
</script>

<style lang="scss" scoped>
    .content {
        background-color: $window-color;
		min-height: 100vh;
		box-sizing: border-box;
    }
    
    .status {
        background-color: white;
        padding: 0 $padding $padding;
        box-sizing: border-box;
        border-bottom: $border-color 2rpx solid;
        .top {
            display: flex;
            margin-bottom: $margin;
			@extend .ios-top;
            .top-name {
                font-size: $title-size + 6;
				font-weight: bold;
            }
            .top-card {
                font-size: $title-size-m;
                color: $text-gray;
                padding: $padding - 18 0 0 $padding - 10;
            }
        }
        .site {
            display: flex;
            color: $text-color;
            font-size: $title-size-m;
            .site-name {
                display: flex;
                flex: 1;
                line-height: 40rpx;
            }
            .site-number {
                text {
                    color: $main-color;
                    padding: 4rpx;
                }
            }
        }
    }
    
    .list {
        padding: $padding;
        box-sizing: border-box;
        .label {
            background-color: white;
            border-radius: $radius;
            overflow: hidden;
            margin-bottom: $margin - 10;
            .labelImg {
                position: relative;
                padding-top: 60%;
                image {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                }
            }
            .labelCont {
                padding: $padding;
                box-sizing: border-box;
                position: relative;
                .name {
                    font-weight: 600;
                }
                .address {
                    font-size: $title-size-m;
                    margin: $margin - 15 0;
                    color: $text-gray;
                }
                .area {
                    font-size: $title-size-m;
                    color: $text-gray;
                }
                .see {
                    position: absolute;
                    right: $padding;
                    bottom: $padding;
                    z-index: 9;
                    font-size: $title-size-m;
                    color: $main-color;
                    display: flex;
                    line-height: 38rpx;
                }
            }
        }
    }
</style>
