<template>
    <view class="searchCityBox column">
        <view class="searchCityKey column" 
        :style="[titleStyle]">
            <view class="row items-center" :style="{'padding-right':paddingRight}">
                <view class="internationalSearch">
                    <u-search :placeholder="type?'搜索城市/国家中文或拼音':'搜索酒店中文或拼音'" 
                    v-model="parameters.KeyWords"
                    input-align="left"
                    :value="parameters.KeyWords" 
                    text-color="#111" 
                    bg-color="rgba(0,0,0,0)"
                    @change="getKeyWords"
                    @confirm="searchKey"
                    :show-action="false"
                    style="font-size: 22rpx;"></u-search>
                </view>
                <text @click="searchClose">取消</text>   
            </view>
            <view class="internationalTisp">
                {{type?'当前目的地及周边查询结果（酒店起价为参考价）':'当前酒店查询结果（酒店起价为参考价）'}}
            </view>
        </view>
        <scroll-view :scroll-y="true" style="height: 1px;flex: 1;overflow: hidden;"
        @scrolltolower="lower">
            <view class="searchCityCenterBox">
                <template v-if="HotelList.length>0||KeyCityList.length>0">
                    <template v-if="HotelList.length>0">
                        <view class="searchCityCenter column" v-for="(item,index) in HotelList"
                        :key="index"
                        @click="currentData(item)">
                            <view class="searchCityTitle">
                                <view>{{ item.name }}</view>
                            </view>
                            <view class="searchCityText row">
                                <view class="searchCityTextL col">
                                    <template v-for="x in item.tagList">{{ x }}/</template>
                                    <template v-if="item.starRating">
                                        {{item.starRating}}星/
                                    </template>
                                    <template v-if="item.address||item.areaLis.length>0">
                                        {{ item.address }}
                                        <template v-if="item.areaList.length>0">(
                                            <template v-for="(x,i) in item.areaList">
                                                {{ x }}
                                                <template v-if="i!=item.areaList.length-1">
                                                    、
                                                </template>
                                            </template>) 
                                        </template>
                                    </template>
                                </view>
                                <view class="searchCityTextR">
                                    {{ item.unitprice }}
                                    <text>起</text>
                                </view>
                            </view>
                        </view>
                    </template>
                    <template v-if="KeyCityList.length>0">
                        <view class="searchCityCenter column" v-for="(item,index) in KeyCityList"
                        :key="index"
                        @click="currentData(item,1)">
                            <view class="searchCityTitle">
                                <view>{{ item.NameCN }}</view>
                            </view>
                            <view class="searchCityText row">
                                <view class="searchCityTextL col">
                                    
                                </view>
                                <view class="searchCityTextR">
                                    <!-- {{ item.unitprice }} -->
                                    <text>起</text>
                                </view>
                            </view>
                        </view>
                    </template>
                </template>
                <u-empty v-else text="请输入关键字" mode="data" padding-top="50" color="#000"></u-empty>
                <!-- <u-loadmore v-if="showLoading" :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
						:margin-bottom="20" bg-color="#F5F5F5" color="#111" /> -->
                
            </view>
        </scroll-view>
    </view>
</template>
<script>
export default {
    props:['type'],
    data() {
        return {
            parameters: {
                pageIndex: 1,
                pageSize: 15,
                CityCode: '',
                CityName: '',
                GName: '',
                KeyWords: '',
            },
            cityList: [],
            cityListAll: [],
            PopularCities: [],
            HotelList: [],
            KeyCityList: [],
            titleStyle: null,
            paddingRight: 0,
            showLoading: false,
            loadText: {
                loadmore: "轻轻上拉，加载更多",
                loading: "努力加载中",
                nomore: "没有更多了",
            },
            status: "loadmore",
            page_count: 0,
        } 
    },
    created() {
        const that = this
        uni.getSystemInfo({
            success(res) {
                that.paddingRight = `${res.screenWidth-160}rpx`
                that.titleStyle = {
                    paddingTop: `${res.statusBarHeight}px`
                };
            },
        });
        
    },
    methods:{
        getKeyWords(){
            if(this.parameters.KeyWords==''||!this.parameters.KeyWords){
                this.HotelList = []
                this.KeyCityList = []
                return
            }
            if(this.type){
               this.searchCity()
            }else{
                this.getList(1)
            }
        },
        searchClose(){
            this.$emit('searchClose')
            this.HotelList = []
            this.KeyCityList = []
            this.parameters.KeyWords = ''
        },
        lower(e) {
            // TODO: 滚动到了底部，实现翻页加载
            if (this.parameters.pageIndex < this.page_count) {
                this.status = "loading";
                this.parameters.pageIndex++;
                this.getList();
            } else {
                this.status = "nomore";
            }
        },
        //获取列表数据
        getList(type) {
            if(this.showLoading) return
            uni.showLoading({
                title: "加载中",
            });
            // this.searchObj.QStars = this.tempRateAndPrice.rate.toString();
            if (type == 1) {
                this.parameters.pageIndex =1
                this.page_count = 0
                this.HotelList = [];
            }
            this.showLoading = true
            this.apipost('dmc_post_B2BAndB2CGetDidaHotelPage',this.parameters,
                (res) => {
                    if (res.resultCode == 1) {
                        uni.hideLoading();
                        this.showLoading = false
                        if (this.parameters.pageIndex === 1) {
                            this.HotelList = res.data.pageData;
                        } else {
                            this.HotelList = this.HotelList.concat(res.data.pageData);
                        }
                        console.log(this.HotelList,'------');
                        this.page_count = res.data.pageCount;
                    }
                },(err)=>{
                    uni.hideLoading();
                    this.showLoading = false
                    uni.showToast({
                        title: err.message,
                        icon: 'none',
                    })
                }
            );
        },
        currentData(item,type){
            if(this.parameters.KeyWords==''||!this.parameters.KeyWords) return
            if(type){
                this.$emit('searchKey',3,item.CityCode,item.NameCN.split(' ')[0])
            }else{
                this.$emit('searchKey',2,item.hotelid)
            }
           
        },
        searchKey(){
            if(this.parameters.KeyWords==''||!this.parameters.KeyWords) return
            this.$emit('searchKey',1,this.parameters.KeyWords)
        },
        searchCity(){
            if(this.showLoading)return
            uni.showLoading({
                title: "加载中",
            })
            this.showLoading = true
            this.apipost('dmc_post_B2BAndB2CGetDestination',{
                KeyWords:  this.parameters.KeyWords
            },
                (res) => {
                    if (res.resultCode == 1) {
                        this.KeyCityList = res.data
                        uni.hideLoading();
                        this.showLoading = false
                    }
                },
                (err) => {
                    uni.hideLoading();
                    this.showLoading = false
                }
            );
        },
    }
}
</script>
<style scoped>
@import url("@/asset/css/flex.css");
.searchCityBox{
    width: 100vw;
    height: 100vh;
    background: #fff;
}
.internationalSearch{
    
}
.internationalSearch{
    width: 1px;
    flex: 1;
    border-radius: 30rpx;
    padding: 5rpx 15rpx ;
    background: #F6F7F9;
    margin-right: 20rpx;
    margin-left: 30rpx;
}
.internationalTisp{
    font-size: 22rpx;
    background: #F3F7FA;
    margin-top: 20rpx;
    padding: 10rpx 30rpx;
    letter-spacing: 2rpx;
}
.searchCityCenter{
    padding: 20rpx 30rpx;
    border-bottom: 1px solid #eee;
}
.searchCityTitle{
    font-size: 30rpx;
}
.searchCityTitle view{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.searchCityTextL{
    font-size: 24rpx;
    color: #6D6D6F;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.searchCityTextR{
    margin-left: 15rpx;
    font-size: 32rpx;
    color: #B99846;
    font-weight: bold;
}
.searchCityTextR text{
    color: #000;
    font-weight: 100;
    font-size: 26rpx;
    margin-left: 5rpx;
}
</style>