<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"
      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.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>
    <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 { getStoreGetter } from "../../../store/utils";
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 b2bUserInfo = getStoreGetter<UserGetter>("user", "getUser");
    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;
      },
      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.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,
      b2bUserInfo,
    };
  },
});
</script>

<style></style>
