<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, .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,.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, .09);
    transition: -webkit--webkit-transform .2s ease, box-shadow .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, .16), 0 2px 7px 0 rgba(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, .09);
    transition: transform .2s ease, box-shadow .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: .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"></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: {
          cityId: 0,
          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,
        },
        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);
      if (qsearchKey) {
        this.qMsg.searchKey = qsearchKey;
      }
      if (qsearchDate) {
        this.qMsg.startDate = qsearchDate;
      }
      if (qsearchEndDate) {
        this.qMsg.endDate = qsearchEndDate;
      }

      if ((qsearchKey || qsearchDate || qsearchEndDate) && this.ShowType!=2) {
        this.goSearchHandler();
      }
    },
    methods: {
      //清除所有条件
      clearAll(){
        let msg={
          cityId: 0,
          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,
        }
        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,
          cityId: this.qMsg.cityId,
          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(
          "b2b_get_GetB2BTravelPageList", 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>
