<template>
    <div class="didaDestination q-px-md relative cursor-pointer" style="min-width:190px;border-radius: 3px;">
      <!-- <div class="text-xxs absolute top-0 left-0 q-px-md" style="color: rgba(5,32,50,.8);">
       目的地
      </div> -->
        <div class="">
            <q-input
            id="search_key"
            v-model="HotalMsg.KeyWords2"
            clearable
            label="搜索目的地、酒店"
            filled
            dense
            standout="bg-grey-2 text-black"
            @input="searchInputHandler"
            @focus="searchFocusHandler"
            @blur="searchBlurHandler"
            @keyup.enter="searchChangeHandler"
            @clear="clearHandler"
            :loading="loading"
            >
            </q-input>
        </div>
        <div>
            <div>
            </div>
        <div class="self-center no-outline text-xxs absolute bg-white overflow-hidden" tabindex="0"
         style="width: 500px;top: 50px;left: 30px;border-radius: 3px;
            box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.2) !important;z-index: 2;"
             v-show="showKeyWordsList">
                <div id="KeyWords">
                    <template v-for="(x,index) in dataList">
                        <div class="row no-wrap" v-if="x.list.length"
                        :style="{'border-bottom':index==1?'none':'1px solid rgb(238, 238, 238)'}">
                            <div class="bg-grey-2" style="border-right: 1px solid rgb(238, 238, 238);width: 100px;">
                                <div :key="index"
                                class="GNameBox-l q-py-xs q-px-md text-xs cursor-pointer">
                                    {{ x.Name }}
                                </div>
                            </div>
                            <div class="col" style="min-width: 400px;max-height: 300px;overflow: hidden;">
                                <div class="DestinationList w-full h-full overflow-auto">
                                    <div class="GNameBox-center row no-wrap justify-between q-px-sm q-py-sm cursor-pointer" 
                                    v-for="(y,indexs) in x.list" :key="indexs"
                                    @click="changeType(y)">
                                        <div class="GNameBox-c-l" v-html="y.Name.replaceAll(lastKeyword,`<span class='text-yellow-9'>${lastKeyword}</span>`)+` ${x.address?x.address:''}`">
                                        </div>
                                        <div class="text-no-wrap">
                                            <template v-if="y.Type==1">
                                                <template v-if="y.Count">附近约</template>
                                                <span class="text-orange-8" v-if="y.Count">{{ y.Count }}</span>
                                                <template v-if="y.Count">间酒店</template>
                                            </template>
                                            <template v-if="y.Type==2">
                                                CNY <span class="text-red">{{ y.Price }} </span>起
                                            </template>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </template>
                </div>
        </div>
        <div class="self-center no-outline text-xxs absolute bg-white overflow-hidden" 
        tabindex="0" 
        style="border-radius: 3px;
        box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.2) !important;z-index: 2;"
        :style="{width:Type==1?'100%':'500px',top:Type==1?'70px':'50px',left:Type==1?'0':'30px'}"
        v-show="showSplitPannel">
            <div class="row no-wrap" id="cit">
                    <div class="bg-grey-2" style="border-right: 1px solid rgb(238, 238, 238);">
                        <div v-for="(x,index) in CitiesList" :key="index"
                        @click="changeGName(x)"
                        class="GNameBox-l q-py-xs q-px-md text-xs cursor-pointer text-no-wrap"
                        :class="[GNameActive==x.GName?'active':'']">
                            {{ x.GName }}
                        </div>
                    </div>
                    <div class="col q-pa-sm" :style="{minWidth: Type==1?'':'400px'}">
                        <q-scroll-area class="w-full" style="height: 305px;" 
                        :thumb-style="{
                            right: '2px',
                            borderRadius: '5px',
                            backgroundColor: 'rgba(0, 0, 0, .1)',
                            width: '5px',
                            opacity: '0.75'
                        }"
                        :content-style="{
                            backgroundColor: 'rgba(0, 0, 0, 0)',
                            color: '#555'
                        }"
                        :content-active-style="{
                            backgroundColor: 'rgba(0, 0, 0, 0)',
                            color: 'black'
                        }">
                            <div class="row wrap">
                                <div class="CityNameBox-r col-3 text-xxs text-no-wrap q-py-xs cursor-pointer" v-for="(y,index) in CityList" :key="index"
                                :class="[HotalMsg.CityCode==y.CityCode?'active':'']"
                                @click="changeCity(y)">
                                    {{ y.CityName }}
                                </div>
                            </div>
                            <div class="row wrap">
                                <div class="CityNameBox-r col-3 text-xxs text-no-wrap q-py-xs cursor-pointer" v-for="(y,index) in regionList" :key="index"
                                :class="[HotalMsg.CityCode==y.CityCode?'active':'']"
                                @click="changeRegion(y)">
                                    {{ y.CityName_CN }}
                                </div>
                            </div>
                        </q-scroll-area>
                    </div>
            </div>
        </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
      msg: {
        type: Object,
        default: () => {}
      },
      Type: {
        type: [Number,String,null],
        default: 0
      }
    },
    data() {
        return {
            CitiesList: [],
            CityList: [],
            regionList: [],
            GNameActive: '',
            showSplitPannel: false,
            HotalMsg: {
                pageIndex: 1,
                pageSize: 20,
                KeyWords: "", //关键字
                KeyWords2: "", //关键字
                StartPrice: 100,
                EndPrice: 0,
                QOrderBy: "0", //排序类型
                QStarRating: [], //星级
                GName: '', //热门
                CityCode: '', //目的地代码
                CityName: '', //目的地
                CityCode2: '', //目的地代码
                regionCode: '', //区域
                CityName_CN: '',
                rooms: 1,
                adultsNumber: 2,
                childrenNumberZC: 0,
                childrenNumberBZC: 0,
                peoples: 2,
                interCurrent: 0,
                searchroomGroup: [{
                    roomNum: 1,
                    numberOfAdults: 2,
                    numberOfChildren: 0,
                    ChildAgeDetails: [],
                    ChildAgeTexts: [],//儿童年龄
                }],
            },
            dataList:[
                {
                    Name:'国家/区域',
                    Id: 1,
                    list:[]
                },
                {
                    Name:'酒店',
                    Id: 2,
                    list:[]
                },
            ],
            HotalList: [],
            DestiList: [],
            showKeyWordsList: false,
            loadingIndex: 0,
            loading: false,
            lastKeyword: '',
        };
    },
    watch: {
        msg: {
            handler(newVal, oldVal) {
                this.HotalMsg = {
                    ...this.HotalMsg,
                    ...JSON.parse(JSON.stringify(newVal))
                }
            },
            deep: true
        }
    },
    beforeDestroy() {
        document.removeEventListener("click", this.clickHandler);
    },
    mounted() {
        document.addEventListener("click", this.clickHandler);
        this.getCity()
    },
    methods: {
        inList(){
            this.loadingIndex = 0
            this.loading = true
            this.lastKeyword = this.HotalMsg.KeyWords2
            this.getDestiList(1)
            this.getHotalList(1)
        },
        changeType(y){
            if(y.Type==1){
                this.HotalMsg.CityCode = y.Id
                this.HotalMsg.CityCode2 = y.Id
                // this.HotalMsg.CityName = y.Name.split(' ')[0]
                this.HotalMsg.KeyWords = y.Name.split(' ')[0]
                this.HotalMsg.KeyWords2 = y.Name.split(' ')[0]
                this.CommonJump('/searchdida', {
                    ...this.HotalMsg
                });
            }else if(y.Type==2){
                this.HotalMsg.KeyWords2 = y.Name
                this.$emit('change', this.HotalMsg,y)
                this.showKeyWordsList = false
                this.showSplitPannel = false
            }
            if(this.Type==1) {
                this.showSplitPannel = false
                this.showSplitPannel = false
            }
        },
        clickHandler(e) {
            try {
                if (!document.querySelector("#KeyWords").contains(e.target)) {
                    this.showKeyWordsList = false;
                    if(this.HotalMsg.KeyWords2=='') {
                        this.HotalMsg.KeyWords2 = this.msg.KeyWords2
                    }
                }
            } catch (error) {}
            try {
                if (!document.querySelector("#cit").contains(e.target)) {
                    this.showSplitPannel = false;
                    if(this.HotalMsg.KeyWords2=='') {
                        this.HotalMsg.KeyWords2 = this.msg.KeyWords2
                    }
                }
            } catch (error) {}
        },
        getDestiList(type){
            this.apipost(
                "dmc_post_B2BAndB2CGetDestination",{
                    KeyWords: this.HotalMsg.KeyWords2,
                },
                res => {
                    if(this.loadingIndex<2)this.loadingIndex++
                    if(res.data.resultCode == 1) {
                        res.data.data.forEach(x => {
                            x.Name = x.NameCN
                            x.Id = x.CityCode
                            x.Count = x.HotelCount
                            x.Type = 1
                        })
                        this.DestiList = res.data.data
                        this.dataList[0].list = res.data.data
                         if(this.loadingIndex==2) {
                            this.loading = false
                            this.showKeyWordsList = true
                            this.showSplitPannel = false
                        }
                    }
            })
        },
        getHotalList(type){
            this.apipost(
                "dmc_post_B2BAndB2CGetDidaHotelPage",this.HotalMsg,
                res => {
                    if(this.loadingIndex<2)this.loadingIndex++
                    if (res.data.resultCode == 1) {
                        res.data.data.pageData.forEach(x => {
                            x.Name = x.name
                            x.Id = x.hotelid
                            x.Count = x.starRating
                            x.Price = x.unitprice
                            x.Type = 2
                        })
                        this.HotalList = res.data.data.pageData
                        this.dataList[1].list = res.data.data.pageData
                        if(this.loadingIndex==2) {
                            this.loading = false
                            this.showKeyWordsList = true
                            this.showSplitPannel = false
                        }
                    }
            })
        },
        clearHandler(){
            this.showKeyWordsList = false
            this.showSplitPannel = true
            this.$emit('clear')
            return
            this.showSplitPannel = true
            this.showKeyWordsList = false
            this.loading = false
        },
        searchInputHandler(){
            return
            if(this.HotalMsg.KeyWords2=='') {
                this.showKeyWordsList = false
                this.showSplitPannel = true
            }
        },
        searchFocusHandler(){
            setTimeout(() => {
                if(!this.HotalMsg.KeyWords2||this.HotalMsg.KeyWords2==''){
                    this.loading = false
                    this.showKeyWordsList = false
                    this.showSplitPannel = true
                }else{
                //    this.inList() 
                }
                
            }, 200);
        },
        searchBlurHandler(){
            
        },
        searchChangeHandler(){
            setTimeout(()=>{
                if(!this.HotalMsg.KeyWords2||this.HotalMsg.KeyWords2=='') {
                    this.loading = false
                    this.showKeyWordsList = false
                    this.showSplitPannel = true
                    return
                }
                this.lastKeyword = this.HotalMsg.KeyWords2
                this.loading = true
                this.loadingIndex = 0
                this.getHotalList()
                this.getDestiList()
            },200)
        },
        changeRegion(y){
            this.HotalMsg.CityName_CN = y.CityName
            this.HotalMsg.regionCode = y.CityCode
        },
        changeCity(y){
            if(this.Type==1) {
                this.$emit('changeCity', y)
                this.showSplitPannel = false
            }else{
                this.HotalMsg.CityCode = y.CityCode
                this.HotalMsg.KeyWords2 = y.CityName
                this.HotalMsg.CityName = y.CityName
                this.searchChangeHandler()
            }
            // this.$emit('change', y)
            // this.CommonJump('/searchdida', {
            //     ...this.HotalMsg
            // });
            // this.getRegion()
        },
        changeGName(x){
            this.GNameActive = x.GName
            this.CityList = x.CityList
        },
        getCity(){
            this.apipost(
                "dmc_post_B2BAndB2CGetHotCity", {},
                res => {
                    if (res.data.resultCode == 1) {
                        let data = res.data.data
                        data.forEach((x,index) => {
                            // x.CityName = x.GName
                            // x.CityCode = `title_${index}`
                            // x.children = x.CityList
                            // x.CityList.forEach(y => {
                            //     if(index) this.CitiesListAll.push(y)
                            // })
                            if(index) this.CitiesList.push(x)
                        })
                        this.GNameActive = this.CitiesList[0].GName
                        this.CityList = this.CitiesList[0].CityList
                    }
                },
            );
        },
        // 区域
        getRegion() {
            var regMsg = {
                CityCode: this.HotalMsg.CityCode,
                Name: this.HotalMsg.KeyWords2,
            };
            this.apipost('dmc_post_GetDestinationByCityCode', regMsg,
                (res) => {
                    if (res.data.resultCode == 1) {
                    this.regionListAll = []
                    this.regionList = []
                    let data = res.data.data;
                    let arrList = function(list){
                        list.forEach(x => {
                        x.Id = x.CityCode;
                        x.Name = x.CityName_CN;
                        })
                    }
                    arrList(data);
                                    // this.regionTicked = [data[0].CityCode]
                    this.regionListAll = data
                    this.regionList = [
                        {
                        Id: 0,
                        Name: '区域',
                        children: data
                        }
                    ];
                    this.regionJSON = JSON.parse(JSON.stringify(this.regionList));
                    }
                },
                (err) => {}
            );
        },
  }
}
</script>
<style>
.GNameBox-l:hover{
    background: #fff;
}
.GNameBox-l.active{
    background: var(--q-color-primary);
    color: #fff;
}
.CityNameBox-r:hover{
    color: var(--q-color-primary);
}
.CityNameBox-r.active{
    color: var(--q-color-primary);
}
.GNameBox-center{
    line-height: 15px;
}
.GNameBox-center:hover{
    color: red;
    background: rgba(255, 0, 0,.1) ;
}
/* 针对特定容器 */
.DestinationList {
  overflow-y: auto;
}

.DestinationList::-webkit-scrollbar {
  width: 4px;
}

.DestinationList::-webkit-scrollbar-track {
  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
  border-radius: 4px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
}

.DestinationList::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.DestinationList::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #0056b3, #004085);
  transform: scale(1.1);
}

/* 角落区域 */
.DestinationList::-webkit-scrollbar-corner {
  background: #f1f1f1;
}

</style>