<style>
.SearchMain {
  min-height: 800px;
}

.SearchTop {
  width: 100%;
  /* margin: 32px 0 30px 0;
    background-color: rgba(255, 255, 255, .95);
    border-top: 1px solid #eee;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .03); */
  min-height: 600px;
}

.SearchContent {
  position: relative;
  display: flex;
  width: 100%;
  margin: 6px auto 0;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.03);
}

.SearchMain .showbox {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 345px;
  background: #fff;
  left: 0;
  top: 60px;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
}

.Search_Zhi {
  display: inline-block;
  margin: 0 10px;
  height: 40px;
  line-height: 40px;
}

.full_price {
  width: 40%;
  display: inline-block;
  margin-left: 20px;
}

.moreTiaojiao {
  width: 100%;
  height: 60px;
  text-align: center;
  line-height: 60px;
  font-size: 18px;
  border-bottom: 1px solid #eee;
  color: #333;
}

.full_listDiv {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.full_title {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #666;
}

.full_btndiv {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-top: 1px solid #eee;
  padding: 20px 10px;
  background-color: #fff;
}

.search-bar-m {
  display: flex;
  width: 100%;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.search-bar-m .keyword-input {
  width: calc(100% - 40px);
  cursor: pointer;
}

.keyword-input {
  height: 44px;
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 14px;
  outline: none;
  color: #333;
  padding-left: 20px;
}

.search-bar-m i {
  height: 45px;
  line-height: 45px;
  text-align: center;
  margin-left: 20px;
  color: #999;
}

.sortDiv {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #eee;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.03);
}

.sortShaixuan {
  width: 50%;
  height: 57px;
  line-height: 57px;
  text-align: center;
}

@media only screen and (max-width: 1200px) {
  .pd-list .pd-box {
    flex-basis: calc(50% - 10px) !important;
  }

  .pd-list .pd-box:nth-child(even) {
    margin-right: 0 !important;
  }
}

@media only screen and (min-width: 768px) {
  .pd-box:hover {
    transform: translate(0, -4px) !important;
    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.1) !important;
  }
}

@media only screen and (max-width: 425px) {
  .pd-list .pd-box {
    flex-basis: 100% !important;
    margin-right: 0 !important;
  }
}

.pd-list .pd-box {
  margin-right: 20px;
  margin-bottom: 30px;
  flex-basis: calc(25% - 15px);
  border-radius: 3px;
  background-clip: padding-box;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
  transition: -webkit--webkit-transform 0.2s ease, box-shadow 0.2s ease;
  background-color: #fff;
}

.pd-box .pd-img {
  position: relative;
  width: 100%;
  padding-bottom: 66.237%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
}

.pd-box .pd-img .pd-price {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  border-bottom: 4px solid #00afff;
  text-align: right;
}

.pd-box .pd-img .pd-price .price {
  display: inline-block;
  padding: 4px 12px 0;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  background-color: #00afff;
  -webkit-border-radius: 5px 0 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 5px 0 0;
  -moz-background-clip: padding;
  border-radius: 5px 0 0;
  background-clip: padding-box;
}

.pd-box .pd-img .pd-price .price small {
  padding: 0 4px;
  font-size: 14px;
}

.pd-box .pd-content {
  padding: 15px 15px 20px;
}

.pd-box .pd-title {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.pd-box .pd-departure {
  padding-top: 10px;
  font-size: 14px;
  color: #999;
}

.pd-box .pd-departure .more {
  float: right;
  font-size: 14px;
}

.Search_center {
  width: 100%;
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.Search_center .pd-list {
  display: flex;
  flex-flow: wrap;
  width: 100%;
  margin: 0;
  padding: 0;
}

.pd-list li:nth-child(4n) {
  margin-right: 0;
}

.pd-list li {
  list-style-type: none;
}

.SearchMain .search-content {
  display: flex;
  align-items: flex-start;
  margin-top: 20px;
}

.wl-section-block {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.search-filter-aside {
  width: 300px;
  margin-right: 30px;
  margin-bottom: 30px;
  background-color: #fff;
}

.search-content .group-result-list {
  display: flex;
  flex-flow: wrap;
  width: calc(100% - 300px);
}

.search-filter-aside .search-header {
  position: relative;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  font-size: 18px;
  font-weight: 700;
}

.search-filter-aside .clear-filter {
  position: absolute;
  top: 15px;
  right: 15px;
  bottom: auto;
  left: auto;
  z-index: 1;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #999;
  cursor: pointer;
}

.search-filter-aside .search-type {
  position: relative;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.search-filter-aside .search-type .search-title {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

.range-text {
  display: flex;
  justify-content: space-between;
  letter-spacing: 0;
  font-weight: 700;
  color: #333;
  font-size: 15px;
}

.SearchMain .row.inline {
  display: flex !important;
}

.group-statis-block {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 15px;
  height: 45px;
}

.group-result-list .group-statis-block > * {
  display: inline-block;
  height: 100%;
  line-height: 45px;
}

.group-result-list .group-statis-block .group-share {
  position: relative;
  width: 150px;
  text-align: center;
  background-color: #2a8dbd;
  color: #fff;
  margin-right: 15px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 2px 7px 0 rgba(0, 0, 0, 0.12);
}

.group-result-list .group-statis-block .group-statis-detail {
  padding-left: 10px;
  background: #fff;
  width: calc(100% - 150px);
}

.group-statis-detail .title {
  font-size: 18px;
}

.group-statis-detail .num {
  color: #fd992d;
  margin: 0 3px;
  font-size: 16px;
}

.group-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 20px;
}

.group-cover {
  position: relative;
  width: 270px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.group-cover img {
  position: absolute;
  top: 0;
  right: null;
  bottom: null;
  left: 0;
  z-index: 1;
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

.group-box .group-main {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 270px);
  flex-basis: calc(100% - 270px);
}

.group-box > div {
  flex: 1;
}

.group-box .group-main .group-info {
  padding: 20px;
  width: calc(100% - 200px);
  border-right: 1px solid #eee;
}

.group-box .group-main .group-info .group-detail {
  margin-bottom: 5px;
  font-size: 14px;
  color: #666;
}

.group-box .group-main .group-info .group-detail i {
  margin-right: 5px;
  font-size: 18px;
}

.group-box .group-main .group-info .group-detail > * {
  display: inline-block;
  vertical-align: middle;
}

.group-name {
  color: #333;
  font-size: 16px;
  line-height: 1.2;
  font-weight: bold;
}

.group-list {
  margin: 0;
  padding: 0;
}

.group-list li {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 5px;
  list-style-type: none;
}

.group-list li a {
  padding: 5px;
  font-size: 12px;
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #0083bd;
  border-radius: 3px;
  background-clip: padding-box;
}

.price-info {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 20px 15px;
  width: 200px;
  font-size: 14px;
}

.price-wrap {
  width: 100%;
  text-align: right;
}

.price-wrap > * {
  display: block;
  width: 100%;
}

.price_Search {
  font-size: 32px;
  font-weight: 700;
  color: #ff9a14;
}

.price_unit {
  font-size: 14px;
  padding-right: 5px;
}

.btn_warning {
  text-align: center;
  cursor: pointer;
  padding: 0 15px;
  height: 40px;
  min-width: 135px;
  font-size: 15px;
  border-radius: 2px;
  background-clip: padding-box;
  letter-spacing: 0.05em;
  background-color: #ff9a14;
  color: #fff;
  margin-top: 10px;
  line-height: 40px;
}

@media only screen and (max-width: 1200px) {
  .search-content .search-filter-aside {
    display: none;
  }

  .search-content .group-result-list {
    width: 100%;
  }
}

@media only screen and (max-width: 1200px) {
  .search-content {
    max-width: 768px;
  }
}

@media only screen and (max-width: 768px) {
  .group-statis-block .group-statis-detail {
    width: calc(100% - 45px);
  }

  .group-box .group-cover {
    display: block;
    width: 100%;
    padding-bottom: 60%;
  }

  .group-box .group-main {
    display: block;
    width: 100%;
  }

  .group-box .group-main .group-info {
    width: 100%;
    padding-bottom: 0;
    border-right: 0;
  }

  .group-box .group-main .price-info {
    display: block;
    width: 100%;
    padding-top: 0;
  }

  .price-info .price-wrap .price_Search {
    font-size: 28px;
  }
}

.SearchMain .q-field__control {
  height: 46px;
}

.SearchMain .q-field__control {
  min-height: 46px !important;
}

.SearchMain .q-field__native {
  min-height: 46px;
}

.SearchMain .q-field__marginal {
  height: 46px;
}

.search-filter-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  /* width: 100%; */
  height: 48px;
  margin: 0 auto;
  max-width: 1160px;
  align-items: center;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.SearchContent .search-item {
  display: flex;
  border-right: 1px solid #eee;
  line-height: 44px;
  padding-right: 20px;
}
.search-item:first-child {
  border-left: 1px solid #eee;
}
.search-filter-inner i {
  width: 50px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #999;
  display: inline-block;
}

.full-height .q-textarea .q-field__control {
  min-height: 25px !important;
}

.full_price .q-placeholder {
  min-height: 25px !important;
}

/* .text-h6 {
    text-align: center;
    padding: 0 20px;
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #333;
    font-weight: 700;
    position: relative;
  } */
.text-h6 i {
  position: absolute;
  right: 20px;
  cursor: pointer;
  font-size: 23px;
}
.SearchContent .q-field--filled .q-field__control {
  background: #fff;
}
.SearchContent .q-field--filled .q-field__control:before {
  background-color: #fff;
  border-bottom: 0;
}
.SearchContent .q-field--filled.q-field--focused .q-field__control:before {
  background-color: #fff !important;
}
.sortDiv .q-field--filled .q-field__control {
  background: #fff;
}
.sortDiv .q-field--filled .q-field__control:before {
  background-color: #fff;
  border-bottom: 0;
}
.sortDiv .q-field--filled.q-field--focused .q-field__control:before {
  background-color: #fff !important;
}
.mobileSearch {
  display: none;
}
@media only screen and (max-width: 768px) {
  .SearchContent {
    display: none;
  }
  .mobileSearch {
    display: block;
  }
}
.SearchMain .blank-block {
  margin: 100px auto;
  width: 300px;
  text-align: center;
}
.SearchMain .blank-block i {
  font-size: 80px;
  color: #ddd;
}
.SearchMain .blank-block p {
  color: #999;
  font-size: 15px;
  letter-spacing: 1px;
}
.desktop-page {
  max-width: 1200px;
  min-width: 1100px;
  margin: 0 auto;
}
</style>
<template>
  <div class="SearchMain" :class="{ 'desktop-page': $q.platform.is.desktop }">
    <div class="SearchTop">
      <div class="q-my-md" v-if="qMsg.KeyWords">
        <q-breadcrumbs>
          <q-breadcrumbs-el
            icon="home"
            label="首頁"
            class="cursor-pointer"
            @click="CommonJump('/index', {})"
          />
          <q-breadcrumbs-el :label="qMsg.KeyWords" />
        </q-breadcrumbs>
      </div>
      <div class="text-h6 text-left" v-if="qMsg.KeyWords">
        搜尋結果 “
        <span class="text-primary">{{ qMsg.KeyWords }}</span
        >”
      </div>
      <!-- 电脑端 -->
      <div class="row SearchContent q-mt-md" v-if="!$q.screen.xs && 1 == 0">
        <div class="search-filter-inner">
          <div
            class="search-item"
            style="width: 200px; cursor: pointer"
            @click="(isShowDialog = true), goSearchHandler"
          >
            <i class="iconfont iconchazhao"></i>
            {{ qMsg.KeyWords }}
          </div>
          <div class="search-item" @click="(isShowDialog = true), goSearchHandler">
            <i class="iconfont iconrili"></i>
            {{ qMsg.StartDate }} ~ {{ qMsg.EndDate }}
          </div>

          <div class="search-item" style="margin-left: 20px">
            <q-select
              filled
              v-model="sortNum"
              :options="sortArray"
              @input="changeData"
              emit-value
              map-options
            />
          </div>
          <div class="search-item" style="margin-left: 20px">
            <span
              style="display: inline-block; cursor: pointer"
              @click="fullHeight = true"
              >更多篩選條件</span
            >
          </div>
        </div>
        <div
          v-show="showSplitPannel"
          id="sb"
          style="z-index: 999"
          transition-show="fade"
          elevated
          transition-hide="scale"
          class="showbox row"
        >
          <div style="width: 180px">
            <q-scroll-area
              :thumb-style="thumbStyle"
              :bar-style="barStyle"
              style="height: 100%"
            >
              <q-list>
                <q-item
                  v-for="(x, i) in areas"
                  :key="i"
                  clickable
                  v-ripple
                  :active="crtAreaIndex == i"
                  @click="clkAreaHandler(i)"
                  active-class="my-menu-link"
                >
                  <q-item-section>
                    <q-item-label>{{ x.Name }}</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-scroll-area>
          </div>
          <q-separator vertical />
          <div class="col q-pa-md">
            <q-scroll-area
              :thumb-style="thumbStyle"
              :bar-style="barStyle"
              style="height: 100%"
            >
              <template
                v-if="
                  areas[crtAreaIndex] &&
                  areas[crtAreaIndex].SubList &&
                  areas[crtAreaIndex].SubList.length > 0
                "
              >
                <div
                  class="area-box"
                  v-for="(x, i) in areas[crtAreaIndex].SubList"
                  :key="i"
                >
                  <div class="q-mb-md">
                    <div class="h3" @click="chosenAreaHandler(x.Name)">{{ x.Name }}</div>
                  </div>
                  <template v-if="x && x.SubList && x.SubList.length > 0">
                    <div
                      class="q-mb-sm row to-end"
                      v-for="(y, yi) in x.SubList"
                      :key="yi"
                    >
                      <div class="h4" @click="chosenAreaHandler(y.Name)">
                        {{ y.Name }}
                      </div>
                      <template v-if="y && y.SubList && y.SubList.length > 0">
                        <div
                          class="h5"
                          @click="chosenAreaHandler(z.Name)"
                          v-for="(z, zi) in y.SubList"
                          :key="zi"
                        >
                          {{ z.Name }}
                        </div>
                      </template>
                    </div>
                  </template>
                  <q-separator class="q-mt-md q-mb-md" color="grey-2" inset />
                </div>
              </template>
            </q-scroll-area>
          </div>
        </div>
      </div>

      <!-- 手机端 -->
      <!-- <div class="mobileSearch q-mt-md">
        <div class="search-bar-m">
          <i class="iconfont iconchazhao"></i>
          <input
            type="text"
            placeholder="搜尋"
            :value="SearchResult"
            @click="showPopup=true,goSearchHandler"
            readonly="readonly"
            class="keyword-input"
          />
        </div>
        <div class="sortDiv">
          <q-select
            filled
            style="width:50%"
            v-model="sortNum"
            :options="sortArray"
            emit-value
            map-options
            @input="changeData"
          />
          <div class="sortShaixuan" @click="fullHeight = true">更多篩選條件</div>
        </div>
      </div> -->

      <template v-if="ShowType == 0">
        <!--豆腐格-->
        <searchBlock :DataList="DataList" :qMsg="qMsg"></searchBlock>
      </template>
      <template v-else-if="ShowType == 1">
        <div class="wl-section-block search-content">
          <div class="search-filter-aside">
            <div class="search-header">
              篩選項目
              <span class="clear-filter" @click="clearAll()">清除所有篩選</span>
            </div>
            <div class="search-body">
              <div class="search-type">
                <div class="search-title">
                  價格
                  <span class="clear-filter" @click="clearPrice()">清除篩選</span>
                </div>
                <div style="width: 100%; height: 57px; display: none"></div>
                <div class="range-text">
                  <div class="min">
                    <q-input
                      class="full_price"
                      style="width: 80%"
                      placeholder="最低价"
                      v-model="qMsg.MinPrice"
                      @input="changeData"
                      filled
                      autogrow
                    />
                  </div>
                  <div class="max">
                    <q-input
                      class="full_price"
                      style="width: 80%"
                      placeholder="最高价"
                      v-model="qMsg.MaxPrice"
                      @input="changeData"
                      filled
                      autogrow
                    />
                  </div>
                </div>
              </div>
              <div class="search-type">
                <div class="search-title">
                  天數
                  <span class="clear-filter" @click="clearDays()">清除篩選</span>
                </div>
                <q-checkbox
                  right-label
                  v-model="dayNum"
                  v-for="(item, index) in dayArray"
                  :label="item.text"
                  :key="index"
                  :val="item.id"
                  @input="changeData"
                />
              </div>
              <div class="search-type">
                <div class="search-title">
                  出發機場
                  <span class="clear-filter">清除篩選</span>
                </div>
              </div>
              <!-- <div class="search-type">
                <div class="search-title">
                  主要航班
                  <span class="clear-filter">清除篩選</span>
                </div>
                <q-checkbox right-label v-model="flight" label="長榮" />
              </div>-->
              <div class="search-type">
                <div class="search-title">
                  出發星期
                  <span class="clear-filter" @click="clearWeek()">清除篩選</span>
                </div>
                <div class="q-gutter-sm">
                  <q-checkbox
                    v-model="WeekDay"
                    v-for="(item, index) in weekList"
                    :val="item.value"
                    :label="item.label"
                    :key="index"
                    color="teal"
                    @input="changeData"
                  />
                </div>
              </div>
            </div>
          </div>
          <!--列表-->
          <searchList :DataList="DataList" :qMsg="qMsg" @getPage="getPage"></searchList>
        </div>
      </template>
      <template v-else>
        <kkday :qMsg="qMsg" @change="handlerSearchChange"></kkday>
      </template>
      <div v-if="DataList.length == 0 && ShowType != 2" class="blank-block">
        <i class="iconfont iconchazhao"></i>
        <p>請嘗試其他關鍵字或篩選條件</p>
      </div>
    </div>

    <q-dialog v-model="fullHeight" full-height>
      <q-card class="column full-height" style="width: 500px">
        <div class="moreTiaojiao">更多篩選條件</div>
        <div class="full_listDiv" style="padding-bottom: 20px">
          <span>價格：</span>
          <q-input
            class="full_price"
            style="width: 30%; height: 45px"
            v-model="qMsg.MinPrice"
            @input="changeData"
            filled
            autogrow
          />
          <q-input
            class="full_price"
            style="width: 30%; height: 45px"
            v-model="qMsg.MaxPrice"
            @input="changeData"
            filled
            autogrow
          />
        </div>
        <div class="full_listDiv">
          <div class="full_title">天數</div>
          <div class="q-gutter-sm">
            <q-checkbox
              right-label
              v-model="dayNum"
              v-for="(item, index) in dayArray"
              :label="item.text"
              :key="index"
              :val="item.id"
              @input="changeData"
            />
          </div>
        </div>

        <div class="full_listDiv">
          <div class="full_title">出發星期</div>
          <div class="q-gutter-sm">
            <q-checkbox
              v-model="WeekDay"
              v-for="(item, index) in weekList"
              :val="item.value"
              :label="item.label"
              :key="index"
              color="teal"
              @input="changeData"
            />
          </div>
        </div>
        <div class="full_btndiv">
          <q-btn color="white" style="width: 49%" text-color="black" label="清除" />
          <q-btn
            color="primary"
            style="width: 49%"
            label="套用"
            v-close-popup
            @click="goSearchHandler"
          />
        </div>
      </q-card>
    </q-dialog>

    <q-dialog v-model="isShowDialog">
      <q-card>
        <q-card-section>
          <div class="text-h6">
            搜尋行程
            <i class="iconfont iconbaseline-close-px" @click="isShowDialog = false"></i>
          </div>
        </q-card-section>
        <q-separator />
        <div style="max-height: 550px; padding: 20px 30px 30px 30px" class="scroll">
          <div class="chosen-box">
            <div class="chosen-tab">
              <q-tabs v-model="tab" align="justify" narrow-indicator class="q-mb-md">
                <q-tab class="text-purple" name="dest" label="目的地" />
                <q-tab class="text-teal" name="kw" label="關鍵字" />
              </q-tabs>
              <div v-show="tab == 'dest'">
                <div class="q-mb-md">
                  <q-select
                    filled
                    v-model="chosenResult.fl"
                    :options="areas"
                    option-label="Name"
                    option-value="Name"
                    label="請選擇地區"
                  />
                </div>
                <div class="q-mb-md" v-if="chosenResult.fl.SubList">
                  <q-select
                    filled
                    v-model="chosenResult.sl"
                    :options="chosenResult.fl.SubList"
                    option-label="Name"
                    option-value="Name"
                    label="請選擇地區"
                  />
                </div>
                <div class="q-mb-md" v-if="chosenResult.sl.SubList">
                  <q-select
                    filled
                    v-model="chosenResult.tl"
                    :options="chosenResult.sl.SubList"
                    option-label="Name"
                    option-value="Name"
                    label="請選擇地區"
                  />
                </div>
                <div class="q-mb-md" v-if="chosenResult.tl.SubList">
                  <q-select
                    filled
                    v-model="chosenResult.ful"
                    @input="setSearchKey(chosenResult.ful)"
                    :options="chosenResult.tl.SubList"
                    option-label="Name"
                    option-value="Name"
                    label="請選擇地區"
                  />
                </div>
              </div>
              <div v-show="tab == 'kw'" class="q-mb-md">
                <q-input
                  filled
                  id="search_key"
                  v-model="qMsg.KeyWords"
                  class="bg-grey-1"
                  :label="$t('search')"
                />
              </div>
              <div class="q-mb-md row">
                <div class="col">
                  <q-input
                    filled
                    v-model="qMsg.StartDate"
                    style="width: 99%"
                    :label="$t('search_date_begin')"
                    mask="date"
                    class="bg-grey-1"
                  >
                    <template v-slot:append>
                      <q-icon name="event" class="cursor-pointer">
                        <q-popup-proxy ref="qDateProxy7">
                          <q-date
                            mask="YYYY-MM-DD"
                            :title="$t('search_date_begin')"
                            subtitle="選擇"
                            v-model="qMsg.StartDate"
                            @input="() => $refs.qDateProxy7.hide()"
                          />
                        </q-popup-proxy>
                      </q-icon>
                    </template>
                  </q-input>
                </div>
                <div class="col">
                  <q-input
                    filled
                    v-model="qMsg.EndDate"
                    :label="$t('search_date_end')"
                    mask="date"
                    class="bg-grey-1"
                  >
                    <template v-slot:append>
                      <q-icon name="event" class="cursor-pointer">
                        <q-popup-proxy ref="qDateProxy8">
                          <q-date
                            mask="YYYY-MM-DD"
                            :title="$t('search_date_begin')"
                            subtitle="選擇"
                            v-model="qMsg.EndDate"
                            @input="() => $refs.qDateProxy8.hide()"
                          />
                        </q-popup-proxy>
                      </q-icon>
                    </template>
                  </q-input>
                </div>
              </div>
              <div>
                <q-btn
                  color="primary"
                  unelevated
                  style="width: 100%; height: 50px; margin-top: 20px"
                  filled
                  label="搜尋"
                  @click="(isShowDialog = false), goSearchHandler()"
                />
              </div>
            </div>
          </div>
        </div>
        <q-separator />
      </q-card>
    </q-dialog>

    <popup v-model="showPopup" mode="top" :safeAreaInsetBottom="true" border-radius="5">
      <div class="chosen-box">
        <!-- <div class="title">搜尋行程</div> -->
        <div class="chosen-tab">
          <q-tabs v-model="tab" align="justify" narrow-indicator class="q-mb-md">
            <q-tab class="text-purple" name="dest" label="目的地" />
            <q-tab class="text-teal" name="kw" label="關鍵字" />
          </q-tabs>
          <div v-show="tab == 'dest'">
            <div class="q-mb-md">
              <q-select
                filled
                v-model="chosenResult.fl"
                :options="areas"
                option-label="Name"
                option-value="Name"
                label="請選擇地區"
              />
            </div>
            <div class="q-mb-md" v-if="chosenResult.fl.SubList">
              <q-select
                filled
                v-model="chosenResult.sl"
                :options="chosenResult.fl.SubList"
                option-label="Name"
                option-value="Name"
                label="請選擇地區"
              />
            </div>
            <div class="q-mb-md" v-if="chosenResult.sl.SubList">
              <q-select
                filled
                v-model="chosenResult.tl"
                :options="chosenResult.sl.SubList"
                option-label="Name"
                option-value="Name"
                label="請選擇地區"
              />
            </div>
            <div class="q-mb-md" v-if="chosenResult.tl.SubList">
              <q-select
                filled
                v-model="chosenResult.ful"
                @input="setSearchKey(chosenResult.ful)"
                :options="chosenResult.tl.SubList"
                option-label="Name"
                option-value="Name"
                label="請選擇地區"
              />
            </div>
          </div>
          <div v-show="tab == 'kw'" class="q-mb-md">
            <q-input
              filled
              id="search_key"
              v-model="qMsg.KeyWords"
              class="bg-grey-1"
              :label="$t('search')"
            />
          </div>
          <div class="q-mb-md row">
            <div class="col">
              <q-input
                filled
                v-model="qMsg.StartDate"
                :label="$t('search_date_begin')"
                mask="date"
                class="bg-grey-1"
              >
                <template v-slot:append>
                  <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy ref="qDateProxy7">
                      <q-date
                        mask="YYYY-MM-DD"
                        :title="$t('search_date_begin')"
                        subtitle="選擇"
                        v-model="qMsg.StartDate"
                        @input="() => $refs.qDateProxy7.hide()"
                      />
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
            </div>
            <div class="col">
              <q-input
                filled
                v-model="qMsg.EndDate"
                :label="$t('search_date_end')"
                mask="date"
                class="bg-grey-1"
              >
                <template v-slot:append>
                  <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy ref="qDateProxy8">
                      <q-date
                        mask="YYYY-MM-DD"
                        :title="$t('search_date_begin')"
                        subtitle="選擇"
                        v-model="qMsg.EndDate"
                        @input="() => $refs.qDateProxy8.hide()"
                      />
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
            </div>
          </div>
          <div>
            <q-btn
              color="primary"
              unelevated
              style="width: 100%"
              filled
              label="搜尋"
              @click="(showPopup = false), goSearchHandler()"
            />
          </div>
        </div>
      </div>
    </popup>
  </div>
</template>
<script>
import { date } from "quasar";
import popup from "../components/props/index";
import searchBlock from "../components/searchdida/block";
import searchList from "../components/searchdida/list";
import kkday from "../components/searchdida/kkday.vue";
export default {
  components: {
    popup,
    searchBlock,
    searchList,
    kkday,
  },
  data() {
    return {
      SearchResult: "",
      isShowDialog: false,
      sortNum: 1, //排序
      dayNum: [], //天数
      WeekDay: [],
      //天数数组
      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: null,
          text: "10天以上",
        },
      ],
      flight: ["长荣"],

      showSplitPannel: false,
      fullHeight: false,
      //地区样式
      thumbStyle: {
        right: "4px",
        borderRadius: "5px",
        backgroundColor: "#027be3",
        width: "5px",
        opacity: 0.75,
      },
      //地区样式
      barStyle: {
        right: "2px",
        borderRadius: "9px",
        backgroundColor: "#027be3",
        width: "9px",
        opacity: 0.2,
      },
      //地区数据
      areas: [],
      crtAreaIndex: 0,
      sortArray: [
        {
          label: "依推薦程度",
          value: 1,
        },
        {
          label: "低價優先",
          value: 2,
        },
        {
          label: "高價優先",
          value: 3,
        },
        {
          label: "最快出發日",
          value: 4,
        },
        {
          label: "最晚出發日",
          value: 5,
        },
        {
          label: "天數少到多",
          value: 6,
        },
        {
          label: "天數多到少",
          value: 7,
        },
      ],
      weekList: [
        {
          label: "星期日",
          value: 0,
        },
        {
          label: "星期一",
          value: 1,
        },
        {
          label: "星期二",
          value: 2,
        },
        {
          label: "星期三",
          value: 3,
        },
        {
          label: "星期四",
          value: 4,
        },
        {
          label: "星期五",
          value: 5,
        },
        {
          label: "星期六",
          value: 6,
        },
      ],
      showPopup: false,
      tab: "dest",
      chosenResult: {
        fl: "",
        sl: "",
        tl: "",
        ful: "",
      },
      //查询参数
      qMsg: {
        pageIndex: 1,
        pageSize: 20,

        //只查询日本
        // Country: "JP",
        // DestinationID: '',
        // City: "",
        // //星级
        // Star: '',
        // //价格等级
        // PriceLevel: 0,
        // MaxPrice: 0,
        // MinPrice: 0,
        // HotelName: '',
        // StartDate: '',
        // EndDate: '',
        // IsSelectImg: 1,

        KeyWords: "", //关键字
				KeyWords2: "", //关键字
				StartPrice: 100,
				EndPrice: 0,
				QOrderBy: "0", //排序类型
				QStarRating: [], //星级
				GName: '', //热门
				CityCode: '', //目的地代码
				CityName: '', //目的地
				CityCode2: '', //目的地代码
				regionCode: '', //区域
				CityName_CN: '',
				rooms: 1,
				adultsNumber: 2,
				childrenNumberZC: 0,
				childrenNumberBZC: 0,
				peoples: 2,
				interCurrent: 0,
				searchroomGroup: [{
					roomNum: 1,
					numberOfAdults: 2,
					numberOfChildren: 0,
					ChildAgeDetails: [],
					ChildAgeTexts: [],//儿童年龄
				}],
      },
      ShowType: 0, //显示样式(0-豆腐格，1-列表)
      //行程列表
      DataList: [],
    };
  },
  watch:{
    '$route': {
      handler(newVal, oldVal) {
        var qsearchKey = this.getUrlKey("qsearchKey", window.location.href);
        var qsearchDate = this.getUrlKey("qsearchDate", window.location.href);
        var qsearchEndDate = this.getUrlKey("qsearchEndDate", window.location.href);
        var areaId = this.getUrlKey("areaId", window.location.href);
        var areaName = this.getUrlKey("areaName", window.location.href);
        if (qsearchKey) {
          this.qMsg.KeyWords = qsearchKey;
        }else if (areaName) {
          this.qMsg.KeyWords = areaName;
        }else this.qMsg.KeyWords = ''

        if (qsearchDate) {
          this.qMsg.StartDate = qsearchDate;
        }else {
          this.qMsg.StartDate = date.formatDate(date.addToDate(new Date(), { days: 8 }), "YYYY/MM/DD")
        }
        if (qsearchEndDate) {
          this.qMsg.EndDate = qsearchEndDate;
        }else {
          this.qMsg.EndDate = date.formatDate(date.addToDate(new Date(), { days: 9 }), "YYYY/MM/DD")
        }

        if ((qsearchKey || qsearchDate || qsearchEndDate) && this.ShowType != 2) {
          this.goSearchHandler();
        }
      },
      deep: true,
      immediate: true,
    }
  },
  created() {},
  mounted() {
    // 支付宝退款 测试使用
    // this.apipost("GetAliPayReturn_post",{OrderNo:'D202304121702420001'},r=>{
    //     if(r.data.message=="退款成功"){
    //         this.$message.success("退款成功")
    //     }else{
    //         this.$message.error("退款失败")
    //     }
    // },e=>{

    // })
    if (localStorage.baseifo) {
      var jObj = JSON.parse(localStorage.baseifo);
      this.areas = jObj.AreaList;
      this.ShowType = jObj.Config.ShowType;
      this.ShowType = 2;
    } else {
      this.getAera();
    }
    document.addEventListener("click", this.clickHandler);
    
  },
  methods: {
    handlerSearchChange(value) {
      this.qMsg = value;
      this.goSearchHandler();
    },
    //清除所有条件
    clearAll() {
      let msg = {
        pageIndex: 1,
        pageSize: 20,
        companyId: 0,
        orderBy: 0, // 排序  0默认   1价格升序   2价格降序

        //只查询日本
        Country: "JP",
        DestinationID: '',
        City: "",
        //星级
        Star: '',
        //价格等级
        PriceLevel: 0,
        MaxPrice: 0,
        MinPrice: 0,
        HotelName: '',
        StartDate: '',
        EndDate: '',
        IsSelectImg: 1,
      };
      this.qMsg = msg;
      this.goSearchHandler();
    },
    //清除价格
    clearPrice() {
      this.qMsg.MinPrice = "";
      this.qMsg.MaxPrice = "";
      this.goSearchHandler();
    },
    //清除天数
    clearDays() {
      this.dayNum = [];
      this.goSearchHandler();
    },
    //清除星期
    clearWeek() {
      this.WeekDay = [];
      this.goSearchHandler();
    },
    //获取地区数据
    getAera() {
      this.apipost(
        "ws_get_GetSearchArea",
        {},
        (res) => {
          if (res.data.resultCode == 1) {
            if (res.data.data) {
              this.areas = res.data.data.AreaList;
            }
          }
        },
        (err) => {}
      );
    },
    searchFocusHandler() {
      if (this.qMsg.KeyWords == "") {
        setTimeout(() => {
          this.showSplitPannel = true;
        }, 200);
      }
    },
    searchBlurHandler() {},
    searchChangeHandler() {
      if (this.qMsg.KeyWords == "") {
        this.showSplitPannel = true;
      } else {
        this.showSplitPannel = false;
      }
    },
    clkAreaHandler(i) {
      this.crtAreaIndex = i;
    },
    clickHandler(e) {
      if (document.querySelector("#sb")) {
        if (!document.querySelector("#sb").contains(e.target)) {
          this.showSplitPannel = false;
        }
      }
    },
    chosenAreaHandler(name) {
      this.qMsg.KeyWords = name;
      this.showSplitPannel = false;
    },
    //数据改变
    changeData() {
      this.qMsg.pageIndex = 1;
      this.goSearchHandler();
    },
    //分页方法
    getPage() {
      this.goSearchHandler();
    },
    setSearchKey(obj) {
      this.qMsg.KeyWords = obj.Name;
    },
    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;
        }
      }
     
      this.SearchResult =
        this.qMsg.StartDate + "-" + this.qMsg.EndDate + "  " + this.qMsg.KeyWords;
      let msg = this.qMsg
      // if (localStorage.b2bUser) {
      //   var b2bUser = JSON.parse(window.localStorage.getItem("b2bUser"));
      //   if (b2bUser) {
      //     msg.priceOrderByField = 2;
      //   }
      // }
      
      this.apipost(
        "dmc_post_GetDiDaHotelPageList",//dmc_post_GetDiDaHotelPageList
        msg,
        (res) => {
          this.$q.loading.hide();
          if (res.data.resultCode == 1) {
            this.qMsg.PageCount = res.data.data.pageCount;
            this.qMsg.TotalCount = res.data.data.count;
            var tempArray = res.data.data.pageData;
            if (tempArray && tempArray.length > 0) {
              // tempArray.forEach((item) => {
              //   if (item.imgCover && item.imgCover != "") {
              //     try {
              //       var imgArray = JSON.parse(item.imgCover);
              //       if (imgArray && imgArray.length > 0) {
              //         item.newCoverImg = imgArray[0].Url;
              //       } else {
              //         item.newCoverImg = "";
              //       }
              //     } catch (e) {}
              //   }
              // });
              this.DataList = tempArray;
            }
          }
        },
        (err) => {}
      );
    },
  },
};
</script>
