<template>
  <div class="rounded-borders bg-white row items-center q-pa-md q-mb-md">
    <q-select v-if="$q.platform.is.desktop" class="q-mr-md" v-model="search.OrderStatus" @update:model-value="setOrderStatus" dense :options="status" emit-value option-label="StatusName" option-value="StatusId" map-options :label="$t('hotelorder.search.status')" standout />
    <q-input v-if="$q.platform.is.desktop" class="q-mr-md" v-model="search.OrderNo" dense standout :label="$t('hotelorder.search.orderNum')" />
    <q-field v-if="$q.platform.is.desktop" clearable v-model="dateRangeFormat" :label="$t('hotelorder.search.daterange')" standout class="col-2" style="min-width: 190px" dense @clear="getDateRange">
      <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-mt-md row">
            <q-input v-model="search.OrderNo" dense standout :label="$t('hotelorder.search.orderNum')" class="mobile-only col q-mr-md" />
            <q-input v-model="search.OrderId" dense standout :label="$t('hotelorder.search.orderId')" class="col" />
          </div>
          <div class="mobile-only q-mt-md">
            <q-field clearable v-model="dateRangeFormat" :label="$t('hotelorder.search.daterange')" standout style="min-width: 190px" dense @clear="getDateRange">
              <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" @range-end="dateRangeHandler" ></q-date>
              </q-popup-proxy>
            </q-field>
          </div>
          <div class="q-mt-md">
            <q-field clearable v-model="dateRangeFormatUse" :label="$t('v102.CharteredBus.sjc.c8')" standout style="min-width: 190px" dense @clear="getDateRangeUse">
              <div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormatUse }}</div>
              <q-popup-proxy :offset="[0, 10]" ref="qDateProxyUse">
                <q-date v-model="dateRangeUse" :options="optionsFnUse" range mask="YYYY/MM/DD" @range-end="dateRangeHandlerUse" ></q-date>
              </q-popup-proxy>
            </q-field>
          </div>
          <div class="q-mt-md row">
            <q-input class="col" v-model="search.SurName" dense standout :label="$t('v102.CharteredBus.sjc.c1x')" />
            <q-input class="col q-ml-sm" v-model="search.Name" dense standout :label="$t('v102.CharteredBus.sjc.c1m')" />
          </div>
          <q-input v-model="search.ProductName" dense standout :label="$t('v102.CharteredBus.sjc.c19')" class="q-mt-md" />

          <q-input v-model="search.Mobile" dense standout :label="$t('v102.CharteredBus.sjc.c2')" class="q-mt-md"/>

        </q-card>
      </q-popup-proxy>
    </q-btn>
    <q-btn unelevated class="bg-blue-1 text-primary hover q-mr-md" :label="$t('hotelorder.recovery')" />
    <q-btn color="primary" unelevated :label="$t('query')" @click="setQueryHandler" />
  </div>
  <div class="rounded-borders bg-white q-pa-sm q-mt-md mobile-only">
    <q-tabs v-model="search.OrderStatus" class="text-cyan" dense>
      <q-tab :name="x.StatusId" :label="x.StatusName" v-for="x in status" @click="setOrderStatus(x.StatusId)" />
    </q-tabs>
  </div>
</template>

<script lang="ts">
import { DirtionmaryHelper } from '../../../config/dictionary'
import { computed, defineComponent, inject, reactive, ref, toRefs } from 'vue'
import { OrderType, RoomType, StandardStatus } from '../../../@types'
import { getHotelOrderStatus, getHotelOrderType, getHotelRoomType } from '../../../utils/tools'
import { date, useQuasar } from 'quasar'
import svgIcon from '../../global/svg-icon.vue'

export default defineComponent({
  components: { svgIcon },
  setup(props) {
    const qDateProxy = ref(null) as any
    const qDateProxyUse = ref(null) as any
    const $q = useQuasar()

    const data = reactive({
      status: [] as Array<StandardStatus>,
      cancelStatus: {} as StandardStatus | undefined,
      dateRangeFormat: '',
      dateRangeFormatUse: '',
      dateRange: {} as any,
      dateRangeUse: {} as any,
      canHide: false
    })
    const realSearch = inject(DirtionmaryHelper.TICKET_ORDER_SEARCH) as any
    const search = reactive(JSON.parse(JSON.stringify(realSearch))) as any
    const methods = {
      initStatus() {
        //通用的訂單類型
        let allStatus = getHotelOrderStatus()
        data.status = allStatus.filter((x: StandardStatus) => {
          return x.StatusId != 3
        })
        data.cancelStatus = allStatus.find((x: StandardStatus) => {
          return x.StatusId == 3
        })
      },
      optionsFnUse(cd: any) {
        return true
      },
      optionsFn(cd: any) {
        return cd < date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
      },
      getDateRangeUse(value){
        search.OrderSTime = ''
        search.OrderETime = ''
        data.dateRangeFormatUse = ''
      },
      getDateRange(value){
        search.StartTime = ''
        search.EndTime = ''
        data.dateRangeFormat = ''
      },
      dateRangeHandlerUse(e: any) {
        search.OrderSTime = `${e.from.year}/${e.from.month}/${e.from.day}`
        search.OrderETime = `${e.to.year}/${e.to.month}/${e.to.day} `
        data.dateRangeFormatUse = `${search.OrderSTime} - ${search.OrderETime} `
        if (qDateProxyUse.value) qDateProxyUse.value.hide()
      },
      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} `
        data.dateRangeFormat = `${search.StartTime} - ${search.EndTime} `
        if (qDateProxy.value) qDateProxy.value.hide()
      },
      setQueryHandler() {
        realSearch.OrderId = search.OrderId
        realSearch.OrderType = search.OrderType
        realSearch.StartTime = search.StartTime
        realSearch.EndTime = search.EndTime
        realSearch.OrderSTime = search.OrderSTime
        realSearch.OrderETime = search.OrderETime
        realSearch.OrderStatus = search.OrderStatus
        realSearch.OrderNo = search.OrderNo
        realSearch.SurName = search.SurName
        realSearch.Name = search.Name
        realSearch.ProductName = search.ProductName
        realSearch.Mobile = search.Mobile
        console.log(realSearch)
      },
      setOrderStatus(statusId: number) {
        realSearch.OrderStatus = statusId
      }
    }

    const searchCnt = computed(() => {
      let setCnt = 0
      if ($q.platform.is.mobile) {
        if (search.OrderStatus > 0) setCnt++
        if (search.StartTime.length > 0) setCnt++
        if (search.OrderNo > 0) setCnt++
      }
      if (search.OrderId.length > 0) setCnt++
      if (search.OrderSTime.length > 0) setCnt++
      if (search.MailingState > 0) setCnt++
      if (search.Name) setCnt++
      if (search.ProductName) setCnt++
      if (search.Mobile) setCnt++
      return setCnt
    })

    methods.initStatus()
    return {
      ...toRefs(data),
      ...methods,
      search,
      searchCnt
    }
  }
})
</script>

<style></style>
