<template>
  <div class="rounded-borders bg-white row items-center q-pa-md q-my-md">
    <q-input v-if="$q.platform.is.desktop" v-model="searchClone.UseCompName" class="col-2 q-mr-md" reverse-fill-mask dense type="text" standout :label="$t('v102.vehicle.list.s1')" />
    <q-input v-if="$q.platform.is.desktop" v-model="searchClone.TeamName" class="col-2 q-mr-md" reverse-fill-mask dense type="text" standout :label="$t('v102.vehicle.list.s3')" />
    <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">{{ 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 class="col"></div>
    <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">
              <q-input v-model="searchClone.UseCompName" class="col-2 q-mr-md" reverse-fill-mask dense type="text" standout :label="$t('v102.vehicle.list.s1')" />
            </div>
            <div class="q-my-md">
              <q-input v-model="searchClone.UseName" class="col-2 q-mr-md" reverse-fill-mask dense type="text" standout :label="$t('v102.vehicle.list.s2')" />
            </div>
            <div class="q-my-md" v-if="$q.platform.is.mobile">
              <q-input v-model="searchClone.TeamName" class="col-2 q-mr-md" reverse-fill-mask dense type="text" standout :label="$t('v102.vehicle.list.s3')" />
            </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">{{ 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>
          </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"/>
    <q-btn class="q-ml-sm" color="primary" unelevated :label="$t('v102.CharteredBus.td')" @click="goUrl"/>
  </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 CharteredBusService from 'src/api/CharteredBus'
import { CascaderOption, NCascader } from 'naive-ui'
import { ApiResult } from 'src/@types/enumHelper'
import message from 'src/utils/message'
import { useHotel } from '../../../utils/hotelRate'
import { useRouter } from 'vue-router'
export default {
  components: { svgIcon, NCascader },
  setup(props) {
    const $q = useQuasar()
    const $router = useRouter()
    const qDateProxy = ref(null) as any
    const data = reactive({
      dateRange: {} as any,
      dateRangeFormat: '',
      CharteredBusType: useHotel.getCharteredBusType(),
      provinces: [] as any,
      cascader: {
        addressValue: null,
        AirportValue: null
      } as any,
      searchClone:{} as any,
      canHide: false,
      AirportList: [] as any
    })
    

    const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any
    data.dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
    data.dateRange.to = date.formatDate(date.addToDate(new Date(), { days: 10 }), 'YYYY/MM/DD')
    data.dateRangeFormat = `${data.dateRange.from} - ${data.dateRange.to}`

    data.searchClone = JSON.parse(JSON.stringify(search.msg))

    data.searchClone.StartTime = data.dateRange.from
    data.searchClone.EndTime = data.dateRange.to
    const methods = {
      goUrl(){
        $router.push({ path:`/vehicle/addEditVehicle`})
      },
      changearea(e: number, option: any, pathValues: Array<any>) {
        data.searchClone.Q_Province = 0
        data.searchClone.Q_City = 0
        if (pathValues) {
          if (pathValues.length > 0) {
            data.searchClone.Q_Province = pathValues[0].ID
          }
          if (pathValues.length > 1) {
            data.searchClone.Q_City = pathValues[1].ID
          }
        }
        methods.initAirport()
      },
      changeareaAirport(e: number, option: any, pathValues: Array<any>) {
        data.searchClone.Q_AirportId = 0
        if (pathValues) {
          if (pathValues.length > 0) {
            // data.searchClone.Q_Province = pathValues[0].ID
          }
          if (pathValues.length > 1) {
            data.searchClone.Q_AirportId = pathValues[1].ID
          }
        }
      },
      setSearchHandler(){
        search.msg = JSON.parse(JSON.stringify(data.searchClone))
      },
      changeViewHandler(t:number){
        data.searchClone.ViewType = t
        methods.setSearchHandler()
      },
      dateRangeHandler(e: any) {
        data.searchClone.StartTime = `${e.from.year}/${e.from.month}/${e.from.day}`
        data.searchClone.EndTime = `${e.to.year}/${e.to.month}/${e.to.day} `
        data.dateRangeFormat = `${data.searchClone.StartTime} - ${data.searchClone.EndTime} `
        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.UseCompName > 0) setCnt++
        if (data.searchClone.TeamName > 0) setCnt++
        if (data.dateRangeFormat.length>0) setCnt++
      }
      if (data.searchClone.UseName>0) setCnt++
      return setCnt
    })
    
    return {
      qDateProxy,
      searchCnt,
      ...toRefs(data),
      ...methods
    }
  }
}
</script>

<style></style>
