<template>
  <!--
    接口文档地址
     http://dev.api.oytour.com/#/home/project/inside/api/detail?groupID=20&childGroupID=730&apiID=4386&projectName=REBORN&projectID=2

    参考
    http://dev.api.oytour.com/#/home/project/inside/api/detail?groupID=157&childGroupID=170&apiID=1010&projectName=REBORN&projectID=2
  
  -->
  <div>
    <div class="rounded-borders bg-white row items-center q-pa-md">
      <div class="q-mr-md" v-if="$q.platform.is.desktop">
        <q-select
          style="min-width: 190px"
          unelevated
          dense
          :label="$t('travel.orderStatus')"
          standout
          v-model="search.OrderState"
          :options="orderStateList"
          option-value="Id"
          option-label="Name"
        ></q-select>
      </div>
      <div class="q-mr-md" v-if="$q.platform.is.desktop">
        <q-select
          style="min-width: 190px"
          unelevated
          dense
          :label="$t('travel.payStatus')"
          standout
          v-model="search.PayStatus"
          :options="payStateList"
          option-value="value"
          option-label="label"
        ></q-select>
      </div>
      <q-field
         v-if="$q.platform.is.desktop"
        stack-label
        :label="$t('travel.createDate')"
        :clearable="true"
        standout
        class="q-mr-md"
        style="min-width: 190px"
        dense
      >
        <div class="self-center full-width no-outline row justify-between" tabindex="0">
          {{ dateRangeFormatC }}
          <span @click="clearC" v-if="dateRangeFormatC"
            ><q-icon
              name="close"
              size="20px"
              color="primary"
              class="cursor-pointer"
              v-ripple
              v-close-popup
          /></span>
        </div>
        <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
          <q-date
            v-model="dateRangeC"
            :options="optionsFn"
            range
            mask="YYYY/MM/DD"
            landscape
            @range-end="dateRangeHandlerC"
          ></q-date>
        </q-popup-proxy>
      </q-field>
      <q-field
         v-if="$q.platform.is.desktop"
        stack-label
        :label="$t('travel.startDate')"
        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="$q.platform.is.mobile ? '5' : '1'"
      />
      <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-mb-md" v-if="$q.platform.is.mobile">
        <q-select
          style="min-width: 190px"
          unelevated
          dense
          :label="$t('travel.orderStatus')"
          standout
          v-model="search.OrderState"
          :options="orderStateList"
          option-value="Id"
          option-label="Name"
        ></q-select>
      </div>
      <div class="q-mb-md" v-if="$q.platform.is.mobile">
        <q-select
          style="min-width: 190px"
          unelevated
          dense
          :label="$t('travel.payStatus')"
          standout
          v-model="search.PayStatus"
          :options="payStateList"
          option-value="value"
          option-label="label"
        ></q-select>
      </div>
      <q-field
         v-if="$q.platform.is.mobile"
        stack-label
        :label="$t('travel.createDate')"
        :clearable="true"
        standout
        class="col-2 q-mb-md"
        style="min-width: 190px"
        dense
      >
        <div class="self-center full-width no-outline row justify-between" tabindex="0">
          {{ dateRangeFormatC }}
          <span @click="clearC" v-if="dateRangeFormatC"
            ><q-icon
              name="close"
              size="20px"
              color="primary"
              class="cursor-pointer"
              v-ripple
              v-close-popup
          /></span>
        </div>
        <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
          <q-date
            v-model="dateRangeC"
            :options="optionsFn"
            range
            mask="YYYY/MM/DD"
            landscape
            @range-end="dateRangeHandlerC"
          ></q-date>
        </q-popup-proxy>
      </q-field>
      <q-field
         v-if="$q.platform.is.mobile"
        stack-label
        :label="$t('travel.startDate')"
        standout
        class="col-2 q-mb-md"
        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>
      <q-input
        v-model="search.TCNUM"
        dense
        standout
        :label="$t('travel.id')"
      />
        </q-card>
      </q-popup-proxy>
    </q-btn>
    <q-btn
      v-if="$q.platform.is.desktop"
      color="primary"
      unelevated
      :label="$t('query')"
      @click="setQueryHandler"
    />
    <q-btn
      v-else
      color="primary"
      :round="$q.platform.is.mobile"
      :dense="$q.platform.is.mobile"
      :icon="$q.platform.is.mobile ? 'search' : ''"
      unelevated
      :label="$q.platform.is.mobile ? '' : $t('query')"
      @click="setQueryHandler"
    />
    </div>
  </div>
</template>

<script lang="ts">
import { DirtionmaryHelper } from "../../../config/dictionary";
import { defineComponent, inject, reactive, ref } from "vue";
import { date } from "quasar";
import travelService from "../../../api/travel";
import { ApiResult } from "../../../@types/enumHelper";
import message from "../../../utils/message";
import { useI18n } from "vue-i18n";
import svgIcon from "../../../components/global/svg-icon.vue";

export default defineComponent({
  components: { svgIcon },
  setup(props) {
    const canHide = ref(false)
    const { t } = useI18n();
    const orderStateList = ref([{ Name: t("travel.all"), Id: 0 }]);
    const payStateList = reactive([
      { label: t("travel.all"), value: -1 },
      { label: t("travel.notPay"), value: 1 },
      { label: t("travel.payed"), value: 2 },
    ]);
    const qDateProxy = ref(null) as any;
    const realSearch = inject(DirtionmaryHelper.TRAVEL_ORDER_OBJ) as any;
    const search = reactive(JSON.parse(JSON.stringify(realSearch)));
    const dateRange = reactive({ from: "", to: "" });
    let month = new Date().getMonth() + 2;
    let year = new Date().getFullYear();
    if (month > 12) {
      month = 1;
      year++;
    }
    dateRange.to = date.formatDate(
      date.adjustDate(new Date(), { year, month: month, days: 1 }),
      "YYYY/MM/DD"
    );
    dateRange.from = date.formatDate(
      date.adjustDate(new Date(), { days: 1 }),
      "YYYY/MM/DD"
    );
    const dateRangeFormat = ref(`${dateRange.from} - ${dateRange.to}`);
    search.QStartDate = dateRange.from;
    search.QEndDate = dateRange.to;
    const dateRangeC = reactive({ from: "", to: "" });
    // dateRangeC.to = date.formatDate(date.adjustDate(new Date(), { year,month: month,days: 1}), 'YYYY/MM/DD')
    // dateRangeC.from = date.formatDate(date.adjustDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
    const dateRangeFormatC = ref("");
    search.CStartDate = dateRangeC.from;
    search.CEndDate = dateRangeC.to;
    const methods = {
      clearC() {
        dateRangeFormatC.value = "";
        search.CStartDate = "";
        search.CEndDate = "";
        dateRangeC.from = "";
        dateRangeC.to = "";
      },
      setQueryHandler() {
        realSearch.QStartDate = search.QStartDate;
        realSearch.QEndDate = search.QEndDate;
        realSearch.CStartDate = search.CStartDate;
        realSearch.CEndDate = search.CEndDate;
        realSearch.TCNUM = search.TCNUM;
        realSearch.OrderState = search.OrderState ? search.OrderState.Id : "";
        realSearch.PayStatus = search.PayStatus ? search.PayStatus.value : -1;
      },
      dateRangeHandler(e: any) {
        search.QStartDate = `${e.from.year}/${e.from.month}/${e.from.day}`;
        search.QEndDate = `${e.to.year}/${e.to.month}/${e.to.day} `;
        dateRangeFormat.value = `${search.QStartDate} - ${search.QEndDate} `;
        if (qDateProxy.value) qDateProxy.value.hide();
      },
      dateRangeHandlerC(e: any) {
        search.CStartDate = `${e.from.year}/${e.from.month}/${e.from.day}`;
        search.CEndDate = `${e.to.year}/${e.to.month}/${e.to.day} `;
        dateRangeFormatC.value = `${search.CStartDate} - ${search.CEndDate} `;
        if (qDateProxy.value) qDateProxy.value.hide();
      },
      optionsFn(cd: any) {
        return (
          cd >=
          date.formatDate(
            date.adjustDate(new Date(), { year: 1970, month: 1, days: 1 }),
            "YYYY/MM/DD"
          )
        );
      },
      initOrders() {
        travelService
          .getOrderStateList({})
          .then((r) => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              orderStateList.value = orderStateList.value.concat(r.data.data);
            } else {
              message.errorMsg(r.data.message);
            }
          })
          .catch((e) => {
            message.errorMsg(e.message);
          });
      },
    };
    methods.initOrders();
    return {
      ...methods,
      search,
      orderStateList,
      payStateList,
      dateRange,
      dateRangeFormat,
      dateRangeC,
      dateRangeFormatC,
      canHide,
    };
  },
});
</script>

<style></style>
