<template>
  <div
    class="items-start travel-list"
    :class="$q.platform.is.desktop ? 'row q-mt-lg' : 'colmuns'"
  >
    <!-- 移动端 -->
    <div v-if="$q.platform.is.mobile">
      <div class="flex">
        <!-- <div @click="showAddress = true" class="nav-item">
          目的地<i
            class="iconfont iconarrowdown text-grey-6"
            style="margin-top: 3px; margin-left: 4px"
          ></i>
        </div> -->
        <div @click="showCategory = true" class="nav-item">
          商品類別<i
            class="iconfont iconarrowdown text-grey-6"
            style="margin-top: 3px; margin-left: 4px"
          ></i>
        </div>
        <div @click="showDate = true" class="nav-item">
          旅程時間<i
            class="iconfont iconarrowdown text-grey-6"
            style="margin-top: 3px; margin-left: 4px"
          ></i>
        </div>
        <div @click="showCity = true" class="nav-item">
          出发地<i
            class="iconfont iconarrowdown text-grey-6"
            style="margin-top: 3px; margin-left: 4px"
          ></i>
        </div>
        <div @click="showPrice = true" class="nav-item">
          價錢/时间<i
            class="iconfont iconarrowdown text-grey-6"
            style="margin-top: 3px; margin-left: 4px"
          ></i>
        </div>
      </div>
      <popup mode="top" v-model="showAddress">
        <q-card flat class="rounded-borders q-py-md">
          <div class="text-subtitle1 text-weight-bold q-mx-md">篩選目的地</div>
          <!-- <q-input
            v-model="msg.searchKey"
            type="text"
            standout
            placeholder="蒐索關鍵字"
            class="q-ma-md"
            @blur="changeAddrSearchHandler"
          /> -->
          <!-- <q-tree
          ref="area"
          :nodes="areaList"
          no-connectors
          node-key="Id"
          label-key="Name"
          tick-strategy="leaf"
          @update:ticked="handleAreaTicked"
          :ticked="areaTicked"
          text-color="#666"
          no-nodes-label=" "
          no-results-label=" "
        /> -->
        </q-card>
      </popup>

      <popup mode="top" v-model="showCategory">
        <q-card flat class="rounded-borders q-py-md q-mt-lg">
          <div class="text-subtitle1 text-weight-bold q-mx-md">所有類別</div>
          <q-tree
            ref="category"
            :nodes="goodsType"
            no-connectors
            node-key="Id"
            label-key="Name"
            tick-strategy="leaf"
            @update:ticked="handleTicked"
            :ticked="ticked"
          />
        </q-card  ></popup>
        
      <popup mode="top" v-model="showCity">
        <q-card flat class="rounded-borders q-py-md q-mt-lg">
          <div class="text-subtitle1 text-weight-bold q-mx-md">出发地</div>
          <div
            class="addr-list q-px-md q-py-sm row items-center"
            v-for="(y, yi) in CityList"
            :key="yi"
          >
            <q-checkbox v-model="y.checked" size="xs" @input="changeTripDayHandler(1)" />
            <span
              class="col text-grey-8 text-subtitle2 text-regular q-mt-xs"
              style="font-weight: 400"
            >
              {{ y.CityName }}
            </span>
          </div>
        </q-card  >
      </popup>
      <popup mode="top" v-model="showDate">
        <q-card flat class="rounded-borders q-mt-lg overflow-hidden">
          <div class="q-my-sm q-mx-lg f20 bold">旅程時間</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" @input="changeTripDayHandler" />
            <span
              class="col text-grey-8 text-subtitle2 text-regular q-mt-xs"
              style="font-weight: 400"
            >
              {{ y.text }}
            </span>
          </div>
        </q-card>
      </popup>
      <popup mode="top" v-model="showPrice">
        <q-card flat class="rounded-borders q-pa-md q-mt-lg">
          <div class="text-subtitle1 text-weight-bold">價錢篩選（CNY）</div>
          <div class="q-mt-md text-grey-6 text-subtitle2 text-regular">
            {{ msg.priceRange.min }} - {{ msg.priceRange.max }}
          </div>
          <q-range
            v-model="msg.priceRange"
            :min="priceModel.min"
            :max="priceModel.max"
            :step="1"
            @change="testHandler"
            color="primary"
            class="q-mt-md"
          /> </q-card
        ><q-card flat class="rounded-borders q-mt-lg row no-padding q-mb-lg">
          <div
            class="q-px-md q-py-sm"
            style="border-right: 1px solid #eee; border-radius: 0 !important"
          >
            <q-icon name="iconfont iconigw-l-date-trade" size="24px" />
          </div>
          <div class="row items-center justify-center col">
            <span class="text-grey-8">
              {{ msg.startDate ? `${msg.startDate} - ${msg.endDate}` : "篩選出發日期" }}
            </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
      ></popup>
    </div>
    <div v-else class="col-3" :class="$q.platform.is.desktop ? 'q-mr-lg' : 'q-ma-md'">
      <q-card flat class="rounded-borders q-py-md">
        <div class="text-subtitle1 text-weight-bold q-mx-md">篩選關鍵字</div>
        <q-input
          v-model="msg.searchKey"
          type="text"
          standout
          placeholder="蒐索關鍵字"
          class="q-mx-md q-mt-md"
          @blur="handleSearchKey"
        />
      </q-card>
      
      <q-card flat class="rounded-borders q-py-md q-mt-lg">
        <div class="text-subtitle1 text-weight-bold q-mx-md">所有類別</div>
        <q-tree
          ref="category"
          :nodes="goodsType"
          no-connectors
          node-key="Id"
          label-key="Name"
          tick-strategy="leaf"
          @update:ticked="handleTicked"
          :ticked="ticked"
        />
      </q-card>
      <q-card flat class="rounded-borders q-mt-lg">
        <q-expansion-item
          expand-separator
          label="出发地"
          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 CityList"
            :key="yi"
          >
            <q-checkbox v-model="y.checked" size="xs" @input="changeTripDayHandler(1)" />
            <span
              class="col text-grey-8 text-subtitle2 text-regular q-mt-xs"
              style="font-weight: 400"
            >
              {{ y.CityName }}
            </span>
          </div>
        </q-expansion-item>
      </q-card>
      <q-card flat class="rounded-borders q-py-md q-mt-lg">
        <q-checkbox class="q-mx-md" v-model="msg.TeamType" :true-value="1" 
        :false-value="0" label="私家团" 
        @input="handleSearchKey"/>
      </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="iconfont iconigw-l-date-trade" size="24px" />
        </div>
        <div class="row items-center justify-center col">
          <span class="text-grey-8">
            {{ msg.startDate ? `${msg.startDate} - ${msg.endDate}` : "篩選出發日期" }}
          </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">價錢篩選（CNY）</div>
        <div class="q-mt-md text-grey-6 text-subtitle2 text-regular">
          {{ msg.priceRange.min }} - {{ msg.priceRange.max }}
        </div>
        <q-range
          v-model="msg.priceRange"
          :min="priceModel.min"
          :max="priceModel.max"
          :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="旅程時間"
          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" @input="changeTripDayHandler" />
            <span
              class="col text-grey-8 text-subtitle2 text-regular q-mt-xs"
              style="font-weight: 400"
            >
              {{ y.text }}
            </span>
          </div>
        </q-expansion-item>
      </q-card>
    </div>
    <div class="col q-mt-sm">
      <div class="rounded-borders bg-white">
        <div class="row q-col-gutter-sm items-center q-pa-md">
          <div class="text-subtitle2 q-mr-md">
            <span class="text-weight-bold text-primary q-mr-sm">
              {{ TotalCount }}
            </span>
            <span>項體驗行程</span>
          </div>
          <q-chip
            v-for="(x, i) in chosenAddress"
            size="13px"
            :key="i"
            removable
            outline
            color="grey"
            :label="x.Name"
          />
        </div>
        <div class="q-pa-md row items-center" style="border-top: 1px solid #eee">
          <span class="f12">排序：</span>
          <q-chip
            square
            :icon="x.icon"
            class="cursor-pointer"
            clickable
            :text-color="msg.orderBy != x.value ? 'dark' : 'white'"
            :class="{
              'bg-grey-3': msg.orderBy != x.value,
              'bg-primary': msg.orderBy == x.value,
            }"
            v-for="(x, i) in sortArray"
            :key="i"
            @click="chosenSortHandler(x)"
            >{{ x.label }}</q-chip
          >
          <q-checkbox v-if="$q.platform.is.mobile" class="q-mx-md" v-model="msg.TeamType" :true-value="1" 
          :false-value="0" label="私家团" 
          @input="handleSearchKey"/>
        </div>
      </div>
      <div class="q-mt-lg" v-if="!$q.loading.isActive && DataList && DataList.length > 0">
        <div
          class="rounded-borders cursor-pointer overflow-hidden bg-white"
          :class="$q.platform.is.desktop ? 'row q-mb-md' : 'colmuns q-ma-md'"
          v-for="(x, i) in DataList"
          :key="i"
        >
          <template v-if="x.imgCover && x.imgCover.length > 0">
            <q-img
              :src="x.imgCover[0].url"
              :ratio="1"
              spinner-color="grey"
              spinner-size="20px"
              :width="$q.platform.is.desktop ? '272px' : ''"
              :height="$q.platform.is.desktop ? '' : '200px'"
              class="bg-grey-3"
            />
          </template>
          <template v-else>
            <q-img
              :ratio="1"
              spinner-color="grey"
              spinner-size="20px"
              :width="$q.platform.is.desktop ? '272px' : ''"
              :height="$q.platform.is.desktop ? '' : '200px'"
              class="bg-grey-3"
            />
          </template>
          <div class="q-pa-md col column">
            <div
              class="text-subtitle1 text-weight-bold text-grey-9"
              @click="GotoDetails(x)"
            >
              {{ x.title }}
            </div>
            <div class="col">
              <div class="row items-center q-my-sm" @click="GotoDetails(x)">
                <q-chip
                  style="background: #26a69a1a"
                  size="sm"
                  class="f12 rounded-borders text-secondary"
                  label="急速確認"
                />
                <q-chip
                  v-if="x.ltName"
                  style="background: #26a69a1a"
                  size="sm"
                  class="f12 rounded-borders text-secondary"
                  :label="x.ltName"
                />
                <span class="col"></span>
                <span v-if="x.startCityName">出发地：{{x.startCityName}}</span>
              </div>
              <div
                class="text-subtitle2 text-grey text-weight-regular ellipsis-2-lines"
                style="line-height: 1.6"
                @click="GotoDetails(x)"
              >
                {{ x.productRecommend }}
              </div>
              <div class="row items-center f12 text-grey-6 q-mt-md" style="align-items: center;">
                <q-icon size="12px" name="iconfont icondingweixiao" class="q-mr-sm" />
                <span class="q-mr-lg" @click="GotoDetails(x)">{{ x.countryName }}</span>
                <q-icon
                  size="12px"
                  name="iconfont iconigw-l-date-trade"
                  class="q-mr-sm"
                ></q-icon>
                <template v-if="x.startDateList && x.startDateList.length > 0">
                  <template v-if="x.startDateList.length > 1">
                    <template v-for="(item, index) in x.startDateList">
                      <q-badge v-if="index<4"
                        outline
                        :color="x.index == index ? 'secondary' : 'blue-grey-4'"
                        :label="item"
                        :key="index"
                        style="margin-right: 5px;"
                        @click="SwitchTCID(x, i, index)"
                      />
                    </template>
                    <span v-if="x.startDateList.length>4" class="row q-pl-sm">
                      <a>更多</a>
                      <q-icon name="iconfont iconpreviewright" size="18px" color="grey" class="cursor-pointer" v-ripple />
                      <q-menu ref="MoreDates" :key="i" @mouseenter="menuFocus = 2" @mouseleave="menuLeave(i)">
                        <div class="q-px-sm q-pt-sm row" style="max-width: 347px;">
                          <div :key="index" v-for="(item,index) in x.startDateList">
                            <q-badge v-if="index>3"
                              class="cursor-pointer q-mx-xs"
                              :class="[x.startDateList.length-1==index?'q-mb-sm':'q-mb-xs']"
                              outline
                              :color="x.index == index ? 'secondary' : 'blue-grey-4'"
                              :label="item"
                              :key="index"
                              @click="SwitchTCID(x, i, index)"
                            />
                          </div>
                        </div>
                      </q-menu>
                    </span>
                  </template>
                  <template v-else>
                    <q-badge outline color="secondary" :label="x.startDateList[0]" />
                  </template>
                </template>
                
              </div>
              
            </div>
            <div class="row items-end" @click="GotoDetails(x)">
              <div class="col f12">
                <!-- <span>剩餘空位：</span>
                <span
                  class="text-primary text-weight-bold q-pr-sm q-mr-sm"
                  style="border-right: 1px solid #efefef"
                >{{ x.surplus }}</span> -->
                <span>行程天數：</span>
                <span class="text-secondary text-weight-bold">{{ x.dayNum }} 天</span>
              </div>
              <div class="text-h6 product-price">
                CNY：{{ x.b2CPrice }}<span class="price-stuff">元起</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        v-else-if="!$q.loading.isActive && DataList&& DataList.length == 0"
        class="text-center q-mt-xl"
      >
        <div class="text-center inline-block">
          <p>
            <img src="~assets/sad.svg" style="width: 30vw; max-width: 150px" />
          </p>
          <p class="text-faded">
            我们找不到有关
            <span v-if="msg.searchKey">\"{{ msg.searchKey }}\"</span>
            的旅游体验，输入其他字眼重试或探索以下人气体验
          </p>
        </div>
      </div>
      <div class="row justify-end">
        <q-pagination
          v-if="PageCount > 1"
          v-model="msg.pageIndex"
          :max="PageCount"
          @input="goSearchHandler"
          :direction-links="true"
          color="white"
          text-color="dark"
          active-color="primary"
          active-text-color="white"
          active-design="unelevated"
          unelevated
          glossy
          ellipses
          :max-pages="6"
          boundary-numbers
          size="13px"
          padding="sm md"
        ></q-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import popup from "../props/index";
import { date } from "quasar";
export default {
  props: ["qMsg"],
  components: { popup },
  data() {
    return {
      showCity: false,
      showAddress: false,
      showCategory: false,
      showDate: false,
      showPrice: false,
      areaTicked: [],
      ticked: [],
      selected: [],
      searchAdd: {
        name: "",
        value: 0,
      },
      areaList: [],
      chosenAddress: [],
      goodsType: [],
      dateRange: null,
      msg: null,
      dayArray: [
        {
          id: 1,
          min: 1,
          max: 1,
          text: "1天",
        },
        {
          id: 2,
          min: 2,
          max: 2,
          text: "2天",
        },
        {
          id: 3,
          min: 3,
          max: 3,
          text: "3天",
        },
        {
          id: 4,
          min: 4,
          max: 4,
          text: "4天",
        },
        {
          id: 5,
          min: 5,
          max: 5,
          text: "5天",
        },
        {
          id: 6,
          min: 6,
          max: 6,
          text: "6天",
        },
        {
          id: 7,
          min: 7,
          max: 8,
          text: "7-8天",
        },
        {
          id: 8,
          min: 9,
          max: 10,
          text: "9-10天",
        },
        {
          id: 9,
          min: 10,
          max: 1000,
          text: "10天以上",
        },
      ],
      DataList: [],
      sortArray: [
        {
          label: "默认排序",
          value: 0,
          icon: "iconfont icongood",
        },
        {
          label: "價格：低到高",
          value: 1,
          icon: "iconfont iconmeiyuan",
        },
        {
          label: "價格：高到低",
          value: 2,
          icon: "iconfont iconmeiyuan",
        },
      ],
      TotalCount: 0,
      PageCount: 0,
      priceModel: {
        min: 1,
        max: 40000,
      },
      CityList: [],
      menuFocus: 0,
    };
  },
  created() {
    this.msg = this.qMsg;
    if(this.qMsg&&this.qMsg.TeamType==1)
    {
      this.msg.TeamType=1;
    }
 
    this.initGoods();
    this.msg.priceRange = {
      min: 1,
      max: 40000,
    };
    this.msg.minPrice = 0;
    this.msg.maxPrice = 40000;
    this.dayArray.forEach((x) => {
      x.checked = false;
    });
    this.msg.startDate = date.formatDate(new Date(this.qMsg.startDate), "YYYY/MM/DD");
    this.msg.endDate = date.formatDate(new Date(this.qMsg.endDate), "YYYY/MM/DD");
    this.dateRange = { from: this.msg.startDate, to: this.msg.endDate };
  },
  mounted() {

  },
  methods: {
    menuLeave(i) {
      this.menuFocus = 0;
      setTimeout(() => {
        if (!this.menuFocus) {
          this.$refs.MoreDates[i].hide();
        }
      }, 50);
    },
    handleTicked(target) {
      this.msg.pageIndex = 1;
      this.ticked = target;
      this.goSearchHandler();
    },

    handleSearchKey(target) {
      this.msg.pageIndex = 1;
      this.goSearchHandler();
    },
    handleAreaTicked(target) {
      this.msg.pageIndex = 1;
      this.msg.placeIds = this.getChoseAddressCity().join(",");
      this.goSearchHandler();
    },
    changeExplesdHandler(x) {
      x.explsed = !x.explsed;
      if (x.SubList) {
      }
    },

    chosenSortHandler(x) {
      this.msg.orderBy = x.value;
      this.msg.pageIndex = 1;
      this.goSearchHandler();
    },
    getChoseAddressCity() {
      let result = [];
      function treeToArray(tree) {
        return tree.reduce((res, item) => {
          const { children, ...i } = item;
          return res.concat(i, children && children.length ? treeToArray(children) : []);
        }, []);
      }
      const areaList = treeToArray(this.areaList);
      areaList.forEach((item) => {
        if (this.areaTicked.includes(item.Id)) {
          let arr = item.DestinationList.map((item) => item.ID);
          result = result.concat(arr);
        }
      });
      return result;
    },
    changeTripDayHandler(type) {
      this.$forceUpdate();
      let arr = [];
      if(!type){
        this.dayArray.forEach((item) => {
          if (item.checked) {
            arr.push(item.id);
          }
        });
        this.msg.dayNumList = arr;
      }else{
        this.CityList.forEach((item) => {
          if (item.checked) {
            arr.push(item.CityId);
          }
        });
        this.msg.StartCityList = arr
      }
      this.msg.pageIndex = 1;
      this.goSearchHandler();
    },
    optionsFn(cd) {
      return cd >= date.formatDate(date.addToDate(new Date(), { days: 1 }), "YYYY/MM/DD");
    },
    testHandler(e) {
      this.$forceUpdate();
      this.msg.minPrice = e.min;
      this.msg.maxPrice = e.max;
      this.msg.pageIndex = 1;
      this.goSearchHandler();
    },
    dateRangeHandler(e) {
      this.msg.startDate = `${e.from.year}/${e.from.month}/${e.from.day}`;
      this.msg.endDate = `${e.to.year}/${e.to.month}/${e.to.day} `;
      this.$refs.qDateProxy.hide();
      this.msg.pageIndex = 1;
      this.goSearchHandler();
    },
    initGoods() {
      let arr = [];
      let LineIdList = [];
      if (this.msg.LineIds && this.msg.LineIds.length > 0) {
        LineIdList = this.msg.LineIds.split(",");
      }
      let SeriesIdList = [];
      if (this.msg.SeriesIds && this.msg.SeriesIds.length > 0) {
        SeriesIdList = this.msg.SeriesIds.split(",");
      }
      this.apipost(
        "b2c_get_GetB2CQueryCondition",
        this.msg,
        (res) => {
          if (res.data.resultCode == 1) {
            let arrList = function(list){
              list.forEach(x=>{
                x.checked = false
              })
            }
            arrList(res.data.data.CityList)
            this.CityList = res.data.data.CityList
            var jObj = res.data.data.LineList;
            jObj.forEach((x) => {
              x.checked = false;
              x.explsed = false;
              x.isShow = true;
              x.children = x.SubList;
              let lineIdIndex = LineIdList.findIndex((yId) => x.Id.slice(2) == yId);
              x.children.forEach((y) => {
                y.checked = false;
                y.explsed = false;
                y.isShow = true;
                if (lineIdIndex != -1) {
                  arr.push(y.Id);
                  this.ticked.push(y.Id);
                } else {
                  let seriesIdIndex = SeriesIdList.findIndex(
                    (yId) => y.Id.slice(2) == yId
                  );
                  if (seriesIdIndex != -1) {
                    arr.push(y.Id);
                    this.ticked.push(y.Id);
                  }
                }
              });
              this.goodsType.push(x);
            });
            if (this.ticked && this.ticked.length > 0) {
              this.msg.webSiteCategoryIds = this.ticked.join(",");
              this.goSearchHandler();
            } else {
              this.goSearchHandler();
            }
          } else this.goSearchHandler();
        },
        (err) => {}
      );

      this.goodsTypeJSON = JSON.stringify(this.goodsType);
      if (this.msg.categoryId) {
        this.$nextTick(() => {
          this.$refs.category?.setTicked([...new Set(arr)], true);
        });
      }
    },
    dfs(tree, ope, filter) {
      const walkAndCopy = (tree, depth = 1) => {
        if (filter(tree)) {
          const copy = { ...tree };
          ope(tree.Name, depth);
          if (tree.children) {
            copy.children = [];
            tree.children.forEach((node) => {
              const subTree = walkAndCopy(node, depth + 1);
              subTree && copy.children.push(subTree);
            });
          }
          return copy;
        } else if (tree && tree.children && tree.children.length) {
          const copy = { ...tree };
          ope(tree.Name, depth);
          copy.Name = tree.Name;
          if (tree.children) {
            copy.children = [];
            tree.children.forEach((node) => {
              const subTree = walkAndCopy(node, depth + 1);
              subTree && copy.children.push(subTree);
            });
          }
          return copy;
        }
      };
      return walkAndCopy(tree);
    },
    goSearchHandler() {
      this.$q.loading.show();
      this.DataList = [];
      let minTripDay = -1,
        maxTripDay = -1,
        minPrice = -1,
        maxPrice = -1;
      if (this.qMsg.minPrice != "") {
        minPrice = parseFloat(this.qMsg.minPrice);
      }
      if (this.qMsg.maxPrice != "") {
        maxPrice = parseFloat(this.qMsg.maxPrice);
        if (minPrice > maxPrice) {
          this.Error("价格区间的最低价格不能低于最大价格");
          return false;
        }
      }
      var companyId = -1;
      if (localStorage.groupinfo) {
        var groupinfo = JSON.parse(localStorage.groupinfo);
        companyId =
          groupinfo.siteList[0] && groupinfo.siteList[0].companyId
            ? groupinfo.siteList[0].companyId
            : -1;
      }
      if (localStorage.b2bUser) {
        var b2bUser = JSON.parse(window.localStorage.getItem("b2bUser"));
        if (b2bUser) {
          this.msg.priceOrderByField = 2;
        }
      }
      this.msg.webSiteCategoryIds = this.ticked.join(",");
      this.PageCount = 0;
      this.TotalCount = 0;
      this.apipost(
        "b2c_get_GetB2C2024TravelProductPage",
        this.msg,
        (res) => {
          this.$q.loading.hide();
          if (res.data.resultCode == 1) {
            this.PageCount = res.data.data.pageCount;
            this.TotalCount = res.data.data.count;
            var tempArray = res.data.data.pageData.list;
            if (tempArray && tempArray.length > 0) {
              this.DataList = tempArray;
              this.renderSearchInfo(res.data.data.pageData.condition);
              this.$forceUpdate();
            }
          }
        },
        (err) => {}
      );
    },
    renderSearchInfo(condition) {
      if (!condition.length) {
        return;
      }
      let areaInfo = condition.find((item) => item.type === 1).list;
      let dayInfo = condition.find((item) => item.type === 2).list;
      let priceInfo = condition.find((item) => item.type === 3);
      let categoryInfo = condition.find((item) => item.type === 4).list;
      // this.areaTicked = areaInfo;
      this.areaListJSONTMP = JSON.parse(JSON.stringify(this.areaListJSON));
      let tree = this.dfs(
        { Name: "", children: this.areaListJSONTMP },
        (name, depth) => {},
        ({ Id }) => {
          return areaInfo.includes(Id);
        }
      );
      tree = this.dfs(
        tree,
        (name, depth) => {},
        ({ Id }) => {
          return areaInfo.includes(Id);
        }
      );
      tree = this.dfs(
        tree,
        (name, depth) => {},
        ({ Id }) => {
          return areaInfo.includes(Id);
        }
      );
      this.areaList = tree.children;
      const categoryTmp = JSON.parse(this.goodsTypeJSON);
      let category = this.dfs(
        { Name: "", children: categoryTmp },
        (name, depth) => {},
        (item) => {
          return categoryInfo.includes(item.Id);
        }
      );
      category = this.dfs(
        category,
        (name, depth) => {},
        (item) => {
          return categoryInfo.includes(item.Id);
        }
      );
      category = this.dfs(
        category,
        (name, depth) => {},
        (item) => {
          return categoryInfo.includes(item.Id);
        }
      );
      this.goodsType = category.children;

      this.priceModel = { min: priceInfo.minPrice, max: priceInfo.maxPrice };
      let arr = [];
      dayInfo.forEach((item) => {
        if (item < 6) {
          arr.push(item);
        } else if (item === 7 || item === 8) {
          arr.push(7);
        } else if (item === 8 || item === 10) {
          arr.push(8);
        } else {
          arr.push(9);
        }
      });
      this.dayArray = this.dayArray.filter((item) => arr.includes(item.id));
    },

    GotoDetails(item) {
      this.CommonJump(
        "/detailsProduct/" + encodeURIComponent(item.id) + "/" + item.configId+"/"+item.teamType,
        {},
        "blank"
      );
    },
    SwitchTCID(obj, i, index) {
      if (this.DataList && this.DataList.length > 0) {
        let nowobj = JSON.parse(JSON.stringify(obj));
        this.DataList[i] = {
          ...nowobj.priceList[index],
        };
        this.DataList[i].index = index;
        this.DataList[i].startDateList = nowobj.startDateList;
        this.DataList[i].priceList = nowobj.priceList;
        this.$forceUpdate();
      }
    },
  },
};
</script>

<style>
.addr-list:hover {
  background: #e3f2fd;
}
</style>
<style lang="scss" scoped>
::v-deep .q-menu {
  width: 100% !important;
}
.price-stuff {
  font-size: 12px;
  margin-left: 4px;
}
.nav-item {
  width: 25%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #fff;
  font-weight: bold;
}
.nav-item:hover {
  background: #f5f5f5;
}
</style>
