<template>
  <!--搜尋輪播淡出 - 大-->
  <div class="banner-style8">
    <q-carousel v-model="slide" :autoplay="5000" swipeable animated control-color="white" padding infinite
      height="550px" class="bg-primary text-white shadow-1 rounded-borders">
      <q-carousel-slide v-for="(x, i) in plugData.Details" v-if="x.ImageUrl!=''" :key="i" @click="clickSlideHandler(x.path)" :name="i"
        :img-src="x.ImageUrl" />
    </q-carousel>
    <div class="search-content">
      <div class="search-title">
        <div class="title">{{plugData.Title}}</div>
        <div class="sub-title">{{plugData.SubTitle}}</div>
      </div>
      <div style="width: 760px;margin:auto;position:relative;" v-if="!$q.screen.xs">
        <div class="row">
          <div class="col-5" style="width:calc(41.6667% - 22px)">
            <q-input filled id="search_key" v-model="searchKey" class="bg-grey-1" :label="$t('search')"
              @focus="searchFocusHandler" @blur="searchBlurHandler" @keyup="searchChangeHandler" />
          </div>
          <div class="col-3">
            <q-input filled v-model="searchDate" :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="qS1DateProxy">
                    <q-date mask="YYYY-MM-DD" :title="$t('search_date_begin')" subtitle="選擇" v-model="searchDate"
                      @input="() => $refs.qS1DateProxy.hide()" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
          </div>
          <div class="bg-grey-3 q-pl-xs q-pr-xs" style="text-align:center;line-height:56px;">至</div>
          <div class="col-3">
            <q-input filled v-model="searchEndDate" :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="qS2DateProxy">
                    <q-date mask="YYYY-MM-DD" :title="$t('search_date_end')" subtitle="選擇" v-model="searchEndDate"
                      @input="() => $refs.qS2DateProxy.hide()" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
          </div>
          <div class="col-1">
            <q-btn dark-percentage color="primary" unelevated icon="search" style="width: 100%;height:56px"
              @click="goSearchHandler" />
          </div>
        </div>
        <div v-show="showSplitPannel" id="sb" 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.stop="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 style="width:100vw;" v-if="$q.screen.xs">
        <q-input filled v-model="searchKey" class="bg-grey-1 q-ml-md q-mr-md" :label="$t('search')" readonly="readonly"
          @click="showPopupHandler">
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
      </div>
    </div>
    <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" :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="searchKey" class="bg-grey-1" :label="$t('search')" />
          </div>
          <div class="q-mb-md row">
            <div class="col">
              <q-input filled v-model="searchDate" :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="qS3DateProxy">
                      <q-date mask="YYYY-MM-DD" :title="$t('search_date_begin')" subtitle="選擇" v-model="searchDate"
                        @input="() => $refs.qS3DateProxy.hide()" />
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
            </div>
            <div class="split-word bg-grey-3 q-pl-xs q-pr-xs">至</div>
            <div class="col">
              <q-input filled v-model="searchEndDate" :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="qS4DateProxy">
                      <q-date mask="YYYY-MM-DD" :title="$t('search_date_begin')" subtitle="選擇" v-model="searchEndDate"
                        @input="() => $refs.qS4DateProxy.hide()" />
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
            </div>
          </div>
          <div>
            <q-btn color="primary" unelevated style="width:100%" filled label="搜尋" @click="goSearchHandler" />
          </div>
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
  //搜尋輪播淡出 - 大
  import popup from "../props/index";
  export default {
    props: ["plugData"],
    components: {
      popup
    },
    data() {
      return {
        slide: 0,
        searchKey: "",
        searchDate: "",
        searchEndDate: "",
        showSplitPannel: 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,
        showPopup: false,
        tab: "dest",
        chosenResult: {
          fl: "",
          sl: "",
          tl: "",
          ful: ""
        },
        RB_Group_Id: 0,
      };
    },
    mounted() {
      var newStartDate = new Date();
      var newStartDateStr = this.formatDate(newStartDate.getFullYear(), (newStartDate.getMonth() + 1), newStartDate
        .getDate());
      var newEndDate = this.AddMonth(newStartDateStr, 2)
      var newEndDateStr = this.formatDate(newEndDate.getFullYear(), (newEndDate.getMonth() + 1), newEndDate.getDate());
      this.searchDate = newStartDateStr;
      this.searchEndDate = newEndDateStr;

      this.$root.$emit("change-head-style", 2);
      document.addEventListener("click", this.clickHandler);
      var jObj = JSON.parse(localStorage.getItem('groupinfo'));
      this.RB_Group_Id = jObj.GroupId;
      if (localStorage.baseifo) {
        var jObj = JSON.parse(localStorage.baseifo);
        this.areas = jObj.AreaList;
      } else {
        this.getAera()
      }
    },
    beforeDestroy() {
      document.removeEventListener("click", this.clickHandler);
    },
    computed: {},
    methods: {
      //获取地区数据
      getAera() {
        this.apipost(
          "ws_get_GetSearchArea", {
            RB_Group_Id: this.RB_Group_Id
          },
          res => {
            if (res.data.resultCode == 1) {
              if (res.data.data) {
                this.areas = res.data.data.AreaList;
              }
            }
          },
          err => {}
        );
      },
      showPopupHandler() {
        this.showPopup = true;
      },
      clickHandler(e) {
        try {
          if (!document.querySelector("#sb").contains(e.target)) {
            this.showSplitPannel = false;
          }
        } catch (error) {
        }
      },
      clickSlideHandler(url) {
        if (url && url.length > 1) {
          location.href = url;
        }
      },
      searchFocusHandler() {
        if (this.searchKey == "") {
          setTimeout(() => {
            this.showSplitPannel = true;
          }, 200);
        }
      },
      searchBlurHandler() {

      },
      clkAreaHandler(i) {
        this.crtAreaIndex = i;
      },
      searchChangeHandler() {
        if (this.searchKey == "") {
          this.showSplitPannel = true;
        } else {
          this.showSplitPannel = false;
        }
      },
      chosenAreaHandler(name) {
        this.searchKey = name;
        this.showSplitPannel = false;
      },
      //跳转到搜索页面
      goSearchHandler() {
        this.CommonJump('/search', {
          qsearchKey: this.searchKey,
          qsearchDate: this.searchDate,
          qsearchEndDate: this.searchEndDate,
        })
      }
    }
  };

</script>

<style>
  .banner-style8 {
    /* margin-top: -60px; */
    position: relative;
  }

  .banner-style8 .search-content {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
  }

  .banner-style8 .search-content .search-title {
    margin: 0 auto;
    max-width: 520px;
    color: #fff;
    width: 80%;
    font-weight: 600;
  }

  .banner-style8 .search-content .search-title .title {
    margin-bottom: 10px;
    font-size: 48px;
    line-height: 1.2;
    text-align: center;
    letter-spacing: 1px;
  }

  .banner-style8 .search-content .search-title .sub-title {
    margin-bottom: 30px;
    font-size: 24px;
    text-align: center;
    letter-spacing: 1px;
  }

  .banner-style8 .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);
  }

  .banner-style8 .showspbox {
    position: absolute;
    box-sizing: border-box;
    width: calc(41.6667% - 22px);
    height: 345px;
    background: #fff;
    left: 0;
    top: 226px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
  }

  .my-menu-link {
    background-color: rgb(237, 237, 237) !important;
  }

  .area-box .h3 {
    font-size: 22px;
    color: #333;
    font-weight: 600;
    padding: 0;
    height: unset;
    list-style: unset;
    margin: 0;
    cursor: pointer;
  }

  .area-box .h4 {
    font-size: 18px;
    color: #424242;
    padding: 0;
    height: unset;
    list-style: unset;
    margin: 0;
    margin-right: 20px;
    font-weight: 600;
    cursor: pointer;
  }

  .area-box .h5 {
    font-size: 16px;
    color: #636363;
    padding: 0;
    height: unset;
    list-style: unset;
    margin: 0;
    margin-right: 12px;
    cursor: pointer;
  }

  .area-box .h6 {
    font-size: 14px;
    color: gray;
    padding: 0;
    height: unset;
    list-style: unset;
    margin: 0;
    text-align: right;
    cursor: pointer;
  }

  .area-box .h6:hover,
  .area-box .h5:hover,
  .area-box .h4:hover,
  .area-box .h3:hover {
    color: var(--q-color-primary);
  }

  .area-box .to-end {
    align-items: flex-end;
  }

  .chosen-box {
    padding: 15px;
    min-height: 30vh;
  }

  .chosen-box .title {
    font-size: 20px;
    font-weight: 600;
    color: #111;
    margin-bottom: 5px;
  }

  .chosen-box .split-word {
    font-size: 15px;
    color: #333;
    line-height: 56px;
  }

</style>
