<template>
  <div class="rounded-borders bg-white row items-center q-pa-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>
      <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>
              <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>
          <q-select class="q-mt-md" v-model="search.RoomType" dense :options="rooms" emit-value option-label="TypeName"
            option-value="TypeId" map-options :label="$t('hotelorder.search.roomType')" standout />
          <q-select class="q-mt-md" v-model="search.OrderType" dense :options="orderTypes" emit-value
            option-label="TypeName" option-value="TypeId" map-options :label="$t('hotelorder.search.orderType')"
            standout />
          <q-input v-model="search.TCNum" dense standout :label="$t('hotelorder.search.tcNum')" class="q-mt-md"
            v-if="search.OrderType == 2" />
          <q-input v-model="search.ContactName" :placeholder="$t('hotelorder.search.contactInfoHolder')" dense standout
            :label="$t('hotelorder.search.contactInfo')" class="q-mt-md" v-if="search.OrderType == 1" />
        </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 $q = useQuasar()

    const data = reactive({
      status: [] as Array<StandardStatus>,
      cancelStatus: {} as StandardStatus | undefined,
      dateRangeFormat: '',
      dateRange: {} as any,
      rooms: [] as Array<RoomType>,
      orderTypes: [] as Array<OrderType>,
      canHide: false
    })
    const realSearch = inject(DirtionmaryHelper.HOTEL_ORDER_SEARCH) as any
    const search = reactive(JSON.parse(JSON.stringify(realSearch)))
    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
        })
        data.rooms = getHotelRoomType(true)
        data.orderTypes = getHotelOrderType(true)
      },
      optionsFn(cd: any) {
        return cd < date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
      },
      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.RoomType = search.RoomType
        realSearch.StartTime = search.StartTime
        realSearch.EndTime = search.EndTime
        realSearch.OrderStatus = search.OrderStatus
        realSearch.OrderNo = search.OrderNo
        realSearch.OrderType = search.OrderType
        realSearch.TCNum = search.TCNum
        realSearch.ContactName = search.ContactName
        realSearch.ContactNumber = search.ContactName
        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.RoomType > 0) setCnt++
      if (search.OrderType > 0) setCnt++
      if (search.OrderType == 1 && search.ContactName.length > 0) setCnt++
      if (search.OrderType == 2 && search.TCNum.length > 0) setCnt++
      return setCnt
    })

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

<style>

</style>
