<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>
      <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="团号"/>
    <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.StartTime = dateRange.from
    search.EndTime = dateRange.to
    const methods = {
      setQueryHandler(){
        realSearch.StartTime=search.StartTime
        realSearch.EndTime=search.EndTime
        realSearch.TCID=search.TCID
      },
      dateRangeHandler(e: any) {
        search.StartTime = `${e.from.year}/${e.from.month}/${e.from.day}`
        search.EndTime = `${e.to.year}/${e.to.month}/${e.to.day} `
        dateRangeFormat.value = `${search.StartTime} - ${search.EndTime} `
        if (qDateProxy.value) qDateProxy.value.hide()
      },
      optionsFn(cd: any) {
        return cd >= date.formatDate(date.addToDate(new Date(), { days: 20 }), 'YYYY/MM/DD')
      },
    }
    return {
      ...methods,
      search,
      dateRange,
      dateRangeFormat
      
    }
  }
})
</script>

<style></style>
