<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.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.ticket.starttime')"
              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">
            <q-field clearable v-model="dateRangeFormatUse" :label="$t('v102.ticket.starttime')" standout class="col" 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">
            <q-input v-model="search.Name" dense standout :label="$t('v102.to.qjc')" />
          </div>
          <q-select
            class="q-mt-md"
            v-model="search.MailingState"
            dense
            :options="orderTypes"
            emit-value
            option-label="TypeName"
            option-value="TypeId"
            map-options
            :label="$t('v102.to.qj')"
            standout
          />
          <q-input
            v-model="search.CouponsName"
            dense
            standout
            :label="$t('v102.to.ticketName')"
            class="q-mt-md"
          />

          <q-input
            v-model="search.ContactNumber"
            dense
            standout
            :label="$t('v102.to.qjp')"
            class="q-mt-md"
          />
        </q-card>
      </q-popup-proxy>
    </q-btn>
    <template v-if="b2bUserInfo && b2bUserInfo.groupId == 2">
    <q-btn
      unelevated
      class="bg-blue-1 text-primary hover q-mr-md"
      :label="$t('hotelorder.recovery')"
    />
  </template>
    <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,
  getTicketOrderType,
} from "../../../utils/tools";
import { date, useQuasar } from "quasar";
import svgIcon from "../../global/svg-icon.vue";
import { getStoreGetter } from "../../../store/utils";
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,
      orderTypes: [] as Array<OrderType>,
      canHide: false,
    });
    const realSearch = inject(DirtionmaryHelper.TICKET_ORDER_SEARCH) as any;
    const search = reactive(JSON.parse(JSON.stringify(realSearch))) as any;
    const b2bUserInfo = getStoreGetter<UserGetter>("user", "getUser");
    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.orderTypes = getTicketOrderType(true);
      },
      optionsFnUse(cd: any) {
        return true;
      },
      optionsFn(cd: any) {
        return (
          cd < date.formatDate(date.addToDate(new Date(), { days: 1 }), "YYYY/MM/DD")
        );
      },
      getDateRangeUse(value) {
        search.UseSTime = "";
        search.UseETime = "";
        data.dateRangeFormatUse = "";
      },
      getDateRange(value) {
        search.StartTime = "";
        search.EndTime = "";
        data.dateRangeFormat = "";
      },
      dateRangeHandlerUse(e: any) {
        search.UseSTime = `${e.from.year}/${e.from.month}/${e.from.day}`;
        search.UseETime = `${e.to.year}/${e.to.month}/${e.to.day} `;
        data.dateRangeFormatUse = `${search.UseSTime} - ${search.UseETime} `;
        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.RoomType = search.RoomType;
        realSearch.StartTime = search.StartTime;
        realSearch.EndTime = search.EndTime;
        realSearch.UseSTime = search.UseSTime;
        realSearch.UseETime = search.UseETime;
        realSearch.OrderStatus = search.OrderStatus;
        realSearch.OrderNo = search.OrderNo;
        realSearch.MailingState = search.MailingState;
        realSearch.Name = search.Name;
        realSearch.CouponsName = search.CouponsName;
        realSearch.ContactNumber = search.ContactNumber;
      },
      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 > 0) setCnt++;
      if (search.UseSTime.length > 0) setCnt++;
      if (search.MailingState > 0) setCnt++;
      if (search.Name) setCnt++;
      if (search.CouponsName) setCnt++;
      if (search.ContactNumber) setCnt++;
      return setCnt;
    });

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

<style></style>
