<template>
    <div class="hotelList">
		<scroll-view @scrolltolower="scrolltolower" class="scroll-view" :scroll-y="true" :lower-threshold="100">
            <div class="h_List" v-if="hotelList.length">
                <div class="hotel_item flex_r flex_jb" v-for="(i,s) in hotelList" :key="s" @click="hotelById(i.hotelID)">
                    <image :src="i.mainImage" mode="aspectFill" class="h_img"/>
                    <div class="info">
                        <div class="hotelName">{{i.hotelName}}</div>
                        <div class="address">{{ i.address }}</div>
                        <div class="avgScore flex_r flex_jb">
                            <div class="avgScore_num">
                                <span>{{i.avgScore}}分</span>
                                <span class="hotelStar">{{ hotelStarF(i.hotelStar) }}</span>
                            </div>
                            <div class="dinB price" v-if="i.starOriginalPrice">{{ i.starOriginalPrice }}</div>
                            <div class="price" v-else>暂无报价</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="onlist" v-else>
                <image class="errimg" src="http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/8ff923549b8ef026eeca56d23d5e4bdc3a69299epng" mode="widthFix" />
                <div class="errmsg">没有搜索到酒店喔~</div>
            </div>
        </scroll-view>
    </div>
</template>

<script>
import { getCache } from "@/utils/storage.js"
import { post } from "@/request/api.js";
export default {
    name: "hotelList",
    props: {},
    components: {},
    data() {
        return {
            query: {},
            hotelList: []
        };
    },
    methods: {
        gethotelList(){
            post("local/hotel/hotelList", this.query).then(res => {
                if (res.code == 0) {
                    let da = res.data.data.hotelList;
                    this.hotelList = [...this.hotelList,...da]
                }
            })
        },
        scrolltolower(){
            this.query.pageIndex++;
            this.gethotelList();
        },
        hotelById(id){
            this.goto("/pagesB/hotel/hotel",{id});
        }
    },
    onLoad(da) {
        this.query = getCache("hotelquery");
        this.gethotelList();
    },
    onShow() {},
    mounted() {},
};
</script>

<style scoped lang='scss'>
.onlist{
    padding-top: 100rpx;
    text-align: center;
    .errimg{
        width: 500rpx;
    }
    .errmsg{
        font-size: 28rpx;
        color: #999;
    }
}
.scroll-view{
    height: 100vh;
}
.h_List{
    padding: 28rpx 32rpx;
}
.hotel_item{
    background-color: #fff;
    padding: 26rpx 30rpx;
    margin-bottom: 16rpx;
    border-radius: 12rpx;
    box-shadow: 4rpx 4rpx 18rpx 2rpx rgba(17, 18, 29, 0.1);
    &:last-child{
        margin-bottom: 0;
    }
    .h_img{
        width: 160rpx;
        height: 230rpx;
        border-radius: 8rpx;
    }
    .info{
        position: relative;
        width: calc(100% - 186rpx);
        .hotelName{
            font-size: 34rpx;
            font-weight: 600;
            margin-bottom: 8rpx;
        }
        .address{
            font-size: 24rpx;
            color: #666;
        }
        .avgScore{
            width: 100%;
            position: absolute;
            bottom: 0;right: 0;
        }
        .avgScore_num{
            font-size: 26rpx;
            .hotelStar{
                margin-left: 16rpx;
                font-size: 24rpx;
            }
            span{
                vertical-align: middle;
            }
        }
        .price{
            color: #666;
            font-size: 30rpx;
        }
        .dinB{
            font-size: 36rpx;
            color: #00B76C;
            &::before{
                content: "￥";
                font-size: 22rpx;
            }
            &::after{
                content: "起";
                margin-left: 6rpx;
                font-size: 22rpx;
            }
        }
    }
}
</style>