<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="companyId"
                          checked-icon="task_alt"
                          unchecked-icon="panorama_fish_eye"
                          :val="y.companyId"
                          :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="search.msg.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="search.msg.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')}}（{{domain==`id.oytour`?'IDR':'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-else>
    <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="search.msg.searchKey"
        type="text"
        standout
        :placeholder="$t('v103.scheduledTrip.searchinput')"
        class="q-ma-md"
        @keypress.enter="queryList"
      />
      <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="companyId"
                checked-icon="task_alt"
                unchecked-icon="panorama_fish_eye"
                :val="y.companyId"
                :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="search.msg.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">
        <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="search.msg.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>
      </template>
    </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="search.msg.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')}}（{{domain==`id.oytour`?'IDR':'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, //公司城市
      companyId: 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);
    const domain = inject(DirtionmaryHelper.DOMAIN_NAME);
    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 = {
      // 删除目的地、商品类别、旅游时间
      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;
      },
      // 获取当前城市
      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 });
              if (data.userInfo) {
                let rB_Branch_id = data.userInfo.salesBaseInfo.rB_Branch_id;
                search.msg.companyId = data.rB_Branch_id;
                if (domain == "id.oytour") {
                  search.msg.companyId = 1252;
                  list[0].SubList = r.data.data.filter(
                    (branch) => branch.companyId == 1252
                  );
                  list[0].SubList[0].siteName = "Jakarta";
                } else {
                  list[0].SubList = r.data.data;
                  search.msg.companyId = data.rB_Branch_id;
                }
                data.companyId = search.msg.companyId;
                search.RetrievalState = true;
                data.sites = list;
                data.sites[0].SubList.forEach((item) => {
                  if (item.companyId == rB_Branch_id) {
                    state = true;
                    data.city = item.companyId;
                    data.searchClone.cityId = item.cityId;

                    // 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.companyId;
                  // 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) {
          search.msg.companyId = x.companyId;
          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;
          search.msg.lineId = x.id;
        }
        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 = x.id;
          }
          if (type == 2) {
            search.msg.lineTeamId = x.id;
          }
          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 = x.id;
          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.minTripDay = 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,
            min: new Date().getFullYear() + "/" + x.MM + "/01",
            max:
              new Date().getFullYear() +
              "/" +
              x.MM +
              "/" +
              new Date(new Date().getFullYear(), x.MM, 0).getDate(),
          };
          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();
          }
          search.datesId = x.id;
          search.msg.startDate = obj.min;
          search.msg.endDate = obj.max;
          search.chosenAddress.push(obj);
        } 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);
        }
        search.RetrievalState = true;
        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,
      domain,
    };
  },
});
</script>

<style>
.SearchMain .SearchMain-height .q-field__control {
  height: 40px;
  min-height: 40px !important;
}
</style>
