<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.B2BSelectOrderState"  @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 class="q-mr-md" v-model="search.HotelName" dense standout :label="$t('v101.scatteredOrderList.first')"/>
    <div class="col"></div>
    <!-- <q-btn v-if="$q.platform.is.mobile" 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">
            <q-select class="q-mr-md" v-model="search.B2BSelectOrderState"  @update:model-value="setOrderStatus" dense :options="status" emit-value option-label="StatusName" option-value="StatusId" map-options :label="$t('hotelorder.search.status')" standout />
          </div>
          <div class="q-my-md">
            <q-input class="q-mr-md" v-model="search.HotelName" dense standout :label="$t('v101.scatteredOrderList.first')" />
          </div>
        </q-card>
      </q-popup-proxy>
    </q-btn> -->
    <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.B2BSelectOrderState" 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 { getScatteredHotelOrderStatus, 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 = getScatteredHotelOrderStatus()
        data.status = allStatus.filter((x: StandardStatus) => {
          return x.StatusId != 4
        })
        data.cancelStatus = allStatus.find((x: StandardStatus) => {
          return x.StatusId == 4
        })
        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.B2BSelectOrderState=search.B2BSelectOrderState
        realSearch.CustomerId=search.CustomerId
        realSearch.HotelName=search.HotelName
      },
      setOrderStatus(statusId:number){
        realSearch.B2BSelectOrderState=statusId
      }
    }

    const searchCnt = computed(() => {
      let setCnt = 0
      if ($q.platform.is.mobile) {
        if (realSearch.HotelName) setCnt++
      }
      return setCnt
    })

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

<style></style>
