<template>
    <div class="didaDestination q-px-md relative cursor-pointer" 
    style="border-radius: 3px;"
    :style="{width:Type>0?'100%':Type==0?'240px':'100%'}">
      <!-- <div class="text-xxs absolute top-0 left-0 q-px-md" style="color: rgba(5,32,50,.8);">
       目的地
      </div> -->
        <div class="row items-center no-wrap relative w-full">
            <div class="" id="cit">
                <q-btn
                dark-percentage
                color="primary"
                unelevated
                style="
                  border-bottom-right-radius: 0;
                  border-top-right-radius: 0;
                  padding: 0"
                :style="{'height': Type>0?'46px':'40px'}"
                  
                @click="showCity"
              >
                    <span class="row items-center no-wrap overflow-hidden">
                        <i v-if="!HotalMsg.CityName" class="iconfont icondingweixiao q-pr-xs" style="font-size: .75rem"></i>
                        <span class="text-xs text-no-wrap overflow-hidden col">{{ HotalMsg.CityName?HotalMsg.CityName:'城市' }}</span>
                    </span>
                </q-btn>
                <div class="self-center no-outline text-xxs absolute bg-white overflow-hidden col" 
                style="top: 50px;right:0; border-radius: 3px;
                box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.2) !important;z-index: 2;"
                tabindex="0" 
                :style="{'min-width':$q.platform.is.desktop?'450px':'400px',
                left:$q.platform.is.desktop?'30px':'0'}"
                v-show="showSplitPannel">
                    <div>
                        <q-input
                            v-model="HotalMsg.KeyWords2"
                            clearable
                            label="搜索目的地"
                            filled
                            dense
                            standout="col bg-grey-1 text-black"
                            @input="searchInputHandler(1)"
                            @focus.stop="searchFocusHandler(1)"
                            @blur="searchBlurHandler(1)"
                            @keyup.enter="searchChangeHandler(1)"
                            @clear="clearHandler(1)"
                            :loading="loading2"
                            />
                    <div class="row no-wrap">
                            <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 text-center text-xxs 
                                        text-no-wrap q-pa-xs q-mr-xs q-mb-xs cursor-pointer
                                        overflow-hidden text-ellipsis" 
                                        v-for="(y,index) in CityList" :key="index"
                                        :class="[HotalMsg.CityCode==y.CityCode?'active':'',
                                            $q.platform.is.desktop?'col-2':'col-3'
                                        ]"
                                        @click="changeCity(y)">
                                            {{ y.CityName }}
                                        </div>
                                    </div>
                                </q-scroll-area>
                            </div>
                    </div>
                    </div>
                </div>
            </div>
           
            <q-input
            id="search_key"
            v-model="HotalMsg.KeyWords"
            clearable
            label="搜索酒店"
            filled
            dense
            standout="col bg-grey-1 text-black"
            :style="{width:$q.platform.is.desktop?'300px':'100%'}"
            @input="searchInputHandler(0)"
            @focus.stop="searchFocusHandler(0)"
            @blur="searchBlurHandler(0)"
            @keyup.enter="searchChangeHandler(0)"
            @clear="clearHandler(0)"
            :loading="loading"
            />
        </div>
        <div>
            <div>
            </div>
        <div class="self-center no-outline text-xxs absolute bg-white overflow-hidden" tabindex="0"
         style="width: auto;min-width: 500px;top: 50px;left: 30px;right:0; 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>
    </div>
</template>
<script>
import { date } from 'quasar'
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: [],//儿童年龄
                }],
                hotelId: '', //酒店id
            },
            dataList:[
                {
                    Name:'国家/区域',
                    Id: 1,
                    list:[]
                },
                {
                    Name:'酒店',
                    Id: 2,
                    list:[]
                },
            ],
            HotalList: [],
            DestiList: [],
            showKeyWordsList: false,
            loadingIndex: 0,
            loading: false,
            lastKeyword: '',
            loading2: false,
            KeyWords3: '',
        };
    },
    watch: {
        msg: {
            handler(newVal, oldVal) {
                this.HotalMsg = {
                    ...this.HotalMsg,
                    ...JSON.parse(JSON.stringify(newVal)),
                    StartDate: newVal.StartDate? newVal.StartDate:date.formatDate(date.addToDate(new Date(), { days: 8 }), "YYYY/MM/DD"),
                    EndDate: newVal.EndDate? newVal.EndDate:date.formatDate(date.addToDate(new Date(), { days: 9}), "YYYY/MM/DD"),
                }
            },
            deep: true,
            immediate: true
        }
    },
    beforeDestroy() {
        document.removeEventListener("click", this.clickHandler);
    },
    mounted() {
        document.addEventListener("click", this.clickHandler);
        this.getCity()
    },
    methods: {
        showCity(){
            this.showSplitPannel = !this.showSplitPannel
        },
        inList(){
            this.loadingIndex = 0
            this.loading = true
            this.lastKeyword = this.HotalMsg.KeyWords2
            this.getDestiList(1)
            this.getHotalList(1)
        },
        changeType(y){
            this.HotalMsg.StartDate = this.HotalMsg.StartDate? this.HotalMsg.StartDate:date.formatDate(date.addToDate(new Date(), { days: 8 }), "YYYY/MM/DD")
            this.HotalMsg.EndDate = this.HotalMsg.EndDate? this.HotalMsg.EndDate:date.formatDate(date.addToDate(new Date(), { days: 9}), "YYYY/MM/DD")
            if(y.Type==1){
                this.HotalMsg.CityCode = y.Id
                this.HotalMsg.CityCode2 = ''//y.Id
                let Obj = y.Name.split(' ')[0]
                let Name = Obj.split(',')[0]
                this.HotalMsg.CityName = Name
                if(this.Type>0)this.HotalMsg.KeyWords = ''
                this.HotalMsg.KeyWords2 = Name
                this.KeyWords3 = ''
                if(!this.Type) {
                    this.KeyWords3 = Name
                    this.searchChangeHandler(0)
                }
                else this.$emit('changeCity', this.HotalMsg)
                // this.CommonJump('/searchdida', {
                //     ...this.HotalMsg
                // });
            }else if(y.Type==2){
                this.HotalMsg.KeyWords2 = ''
                // this.HotalMsg.KeyWords = ''
                this.HotalMsg.hotelId = y.Id
                let item = {
                    CheckInDate: this.HotalMsg.StartDate,
                    CheckOutDate: this.HotalMsg.EndDate,
                    ConfigId: y.Id,
                    unitprice: y.Price,
                    ProductType: 6,
                }
                this.CommonJump(item, {}, "blank");
                
                // this.$emit('change', this.HotalMsg,{hotelId:y.Id,Price:y.Price})
            }
            this.showKeyWordsList = 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(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[1].list = []
                        this.dataList[0].list = res.data.data
                            
                        if(res.data.data&&this.dataList[0].list.length) {
                            this.showKeyWordsList = true
                            this.showSplitPannel = false
                        }else {
                            this.$message.error('未查询道相关数据')
                            
                        }
                    }
                    this.loading2 = false
            })
        },
        getHotalList(type,cit){
            let msg = JSON.parse(JSON.stringify(this.HotalMsg))
            // if(this.KeyWords3) msg.KeyWords = this.KeyWords3
            if(!type) {
                msg.hotelId = ''
            } 
            // if(cit) msg.KeyWords = ''
            this.apipost(
                "dmc_post_B2BAndB2CGetDidaHotelPage",msg,
                res => {
                    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[0].list = []
                        this.dataList[1].list = res.data.data.pageData
                        if(this.dataList[1].list.length) {
                            this.showKeyWordsList = true
                            this.showSplitPannel = false
                        }else {
                            this.$message.error('未查询道相关数据')
                            
                        }
                    }
                    this.loading = false
            })
        },
        clearHandler(type){
            if(this.Type>0) {
                if(!type) {
                    // this.showSplitPannel = false
                }
                else this.showKeyWordsList = false
            }else {
                this.showKeyWordsList = false
            }
            
            // this.HotalMsg.CityCode = ''
            this.HotalMsg.CityCode2 = ''
            // this.HotalMsg.CityName = ''
            if(!type)this.HotalMsg.KeyWords = ''
            else {
                this.HotalMsg.CityCode = '930'
                this.HotalMsg.CityName = '成都'
                this.HotalMsg.KeyWords2 = ''
            }
            // this.HotalMsg.hotelId = ''
            this.HotalMsg.StartDate = this.HotalMsg.StartDate?this.HotalMsg.StartDate:date.formatDate(date.addToDate(new Date(), { days: 8 }), "YYYY/MM/DD")
            this.HotalMsg.EndDate = this.HotalMsg.EndDate?this.HotalMsg.EndDate:date.formatDate(date.addToDate(new Date(), { days: 9}), "YYYY/MM/DD")
            if(!type&&this.Type>0||type&&this.Type) this.$emit('change',this.HotalMsg)
            return
            this.showSplitPannel = true
            this.showKeyWordsList = false
            this.loading = false
        },
        searchInputHandler(type){
            return
            if(this.HotalMsg.KeyWords2=='') {
                this.showKeyWordsList = false
                this.showSplitPannel = true
            }
        },
        searchFocusHandler(type){
            setTimeout(() => {
                if(!type&&(!this.HotalMsg.KeyWords||this.HotalMsg.KeyWords=='')){
                    this.loading = false
                    this.showSplitPannel = false
                }else if(type&&(!this.HotalMsg.KeyWords2||this.HotalMsg.KeyWords2=='')){
                    this.loading = false
                    this.showKeyWordsList = false
                }else{
                //    this.inList() 
                }
                
            }, 200);
        },
        searchBlurHandler(type){
            
        },
        searchChangeHandler(type,cit){
            setTimeout(()=>{
                if(!cit&&!type&&(!this.HotalMsg.KeyWords||this.HotalMsg.KeyWords=='')&&(!this.KeyWords3||this.KeyWords3=='')) {
                    this.loading = false
                    this.showKeyWordsList = false
                    this.showSplitPannel = false
                    if(this.Type>0) this.$emit('change', this.HotalMsg)
                    return
                }else if(!cit&&type&&(!this.HotalMsg.KeyWords2||this.HotalMsg.KeyWords2=='')&&(!this.HotalMsg.CityCode||this.HotalMsg.CityCode=='')){
                    this.loading = false
                    this.showKeyWordsList = false
                    if(this.Type>0) this.$emit('change', this.HotalMsg)
                    return
                }
                this.lastKeyword = type?this.HotalMsg.KeyWords2:this.HotalMsg.KeyWords
                this.loadingIndex = 0
                
                if(!type) {
                    if(!this.Type){
                        this.loading = true
                        this.getHotalList(type,cit)
                    }else{
                        this.$emit('change', this.HotalMsg)
                    }
                }
                else {
                    this.loading2 = true
                    this.getDestiList()
                }
            },200)
        },
        changeCity(y){
            this.HotalMsg.CityName = y.CityName
            this.HotalMsg.CityCode = y.CityCode
            this.HotalMsg.StartDate = this.HotalMsg.StartDate?this.HotalMsg.StartDate:date.formatDate(date.addToDate(new Date(), { days: 8 }), "YYYY/MM/DD")
            this.HotalMsg.EndDate = this.HotalMsg.EndDate?this.HotalMsg.EndDate:date.formatDate(date.addToDate(new Date(), { days: 9}), "YYYY/MM/DD")
            // this.HotalMsg.KeyWords2 = y.CityName
            if(this.Type>0) {
                this.HotalMsg.KeyWords2 = ''
                // this.HotalMsg.KeyWords = ''
                this.$emit('changeCity', this.HotalMsg)
                this.showSplitPannel = false
                // this.searchChangeHandler(1)
            }else{
                // this.HotalMsg.KeyWords = ''
                
                this.searchChangeHandler(0,1)

                // this.CommonJump('/searchdida', {
                //     ...this.HotalMsg
                // });
            }
        },
        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 {
    border-radius: 3px;
    text-overflow: ellipsis;
}
.CityNameBox-r:hover{
    background: rgba(0, 0, 0, 0.1);
    color: var(--q-color-primary);
}
.CityNameBox-r.active{
    background: rgba(0, 0, 0, 0.2);
    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>