<template>
  <div class="rounded-borders bg-white row items-center q-pa-md">
    <template v-if="$q.platform.is.desktop">
      <q-field stack-label :label="$t('daterange')" standout
        class="col-2" style="min-width: 190px" dense clearable v-model="dateRangeFormat" @clear="getFormat">
        <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 class="q-mr-md q-ml-md" v-model="search.TCID" dense standout :label="$t('travel.id')" />
      <!-- <q-input class="q-mr-md q-ml-md" v-model="search.StartAddress" dense standout :label="$t('travel.startCity')" /> -->
      <q-select class="q-mr-md q-ml-md" style="min-width: 190px" v-model="defaultStartCity" dense standout @update:model-value="startCityHandler" :label="$t('travel.startCity')" :options="startCityOptions" />
    </template>
    <div class="col"></div>
    <q-btn unelevated class="bg-grey-3 hover q-mr-md" :title="$t('morequery')" v-if="$q.platform.is.mobile">
      <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">
            <q-field stack-label :label="$t('daterange')" standout
              class="col-2" style="min-width: 190px" dense clearable v-model="dateRangeFormat"
              @clear="getFormat">
              <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>
          <div class="q-my-md">
            <q-input class="q-mr-md q-ml-md" v-model="search.TCID" dense standout :label="$t('travel.id')" />
          </div>
          <div class="q-my-md">
            <q-select class="q-mr-md q-ml-md" style="min-width: 190px" v-model="defaultStartCity" dense standout @update:model-value="startCityHandler" :label="$t('travel.startCity')" :options="startCityOptions" />
          </div>
        </q-card>
      </q-popup-proxy>
    </q-btn>
    <q-btn color="primary" unelevated :label="$t('query')" @click="setQueryHandler" />
  </div>
</template>

<script lang="ts">
import { DirtionmaryHelper } from '../../../config/dictionary'
import { computed, defineComponent, inject, reactive, ref } from 'vue'
import { date } from 'quasar'
import svgIcon from 'src/components/global/svg-icon.vue'
import { useI18n } from 'vue-i18n'
export default defineComponent({
  components: { svgIcon },
  setup(props) {
    const { t } = useI18n()
    const qDateProxy = ref(null) as any
    const realSearch = inject(DirtionmaryHelper.TRAVEL_ORDER_OBJ) as any
    const search = reactive(JSON.parse(JSON.stringify(realSearch)))
    const dateRange = reactive({ from: '', to: '' })
    const searchCnt = computed(() => {
      let cnt = 0
      if (search.TCID != '') cnt++
      if (search.StartAddress != '') cnt++
      if (search.SelectStartDate != '') cnt++
      if (search.SelectEndDate != '') cnt++
      return cnt
    })
    const startCityOptions = ref([
      { label: t('travel.startCityList.all'), value: '' },
      { label: t('travel.startCityList.ss'), value: 'Surabaya' },
      { label: t('travel.startCityList.ml'), value: 'Medan' },
      { label: t('travel.startCityList.yjd'), value: 'Jakarta' },
      { label: t('travel.startCityList.bld'), value: 'Bali' },
    ])
    const defaultStartCity = ref(startCityOptions.value[0])
    // dateRange.to = date.formatDate(date.addToDate(new Date(), { days: 50 }), 'YYYY/MM/DD')
    // dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 20 }), 'YYYY/MM/DD')
    const dateRangeFormat = ref(`${dateRange.from} - ${dateRange.to}`)
    search.SelectStartDate = dateRange.from
    search.SelectEndDate = dateRange.to
    const canHide = ref(false)
    const methods = {
      getFormat() {
        if (!dateRangeFormat.value) {
          search.SelectStartDate = ''
          search.SelectEndDate = ''
        }
      },
      setQueryHandler() {
        realSearch.SelectStartDate = search.SelectStartDate
        realSearch.SelectEndDate = search.SelectEndDate
        realSearch.TCID = search.TCID
        realSearch.StartAddress = search.StartAddress
      },
      dateRangeHandler(e: any) {
        search.SelectStartDate = `${e.from.year}/${e.from.month}/${e.from.day}`
        search.SelectEndDate = `${e.to.year}/${e.to.month}/${e.to.day} `
        dateRangeFormat.value = `${search.SelectStartDate} - ${search.SelectEndDate} `
        if (qDateProxy.value) qDateProxy.value.hide()
      },
      optionsFn(cd: any) {
        return cd >= date.formatDate(date.adjustDate(new Date(), { year: 2000, month: 1, days: 1 }), 'YYYY/MM/DD')
      },
      startCityHandler(e: any) {
        console.log(e)
        search.StartAddress = e.value
      }
    }
    return {
      ...methods,
      search,
      dateRange,
      dateRangeFormat,
      searchCnt,
      canHide,
      startCityOptions,
      defaultStartCity
    }
  }
})
</script>

<style></style>
