<template>
    <view
        class="slot-content hotelRegionBox column"
        style="background-color: #F3F1EF">
        <view class="hotelAddress row justify-center">
            <text>目的地</text>
            <icon @click="close" class="hotelClear" type="clear" size="20"/>
        </view>
        <!-- <view class="internationalBox row-sb-n">
            <view class="internationalName" 
            :class="[interCurrent==item.ID?'active':'']"
            v-for="(item,index) in internationals"
            :key="index"
            @click="setInternational(item)">
                <text>{{ item.Name }}</text>
                <view class="internationalNABox">
                    <view v-if="interCurrent==item.ID" class="internationalNA">
                        <view>1</view>    
                    </view>
                </view>
            </view>
        </view> -->
        <view class="internationalSearch" style="position: relative;">
            <u-search placeholder="搜索城市/国家中文或拼音" 
            input-align="left"
            :value="parameters.KeyWordsCity" 
            text-color="#111" 
            bg-color="rgba(0,0,0,0)"
            disabled 
            :show-action="false"
            style="font-size: 22rpx;"></u-search>
            <view class="clickSearch" @click="clickSearchCity()">
                <view>0</view>
            </view>
        </view>
        <view class="row" style="height: 1px;flex: 1;">
            <view class="hotelRegionL">
                <scroll-view :scroll-y="true" style="height: 100%;">
                    <view class="hotelRegionLText row items-center justify-center"
                    :class="[parameters.GName==item.GName?'active':'']"
                    v-for="(item,index) in PopularCities" :key="index"
                    @click="confirmCity(item)">
                        <!-- <view class="hotelPopular"></view> -->
                        <text>{{ item.GName }}</text>
                    </view>
                </scroll-view>
            </view>
            <view class="hotelRegionR">
                <scroll-view :scroll-y="true" style="height: 100%;">
                    <view class="hotelRegionRC">
                        <view class="hotelRegionRText row items-center justify-center"
                        :class="[parameters.CityCode2==item.CityCode?'active':'']"
                        v-for="(item,index) in cityList" :key="index"
                        @click="changeDistrict(item)">
                            <view>{{ item.CityName }}</view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
        <view style="padding: 0 30rpx;box-shadow: 0rpx 1rpx 8rpx 0rpx rgba(185,152,70,0.25);background: #F3F1EF;">
            <view
                style="
                    box-shadow: 0px -10px 30px 0px rgba(36, 36, 36, 0.06);
                    margin-top: 40rpx;
                    margin-bottom: 100rpx;
                    display: flex;
                "
                >
                <!--
                <view style="flex: 1; margin-right: 30rpx">
                    <u-button :custom-style="btnStyle" @click="clear"
                    >清空</u-button
                    >
                </view>-->
                <view style="flex: 1">
                    <u-button :custom-style="btnStyle2" @click="sure"
                    >确定</u-button
                    >
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props:['msg','PopularCities'],
    data() {
        return {
            btnStyle: {
                borderRadius: "16rpx",
                color: "#111",
                fontSize: "30rpx",
                width: "100%",
                border: "1px solid #111",
                background: "#FFF",
            },
            btnStyle2: {
                borderRadius: "16rpx",
                color: "#fff",
                fontSize: "30rpx",
                width: "100%",
                background: "#111",
            },
            // cityListAll: [],
            cityList: [],
            parameters: {
                KeyWordsCity: '',//搜索城市
                GName: '', //热门
                CityCode2: '',//目的地代码
                CityName: '',//目的地
            },
            DistrictOptions: [],
            internationals:[
                {Name:'国内(含港澳台)',ID:0},
                {Name:'国际',ID:1}
            ],
            interCurrent:0,
        }
    },
    watch:{
        msg: {
			handler (val, oldval) {
                if(val){
                    this.parameters = {
                        ...val
                    }
                    this.interCurrent = val.interCurrent
                }
            },
            deep: true,
        }, 
        PopularCities: {
            handler (val, oldval) {
                if(val){
                    this.cityList = val[0].CityList
                }
            },
            deep: true,	
        }
    },
    created() {
    },
    methods: {
        close(){
        	this.$emit('close')		
        },
        sure(){
            this.$emit('sure',this.parameters)
        },
        setInternational(val){
            this.interCurrent = val.ID
        },
        confirmCity(val) {
            this.parameters.GName = val.GName;
            this.cityList = val.CityList
            this.parameters.CityCode2 = this.cityList[0].CityCode;
            this.parameters.CityName = this.cityList[0].CityName;
        },
        changeDistrict(item) {
            this.parameters.CityCode2 = item.CityCode
            this.parameters.CityName = item.CityName;
        },
        clickSearchCity(){
            this.$emit('searchCity','City')
        },
    }
}
</script>
<style scoped>
@import url("@/asset/css/flex.css");
.hotelRegionBox{
    height: 100%;
}
.hotelRegionL{
    width: 183rpx;
    background: #E9E4E0;
}
.hotelRegionLText{
    height: 78rpx;
    line-height: 70rpx;
    font-weight: bold;
    font-size: 28rpx;
    color: #080A09 ;
}
.hotelRegionLText.active{
    background: #F3F1EF;
    color: #B99846;
}
.hotelPopular{
    width: 8rpx;
    height: 8rpx;
    background: #FF3166;
    border-radius: 50%;
    margin-right: 10rpx;
}
.hotelRegionR{
    width: 1px;
    flex: 1;
    background: #F3F1EF;
    padding: 0rpx 10rpx;
}
.hotelRegionRText{
    width: 150rpx;
    height: 68rpx;
    line-height: 60rpx;
    background: #fff;
    margin: 10rpx 15rpx;
    padding: 0 10rpx;
    border-radius: 6rpx;
}
.hotelRegionRText view{
    font-size: 28rpx;
    color: #080A09;
    font-weight: 500;
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.hotelRegionRText.active{
    background: #B99846;
}
.hotelRegionRText.active view{
    color: #fff;
}


.hotelAddress{
    position: relative;
    padding: 25rpx 0;
}
.hotelClear{
    position: absolute;
    right: 30rpx;
    z-index: 1;
}
.hotelAddress text{
    font-size: 32rpx;
    font-weight: 800;
}
.hotelRegionRC{
    display: flex;
    flex-wrap: wrap;
}
.internationalBox{
    padding: 0 80rpx;
    margin-bottom: 30rpx;
}
.internationalName{
    flex: 1;
    text-align: center;
    font-size: 30rpx;
    position: relative;
}
.internationalNABox{
    position: absolute;
    bottom: -15rpx;
    left: 0;
    right: 0;
}
.internationalName.active .internationalNA{
    width: 50rpx;
    height: 8rpx;
    border-radius: 8rpx;
    background: #B99846;
    margin: auto;
    font-weight: bold;
    
}
.internationalNA view{
    opacity: 0;
}
.internationalSearch{
    border-radius: 50rpx;
    background: #fff;
    margin: 0 30rpx;
    margin-bottom: 8rpx;
    overflow: hidden;
}
.clickSearch{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 3;
}
.clickSearch view{
    opacity: 0;
}
</style>