<template>
  <div class="rounded-borders bg-white row items-center q-pa-md">
    <q-field :class="$q.platform.is.desktop ? '' : 'q-mb-md'" stack-label :label="$t('daterange')" standout class="q-ml-lg 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')"/>
    <div class="col"></div>
    <q-btn color="primary" unelevated :label="$t('query')"  @click="setQueryHandler"/>
  </div>
</template>

<script lang="ts">
import { DirtionmaryHelper } from '../../../config/dictionary'
import { defineComponent, inject, reactive, ref } from 'vue'
import { date } from 'quasar'

export default defineComponent({
  setup(props) {
    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: ''})
    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 methods = {
      getFormat() {
        if(!dateRangeFormat.value) {
          search.SelectStartDate = ''
          search.SelectEndDate = ''
        }
      },
      setQueryHandler(){
        realSearch.SelectStartDate=search.SelectStartDate
        realSearch.SelectEndDate=search.SelectEndDate
        realSearch.TCID=search.TCID
      },
      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')
      },
    }
    return {
      ...methods,
      search,
      dateRange,
      dateRangeFormat

    }
  }
})
</script>

<style></style>
