<template>
    <view class="waper">
        <u-navbar :autoBack="true" :placeholder="true" bgColor="#fff">
        	<view slot='center' class="navbar_title">景点名片</view>
        </u-navbar>
        <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :top="paddingTop + 'px'">
            <view class="list_waper">
                <navigator hover-class="none" :url="'/pages/scenic/spot?id=' + i.id" class="list" v-for="(i, index) in list" :key="index">
                    <view class="img">
                        <image :src="$utils.setImgUrl(i.image21)" mode=""></image>
                    </view>
                    <view class="name">{{i.scenicName}}</view>
					<image class="tagImg" v-if="i.flag == 'hot'" src="https://common/hot-tag.png" mode=""></image>
					<image class="tagImg" v-if="i.flag == 'top'" src="https://common/top-tag.png" mode=""></image>
					<image class="tagImg" v-if="i.flag == 'new'" src="https://common/new-tag.png" mode=""></image>
                </navigator>
            </view>
        </mescroll-body>
    </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
    mixins: [MescrollMixin],
    data () {
        return {
            paddingTop: 0,
            list: []
        }
    },
    methods: {
        async upCallback (page) {
            let obj = { pageNum: page.num, pageSize: page.size, scenicId: this.$scenicId };
            let info = await this.$http.scenicSpotList(obj);
            if(page.num == 1) this.list = [];
            this.list = this.list.concat(info.rows);
            this.mescroll.endBySize(info.rows.length, info.total); 
        }
    }
}
</script>

<style lang="scss">
.list_waper{
    width: 100%; box-sizing: border-box; padding: 32rpx;
    .list{
        width: 100%; background: #fff; border-radius: 10rpx; margin-bottom: 20rpx; position: relative;
        &:last-child{ margin-bottom: 0; }
        .img{
            width: 100%; height: 343rpx;
            image{ border-radius: 10rpx 10rpx 0 0; }
        }
        .name{ width: 100%; height: 88rpx; line-height: 88rpx; box-sizing: border-box; padding: 0 24rpx; color: #333; font-size: 28rpx; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
		.tagImg {
			position: absolute;
			top: 0;
			right: 0;
			width: 112rpx;
			height: 112rpx;
		}
    }
}
</style>