<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 v-if="chosenAddress.length==0" class="q-px-sm q-py-xs">{{$t('v103.scheduledTrip.screeningtitle')}}</div>
                <template v-else>
                  <q-chip
                  v-for="(x, i) in chosenAddress"
                  size="12px"
                  :key="i"
                  removable
                  outline
                  color="grey"
                  :label="x.Name"
                  @remove="removeChosen(x,i,1)"
                />
                  </template>
                <q-popup-proxy :offset="[0, 10]">
                  <div class="bg-white q-pb-lg" style="width: 300px;">
                    <div class="q-px-lg q-py-md fz18">{{$t('v103.scheduledTrip.screeningtitle')}}</div>
                    <div v-for="(x, i) in areaList" :key="i">
                      <div class="addr">
                        <div
                          class="addr-list q-px-md q-py-sm cursor-pointer row items-center"
                          v-if="x.isShow"
                        >
                          <q-checkbox
                            indeterminate-value="half"
                            @update:model-value="changeCheckHandler(x)"
                            v-model="x.checked"
                            size="xs"
                          />
                          <span class="col" @click="changeExplesdHandler(x)">{{
                            x.Name
                          }}</span>
                          <q-icon
                            @click="changeExplesdHandler(x)"
                            v-if="
                            searchClone.searchKey.length == 0 ||
                              (searchClone.searchKey.length > 0 && x.isShowChild)
                            "
                            :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">
                            <div
                              class="addr-list q-px-md q-py-sm row items-center"
                              :key="yi"
                              v-if="y.isShow"
                            >
                            
                              <q-checkbox
                                @update:model-value="changeCheckHandler(y, x)"
                                v-model="y.checked"
                                size="xs"
                              />
                              <span class="col">{{ y.Name }}</span>
                            </div>
                          </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 v-if="searchClone.teamType.length==0" class="q-px-sm q-py-xs">{{$t('v103.scheduledTrip.allcommoditytype')}}</div>
                <template v-else>
                  <q-chip
                  v-for="(x, i) in searchClone.teamType"
                  size="12px"
                  :key="i"
                  removable
                  outline
                  color="grey"
                  :label="x==2?$t('v103.scheduledTrip.daytrip'):$t('v103.scheduledTrip.multiday')"
                  @remove="removeChosen(x,i,2)"
                />
                  </template>
                <q-popup-proxy :offset="[0, 10]">
                  <div class="bg-white q-pb-lg" style="width: 300px;">
                    <div class="q-px-lg q-py-md fz18">{{$t('v103.scheduledTrip.allcommoditytype')}}</div>
                    <div class="add" v-for="(x, i) in goodsType" :key="i">
                      <div class="q-mx-md" v-if="x.explsed">
                      <div
                          class="addr-list q-px-md q-py-sm row items-center"
                          v-for="(y, yi) in x.SubList"
                          :key="yi"
                      >
                          <q-checkbox
                          v-model="y.checked"
                          size="xs"
                          @update:model-value="changeGoodTypeHandler(y)"
                          />
                          <span class="col">{{ y.Name }}</span>
                      </div>
                      </div>
                  </div>
                  </div>
                </q-popup-proxy>
              </div>
              <div class="q-my-md row no-padding bg-grey-3">
                <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')
                    }}</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>
              <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"
                    @input="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 v-if="dayArray.findIndex((x)=>{ return x.checked})" class="q-px-sm q-py-xs">{{$t('v103.scheduledTrip.journeytime')}}</div>
                <template v-else>
                  <template v-for="(x, i) in dayArray">
                    <q-chip
                      v-if="x.checked"
                      size="12px"
                      :key="i"
                      removable
                      outline
                      color="grey"
                      :label="x.text"
                      @remove="removeChosen(x,i,3)"
                    />
                  </template>
                  
                </template>
                <q-popup-proxy :offset="[0, 10]">
                  <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"
                        v-for="(y, yi) in dayArray"
                        :key="yi"
                        >
                        <q-checkbox
                            v-model="y.checked"
                            size="xs"
                            @update:model-value="changeTripDayHandler"
                        />
                        <span class="col text-grey-8" style="font-weight: 400">{{
                            y.text
                        }}</span>
                        </div>
                  </div>
                </q-popup-proxy>
                
              </div>
            </q-card>
          </q-popup-proxy>
        </q-btn>
        <q-btn color="primary" unelevated :label="$t('query')" />
  </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>
        <q-input
          v-model="searchClone.searchKey"
          type="text"
          standout
          :placeholder="$t('v103.scheduledTrip.searchinput')"
          class="q-ma-md"
          @update:model-value="changeAddrSearchHandler"
        />
        <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)">公司所在地</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)">线路</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)">出发城市</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)">系列</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)">出发日期</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"
          @input="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 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){
            if(data.chosenAddress.length==1){
              search.deleteChosen = null as any
            }else{
              search.deleteChosen = JSON.parse(JSON.stringify(x))
            }
            data.chosenAddress.splice(i,1)
            // search.chosenAddress = JSON.parse(JSON.stringify(data.chosenAddress))
            data.chosenAddress.length==0&&data.areaList.forEach(y=>{
              
              y.checked = false
              y.SubList.forEach(z=>{
                z.checked = false
              })
            })
          }else if(type==2){
            data.goodsType.forEach(y=>{
              y.SubList.forEach(z=>{
                if(x==z.Id){
                  z.checked = false
                }
              })
            })
            data.searchClone.teamType.splice(i,1)
            // search.msg = JSON.parse(JSON.stringify(data.searchClone))
          }else if(type==3){
            data.dayArray[i].checked = false
          }
        },
        // 初始化出发城市
        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}月`,
                  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,x)
                  }
                })
                
                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);
            setTimeout(()=>{
              search.chosenAddress.unshift(obj);
            },200)
          }else if(type==1||type==2){
            obj= {
              Name: x.name,
              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);
                }
              })
            })
            if(type==1){
              search.msg.lineId = data.searchClone.lineId
            }if(type==2){
              search.msg.lineTeamId = data.searchClone.lineTeamId
            }
            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
            setTimeout(()=>{
              search.chosenAddress.push(obj);
            },200)
          }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
            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);
                }
              })
            })
            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);
              }
            })
            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) {
          search.msg.minPrice = data.searchClone.minPrice = e.min;
          search.msg.maxPrice = data.searchClone.maxPrice = e.max;
        },
        // 选择时间区间
        optionsFn(cd) {
          return (
            cd >=
            date.formatDate(date.addToDate(new Date(), { days: 1 }), "YYYY/MM/DD")
          );
        },
        dateRangeHandler(e) {
          data.searchClone.startDate = `${e.from.year}/${e.from.month}/${e.from.day}`;
          data.searchClone.endDate = `${e.to.year}/${e.to.month}/${e.to.day} `;
          if (qDateProxy.value) qDateProxy.value.hide()
          let obj= {
            startDate: data.searchClone.startDate,
            endDate: data.searchClone.endDate,
          }
          search.msg.startDate = data.searchClone.startDate
          search.msg.endDate = data.searchClone.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.chosenAddress = []
          data.areaList.forEach((x) => {
            x.isShow = x.Name.indexOf(v) != -1;
            x.isShowChild = false;
            x.SubList.forEach((y) => {
              y.isShow = y.Name.indexOf(v) != -1;
              if (y.isShow) {
                x.isShow = true;
                x.isShowChild = 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 = ""
        }
        if(!n.msg.startDate&&!n.msg.endDate){
          data.dateRange = { from: n.msg.startDate, to: 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 = 0
        if ($q.platform.is.mobile) {
          if (search.chosenAddress.length>0) setCnt++
          if (search.msg.teamType.length>0) setCnt++
          if (search.msg.priceRange.min) setCnt++
          if (data.dateRange.from) setCnt++
          let days = data.dayArray.map(x=>x.checked)
          if (days.indexOf(true)!=-1) setCnt++
        }
        return setCnt
      })
      
      methods.initCityList();
      methods.initGoods();
      return {
        ...toRefs(data),
        ...methods,
        searchCnt,
        qDateProxy,
        qNameProxy,
      }
    }
  })
  </script>
  
  <style>
    .SearchMain .SearchMain-height .q-field__control {
      height: 40px;
      min-height: 40px !important;
    }
  </style>
  