<template>
  <div v-if="$q.platform.is.mobile" class="rounded-borders bg-white row items-center q-ma-sm q-py-md q-mb-md q-px-md">
        <q-input v-model="searchClone.searchKey" class="SearchMain-height" dense reverse-fill-mask ftype="text" standout :label="$t('v103.scheduledTrip.searchinput')" @update:model-value="changeAddrSearchHandler"/>
        <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="rounded-borders q-my-md q-px-xs q-py-xs bg-grey-3">
                <div class="q-px-sm q-py-xs row justify-between">
                  <span>{{$t('v103.scheduledTrip.companylocation')}}</span>
                  <template v-for="(x, i) in chosenAddress">
                    <span class="text-primary" v-if="i==0">{{x.Name}}</span>
                  </template>
                  
                </div>
                <q-popup-proxy :offset="[0, 10]" ref="qDateProxy0">
                  <div class="bg-white q-pb-lg" style="width: 300px;">
                    <div class="q-px-lg q-py-md fz18">{{$t('v103.scheduledTrip.companylocation')}}</div>
                    <div v-for="(x, i) in sites" :key="i">
                      <div class="addr">
                        <div
                          class="q-mx-md"
                        >
                          <template v-for="(y, yi) in x.SubList">
                            <q-radio
                              class="addr-list q-px-md q-py-sm row items-center"
                              :key="yi"
                              v-if="y.isShow" v-model="searchClone.cityId" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="y.cityId" :label="y.siteName" size="sm" @update:model-value="changeCheckHandler(y, x,0)"/>
                          </template>
                        </div>
                      </div>
                    </div>
                  </div>
                </q-popup-proxy>
              </div>
              <div class="rounded-borders q-my-md q-px-xs q-py-xs bg-grey-3">
                <div class="q-px-sm q-py-xs row justify-between">
                  <span>{{$t('v103.scheduledTrip.line')}}</span>
                  <template v-for="(x, i) in chosenAddress">
                    <span class="text-primary" v-if="x.type==1">
                      {{x.Name}}
                      <q-icon class="cursor-pointer text-grey-6" name="close" @click.stop="removeChosen(x,i,1)"/>
                    </span>
                  </template>
                </div>
                <q-popup-proxy :offset="[0, 10]" ref="qDateProxy1">
                  <div class="bg-white q-pb-lg" style="width: 300px;">
                    <div class="q-px-lg q-py-md fz18">{{$t('v103.scheduledTrip.line')}}</div>
                    <div class="add" v-for="(x, i) in lines" :key="i">
                      <div class="q-mx-md">
                        <template v-for="(y, yi) in x.SubList">
                          <q-radio
                          class="addr-list q-px-md q-py-sm row items-center"
                          :key="yi"
                          v-if="y.isShow" v-model="searchClone.lineId" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="y.id" :label="y.name" size="sm" @update:model-value="changeCheckHandler(y, x,1)"/>
                      </template>
                      </div>
                  </div>
                  </div>
                </q-popup-proxy>
              </div>
              <div v-if="searchClone.lineId&&xilies.length>0" class="rounded-borders q-my-md q-px-xs q-py-xs bg-grey-3">
                <div class="q-px-sm q-py-xs row justify-between">
                  <span class="text-grey-8 col-12 row justify-between">
                    <span>{{$t('v103.scheduledTrip.commlineteam')}}</span> 
                    <span v-if="!searchClone.lineTeamId">{{$t('v103.scheduledTrip.closelineteam')}}</span>
                    <template v-for="(x, i) in chosenAddress">
                      <span class="text-primary" v-if="x.type==2">
                        {{x.Name}}
                        <q-icon class="cursor-pointer text-grey-6" name="close" @click.stop="removeChosen(x,i,2)"/>
                      </span>
                    </template>
                  </span>
                  
                </div>
                <q-popup-proxy :offset="[0, 10]" ref="qDateProxy2">
                  <div class="bg-white q-pb-lg" style="width: 300px;">
                    <div class="q-px-lg q-py-md fz18">{{$t('v103.scheduledTrip.lineteam')}}</div>
                    <div class="add" v-for="(x, i) in xilies" :key="i">
                      <div class="q-mx-md">
                        <template v-for="(y, yi) in x.SubList">
                          <q-radio
                          class="addr-list q-px-md q-py-sm row items-center"
                          :key="yi"
                          v-if="y.isShow" v-model="searchClone.lineTeamId" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="y.id" :label="y.name" size="sm" @update:model-value="changeCheckHandler(y, x,2)"/>
                      </template>
                      </div>
                  </div>
                  </div>
                </q-popup-proxy>
              </div>
              <div class="rounded-borders q-my-md q-px-xs q-py-xs bg-grey-3">
                <div class="q-px-sm q-py-xs row justify-between">
                  <span class="text-grey-8 col-12 row justify-between">
                    <span>{{$t('v103.scheduledTrip.departurecity')}}</span> 
                    <span v-if="!searchClone.startCityId">{{$t('v103.scheduledTrip.closedeparturecity')}}</span>
                    <template v-for="(x, i) in chosenAddress">
                      <span class="text-primary" v-if="x.type==3">
                        {{x.Name}}
                        <q-icon class="cursor-pointer text-grey-6" name="close" @click.stop="removeChosen(x,i,3)"/>
                      </span>
                    </template>
                  </span>
                  
                </div>
                <q-popup-proxy :offset="[0, 10]" ref="qDateProxy3">
                  <div class="bg-white q-pb-lg" style="width: 300px;">
                    <div class="q-px-lg q-py-md fz18">{{$t('v103.scheduledTrip.departurecity')}}</div>
                    <div class="add" v-for="(x, i) in startCitys" :key="i">
                      <div class="q-mx-md">
                        <template v-for="(y, yi) in x.SubList">
                          <q-radio
                          class="addr-list q-px-md q-py-sm row items-center"
                          :key="yi"
                          v-if="y.isShow" v-model="searchClone.startCityId" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="y.id" :label="y.startCityName" size="sm" @update:model-value="changeCheckHandler(y, x,3)"/>
                      </template>
                      </div>
                  </div>
                  </div>
                </q-popup-proxy>
              </div>
              <div>
                <div v-if="(searchClone.startDate&&!searchClone.endDate)||(!searchClone.startDate&&!searchClone.endDate)" class="rounded-borders q-my-md q-px-xs q-py-xs bg-grey-3">
                  <div class="q-px-sm q-py-xs row justify-between">
                    <span class="text-grey-8 col-12 row justify-between">
                      <span>{{$t('v103.scheduledTrip.startdate')}}</span> 
                      <span v-if="!datesId">{{$t('v103.scheduledTrip.closestartdate')}}</span>
                      <template v-for="(x, i) in chosenAddress">
                        <span class="text-primary" v-if="x.type==5">
                          {{x.Name}}
                          <q-icon class="cursor-pointer text-grey-6" name="close" @click.stop="removeChosen(x,i,5)"/>
                        </span>
                      </template>
                    </span>
                    
                  </div>
                  <q-popup-proxy :offset="[0, 10]" ref="qDateProxy5">
                    <div class="bg-white q-pb-lg" style="width: 300px;">
                      <div class="q-px-lg q-py-md fz18">{{$t('v103.scheduledTrip.startdate')}}</div>
                      <div class="add" v-for="(x, i) in dates" :key="i">
                        <div class="q-mx-md">
                          <template v-for="(y, yi) in x.SubList">
                            <q-radio class="addr-list q-px-md q-py-sm row items-center"
                              :key="yi"
                              v-if="y.isShow" v-model="datesId" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="y.id" :label="y.Name" size="sm" 
                              @update:model-value="changeCheckHandler(y, x,5)"/>
                          </template>
                        </div>
                    </div>
                    </div>
                  </q-popup-proxy>
                </div>
                <!--  v-if="(!search.msg.startDate&&!search.msg.endDate)||(search.msg.startDate&&search.msg.endDate)" -->
                <div class="q-my-md row no-padding bg-grey-3" v-if="(!searchClone.startDate&&!searchClone.endDate)||(searchClone.startDate&&searchClone.endDate)">
                  <div
                      class="q-px-md q-py-sm"
                      style="border-right: 1px solid #eee; border-radius: 0 !important"
                  >
                      <q-icon name="event" size="24px" />
                  </div>
                  <div class="row items-center justify-center col">
                      <span class="text-grey-8">{{
                      dateRange.from
                          ? `${dateRange.from} - ${dateRange.to}`
                          : $t('v103.scheduledTrip.screeningdate')
                      }}
                      <template v-for="(x, i) in chosenAddress">
                        <template v-if="x.type==6">
                          <q-icon class="cursor-pointer text-grey-6 q-pl-lg" name="close" @click.stop="removeChosen(x,i,6)"/>
                        </template>
                      </template>
                    </span>
                    
                    <!-- <q-icon class="cursor-pointer text-grey-6" name="close" @click.stop="removeChosen(x,i,6)"/> -->
                      <q-popup-proxy :offset="[0, 0]" ref="qDateProxy">
                      <div>
                          <q-date
                          v-model="dateRange"
                          :options="optionsFn"
                          range
                          @range-end="dateRangeHandler"
                          mask="YYYY/MM/DD"
                          ></q-date>
                      </div>
                      </q-popup-proxy>
                  </div>
                </div>
              </div>
              
              <div class="q-my-md">
                <div class="text-subtitle1 text-weight-bold">{{$t('v103.scheduledTrip.screeningprice')}}（CNY）</div>
                <div class="q-mt-md text-grey-6 text-subtitle1">
                    {{ searchClone.priceRange.min }} - {{ searchClone.priceRange.max }}
                </div>
                <q-range
                    v-model="searchClone.priceRange"
                    :min="1"
                    :max="100000"
                    :step="1"
                    @change="testHandler"
                    color="primary"
                    class="q-mt-md"
                />
              </div>
              <div class="rounded-borders q-my-md q-px-xs q-py-xs bg-grey-3">
                <div class="q-px-sm q-py-xs row justify-between">
                  <span>{{$t('v103.scheduledTrip.journeytime')}}</span>
                  <template v-for="(x, i) in chosenAddress">
                    <span class="text-primary" v-if="x.type==4">
                      {{x.Name}}
                      <q-icon class="cursor-pointer text-grey-6" name="close" @click.stop="removeChosen(x,i,4)"/>
                    </span>
                  </template>
                </div>
                <q-popup-proxy :offset="[0, 10]" ref="qDateProxy4">
                  <div class="bg-white q-pb-lg" style="width: 300px;">
                    <div class="q-px-lg q-py-md fz18">{{$t('v103.scheduledTrip.journeytime')}}</div>
                    <div
                        class="addr-list q-px-md q-py-sm row items-center">
                        <q-radio class="addr-list q-px-md q-py-sm row items-center"
                        v-for="(y, yi) in dayArray"
                        :key="yi" v-model="DayId" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="y.id" :label="y.text" size="sm" @update:model-value="changeCheckHandler(y,dayArray,4)"/>
                        </div>
                  </div>
                </q-popup-proxy>
                
              </div>
            </q-card>
          </q-popup-proxy>
        </q-btn>
        <q-btn color="primary" unelevated :label="$t('query')" @click="queryList"/>
  </div>
    <template v-if="$q.platform.is.desktop">
      <q-card flat class="rounded-borders q-py-md">
        <div class="row justify-between q-mx-md">
          <span class="text-subtitle1 text-weight-bold ">{{$t('v103.scheduledTrip.screeningtitle')}}</span>
        </div>
        <!-- @update:model-value="changeAddrSearchHandler" -->
        <q-input
          v-model="searchClone.searchKey"
          type="text"
          standout
          :placeholder="$t('v103.scheduledTrip.searchinput')"
          class="q-ma-md"
        />
        <div v-for="(x, i) in sites" :key="i">
          <div class="addr">
            <div
              class="addr-list q-px-md q-py-sm cursor-pointer row items-center"
              v-if="x.isShow"
            >
              <span class="col" @click="changeExplesdHandler(x)">{{$t('v103.scheduledTrip.companylocation')}}</span>
              <div>
                <span v-if="chosenAddress.length>0" class="q-mr-md text-primary">{{chosenAddress[0].Name}}</span>
                <q-icon
                @click="changeExplesdHandler(x)"
                :name="!x.explsed ? 'keyboard_arrow_down' : 'keyboard_arrow_up'"
                size="20px"
              />
              </div>
              
            </div>
            <div
              class="q-mx-md"
              v-if="
                x.explsed ||
                (x.SubList && x.isShowChild && searchClone.searchKey.length > 0)
              "
            >
              <template v-for="(y, yi) in x.SubList">
                  <q-radio
                  class="addr-list q-px-md q-py-sm row items-center"
                  :key="yi"
                  v-if="y.isShow" v-model="searchClone.cityId" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="y.cityId" :label="y.siteName" size="sm" @update:model-value="changeCheckHandler(y, x,0)"/>
                  <!-- <span class="col">{{ y.siteName }}</span> -->
              </template>
            </div>
          </div>
        </div>
        <template v-if="xilies.length==0||!searchClone.lineId">
          <div v-for="(x, i) in lines" :key="i">
            <div class="addr">
              <div
                class="addr-list q-px-md q-py-sm cursor-pointer row items-center"
                v-if="x.isShow"
              >
                <span class="col" @click="changeExplesdHandler(x)">{{$t('v103.scheduledTrip.line')}}</span>
                <q-icon
                  @click="changeExplesdHandler(x)"
                  :name="!x.explsed ? 'keyboard_arrow_down' : 'keyboard_arrow_up'"
                  size="20px"
                />
              </div>
              <div
                class="q-mx-md"
                v-if="
                  x.explsed ||
                  (x.SubList && x.isShowChild && searchClone.searchKey.length > 0)
                "
              >
                <template v-for="(y, yi) in x.SubList">
                    <q-radio
                    class="addr-list q-px-md q-py-sm row items-center"
                    :key="yi"
                    v-if="y.isShow" v-model="searchClone.lineId" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="y.id" :label="y.name" size="sm" @update:model-value="changeCheckHandler(y, x,1)"/>
                  
                </template>
              </div>
            </div>
          </div>
        </template>   
        <template v-if="searchClone.startCityId==0"></template>
          <div v-for="(x, i) in startCitys" :key="i">
            <div class="addr">
              <div
                class="addr-list q-px-md q-py-sm cursor-pointer row items-center"
                v-if="x.isShow"
              >
                <span class="col" @click="changeExplesdHandler(x)">{{$t('v103.scheduledTrip.departurecity')}}</span>
                <q-icon
                  @click="changeExplesdHandler(x)"
                  :name="!x.explsed ? 'keyboard_arrow_down' : 'keyboard_arrow_up'"
                  size="20px"
                />
              </div>
              <div
                class="q-mx-md"
                v-if="
                  x.explsed ||
                  (x.SubList && x.isShowChild && searchClone.searchKey.length > 0)
                "
              >
                <template v-for="(y, yi) in x.SubList">
                  <q-radio class="addr-list q-px-md q-py-sm row items-center"
                    :key="yi"
                    v-if="y.isShow" v-model="searchClone.startCityId" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="y.id" :label="y.startCityName" size="sm" @update:model-value="changeCheckHandler(y, x,3)"/>
                </template>
              </div>
            </div>
          </div>
        
        
      </q-card>
      <q-card flat class="rounded-borders q-py-md q-mt-lg" v-if="searchClone.lineId>0&&searchClone.lineTeamId==0">
      <div class="text-subtitle1 text-weight-bold q-mx-md">{{$t('v103.scheduledTrip.allcommoditytype')}}</div>
        <div class="add q-mt-md" v-for="(x, i) in xilies" :key="i">
          <div class="addr">
            <div
              class="addr-list q-px-md q-py-sm cursor-pointer row items-center"
              v-if="x.isShow"
            >
              <span class="col" @click="changeExplesdHandler(x)">{{$t('v103.scheduledTrip.lineteam')}}</span>
              <q-icon
                @click="changeExplesdHandler(x)"
                :name="!x.explsed ? 'keyboard_arrow_down' : 'keyboard_arrow_up'"
                size="20px"
              />
            </div>
            <div
              class="q-mx-md"
              v-if="
                x.explsed ||
                (x.SubList && x.isShowChild && searchClone.searchKey.length > 0)
              "
            >
              <template v-for="(y, yi) in x.SubList">
                <q-radio class="addr-list q-px-md q-py-sm row items-center"
                :key="yi"
                v-if="y.isShow" v-model="searchClone.lineTeamId" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="y.id" :label="y.name" size="sm" @update:model-value="changeCheckHandler(y, x,2)"/>
              </template>
            </div>
          </div>
        </div>
      </q-card>

      <q-card flat class="rounded-borders q-mt-lg column no-padding">
        <template v-if="!searchClone.startDate&&!searchClone.endDate">
          <div v-for="(x, i) in dates" :key="i">
            <div class="addr">
              <div
                class="addr-list q-px-md q-py-md cursor-pointer row items-center"
                v-if="x.isShow"
              >
                <span class="col" @click="changeExplesdHandler(x)">{{$t('v103.scheduledTrip.startdate')}}</span>
                <q-icon
                  @click="changeExplesdHandler(x)"
                  :name="!x.explsed ? 'keyboard_arrow_down' : 'keyboard_arrow_up'"
                  size="20px"
                />
              </div>
              <div
                class="q-mx-md"
                v-if="
                  x.explsed ||
                  (x.SubList && x.isShowChild && searchClone.searchKey.length > 0)
                "
              >
                <template v-for="(y, yi) in x.SubList">
                  <q-radio class="addr-list q-px-md q-py-sm row items-center"
                    :key="yi"
                    v-if="y.isShow" v-model="datesId" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="y.id" :label="y.Name" size="sm" @update:model-value="changeCheckHandler(y, x,5)"/>
                </template>
              </div>
            </div>
          </div>
        </template>
        <div class="row bg-grey-3" v-if="!searchClone.startDate">
          <div
          class="q-px-md q-py-md"
          style="border-right: 1px solid #eee; border-radius: 0 !important"
          >
              <q-icon name="event" size="24px" />
          </div>
          <div class="row items-center justify-center col">
              <span class="text-grey-8">{{
              dateRange.from
                  ? `${dateRange.from} - ${dateRange.to}`
                  : $t('v103.scheduledTrip.screeningdate')
              }}</span>
              <q-popup-proxy :offset="[0, 0]" ref="qDateProxy">
              <div>
                  <q-date
                  v-model="dateRange"
                  :options="optionsFn"
                  range
                  @range-end="dateRangeHandler"
                  mask="YYYY/MM/DD"
                  ></q-date>
              </div>
              </q-popup-proxy>
          </div>
      </div>
      </q-card>

      <q-card flat class="rounded-borders q-pa-md q-mt-lg">
      <div class="text-subtitle1 text-weight-bold">{{$t('v103.scheduledTrip.screeningprice')}}（CNY）</div>
      <div class="q-mt-md text-grey-6 text-subtitle1">
          {{ searchClone.priceRange.min }} - {{ searchClone.priceRange.max }}
      </div>
      <q-range
          v-model="searchClone.priceRange"
          :min="1"
          :max="100000"
          :step="1"
          @change="testHandler"
          color="primary"
          class="q-mt-md"
      />
      </q-card>
      <q-card flat class="rounded-borders q-mt-lg overflow-hidden">
      <q-expansion-item
          expand-separator
          :label="$t('v103.scheduledTrip.journeytime')"
          class="text-subtitle1 text-weight-bold rounded-borders"
      >
        <q-radio class="addr-list q-px-md q-py-sm row items-center"
        v-for="(y, yi) in dayArray"
        :key="yi" v-model="DayId" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="y.id" :label="y.text" size="sm" @update:model-value="changeCheckHandler(y,dayArray,4)"/>
      </q-expansion-item>
      </q-card>
    </template>
  </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'
  import scheduledTripService from 'src/api/scheduledTrip'
  import { getStoreGetter } from '../../store/utils'
  import { UserGetter } from '../../store/modules/user/getters'
  export default defineComponent({
    components: { svgIcon, NCascader, NSelect },
    setup(props, context) {
      const $q = useQuasar()
      const qDateProxy = ref(null) as any
      const qDateProxy0 = ref(null) as any
      const qDateProxy1 = ref(null) as any
      const qDateProxy2 = ref(null) as any
      const qDateProxy3 = ref(null) as any
      const qDateProxy4 = ref(null) as any
      const qDateProxy5 = ref(null) as any
      const qDateProxy6 = ref(null) as any
      const qNameProxy = ref(null) as any
      const { locale, t } = useI18n()
      const data = reactive({
        datesId: 0,//日期
        DayId:0,//旅程天数
        xilies: [],//系列
        lines: [],//线路
        startCitys: [],//出发城市表
        searchItem: [],
        sites: [],//公司所在城市
        city: 0,//公司城市
        dates: [],//开始日期
        areaList: [],
        chosenAddress: [],//已选项
        goodsType: [],
        dateRange: null,//起止时间
        searchClone: null,
        dayArray: [
          {
            id: 1,
            min: 1,
            max: 1,
            text: "1"+t('v103.scheduledTrip.day'),
          },
          {
            id: 2,
            min: 2,
            max: 2,
            text: "2"+t('v103.scheduledTrip.day'),
          },
          {
            id: 3,
            min: 3,
            max: 3,
            text: "3"+t('v103.scheduledTrip.day'),
          },
          {
            id: 4,
            min: 4,
            max: 4,
            text: "4"+t('v103.scheduledTrip.day'),
          },
          {
            id: 5,
            min: 5,
            max: 5,
            text: "5"+t('v103.scheduledTrip.day'),
          },
          {
            id: 6,
            min: 6,
            max: 6,
            text: "6"+t('v103.scheduledTrip.day'),
          },
          {
            id: 7,
            min: 7,
            max: 8,
            text: "7-8"+t('v103.scheduledTrip.day'),
          },
          {
            id: 8,
            min: 9,
            max: 10,
            text: "9-10"+t('v103.scheduledTrip.day'),
          },
          {
            id: 9,
            min: 10,
            max: 1000,
            text: "10"+t('v103.scheduledTrip.above'),
          },
        ],
        sortNum: 1,
        userInfo: {} as any,
      })
      const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM)
      data.chosenAddress = JSON.parse(JSON.stringify(search.chosenAddress))
      data.searchClone = JSON.parse(JSON.stringify(search.msg))
      data.DayId = search.DayId
      data.datesId = search.datesId
      data.dayArray.forEach((x) => {
        x.checked = false;
      });
      data.dateRange = { from: data.searchClone.startDate, to: data.searchClone.endDate };
      data.userInfo = getStoreGetter<UserGetter>('user', 'getUser')
      const methods = {
        // 出发城市变更
        changeSite(e: number, option: any, pathValues: Array<any>) {
          if (pathValues) {
            if (pathValues.length > 0) {
              data.searchClone.cityId = pathValues[0].companyId
              methods.loadRecoItems()
            }
          }
        },
        // 删除目的地、商品类别、旅游时间
        removeChosen(x,i,type) {
          if(type==1||type==2){
            if(type==1){
              search.msg.lineId = 0
            }if(type==2){
              search.msg.lineTeamId = 0
            }
          }else if(type==3){
            search.msg.startCityId = 0
          }else if(type==4){
            search.DayId = 0
            search.msg.minTripDay = ""
            search.msg.maxTripDay = ""
          }else if(type==5){
            search.datesId = 0
            search.msg.startDate = ''
            search.msg.endDate = ''
          }else if(type==6){
            data.dateRange = null
            search.datesId = 0
            search.msg.startDate = ''
            search.msg.endDate = ''
          }
          search.chosenAddress.splice(i,1)
        },
        // 初始化出发城市
        initCityList() {
          methods.GetB2BSite()
          let d=new Date().getMonth()
          for(let i=0;i<3;i++){
                d++
                d=d>12?d-12:d
                let obj = {
                  Name: `${d}${t('v103.scheduledTrip.month')}`,
                  id: 1+i,
                  MM: d
                }
                data.dates.push(obj)
          }
          let arrList = function(arr){
            arr.forEach(item=>{
              item.isShow = true
              item.explsed = false
            })
          }
          arrList(data.dates)
          let list = []
          list.push({SubList: [],explsed: false,isShow:true})
          list[0].SubList = data.dates
          data.dates = list;
          return
          let jObj = JSON.parse(localStorage.getItem("baseifo"));
          jObj.AreaList.forEach((x) => {
            x.SubList.forEach((y) => {
              y.checked = false;
              y.explsed = false;
              y.isShow = true;
              if (y.SubList) {
                y.SubList.forEach((z) => {
                  z.checked = false;
                  z.explsed = false;
                  z.isShow = true;
                });
              }
            });
            data.areaList.push(...x.SubList);
          });
        },
         // 获取当前城市
        GetB2BSite(){
          let state=false;
          scheduledTripService.GetB2BSite({}).then(r => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              let arrList = function(arr){
                arr.forEach(item=>{
                  item.isShow = true
                  item.explsed = false
                })
              }
              arrList(r.data.data)
              let list = []
              list.push({SubList: [],explsed: false,isShow:true})
              list[0].SubList = r.data.data
              data.sites = list;
              if(data.userInfo){
                let rB_Branch_id = data.userInfo.salesBaseInfo
.rB_Branch_id;
                data.sites[0].SubList.forEach(item=>{
                  if(item.companyId==rB_Branch_id){
                    state = true;
                    data.city = item.companyId;
                    data.searchClone.cityId = item.cityId
                    search.msg.companyId =  data.city
                    // localStorage.setItem('site', data.city)
                    // localStorage.setItem('cityId', item.cityId)
                    methods.changeChosenHandler(item)
                  }
                })
                if(!state) {
                  state = true;
                  data.city = data.sites[0].SubList[0].companyId;
                  data.searchClone.cityId = data.sites[0].SubList[0].cityId
                  search.msg.companyId =  data.city
                  // localStorage.setItem('site', data.city)
                  // localStorage.setItem('cityId', data.searchClone.cityId)
                  methods.changeChosenHandler(data.sites[0].SubList[0],data.sites[0])
                }
                search.msg.cityId = data.searchClone.cityId
                methods.loadRecoItems()
              }else{
                message.errorMsg(r.data.message)
              }
            }
          }).catch(e => {
            message.errorMsg(e.message)
          })
        },
        // 系列
        loadRecoItems(){
          let param = {
            companyId: data.city,
            cityId: data.searchClone.cityId,
          }
          scheduledTripService.GetB2BGroupSearchItem(param).then(r => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              let arrList = function(arr){
                arr.forEach(item=>{
                  item.isShow = true
                  item.explsed = false
                })
              }
              arrList(r.data.data.line)
              arrList(r.data.data.startCity)
              let list = []
              let obj = {
                SubList: [],explsed: false,isShow:true
              }
              list.push(JSON.parse(JSON.stringify(obj)))
              list[0].SubList = r.data.data.line
              data.lines=JSON.parse(JSON.stringify(list))
              let list2 = []
              list2.push(JSON.parse(JSON.stringify(obj)))
              list2[0].SubList = r.data.data.startCity
              data.startCitys = list2
              data.startCitys.forEach(x=>{
                x.SubList.forEach(y=>{
                  data.chosenAddress.forEach((z,index)=>{
                    if(y.id!=z.id){
                      if(z.type==1){
                        search.chosenAddress.splice(index,1);
                      }
                      if(z.type==2){
                        search.chosenAddress.splice(index,1);
                      }
                      if(z.type==3){
                        search.chosenAddress.splice(index,1);
                      }
                    }
                  })
                })
              })
            }
          }).catch(e => {
            message.errorMsg(e.message)
          })
        },
        // 旅游时间
        changeExplesdHandler(x) {
          x.explsed = !x.explsed;
          if (x.SubList) {
          }
        },
        // 商品类型
        changeGoodTypeHandler(x) {
          if (x.checked && data.searchClone.teamType.indexOf(x.Id) == -1) {
            data.searchClone.teamType.push(x.Id);
          } else if (!x.checked && data.searchClone.teamType.indexOf(x.Id) != -1) {
            let i = data.searchClone.teamType.findIndex((item) => item == x.Id);
            data.searchClone.teamType.splice(i, 1);
          }
        },
        // 出发地
        changeCheckHandler(x, p = null,type) {
          if(!type){
            data.city = x.companyId;
            search.msg.cityId = data.searchClone.cityId
            methods.loadRecoItems()
          }else if(type==1){
            let arrList = function(arr){
                arr.forEach(item=>{
                  item.isShow = true
                  item.explsed = false
                })
              }
            arrList(x.lineTeam)
            let list = []
            list.push({SubList: [],explsed: false,isShow:true})
            list[0].SubList = x.lineTeam
            data.xilies = list
          }
          setTimeout(()=>{
            methods.changeChosenHandler(x,p,type);
          },200)
        },
        changeChosenHandler(x,p,type) {
          let obj= {}
          if(!type){
            obj= {
              Name: x.siteName,
              Id: x.cityId,
              checked:  x.checked,
              cityId :  x.cityId, 
              companyId: x.companyId,
              companyName: x.companyName,
              explsed: x.explsed,
              isShow: x.isShow,
              province: x.province,
              siteName: x.siteName,
              type: type
            }
            search.chosenAddress.splice(0,1);
            if($q.platform.is.mobile){
              if(qDateProxy0.value) qDateProxy0.value.hide()
            }
            setTimeout(()=>{
              search.chosenAddress.unshift(obj);
            },200)
          }else if(type==1||type==2){
            obj= {
              Name: x.name,
              Id: x.id,
              type: type
            }
            // let status = false
            p.SubList.forEach(y=>{
              search.chosenAddress.forEach((z,index)=>{
                if(y.id==z.Id&&type==z.type){
                  // status = true
                  search.chosenAddress.splice(index,1);
                }
              })
            })
            if(type==1){
              search.msg.lineId = data.searchClone.lineId
            }if(type==2){
              search.msg.lineTeamId = data.searchClone.lineTeamId
            }
            if($q.platform.is.mobile){
              if(type==1&&qDateProxy1.value) qDateProxy1.value.hide()
              if(type==2&&qDateProxy2.value) qDateProxy2.value.hide()
            }
            setTimeout(()=>{
              search.chosenAddress.push(obj);
            },200)
          }else if(type==3){
            obj= {
              Name: x.startCityName,
              Id: x.id,
              type: type
            }
            p.SubList.forEach(y=>{
              search.chosenAddress.forEach((z,index)=>{
                if(y.id==z.Id&&type==z.type){
                  search.chosenAddress.splice(index,1);
                }
              })
            })
            search.msg.startCityId = data.searchClone.startCityId
            if($q.platform.is.mobile){
              if(qDateProxy3.value) qDateProxy3.value.hide()
            }
            setTimeout(()=>{
              search.chosenAddress.push(obj);
            },500)
          }else if(type==4){
            obj= {
              Name: x.text,
              Id: x.id,
              min: x.min,
              max: x.max,
              type: type
            }
            p.forEach(y=>{
              search.chosenAddress.forEach((z,index)=>{
                if(y.id==z.Id&&type==z.type){
                  search.chosenAddress.splice(index,1);
                }
              })
            })
            search.DayId = data.DayId
            search.msg.maxTripDay = x.min
            search.msg.maxTripDay = x.max
            if($q.platform.is.mobile){
              if(qDateProxy4.value) qDateProxy4.value.hide()
            }
            setTimeout(()=>{
              search.chosenAddress.push(obj);
              methods.changeTripDayHandler()
            },200)
          }else if(type==5){
            obj= {
              Name: x.Name,
              Id: x.id,
              type: type,
              d: new Date().getFullYear()+'/'+x.MM+'/01'
            }
            p.SubList.forEach(y=>{
              search.chosenAddress.forEach((z,index)=>{
                if(y.id==z.Id&&type==z.type){
                  search.chosenAddress.splice(index,1);
                }
              })
            })
            if($q.platform.is.mobile){
              if(qDateProxy5.value) qDateProxy5.value.hide()
            }
            setTimeout(()=>{
              search.datesId = x.id
              search.msg.startDate = obj.d
              search.chosenAddress.push(obj);
            },200)
          }else if(type==6){
            obj= {
              Name: x.startDate+'-'+x.endDate,
              startDate: x.startDate,
              type: type,
            }
            search.chosenAddress.forEach((z,index)=>{
              if(type==z.type){
                search.chosenAddress.splice(index,1);
              }
            })
            if($q.platform.is.mobile){
              if(qDateProxy6.value) qDateProxy6.value.hide()
            }
            // search.msg.startDate = x.startDate
            // search.msg.startDate = x.endDate
            setTimeout(()=>{
              search.chosenAddress.push(obj);
            },200)
          }
          if(p){
            p.explsed = false;
          }
        },
        // 价格区间
        changeTripDayHandler() {
          data.searchClone.minTripDay = "0";
          data.searchClone.maxTripDay = "0";
          data.dayArray.forEach((x) => {
            if (x.id==data.DayId) {
              data.searchClone.minPrice =
                data.searchClone.minPrice > x.min ? x.min : data.searchClone.minPrice;
              data.searchClone.maxPrice =
                data.searchClone.maxPrice < x.max ? x.max : data.searchClone.maxPrice;
            }
          });
          data.searchClone.minTripDay =
            data.searchClone.minTripDay == "0" ? "" : data.searchClone.minTripDay;
          data.searchClone.maxTripDay =
            data.searchClone.maxTripDay == "0" ? "" : data.searchClone.maxTripDay;
        },
        testHandler(e) {
          data.searchClone.minPrice = e.min;
          data.searchClone.maxPrice = e.max;
          search.msg.priceRange.min = e.min;
          search.msg.priceRange.max = e.max;
          search.msg.minPrice = e.min;
          search.msg.maxPrice = e.max;
          // methods.queryList()
        },
        queryList(){
          search.RetrievalState=true
        },
        // 选择时间区间
        optionsFn(cd) {
          return (
            cd >=
            date.formatDate(date.addToDate(new Date(), { days: 1 }), "YYYY/MM/DD")
          );
        },
        dateRangeHandler(e) {
          let startDate = `${e.from.year}/${e.from.month}/${e.from.day}`;
          let endDate = `${e.to.year}/${e.to.month}/${e.to.day} `;
          if (qDateProxy.value) qDateProxy.value.hide()
          let obj= {
            startDate: startDate,
            endDate: endDate,
          }
          search.msg.startDate = startDate
          search.msg.endDate = endDate
          methods.changeChosenHandler(obj,null,6)
        },
        // 商品类型
        initGoods() {
          data.goodsType.push({
            Id: 1,
            Name: t('v103.scheduledTrip.sightseeingitinerary'),
            explsed: $q.platform.is.desktop? false:true,
            SubList: [
              {
                Id: 2,
                Name: t('v103.scheduledTrip.daytrip'),
                checked: false,
              },
              {
                Id: 3,
                Name: t('v103.scheduledTrip.multiday'),
                checked: false,
              },
            ],
          });
        },
        // 搜寻关键词
        changeAddrSearchHandler(v) {
          search.RetrievalState = true
        },
      }
      watch(data.searchClone, (n, o) => {
        // search.searchClone = JSON.parse(JSON.stringify(n))
      },{deep: true})
      watch(search, (n, o) => {
        data.searchClone = JSON.parse(JSON.stringify(n.msg))
        data.chosenAddress = JSON.parse(JSON.stringify(n.chosenAddress))
        if(n.DayId==0){
          data.DayId = n.DayId
        }
        if(n.datesId==0){
          data.datesId = n.datesId
          data.searchClone.startDate = ""
        }
        data.dateRange = { from: n.msg.startDate, to: n.msg.endDate };
        data.searchClone.startDate = n.msg.startDate
        data.searchClone.endDate = n.msg.endDate
        if(n.deleteChosen){
          data.areaList.forEach(x=>{
            x.SubList.forEach(y=>{
              if(x.Id==n.deleteChosen.Pid&&y.Id==n.deleteChosen.Id){
                methods.changeCheckHandler(y,x)
              }
            })
          })
        }
      },{deep: true})
      const searchCnt = computed(() => {
        let setCnt = 2
        if ($q.platform.is.mobile) {
            setCnt = setCnt+search.chosenAddress.length-1
        }
        return setCnt
      })
      
      methods.initCityList();
      methods.initGoods();
      return {
        ...toRefs(data),
        ...methods,
        search,
        searchCnt,
        qDateProxy,
        qDateProxy0,
        qDateProxy1,
        qDateProxy2,
        qDateProxy3,
        qDateProxy4,
        qDateProxy5,
        qDateProxy6,
        qNameProxy,
      }
    }
  })
  </script>
  
  <style>
    .SearchMain .SearchMain-height .q-field__control {
      height: 40px;
      min-height: 40px !important;
    }
  </style>
  