<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="placeKeyWords" dense :options="Areas" emit-value option-label="name" option-value="name" map-options :label="$t('hotel.area')" standout />
    <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">{{ 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="row" v-if="$q.platform.is.desktop">
      <q-select class="q-ml-lg" style="min-width: 90px;z-index: 99999;" unelevated v-model="room" dense :options="theRooms" emit-value option-label="name" option-value="id" map-options :label="$t('v101.scattered.kefang')" standout @update:model-value="getRoomList">
      </q-select>
      <q-btn unelevated class="bg-white hover q-px-xs q-py-sm q-ml-xs text-grey-6" icon="person">
        <div class="text-dark q-ml-xs">
          {{auditNum}}{{$t('v101.scattered.chengren')}}
          <span class="q-px-sm">.</span>
          <template v-if="childNum>0">{{childNum}}</template>
          {{$t('v101.scattered.ertong')}}
        </div>
        <q-popup-proxy class="no-shadow absolute" style="z-index: 0;box-shadow: 0 0 50px #ddd !important" :offset="[0, 20]" :model-value="isShowPop">
          <q-card class="row wrap q-pa-md rounded-borders" style="max-width:697px;">
            <div class="q-mr-md" v-for="(item,index) in search.searchroomGroup" :key="index" style="min-width: 150px;">
              <div class="q-mb-md text-subtitle2">{{ $t('v101.scattered.kefang') }}{{index+1}}</div>
              <div class="q-my-md">
                <q-select v-model="item.numberOfAdults" dense :options="adultList" emit-value map-options :label="$t('v101.scattered.chengren')" standout @update:model-value="setPeopleNum"/>
              </div>
              <div class="q-my-md">
                <q-select v-model="item.numberOfChildren" dense :options="childrenList" emit-value map-options :label="$t('v101.scattered.ertong')" standout @update:model-value="setPeopleNum"/>
              </div>
            </div>
          </q-card>
        </q-popup-proxy>
      </q-btn>
    </div>
    <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 unelevated v-model="placeKeyWords" dense :options="Areas" emit-value option-label="name" option-value="name" map-options :label="$t('hotel.area')" standout />
          </div>
          <div class="q-my-md" v-if="$q.platform.is.mobile">
            <q-field stack-label :label="$t('daterange')" standout  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>
          <div class="q-my-md row justify-between" v-if="$q.platform.is.mobile">
            <q-select style="min-width: 90px;z-index: 99999;" unelevated v-model="room" dense :options="theRooms" emit-value option-label="name" option-value="id" map-options :label="$t('v101.scattered.kefang')" standout @update:model-value="getRoomList">
            </q-select>
            <q-btn unelevated class="bg-white hover q-px-xs q-py-sm q-ml-xs text-grey-6" icon="person">
              <div class="text-dark q-ml-xs">
                {{auditNum}}{{$t('v101.scattered.chengren')}}
                <span class="q-px-sm">.</span>
                <template v-if="childNum>0">{{childNum}}</template>
                {{$t('v101.scattered.ertong')}}
              </div>
              <q-popup-proxy class="no-shadow absolute" style="z-index: 0;box-shadow: 0 0 50px #ddd !important" :offset="[0, 20]" :model-value="isShowPop">
                <q-card class="row wrap q-pa-md rounded-borders" style="max-width:697px;">
                  <div class="q-mr-md" v-for="(item,index) in search.searchroomGroup" :key="index" style="min-width: 150px;">
                    <div class="q-mb-md text-subtitle2">{{ $t('v101.scattered.kefang') }}{{index+1}}</div>
                    <div class="q-my-md">
                      <q-select v-model="item.numberOfAdults" dense :options="adultList" emit-value map-options :label="$t('v101.scattered.chengren')" standout @update:model-value="setPeopleNum"/>
                    </div>
                    <div class="q-my-md">
                      <q-select v-model="item.numberOfChildren" dense :options="childrenList" emit-value map-options :label="$t('v101.scattered.ertong')" standout @update:model-value="setPeopleNum"/>
                    </div>
                  </div>
                </q-card>
              </q-popup-proxy>
            </q-btn>
          </div>
          <div class="q-my-md">
            <q-select v-model="search.searchHotelCategory" dense :options="HotelLiveRates" emit-value option-label="name" option-value="id" clearable multiple map-options :label="$t('v101.scattered.zhusutype')" standout />
          </div>
          <div class="q-my-md row items-center">
            <q-input v-model="search.searchMinRate" class="col q-mr-md" mask="#.##" reverse-fill-mask dense type="text" standout :label="$t('hotel.minPrice')" />
            <q-input v-model="search.searchMaxRate" class="col" dense mask="#.##" reverse-fill-mask ftype="text" standout :label="$t('hotel.maxPrice')" />
          </div>
          <div class="q-my-md">
            <q-select v-model="search.searchRoomType" dense :options="HotelRoomTypes" emit-value option-label="name" option-value="id" clearable multiple map-options :label="$t('v101.scattered.fangxingtype')" standout />
          </div>
          <div class="q-my-md">
            <q-select v-model="search.searchMealType" dense :options="HotelMealTypes" emit-value option-label="name" option-value="id" clearable multiple map-options :label="$t('v101.scattered.canxingtype')" standout />
          </div>
          <div class="q-my-md">
            <q-select v-model="search.searchHotelFeatures" dense :options="HotelConceptTypes" emit-value option-label="name" option-value="id" clearable multiple map-options :label="$t('v101.scattered.liniantype')" standout />
          </div>
          <div class="q-my-md row items-center">
            <q-input v-model="search.reviewRatingLowerLimits" class="col q-mr-md" mask="#.##" reverse-fill-mask dense type="text" standout :label="$t('v101.scattered.minpingfen')" />
            <q-input v-model="search.reviewRatingUpperLimits" class="col" dense mask="#.##" reverse-fill-mask ftype="text" standout :label="$t('v101.scattered.maxpingfen')" />
          </div>
          <div class="q-my-md">
            <q-input v-model="keyWords" class="col" reverse-fill-mask dense type="text" standout :label="$t('v101.scattered.jiudianName')" />
          </div>
        </q-card>
      </q-popup-proxy>
    </q-btn>
    <q-btn color="primary" unelevated :label="$t('query')" />
  </div>

</template>

<script lang="ts">
import { useI18n } from 'vue-i18n'
import svgIcon from '../../global/svg-icon.vue'
import { computed, inject, provide, reactive, ref, toRefs, defineComponent, onMounted, watch } from 'vue'
import HotelService from '../../../api/hotel'
import message from '../../../utils/message'
import { ApiResult } from '../../../@types/enumHelper'
import { CascaderOption,NCascader,NSelect } from 'naive-ui'
import { date } from 'quasar'
import { HotelRate,HotelArea, useHotel } from '../../../utils/hotelRate'
import { useQuasar } from 'quasar'
import useScrollModule from '../../../module/scrollbar/scrollModule'
// import { dateDiffer } from '../../../utils/tools'
import { DirtionmaryHelper } from '../../../config/dictionary'
export default defineComponent({
  components: { svgIcon, NCascader, NSelect },
  setup() {
    const $q = useQuasar()
    const qDateProxy = ref(null) as any
    const qNameProxy = ref(null) as any
    const { locale, t } = useI18n()
    const data = reactive({
      scrollStyle: {} as any,
      Areas: [] as Array<HotelArea>,//区域
      cascader: {
        addressValue: null
      } as any,
      dateRange: {} as any,//当前日期
      dateRangeFormat: '',//可选日期
      loading: false,
      hotelsRates: [] as Array<HotelRate>,
      canHide: false,//更多筛选
      theRooms: [] as Array<Number>,//客房下拉
      room: 1,//客房数
      auditNum: 1,
      childNum:  null as any,
      adultList: [] as Array<Number>,//成人下拉
      childrenList: [] as Array<Number>,//儿童下拉
      isShowPop: false,//房间
      HotelLiveRates: [] as Array<HotelRate>,//住宿类型
      HotelRoomTypes: [] as Array<HotelRate>,//房类型
      HotelMealTypes: [] as Array<HotelRate>,//餐型
      HotelConceptTypes: [] as Array<HotelRate>,//理念
      keyWords: '' as stringify,
      placeKeyWords: t('v101.scattered.HotelArea1'),
    })
    for(let i=1;i<11;i++){
      data.theRooms.push(i)
    }
    for(let i=1;i<10;i++){
      data.adultList.push(i)
    }
    for(let i=0;i<6;i++){
      data.childrenList.push(i)
    }
    
    data.scrollStyle = useScrollModule().scrollStyle
    const search = inject(DirtionmaryHelper.HOTEL_QUERY_PARAM) as any
    if(search.searchroomGroup&&search.searchroomGroup.length==0){
      search.searchroomGroup.push({
        roomNum: 1,
        numberOfAdults: 1,
        numberOfChildren: 0
      })
    }
    data.dateRange.to = date.formatDate(date.addToDate(new Date(), { days: 9 }), 'YYYY/MM/DD')
    data.dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY/MM/DD')
    data.dateRangeFormat = `${data.dateRange.from} - ${data.dateRange.to}`
    search.arrivalDate = data.dateRange.from
    search.departureDate = data.dateRange.to
    data.hotelsRates = useHotel.getHotelRate()
    data.HotelLiveRates = useHotel.getAccommodationType()
    data.Areas = useHotel.getHotelArea()
    data.HotelRoomTypes = useHotel.getHotelRoom()
    data.HotelMealTypes = useHotel.getHotelMeal()
    data.HotelConceptTypes = useHotel.getHotelConcept()
    if (data.keyWords == '') {
      search.freewordType = 1;
      search.freeword = data.placeKeyWords;
    } else {
      search.freewordType = 2;
      search.freeword = data.keyWords;
    }
    const methods = {
      //设置房间里面成人数改变总成人数和儿童数
      setPeopleNum() {
          data.auditNum = 0;
          data.childNum = 0;
          search.searchroomGroup.forEach(x => {
              data.auditNum += x.numberOfAdults;
              data.childNum += x.numberOfChildren;
          })
          if (data.auditNum == null || data.auditNum == undefined) {
              data.auditNum = 1
          }
          if (data.childNum == null || data.childNum == undefined) {
              data.childNum = 1
          }
      },
      //房间数改变
      getRoomList(roomNum) {
          let length = search.searchroomGroup.length
          if(roomNum>length){
            for (let i = 1; i <= roomNum-length; i++) {
              let obj = {
                  roomNum: i,
                  numberOfAdults: 1,
                  numberOfChildren: 0
              }
              search.searchroomGroup.push(obj);
            }
          }else{
            search.searchroomGroup = search.searchroomGroup.filter((x:any,i:Number)=>{
              if(roomNum>i)return x
            })
          }
          data.auditNum = 0;
          data.childNum = 0;
          search.searchroomGroup.forEach(x => {
            data.auditNum += x.numberOfAdults;
            data.childNum += x.numberOfChildren;
          })
          data.isShowPop = true
          search.auditNum = data.auditNum;
          search.childNum = data.childNum;
      },
      dateRangeHandler(e: any) {
        search.arrivalDate = `${e.from.year}/${e.from.month}/${e.from.day}`
        search.departureDate = `${e.to.year}/${e.to.month}/${e.to.day} `
        data.dateRangeFormat = `${search.arrivalDate} - ${search.departureDate} `
        if (qDateProxy.value) qDateProxy.value.hide()
      },
      optionsFn(cd: any) {
        return cd >= date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY/MM/DD')
      },
      setData(){
        localStorage.removeItem(DirtionmaryHelper.SCATTERED_HOTEL_DATE)
        let d = {
          searchroomGroup: search.searchroomGroup,
          room: data.room,
          auditNum: data.auditNum,
          childNum: data.childNum,
          arrivalDate: search.arrivalDate,
          departureDate: search.departureDate,
        }
        localStorage.setItem(DirtionmaryHelper.SCATTERED_HOTEL_DATE,JSON.stringify(d))
      }
    }
    const searchCnt = computed(() => {
      let setCnt = 0
      if ($q.platform.is.mobile) {
        if (data.placeKeyWords&&!data.keyWords) setCnt++
        if (data.dateRange) setCnt++
        if (search.searchroomGroup.length > 0) setCnt++
      }
      if (data.keyWords) setCnt++
      if (search.reviewRatingUpperLimits) setCnt++
      if (search.reviewRatingLowerLimits) setCnt++
      if (search.searchHotelCategory&&search.searchHotelCategory.length>0) setCnt++
      if (search.searchHotelFeatures&&search.searchHotelFeatures.length>0) setCnt++
      if (search.searchRoomType&&search.searchRoomType.length>0) setCnt++
      if (search.searchMealType&&search.searchMealType.length>0) setCnt++
      if (search.searchMinRate) setCnt++
      if (search.searchMaxRate) setCnt++
      if (data.keyWords == '') {
        search.freewordType = 1;
        search.freeword = data.placeKeyWords;
      } else {
        search.freewordType = 2;
        search.freeword = data.keyWords;
      }
      return setCnt
    })
    watch(search, (n, o) => {
      methods.setData()
    })
    watch(data.room, (n, o) => {
      methods.setData()
    })
    watch(data.auditNum, (n, o) => {
      methods.setData()
    })
    watch(data.childNum, (n, o) => {
      methods.setData()
    })

    onMounted(()=>{
      methods.setData()
    })
    return {
      ...toRefs(data),
      ...methods,
      qDateProxy,
      qNameProxy,
      searchCnt,
      search,
    }
  }
})
</script>

<style>

</style>
