<template>
    <div class="rounded-borders bg-white row items-center q-pa-md">
        <n-cascader v-if="$q.platform.is.desktop" class="col-2 no-border" @update:value="changearea"
            v-model:value="cascader.addressValue" size="large" :placeholder="$t('hotel.area')" clearable
            check-strategy="all" :options="provinces" value-field="ID" label-field="Name" remote :on-load="loadChilds"
            cascade />
        <q-field v-if="$q.platform.is.desktop" stack-label :label="$t('daterange')" standout class="q-ml-lg col-2"
            style="min-width: 190px" dense>
            <div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div>
            <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
                <q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape
                    @range-end="dateRangeHandler"></q-date>
            </q-popup-proxy>
        </q-field>
        <q-input @compositionstart="onCompositionStart" @compositionend="onCompositionEnd" class="q-ml-lg col-2"
            v-model="hotelName" @update:model-value="changeHotelNameHnadler" type="text" :label="$t('hotel.searchName')" dense
            standout style="min-width: 190px">
            <q-popup-proxy class="no-shadow" ref="qNameProxy" v-if="cacheHotels.length > 0">
                <q-card class="q-pa-sm" flat dark>
                    <q-list>
                        <q-item class="rounded-borders" clickable v-ripple v-for="(x, i) in cacheHotels">
                            <q-item-section>
                                <div class="row">
                                    <div class="f12 dark col">{{ x.langName }}</div>
                                </div>
                            </q-item-section>
                        </q-item>
                    </q-list>
                </q-card>
            </q-popup-proxy>
            <template v-slot:append>
                <q-spinner-tail color="grey" v-if="loading" />
            </template>
        </q-input>
        <div class="col"></div>
        <q-btn unelevated class="bg-grey-3 hover q-mr-md" :title="$t('morequery')">
            <svg-icon color="dark" icon="Text/Filter.svg" :tips="$t('morequery')" :size="20"></svg-icon>
            <q-tooltip>{{ $t('morequery') }}</q-tooltip>
            <q-popup-proxy class="no-shadow" style="box-shadow:0 0 50px #ddd !important" :offset="[0, 20]">
                <q-card class="q-pa-md rounded-borders" style="width:300px">
                    <div class="q-mb-md text-subtitle2">{{ $t('morequery') }}</div>
                    <div>
                        <n-cascader v-if="$q.platform.is.mobile" @update:value="changearea"
                            v-model:value="cascader.addressValue" size="large" :placeholder="$t('hotel.area')" clearable
                            check-strategy="all" :options="provinces" value-field="ID" label-field="Name" remote
                            :on-load="loadChilds" cascade />
                    </div>
                    <div class="q-my-md">
                        <q-field v-if="$q.platform.is.mobile" stack-label :label="$t('daterange')" outlined
                            style="min-width: 190px" dense>
                            <div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div>
                            <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
                                <q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape
                                    @range-end="dateRangeHandler"></q-date>
                            </q-popup-proxy>
                        </q-field>
                    </div>
                </q-card>
            </q-popup-proxy>
        </q-btn>
        <q-btn color="primary" unelevated :label="$t('query')" />
    </div>
</template>

<script lang="ts">
import useMetaModule from '../../module/meta/metaModule'
import { DateTimeFormatResult, useI18n } from 'vue-i18n'
import svgIcon from '../../components/global/svg-icon.vue'
import { inject, provide, reactive, ref, toRefs } from 'vue'
import { DirtionmaryHelper } from '../../config/dictionary'
import HotelService from '../../api/hotel'
import message from '../../utils/message'
import { ApiResult } from '../../@types/enumHelper'
import { CascaderOption } from 'naive-ui'
import { date } from 'quasar'
export default {
    components: { svgIcon },
    setup() {
        const qDateProxy = ref(null) as any
        const qNameProxy = ref(null) as any
        const data = reactive({
            addressParams: {
                Id: '651'
            },
            provinces: [],
            search: {
                HotelChooseArray: [],
                StartDate: '',
                EndDate: '',
                Country: '651',
                Province: 0,
                City: 0,
                OutBranchId: -1,
                Star: 0,
                PriceLevel: 0,
                Supplier: 0
            },
            cascader: {
                addressValue: null
            } as any,
            dateRange: {} as any,
            dateRangeFormat: '',
            hotelName: '',
            loading: false,
            cacheHotels: [] as Array<any>,
            lockInput: false
        })

        let { setTitle } = useMetaModule()
        const { locale, t } = useI18n()
        const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
        pageTitle.value = t('hotel.pageTitle')
        setTitle(pageTitle.value)
        data.dateRange.to = date.formatDate(date.addToDate(new Date(), { days: 37 }), 'YYYY/MM/DD')
        data.dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 7 }), 'YYYY/MM/DD')
        data.dateRangeFormat = `${data.dateRange.from} - ${data.dateRange.to}`
        data.search.StartDate = data.dateRange.from
        data.search.EndDate = data.dateRange.to
        let timer = null as any

        const methods = {
            initAddress() {
                HotelService.GetDestination(data.addressParams)
                    .then(r => {
                        if (r.data.resultCode == ApiResult.SUCCESS) {
                            r.data.data.forEach((x: any) => {
                                x.isLeaf = false
                                x.depth = 1
                            })
                            data.provinces = r.data.data
                        } else {
                            message.errorMsg(r.data.message)
                        }
                    })
                    .catch(e => {
                        message.errorMsg(e.message)
                    })
            },
            loadChilds(option: CascaderOption) {
                return new Promise<void>(resolve => {
                    console.log('innnnnnn', option)
                    HotelService.GetDestination({ Id: option.ID })
                        .then(r => {
                            if (r.data.resultCode == ApiResult.SUCCESS) {
                                r.data.data.forEach((x: any) => {
                                    x.isLeaf = true
                                    x.depth = 2
                                })
                                option.children = r.data.data
                                resolve()
                            } else {
                                message.errorMsg(r.data.message)
                                resolve()
                            }
                        })
                        .catch(e => {
                            message.errorMsg(e.message)
                            resolve()
                        })
                })
            },
            dateRangeHandler(e: any) {
                data.search.StartDate = `${e.from.year}/${e.from.month}/${e.from.day}`
                data.search.EndDate = `${e.to.year}/${e.to.month}/${e.to.day} `
                data.dateRangeFormat = `${data.search.StartDate} - ${data.search.EndDate} `
                if (qDateProxy.value) qDateProxy.value.hide()
            },
            optionsFn(cd: any) {
                return cd >= date.formatDate(date.addToDate(new Date(), { days: 7 }), 'YYYY/MM/DD')
            },
            changearea(e: number, option: any, pathValues: Array<any>) {
                data.search.Province = 0
                data.search.City = 0
                if (pathValues.length > 0) {
                    data.search.Province = pathValues[0].ID
                } else if (pathValues.length > 1) {
                    data.search.City = pathValues[1].ID
                }
            },
            changeHotelNameHnadler(val: any) {
                if(!data.lockInput){
                    if (timer) clearTimeout(timer)
                    timer = setTimeout(() => {
                        console.log(data.hotelName)
                    }, 1000);
                }
            },
            onCompositionStart() {
                data.lockInput = true;
            },
            onCompositionEnd(e: any) {
                console.log('.......')
                // 输入中文触发      
                data.lockInput = false;
                // 在调用
                this.changeHotelNameHnadler(e);
            },
        }
        methods.initAddress()
        return {
            ...toRefs(data),
            ...methods,
            qDateProxy,
            qNameProxy
        }
    }
}
</script>

<style>

</style>
