<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="searchAdd.name" 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="
                              searchAdd.name.length == 0 ||
                              (searchAdd.name.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 && searchAdd.name.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="msg.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 msg.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">
                    {{ msg.priceRange.min }} - {{ msg.priceRange.max }}
                </div>
                <q-range
                    v-model="msg.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="text-subtitle1 text-weight-bold q-mx-md">{{$t('v103.scheduledTrip.screeningtitle')}}</div>
        <q-input
          v-model="searchAdd.name"
          type="text"
          standout
          :placeholder="$t('v103.scheduledTrip.searchinput')"
          class="q-ma-md"
          @update:model-value="changeAddrSearchHandler"
        />
        <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="
                  searchAdd.name.length == 0 ||
                  (searchAdd.name.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 && searchAdd.name.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>
      </q-card>
      <q-card flat class="rounded-borders q-py-md q-mt-lg">
      <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 goodsType" :key="i">
          <div
          class="addr-list q-px-md q-py-sm cursor-pointer row items-center"
          >
          <span class="col" @click="changeExplesdHandler(x)">{{
              x.Name
          }}</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">
          <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>
      </q-card>

      <q-card flat class="rounded-borders q-mt-lg row no-padding">
      <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>
      </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">
          {{ msg.priceRange.min }} - {{ msg.priceRange.max }}
      </div>
      <q-range
          v-model="msg.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"
      >
          <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>
      </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'
  export default defineComponent({
    components: { svgIcon, NCascader, NSelect },
    setup() {
      const $q = useQuasar()
      const qDateProxy = ref(null) as any
      const qNameProxy = ref(null) as any
      const { locale, t } = useI18n()
      const data = reactive({
        searchAdd: {
          name: "",
          value: 0,
        },
        areaList: [],
        chosenAddress: [],
        goodsType: [],
        dateRange: null,
        msg: 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,
      })
      const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM)
      data.chosenAddress = JSON.parse(JSON.stringify(search.chosenAddress))
      data.msg = JSON.parse(JSON.stringify(search.msg))
      data.dayArray.forEach((x) => {
        x.checked = false;
      });
      data.dateRange = { from: data.msg.startDate, to: data.msg.endDate };
      
      
      const methods = {
        // 删除目的地、商品类别、旅游时间
        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.msg.teamType.splice(i,1)
            search.msg = JSON.parse(JSON.stringify(data.msg))
          }else if(type==3){
            data.dayArray[i].checked = false
          }
        },
        // 初始化目的地
        initAreaList() {
          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);
          });
        },
        // 旅游时间
        changeExplesdHandler(x) {
          x.explsed = !x.explsed;
          if (x.SubList) {
          }
        },
        // 商品类型
        changeGoodTypeHandler(x) {
          if (x.checked && data.msg.teamType.indexOf(x.Id) == -1) {
            data.msg.teamType.push(x.Id);
          } else if (!x.checked && data.msg.teamType.indexOf(x.Id) != -1) {
            let i = data.msg.teamType.findIndex((item) => item == x.Id);
            data.msg.teamType.splice(i, 1);
          }
        },
        // 目的地
        changeCheckHandler(x, p = null) {
          if(x.checked=='half'){
            x.checked = true
          }else if(x.checked){
            x.checked = false
          }else if(!x.checked){
            x.checked = true
          }
          if (p) {
            let t = p.SubList.filter((x) => x.checked);
            p.checked = t.length == p.SubList.length ? true : t.length == 0 ? false : "half";
              methods.changeChosenHandler(x,p.Id);
          } else {
            x.SubList.forEach((item) => {
              item.checked = x.checked;
              methods.changeChosenHandler(item,x.Id);
            });
          }
        },
        changeChosenHandler(x,Pid) {
          let i = search.chosenAddress.findIndex((item) => item.Id == x.Id) ?? -1;
          if (!x.checked) {
            if (i > -1) {
              search.chosenAddress.splice(i, 1);
            }
          } else {
            if (i == -1) {
              x.Pid = Pid
              search.chosenAddress.push(x);
            }
          }
        },
        // 价格区间
        changeTripDayHandler() {
          data.msg.minTripDay = "0";
          data.msg.maxTripDay = "0";
          data.dayArray.forEach((x) => {
            if (x.checked) {
              data.msg.minPrice =
                data.msg.minPrice > x.min ? x.min : data.msg.minPrice;
              data.msg.maxPrice =
                data.msg.maxPrice < x.max ? x.max : data.msg.maxPrice;
            }
          });
          data.msg.minTripDay =
            data.msg.minTripDay == "0" ? "" : data.msg.minTripDay;
          data.msg.maxTripDay =
            data.msg.maxTripDay == "0" ? "" : data.msg.maxTripDay;
        },
        testHandler(e) {
          data.msg.minPrice = e.min;
          data.msg.maxPrice = e.max;
        },
        // 选择时间区间
        optionsFn(cd) {
          return (
            cd >=
            date.formatDate(date.addToDate(new Date(), { days: 1 }), "YYYY/MM/DD")
          );
        },
        dateRangeHandler(e) {
          data.msg.startDate = `${e.from.year}/${e.from.month}/${e.from.day}`;
          data.msg.endDate = `${e.to.year}/${e.to.month}/${e.to.day} `;
          if (qDateProxy.value) qDateProxy.value.hide()
        },
        // 商品类型
        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.msg, (n, o) => {
        search.msg = JSON.parse(JSON.stringify(n))
      },{deep: true})
      watch(search, (n, o) => {
        data.chosenAddress = JSON.parse(JSON.stringify(n.chosenAddress))
        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.initAreaList();
      methods.initGoods();
      return {
        ...toRefs(data),
        ...methods,
        searchCnt,
        qDateProxy,
        qNameProxy,
      }
    }
  })
  </script>
  
  <style>
    .SearchMain .SearchMain-height .q-field__control {
      height: 40px;
      min-height: 40px !important;
    }
  </style>
  