<template>
	<view class="bus-list column" style="background: #F3F1EF ;">
		<view class="bus-listHeaderBox" @click="goBack">
            <view class="bus-listHeader row-sbas-n">
                <view class="bus-listHeaderL">
                    {{ busInfor.CityName  }}
                    {{ busInfor.time }}
                    {{pageTitle}}
                    共{{ busInfor.peopleNum }}人
                </view>
                <u-icon name="arrow" :size="32" color="#000" style="position: relative;top: 2rpx;"></u-icon>
            </view>
		</view>
		<view style="height: 1px;flex: 1;overflow: hidden;">
            <u-empty v-if="dataList.length === 0&&!showLoading" text="暂无数据" mode="data" padding-top="20"></u-empty>
			<view class="column busScrollBox" style="padding: 30rpx;height:100%">
				<scroll-view style="height: 100%;" :scroll-y="true" @scrolltolower="lower" 
                :enable-back-to-top="true" :enable-flex="true"
					:scroll-top="scrollTop" @scroll="scroll" 
                    v-if="dataList.length > 0" 
                    class="busScrollBox">
					<view class="busScroll row">
						<view class="busScrollList" 
                        v-for="(item,index) in dataList" 
                        :key="index"
                        @click="goDetails(item)">
							<view class="busListImg">
                                <image :src="item.ImageList[0]" mode="aspectFill"/>
                            </view>
                            <view class="busListTitle">
                                {{item.Name}}
                            </view>
                            <view class="busListText">
                                <view class="busListTType">&nbsp;</view>
                                <view class="busListTMoney row-sbas-n">
                                    <view class="busListTtext">{{ item.TotalNum }}种车型</view>
                                    <view class="busListTM">
                                        <view>
                                            <text>
                                                <!--¥-->
                                                {{ item.CurrencyCode }} </text>
                                            <text>
                                                 <!-- #ifdef MP-DI -->
                                                    {{parseFloat(item.MinB2CPrice).toFixed(2)}}
                                                <!-- #endif -->
                                                <!-- #ifdef MP-AG -->
                                                    {{parseFloat(item.MinPrice).toFixed(2)}}
                                                <!-- #endif -->
                                            </text>
                                        </view>
                                    </view>
                                </view>
                            </view>
						</view>
					</view>
					<u-loadmore v-if="!showLoading" :status="status" :load-text="loadText" :font-size="24"
						:margin-top="20" :margin-bottom="20" bg-color="#F3F1EF" color="#111" />
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
    data() {
			return {
                pageTitle: '包车',
                msg: {
                    pageIndex:1,
                    pageSize:15,
                    CarType: 1,//	类型 1接机 2送机 3包车
                    Q_SPeopleNum: null,//	起始人数
                    Q_EPeopleNum: null,//	截止人数
                    Q_Country: null,//	国家ID
                    Q_City: null,//	城市ID
                    Q_AirportId: null,//	机场ID
                    Q_Date: null,//	预约日期	
                    Q_SPrice: null,//	起始价格
                    Q_EPrice: null,//	结束价格	
                    Q_OrderBy: null,//排序方式 0 默认 1价格升序 2价格降序
                    Range: null,//	距离
                },
                page_count: 0, //总页数
                loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多商品了",
				},
                status: "loadmore",
				scrollTop: 0,
				showLoading: false,
                dataList: [],
                scrollTop: 0,
                busInfor: {},
            }
    },
    onLoad(options){
        
    },
    created() {

    },
    mounted() {
        uni.getStorage({
            key: "busInfor",
            success: (res) => {
                let obj = JSON.parse(res.data);
                this.busInfor = obj
                this.msg.CarType = obj.CarType
                this.msg.Q_Country = obj.CountryId
                this.msg.Q_City = obj.CityId
                this.msg.Q_Date = obj.time
                this.msg.Q_SPeopleNum = obj.peopleNum
                this.msg.Range = obj.Range
                this.msg.Q_AirportId = obj.AirportId
                if(obj.CarType == 1) this.pageTitle = '接机'
                else if(obj.CarType == 2) this.pageTitle = '送机'
                else if(obj.CarType == 3) this.pageTitle = '包车'
                uni.setNavigationBarTitle({
                    title: this.pageTitle,
                });
                this.getList()
            },
        });
        
    },
    methods: {
        goDetails(item){
            uni.navigateTo({
                url: `/pages/bus/busDetails?id=${item.Id}`,
            });
        },
        scroll(e) {
           
        },
        //获取列表数据
        getList(type) {
            if (this.showLoading) return
            uni.showLoading();
            this.showLoading = true;
            if (type == 1) {
                this.dataList = [];
            }
            this.apipost('CarSingle_post_GetTYCarSingleProductPageList', this.msg,
                (res) => {
                    if (res.resultCode == 1) {
                        this.showLoading = false
                        uni.hideLoading();
                        if (this.msg.pageIndex === 1) {
                            this.dataList = res.data.pageData;
                        } else {
                            this.dataList = this.dataList.concat(res.data.pageData);
                        }
                        this.page_count = res.data.pageCount;
                        if(this.msg.pageIndex === 1&&this.page_count==1)this.status = "nomore";
                    }
                }, (err) => {
                    this.showLoading = false
                    uni.hideLoading();
                    uni.showToast({
                        title: err.message,
                        icon: 'none',
                    })
                }
            );
        },
        lower(e) {
            // TODO: 滚动到了底部，实现翻页加载
            if (this.msg.pageIndex < this.page_count) {
                this.status = "loading";
                this.msg.pageIndex++;
                this.getList();
            } else {
                this.status = "nomore";
            }
        },
        goBack(){
			uni.navigateBack({delta:-1})
        }
    },
}
</script>
<style scoped>
@import url("@/asset/css/flex.css");
.bus-list{
    height: 100vh;
}
.bus-listHeaderBox{
    padding: 19rpx 32rpx;
    background: #B99846;
}
.bus-listHeader{
    padding: 25rpx 32rpx;
    background: #F3F1EF;
    border-radius: 12rpx;
}
.bus-listHeaderL{
    font-weight: bold;
    font-size: 32rpx;
    color: #080A09;
}
.busScroll{
    flex-wrap: wrap;
}
.busScrollList{
    width: 331rpx;
    height: 417rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    overflow: hidden;
    margin-bottom: 28rpx;
}
.busScrollList:nth-child(2n){
    margin-left: 26rpx;
}
.busListImg{
    height: 223rpx;
    overflow: hidden;
    background: #ddd;
}
.busListImg image{
    width: 100%;
    height: 100%;
}
.busListTitle{
    font-weight: bold;
    font-size: 28rpx;
    color: #080A09;
    padding: 23rpx 27rpx 0 27rpx;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 23rpx;
}
.busListText{
    padding: 0 27rpx;
    font-weight: 500;
    font-size: 20rpx;
    color: #757776;
}
.busListTM{
    color: #FF3166;
}
.busListTM view{
    position: relative;
    top: -10rpx;
}
.busListTM text:last-child{
    font-weight: bold;
    font-size: 32rpx;
    margin-left: 5rpx;
}
</style>