<template>
  <div class="rounded-borders bg-white row items-center q-pa-md">
    <q-select v-if="$q.platform.is.desktop" style="min-width: 190px;" unelevated v-model="searchClone.CarType" dense :options="CharteredBusType" emit-value option-label="name" option-value="id" map-options :label="$t('v102.CharteredBus.baochetype')" standout   @update:model-value="getCarType"/>
    <n-cascader v-if="$q.platform.is.desktop" class="col-2 no-border q-ml-lg" @update:value="changearea" v-model:value="cascader.addressValue" size="large" :placeholder="$t('hotel.area')" clearable check-strategy="all" :options="provinces" value-field="ID" label-field="Name" remote cascade />
    <n-cascader v-if="$q.platform.is.desktop&&searchClone.CarType!=3" class="col-2 no-border q-ml-lg" @update:value="changeareaAirport" v-model:value="cascader.AirportValue" size="large" :placeholder="$t('v102.CharteredBus.jiansuojichang')" clearable check-strategy="all" :options="AirportList" value-field="ID" label-field="Name" remote cascade />
    <q-field v-if="$q.platform.is.desktop" stack-label :label="$t('daterange')" standout class="q-ml-lg col-2" style="min-width: 190px" dense>
      <div class="self-center full-width no-outline" tabindex="0">{{ searchClone.Q_Date }}</div>
      <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
        <q-date v-model="searchClone.Q_Date" :options="optionsFn" mask="YYYY/MM/DD"  @update:model-value="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-my-md" v-if="$q.platform.is.mobile">
              <q-select v-if="$q.platform.is.desktop" style="min-width: 190px;" unelevated v-model="searchClone.CarType" dense :options="CharteredBusType" emit-value option-label="name" option-value="id" map-options :label="$t('v102.CharteredBus.baochetype')" standout />
            </div>
            <div class="q-my-md" v-if="$q.platform.is.mobile">
              <n-cascader class="col-2 no-border" @update:value="changearea" v-model:value="cascader.addressValue" size="large" :placeholder="$t('hotel.area')" clearable check-strategy="all" :options="provinces" value-field="ID" label-field="Name" remote cascade />
            </div>
            <div class="q-my-md" v-if="$q.platform.is.mobile">
              <q-field stack-label :label="$t('daterange')" standout class="col-2" style="min-width: 190px" dense>
                <div class="self-center full-width no-outline" tabindex="0">{{ searchClone.Q_Date }}</div>
                <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
                  <q-date v-model="searchClone.Q_Date" :options="optionsFn" mask="YYYY/MM/DD" @update:model-value="dateRangeHandler"></q-date>
                </q-popup-proxy>
              </q-field>
            </div>
            <div class="q-my-md" v-if="$q.platform.is.mobile&&searchClone.CarType!=3">
              <n-cascader class="no-border" @update:value="changeareaAirport" v-model:value="cascader.AirportValue" size="large" :placeholder="$t('hotel.area')" clearable check-strategy="all" :options="AirportList" value-field="ID" label-field="Name" remote cascade />
            </div>
            <div class="q-my-md row items-center ">
              <q-input v-model="searchClone.Q_SPeopleNum" class="col q-mr-md" mask="#" reverse-fill-mask dense type="text" standout :label="$t('v102.CharteredBus.qishirenshu')" />
              <q-input v-model="searchClone.Q_EPeopleNum" class="col" dense mask="#" reverse-fill-mask ftype="text" standout :label="$t('v102.CharteredBus.jiezhirenshu')" />
            </div>
            <div class="row items-center">
              <q-input v-model="searchClone.Q_SPrice" class="col q-mr-md" mask="#.##" reverse-fill-mask dense type="text" standout :label="$t('hotel.minPrice')" />
              <q-input v-model="searchClone.Q_EPrice" class="col" dense mask="#.##" reverse-fill-mask ftype="text" standout :label="$t('hotel.maxPrice')" />
            </div>
          </q-card>
        </q-popup-proxy>
    </q-btn>
    <q-btn v-if="$q.platform.is.desktop" color="primary" unelevated :label="$t('query')" @click="setSearchHandler"/>
    <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="setSearchHandler"/>
    <q-btn class="q-ml-sm" color="primary" unelevated :label="$t('v102.CharteredBus.td')" @click="goUrl"/>
  </div>
</template>

<script lang="ts">
import svgIcon from '../../global/svg-icon.vue'
import { date } from 'quasar'
import { useQuasar } from 'quasar'
import { computed, ref, inject, reactive, toRefs } from 'vue'
import { DirtionmaryHelper } from 'src/config/dictionary'
import CharteredBusService from 'src/api/CharteredBus'
import { CascaderOption, NCascader } from 'naive-ui'
import { ApiResult } from 'src/@types/enumHelper'
import message from 'src/utils/message'
import { useHotel } from '../../../utils/hotelRate'
import { useRouter } from 'vue-router'
export default {
  components: { svgIcon, NCascader },
  setup(props) {
    const $q = useQuasar()
    const $router = useRouter()
    const qDateProxy = ref(null) as any
    const data = reactive({
      CharteredBusType: useHotel.getCharteredBusType(),
      provinces: [] as any,
      cascader: {
        addressValue: null,
        AirportValue: null
      } as any,
      searchClone:{} as any,
      canHide: false,
      AirportList: [] as any
    })
    const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any
    data.searchClone = JSON.parse(JSON.stringify(search.msg))
    const methods = {
      goUrl(){
        $router.push({ path:`/vehicle/addEditVehicle/2`})
      },
      getCarType(e:any){
        if(e){
          methods.initAddress()
          methods.initAirport()
        }else{
          data.provinces = [] as any
          data.AirportList = [] as any
          data.cascader.addressValue = null
          data.cascader.AirportValue = null
          data.searchClone.Q_Province = 0
          data.searchClone.Q_City = 0
          data.searchClone.Q_AirportId = 0
        }
      },
      // 获取城市地址
      initAddress() {
        CharteredBusService.GetCarSingleAllPlace({ 
            AirportId: data.searchClone.Q_AirportId,
            Type: data.searchClone.CarType })
          .then(r => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              let newData = []
              r.data.data.forEach((x: any) => {
                let newobj = {
                  ID: x.Country,
                  Name: x.CountryName,
                  isLeaf: false,
                  depth: 1,
                  children: [] as any
                }
                x.CityList.forEach((y: any) => {
                  let newobj2 = {
                    ID: y.City,
                    Name: y.CityName,
                    isLeaf: true,
                    depth: 2
                  }
                  newobj.children.push(newobj2)
                })
                newData.push(JSON.parse(JSON.stringify(newobj)))
              })
              data.provinces = newData
            } else {
              message.errorMsg(r.data.message)
            }
          })
          .catch(e => {
            message.errorMsg(e.message)
          })
      },
      // 获取机场
      initAirport(){
        CharteredBusService.GetCarSingleAllAirport({ 
            CountryId: data.searchClone.Q_Country,
            CityId: data.searchClone.Q_City,
            Type: data.searchClone.CarType })
          .then(r => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              let newData = []
              r.data.data.forEach((x: any) => {
                let newobj = {
                  ID: x.Country,
                  Name: x.CountryName,
                  isLeaf: false,
                  depth: 1,
                  children: [] as any
                }
                x.AirportList.forEach((y: any) => {
                  let newobj2 = {
                    ID: y.AirportId,
                    Name: y.AirportName,
                    isLeaf: true,
                    depth: 2
                  }
                  newobj.children.push(newobj2)
                })
                newData.push(JSON.parse(JSON.stringify(newobj)))
              })
              data.AirportList = newData
            } else {
              message.errorMsg(r.data.message)
            }
          })
          .catch(e => {
            message.errorMsg(e.message)
          })
      },
      changearea(e: number, option: any, pathValues: Array<any>) {
        data.searchClone.Q_Province = 0
        data.searchClone.Q_City = 0
        if (pathValues) {
          if (pathValues.length > 0) {
            data.searchClone.Q_Province = pathValues[0].ID
          }
          if (pathValues.length > 1) {
            data.searchClone.Q_City = pathValues[1].ID
          }
        }
        methods.initAirport()
      },
      changeareaAirport(e: number, option: any, pathValues: Array<any>) {
        data.searchClone.Q_AirportId = 0
        if (pathValues) {
          if (pathValues.length > 0) {
            // data.searchClone.Q_Province = pathValues[0].ID
          }
          if (pathValues.length > 1) {
            data.searchClone.Q_AirportId = pathValues[1].ID
          }
        }
      },
      setSearchHandler(){
        search.msg = JSON.parse(JSON.stringify(data.searchClone))
      },
      changeViewHandler(t:number){
        data.searchClone.ViewType = t
        methods.setSearchHandler()
      },
      dateRangeHandler(e: any) {
        if (qDateProxy.value) qDateProxy.value.hide()
      },
      optionsFn(cd: any) {
        return cd >= date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
      },
    }
    const searchCnt = computed(() => {
      let setCnt = 0
      if ($q.platform.is.mobile) {
        if (data.searchClone.CarType > 0) setCnt++
        if (data.searchClone.Q_Country > 0||data.searchClone.Q_City) setCnt++
        if (data.searchClone.Q_AirportId > 0) setCnt++
        if (data.searchClone.Q_Date) setCnt++
      }
      if (data.searchClone.Q_SPeopleNum>0) setCnt++
      if (data.searchClone.Q_EPeopleNum>0) setCnt++
      if (data.searchClone.Q_SPrice>0) setCnt++
      if (data.searchClone.Q_EPrice>0) setCnt++
      return setCnt
    })
    
    return {
      qDateProxy,
      searchCnt,
      ...toRefs(data),
      ...methods
    }
  }
}
</script>

<style></style>
