<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"  style="min-width: 150px" v-model="search.orderState" @update:model-value="setorderState" dense :options="status" emit-value option-label="StatusName" option-value="StatusId" map-options :label="$t('hotelorder.search.status')" standout />
    <q-select class="q-mr-md"  style="min-width: 150px" v-model="search.queryDays" @update:model-value="setorderDay" dense :options="Days" emit-value option-label="StatusName" option-value="StatusId" map-options :label="$t('v103.scheduledTripOrder.setorderday')" standout />
    <div class="col"></div>
    <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.orderState" class="text-cyan" dense>
      <q-tab :name="x.StatusId" :label="x.StatusName" v-for="x in status" @click="setorderState(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 { getTripOrderStatus, getTripOrderType, getHotelRoomType, getTicketOrderType } 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({
      Days:[] as Array<StandardStatus>,
      status: [] as Array<StandardStatus>,
      cancelStatus: {} as StandardStatus | undefined,
      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 = getTripOrderStatus()
        data.status = allStatus
        data.Days = getTripOrderType(true)
      },
      setQueryHandler() {
        realSearch.queryDays = search.queryDays
        realSearch.orderState = search.orderState
      },
      setorderState(statusId: number) {
        realSearch.orderState = statusId
      },
      setorderDay(statusId: number) {
        search.queryDays = statusId
      }
    }

    const searchCnt = computed(() => {
      let setCnt = 0
      return setCnt
    })

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

<style></style>
