<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">{{ searchClone.OpenTime }}</div>
      <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
        <q-date v-model="searchClone.OpenTime" :options="optionsFn" mask="YYYY/MM/DD"  @update:model-value="dateRangeHandler"></q-date>
      </q-popup-proxy>
    </q-field>
    <q-input v-model="searchClone.Name" standout :class="{'q-ml-lg':$q.platform.is.desktop,'col':$q.platform.is.mobile}" style="min-width:150px;" dense :label="$t('v102.ticket.name')" />
    <div class="col" v-if="$q.platform.is.desktop"></div>
    <q-btn v-if="searchClone.ViewType==1" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile" flat :icon="$q.platform.is.desktop?'view_list':'view_stream'" class="bg-grey-3 hover q-mr-md q-ml-md" color="dark" @click="changeViewHandler(2)">
      <q-tooltip class="bg-dark">{{ $t('v102.ticket.toggleListType1') }}</q-tooltip>
    </q-btn>
    <q-btn v-if="searchClone.ViewType==2" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile" flat icon="grid_view" class="bg-grey-3 hover q-mr-md q-ml-md" color="dark" @click="changeViewHandler(1)">
      <q-tooltip class="bg-dark">{{ $t('v102.ticket.toggleListType2') }}</q-tooltip>
    </q-btn>
    <q-btn unelevated class="bg-grey-3 hover q-mr-md" :title="$t('morequery')">
      <q-badge rounded class="din bg-red-2 text-red-14 text-weight-bold" floating :label="searchCnt" v-if="searchCnt > 0" />
        <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]" :model-value="canHide">
          <q-card class="q-pa-md rounded-borders" style="width: 300px">
            <div class="q-mb-md text-subtitle2">{{ $t('morequery') }}</div>
            <div class="q-my-md" v-if="$q.platform.is.mobile">
              <n-cascader 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 />
            </div>
            <div class="q-my-md" v-if="$q.platform.is.mobile">
              <q-field stack-label :label="$t('daterange')" standout class="col-2" style="min-width: 190px" dense>
                <div class="self-center full-width no-outline" tabindex="0">{{ searchClone.OpenTime }}</div>
                <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
                  <q-date v-model="searchClone.OpenTime" :options="optionsFn" mask="YYYY/MM/DD"  @update:model-value="dateRangeHandler"></q-date>
                </q-popup-proxy>
              </q-field>
            </div>
            <div class="row items-center">
              <q-input v-model="searchClone.StartPrice" class="col q-mr-md" mask="#.##" reverse-fill-mask dense type="text" standout :label="$t('hotel.minPrice')" />
              <q-input v-model="searchClone.EndPrice" class="col" dense mask="#.##" reverse-fill-mask ftype="text" standout :label="$t('hotel.maxPrice')" />
            </div>
            
          </q-card>
        </q-popup-proxy>
    </q-btn>
    <q-btn v-if="$q.platform.is.desktop" color="primary" unelevated :label="$t('query')" @click="setSearchHandler"/>
    <q-btn v-else color="primary" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile" :icon="$q.platform.is.mobile?'search':''" unelevated :label="$q.platform.is.mobile?'':$t('query')" @click="setSearchHandler"/>
    <!-- view_list grid_view -->
  </div>
</template>

<script lang="ts">
import svgIcon from '../../global/svg-icon.vue'
import { date } from 'quasar'
import { useQuasar } from 'quasar'
import { computed, ref, inject, reactive, toRefs } from 'vue'
import { DirtionmaryHelper } from 'src/config/dictionary'
import HotelService from 'src/api/hotel'
import { CascaderOption, NCascader } from 'naive-ui'
import { ApiResult } from 'src/@types/enumHelper'
import message from 'src/utils/message'
export default {
  components: { svgIcon, NCascader },
  setup(props) {
    const $q = useQuasar()
    const qDateProxy = ref(null) as any
    const data = reactive({
      defalutUrl: ref('https://cdn.quasar.dev/img/mountains.jpg'),
      addressParams: {
        Id: '651'
      },
      provinces: [],
      cascader: {
        addressValue: null
      } as any,
      searchClone:{} as any,
      canHide: false,
    })
    const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any
    data.searchClone = JSON.parse(JSON.stringify(search.msg))
    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 => {
          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()
            })
        })
      },
      changearea(e: number, option: any, pathValues: Array<any>) {
        data.searchClone.QProvince = 0
        data.searchClone.QCity = 0
        if (pathValues) {
          if (pathValues.length > 0) {
            data.searchClone.QProvince = pathValues[0].ID
          }
          if (pathValues.length > 1) {
            data.searchClone.QCity = pathValues[1].ID
          }
        }
      },
      setSearchHandler(){
        search.msg = JSON.parse(JSON.stringify(data.searchClone))
      },
      changeViewHandler(t:number){
        data.searchClone.ViewType=t
        methods.setSearchHandler()
      },
      dateRangeHandler(e: any) {
        if (qDateProxy.value) qDateProxy.value.hide()
      },
      optionsFn(cd: any) {
        return cd >= date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
      },
    }
    const searchCnt = computed(() => {
      let setCnt = 0
      if ($q.platform.is.mobile) {
        if (data.searchClone.QProvince > 0) setCnt++
        if (data.searchClone.OpenTime) setCnt++
      }
      if (data.searchClone.StartPrice>0) setCnt++
      if (data.searchClone.EndPrice>0) setCnt++
      return setCnt
    })
    methods.initAddress()
    return {
      qDateProxy,
      searchCnt,
      ...toRefs(data),
      ...methods
    }
  }
}
</script>

<style></style>
