<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 class="rounded-borders bg-white row items-center q-pa-md">
    <div class="q-mr-md" :class="$q.platform.is.desktop ? '' : 'q-mb-md'">
      <!-- <span>订单状态</span> -->
      <q-select style="min-width: 190px;" unelevated dense label="订单状态" standout v-model="search.OrderState" :options="orderStateList" option-value="Id" option-label="Name"></q-select>
    </div>
    <!-- <div class=" q-pa-md">
      <span>参团类型</span>
      <q-select v-model="search.GroupType"></q-select>
    </div>
    <div class=" q-pa-md">
      <span>订单来源</span>
      <q-select v-model="search.OrderSource"></q-select>
    </div> -->
    <div :class="$q.platform.is.desktop ? '' : 'q-mb-md'">
      <q-select style="min-width: 190px;" unelevated dense label="支付状态" standout v-model="search.PayStatus" :options="payStateList" option-value="value" option-label="label"></q-select>
    </div>
    <q-field :class="$q.platform.is.desktop ? 'q-ml-lg' : 'q-mb-md'" stack-label label="创建日期" standout class=" col-2" style="min-width: 190px" dense>
      <div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormatC }}</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 :class="$q.platform.is.desktop ? 'q-ml-lg' : 'q-mb-md'" stack-label label="发团日期" 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>
    <q-input class="q-mr-md q-ml-md" v-model="search.TCNUM" dense standout label="团号"/>
    <div class="col"></div>
    <q-btn color="primary" unelevated :label="$t('query')"  @click="setQueryHandler"/>
  </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";

export default defineComponent({
  setup(props) {
    const orderStateList = ref([{Name: '不限', Id: 0}])
    const payStateList = reactive([{label: '不限', value: -1},{label: '待收定金', value: 1},{label: '待收尾款', 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: ''})
    dateRange.to = date.formatDate(date.addToDate(new Date(), { days: 50 }), 'YYYY/MM/DD')
    dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 20 }), '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.addToDate(new Date(), { days: 50 }), 'YYYY/MM/DD')
    dateRangeC.from = date.formatDate(date.addToDate(new Date(), { days: 20 }), 'YYYY/MM/DD')
    const dateRangeFormatC = ref(`${dateRange.from} - ${dateRange.to}`)
    search.CStartDate = dateRangeC.from
    search.CEndDate = dateRangeC.to
    const methods = {
      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
        realSearch.PayStatus=search.PayStatus
      },
      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} `
        dateRangeFormat.value = `${search.CStartDate} - ${search.CEndDate} `
        if (qDateProxy.value) qDateProxy.value.hide()
      },
      optionsFn(cd: any) {
        return cd >= date.formatDate(date.addToDate(new Date(), { days: 20 }), '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
      
    }
  }
})
</script>

<style></style>
