<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;
    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: 900px;
    margin:0 auto;
  }
</style>
<template>
  <div class="fix-height-subpage column no-wrap" :class="{'q-pa-md':$q.platform.is.desktop,'q-pa-sm':$q.platform.is.mobile}">
    <div class="SearchMain" :class="{'desktop-page':$q.platform.is.desktop}">
      <div class="SearchTop">
        <div :class="{'row items-start q-mt-lg':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
          <div :class="{'col-3 q-mr-lg':$q.platform.is.desktop}">
            <search></search>
          </div>
          <div :class="{'col q-mt-sm':$q.platform.is.desktop,'q-px-sm':$q.platform.is.mobile,}">
            <rightList></rightList>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { date,useQuasar } from "quasar";
import { provide,inject, reactive, toRefs, defineComponent,ref,watch, getCurrentInstance  } from 'vue';
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from 'src/config/dictionary'
import search from 'src/components/searchdata/search.vue'
import rightList from 'src/components/searchdata/rightList.vue'
export default defineComponent({
  components: { search,rightList },
  props: [],
  setup(props) {
    const { t } = useI18n()
    const $q = useQuasar()
    let {ctx:that, proxy} = getCurrentInstance()
    
    const data= reactive({
        
    })
    const search = reactive({
      RetrievalState: false,
      datesId: 0,
      DayId: 0,
      chosenAddress: [] as Array<any>,//右边目的地
      deleteChosen: null as any,//右侧删除目的地
      msg:{
        cityId: 0,//当前城市id
        companyId: 0,
        startDate: "", //开始日期
        endDate: "", //结束日期
        lineId: 0, //线路编号
        lineTeamId: 0, //系列编号
        minPrice: "0", //最低价格
        maxPrice: "100000", //最高价格
        minTripDay: "", //最低行程天数
        maxTripDay: "", //最高行程天数
        orderByDate: 0,
        orderByPrice: 0,
        orderBySales: 0,
        priceOrderByField: 2,//1同业会员价 2同业价格 3直客会员价 4直客价格
        searchKey: "",//关键词搜索
        startCityId: 0,//出发城市id
        teamType: [],
        priceRange:{
          min: 1,
          max: 100000,
        },
      }
    })
    provide(DirtionmaryHelper.TICKET_QUERY_PARAM, search)
    const methods = {
      
    }
    const menu=inject(DirtionmaryHelper.MENU_KEYS) as any
    menu.value=17
    return {
      ...toRefs(data),
      ...methods,
      
    }
  }
})
</script>

<style>
.blank-block{
  margin: 100px auto;
  width: 300px;
  text-align: center;
}
.blank-block i{
  font-size: 80px;
  color: #ddd;
}
.blank-block p{
  color: #999;
  font-size: 15px;
  letter-spacing: 1px;
}
.addr-list:hover {
  background: #E1F5FE;
}
</style>
