<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: 0 }), '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>
