<template>
  <div class="rounded-borders bg-white row items-center q-pa-md">
    <q-select
      v-if="$q.platform.is.desktop"
      style="min-width: 190px"
      unelevated
      v-model="searchClone.CarType"
      dense
      :options="CharteredBusType"
      emit-value
      option-label="name"
      option-value="id"
      map-options
      :label="$t('v102.CharteredBus.baochetype')"
      standout
      @update:model-value="getCarType"
    />
    <n-cascader
      v-if="$q.platform.is.desktop"
      class="col-2 no-border q-ml-lg"
      @update:value="changearea"
      v-model:value="cascader.addressValue"
      size="large"
      :placeholder="$t('hotel.area')"
      clearable
      check-strategy="all"
      :options="provinces"
      value-field="ID"
      label-field="Name"
      remote
      cascade
    />
    <n-cascader
      v-if="$q.platform.is.desktop && searchClone.CarType != 3"
      class="col-2 no-border q-ml-lg"
      @update:value="changeareaAirport"
      v-model:value="cascader.AirportValue"
      size="large"
      :placeholder="$t('v102.CharteredBus.jiansuojichang')"
      clearable
      check-strategy="all"
      :options="AirportList"
      value-field="ID"
      label-field="Name"
      remote
      cascade
    />
    <q-field
      v-if="$q.platform.is.desktop"
      stack-label
      :label="$t('daterange')"
      standout
      class="q-ml-lg col-2"
      style="min-width: 190px"
      dense
    >
      <div class="self-center full-width no-outline" tabindex="0">
        {{ searchClone.Q_Date }}
      </div>
      <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
        <q-date
          v-model="searchClone.Q_Date"
          :options="optionsFn"
          mask="YYYY/MM/DD"
          @update:model-value="dateRangeHandler"
        ></q-date>
      </q-popup-proxy>
    </q-field>
    <div class="col"></div>
    <q-btn unelevated class="bg-grey-3 hover q-mr-md" :title="$t('morequery')">
      <q-badge
        rounded
        class="din bg-red-2 text-red-14 text-weight-bold"
        floating
        :label="searchCnt"
        v-if="searchCnt > 0"
      />
      <svg-icon
        color="dark"
        icon="Text/Filter.svg"
        :tips="$t('morequery')"
        :size="20"
      ></svg-icon>
      <q-tooltip>{{ $t("morequery") }}</q-tooltip>
      <q-popup-proxy
        class="no-shadow"
        style="box-shadow: 0 0 50px #ddd !important"
        :offset="[0, 20]"
        :model-value="canHide"
      >
        <q-card class="q-pa-md rounded-borders" style="width: 300px">
          <div class="q-mb-md text-subtitle2">{{ $t("morequery") }}</div>
          <div class="q-my-md" v-if="$q.platform.is.mobile">
            <q-select
              v-if="$q.platform.is.desktop"
              style="min-width: 190px"
              unelevated
              v-model="searchClone.CarType"
              dense
              :options="CharteredBusType"
              emit-value
              option-label="name"
              option-value="id"
              map-options
              :label="$t('v102.CharteredBus.baochetype')"
              standout
            />
          </div>
          <div class="q-my-md" v-if="$q.platform.is.mobile">
            <n-cascader
              class="col-2 no-border"
              @update:value="changearea"
              v-model:value="cascader.addressValue"
              size="large"
              :placeholder="$t('hotel.area')"
              clearable
              check-strategy="all"
              :options="provinces"
              value-field="ID"
              label-field="Name"
              remote
              cascade
            />
          </div>
          <div class="q-my-md" v-if="$q.platform.is.mobile">
            <q-field
              stack-label
              :label="$t('daterange')"
              standout
              class="col-2"
              style="min-width: 190px"
              dense
            >
              <div class="self-center full-width no-outline" tabindex="0">
                {{ searchClone.Q_Date }}
              </div>
              <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
                <q-date
                  v-model="searchClone.Q_Date"
                  :options="optionsFn"
                  mask="YYYY/MM/DD"
                  @update:model-value="dateRangeHandler"
                ></q-date>
              </q-popup-proxy>
            </q-field>
          </div>
          <div class="q-my-md" v-if="$q.platform.is.mobile && searchClone.CarType != 3">
            <n-cascader
              class="no-border"
              @update:value="changeareaAirport"
              v-model:value="cascader.AirportValue"
              size="large"
              :placeholder="$t('hotel.area')"
              clearable
              check-strategy="all"
              :options="AirportList"
              value-field="ID"
              label-field="Name"
              remote
              cascade
            />
          </div>
          <div class="q-my-md row items-center">
            <q-input
              v-model="searchClone.Q_SPeopleNum"
              class="col q-mr-md"
              mask="#"
              reverse-fill-mask
              dense
              type="text"
              standout
              :label="$t('v102.CharteredBus.qishirenshu')"
            />
            <q-input
              v-model="searchClone.Q_EPeopleNum"
              class="col"
              dense
              mask="#"
              reverse-fill-mask
              ftype="text"
              standout
              :label="$t('v102.CharteredBus.jiezhirenshu')"
            />
          </div>
          <div class="row items-center">
            <q-input
              v-model="searchClone.Q_SPrice"
              class="col q-mr-md"
              mask="#.##"
              reverse-fill-mask
              dense
              type="text"
              standout
              :label="$t('hotel.minPrice')"
            />
            <q-input
              v-model="searchClone.Q_EPrice"
              class="col"
              dense
              mask="#.##"
              reverse-fill-mask
              ftype="text"
              standout
              :label="$t('hotel.maxPrice')"
            />
          </div>
        </q-card>
      </q-popup-proxy>
    </q-btn>
    <q-btn
      v-if="$q.platform.is.desktop"
      color="primary"
      unelevated
      :label="$t('query')"
      @click="setSearchHandler"
    />
    <q-btn
      v-else
      color="primary"
      :round="$q.platform.is.mobile"
      :dense="$q.platform.is.mobile"
      :icon="$q.platform.is.mobile ? 'search' : ''"
      unelevated
      :label="$q.platform.is.mobile ? '' : $t('query')"
      @click="setSearchHandler"
    />
    <template v-if="b2bUserInfo && b2bUserInfo.groupId == 2">
      <q-btn
        class="q-ml-sm"
        color="primary"
        unelevated
        :label="$t('v102.CharteredBus.td')"
        @click="goUrl"
      />
    </template>
  </div>
</template>

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

    return {
      qDateProxy,
      searchCnt,
      b2bUserInfo,
      ...toRefs(data),
      ...methods,
    };
  },
};
</script>

<style></style>
