<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;
  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.searchKey">
        <q-breadcrumbs>
          <q-breadcrumbs-el
            icon="home"
            label="首頁"
            class="cursor-pointer"
            @click="CommonJump('/index', {})"
          />
          <q-breadcrumbs-el :label="qMsg.searchKey" />
        </q-breadcrumbs>
      </div>
      <div class="text-h6 text-left" v-if="qMsg.searchKey">
        搜尋結果 “
        <span class="text-primary">{{ qMsg.searchKey }}</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.searchKey}}
          </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.searchKey"
                  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.searchKey"
              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 popup from "../components/props/index";
import searchBlock from "../components/searchdata/block";
import searchList from "../components/searchdata/list";
import kkday from "../components/searchdata/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,
        companyId: 0,
        startDate: "", //开始日期
        endDate: "", //结束日期
        // lineId: 0, //线路编号
        // lineTeamId: 0, //系列编号
        minPrice: "", //最低价格
        maxPrice: "", //最高价格
        // minTripDay: "", //最低行程条数
        // maxTripDay: "", //最高行程天数
        // orderByDate: 0,
        // orderByPrice: 0,
        // orderBySales: 0,
        // pageIndex: 1,
        // pageSize: 10,
        // priceOrderByField: 4,
        searchKey: "", // 搜索词
        // startCityId: 0,
        // PageCount: 0,
        // TotalCount: 0,
        dayNumList: [], // 天数
        webSiteCategoryIds: "", // 分类Id
        placeIds: "", // 目的地城市Id
        orderBy: 0 // 排序  0默认   1价格升序   2价格降序
      },
      ShowType: 0, //显示样式(0-豆腐格，1-列表)
      //行程列表
      DataList: []
    };
  },
  created() {},
  mounted() {
    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);
    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 categoryId = this.getUrlKey("categoryId", window.location.href);
    if (qsearchKey) {
      this.qMsg.searchKey = qsearchKey;
    }
    if (qsearchDate) {
      this.qMsg.startDate = qsearchDate;
    }
    if (qsearchEndDate) {
      this.qMsg.endDate = qsearchEndDate;
    }
    if (areaId) {
      this.qMsg.areaId = Number(areaId);
    }
    if (categoryId) {
      this.qMsg.categoryId = Number(categoryId);
    }

    if ((qsearchKey || qsearchDate || qsearchEndDate) && this.ShowType != 2) {
      this.goSearchHandler();
    }
  },
  methods: {
    handlerSearchChange(value) {
      console.log("handlerSearchChange", value);
      this.qMsg = value;
      this.goSearchHandler();
    },
    //清除所有条件
    clearAll() {
      let msg = {
        companyId: 0,
        startDate: "", //开始日期
        endDate: "", //结束日期
        // lineId: 0, //线路编号
        // lineTeamId: 0, //系列编号
        minPrice: "", //最低价格
        maxPrice: "", //最高价格
        // minTripDay: "", //最低行程条数
        // maxTripDay: "", //最高行程天数
        // orderByDate: 0,
        // orderByPrice: 0,
        // orderBySales: 0,
        // pageIndex: 1,
        // pageSize: 10,
        // priceOrderByField: 4,
        searchKey: "", // 搜索词
        // startCityId: 0,
        // PageCount: 0,
        // TotalCount: 0,
        dayNumList: [], // 天数
        webSiteCategoryIds: "", // 分类Id
        placeIds: "", // 目的地城市Id
        orderBy: 0 // 排序  0默认   1价格升序   2价格降序
      };
      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.searchKey == "") {
        setTimeout(() => {
          this.showSplitPannel = true;
        }, 200);
      }
    },
    searchBlurHandler() {},
    searchChangeHandler() {
      if (this.qMsg.searchKey == "") {
        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.searchKey = name;
      this.showSplitPannel = false;
    },
    //数据改变
    changeData() {
      this.qMsg.pageIndex = 1;
      this.goSearchHandler();
    },
    //分页方法
    getPage() {
      this.goSearchHandler();
    },
    setSearchKey(obj) {
      this.qMsg.searchKey = 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;
        }
      }
      var companyId = -1;
      if (localStorage.groupinfo) {
        var groupinfo = JSON.parse(localStorage.groupinfo);
        companyId = groupinfo.siteList[0].companyId;
      }
      this.SearchResult =
        this.qMsg.startDate +
        "-" +
        this.qMsg.endDate +
        "  " +
        this.qMsg.searchKey;
      let msg = {
        pageIndex: this.qMsg.pageIndex,
        pageSize: this.qMsg.pageSize,
        searchKey: this.qMsg.searchKey,
        lineId: this.qMsg.lineId,
        lineTeamId: this.qMsg.lineTeamId,
        minTripDay: minTripDay,
        maxTripDay: maxTripDay,
        minPrice: minPrice,
        maxPrice: maxPrice,
        startDate: this.qMsg.startDate,
        endDate: this.qMsg.endDate,
        orderByDate: this.sortNum == 4 ? 1 : this.sortNum == 5 ? 2 : 0,
        orderByPrice: this.sortNum == 2 ? 1 : this.sortNum == 3 ? 2 : 0,
        orderByDay: this.sortNum == 6 ? 1 : this.sortNum == 7 ? 2 : 0,
        priceOrderByField: 4,
        companyId: companyId,
        orderBySales: 0,
        startCityId: this.qMsg.startCityId,
        weekDayList: this.WeekDay,
        dayNumList: this.dayNum
      };
      if (localStorage.b2bUser) {
        var b2bUser = JSON.parse(window.localStorage.getItem("b2bUser"));
        if (b2bUser) {
          this.msg.priceOrderByField = 2;
        }
      }
      this.apipost(
        "b2c_get_GetB2CMergeProductPageList",
        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>
