<template>
  <!--搜尋輪播淡出 - 中-->
  <div class="banner-style9">
    <q-carousel
      v-model="slide"
      :autoplay="50000"
      swipeable
      animated
      control-color="white"
      padding
      infinite
      height="350px"
      class="bg-grey-2 text-white"
    >
      <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 column items-center justify-center q-pt-xl rounded-borders"
      style="border-radius: 6px"
    >
      <div class="q-mt-lg">
        <div class="search-title">
          <div class="title">{{ plugData.Title.split("^")[0] }}</div>
          <div class="sub-title">
            {{
              plugData.SubTitle
                ? plugData.SubTitle
                : "探索有趣又独特目的地旅游体验"
            }}
          </div>
        </div>
        <div style="position: relative" v-if="!$q.screen.xs">
          <div
            class="row rounded-borders overflow-hidden"
            style="width: 760px"
            v-if="plugData.Title.split('^').length == 1"
          >
            <div class="col-5" style="width: calc(41.6667% - 22px)">
              <q-input
                filled
                square
                id="search_key"
                v-model="searchKey"
                class="bg-grey-1"
                clearable
                :label="$t('search')"
                @focus="searchFocusHandler"
                @blur="searchBlurHandler"
                @keyup="searchChangeHandler"
              />
            </div>
            <div class="col-3">
              <q-input
                filled
                square
                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
                square
                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;
                  border-bottom-left-radius: 0;
                  border-top-left-radius: 0;
                "
                @click="goSearchHandler"
              />
            </div>
          </div>
          <div
            class="row overflow-hidden bg-white"
            style="width: 640px; margin: 0 auto; border-radius: 5px"
            v-if="
              plugData.Title.split('^').length > 1 &&
              plugData.Title.split('^')[1] == 'ns1'
            "
          >
            <q-input
              filled
              square
              id="search_key"
              v-model="searchKey"
              class="bg-grey-1 col"
              clearable
              label="搜尋目的地、景點、行程觀光或酒店名稱..."
              @focus="searchFocusHandler"
              @blur="searchBlurHandler"
              @keyup="searchChangeHandler"
            />
            <q-btn
              dark-percentage
              color="primary"
              style="border-radius: 0"
              class="col-2"
              unelevated
              icon="search"
              @click="goSearchHandler"
            />
          </div>
          <div
            v-show="showSplitPannel"
            id="sb"
            transition-show="fade"
            elevated
            transition-hide="scale"
            class="showbox column"

          >
            <div class="q-px-sm q-pt-sm" v-if="historys.length>0">
              <div class="q-mb-sm text-weight-bold">歷史搜索</div>
                <div class="row">
                  <div class="col overflow-hidden" style="height:36px">
                    <q-chip style="background:#f6f7f9;" @click="goSearchHandler(x)" clickable text-color="dark" class="cursor-pointer" :label="x" v-for="(x,i) in historys" :key="i" />
                  </div>
                  <q-btn text-color="grey-6" icon="delete" class="q-py-none" dense size="sm" flat @click="clearHistorys">
                    <q-tooltip class="bg-dark" co>清空歷史</q-tooltip>
                  </q-btn>
                </div>
            </div>
            <div class="text-weight-bold q-pa-sm">熱門目的地</div>
            <q-separator />
            <div>
              <div class="hot-tag" @click="handleHotTagClick(item)" :class="{'hot-tag-select': setectHotTag === item.Id}" :key="item.Id" v-for="item in hotList">{{item.Name}}</div>
            </div>
            <!-- <div class="col full-width 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="text-h6 cursor-pointer" @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="text-subtitle2 cursor-pointer" @click="chosenAreaHandler(y.Name)">
                            {{ y.Name }}
                          </div>
                          <template
                            v-if="y && y.SubList && y.SubList.length > 0"
                          >
                            <div
                              class="text-subtitle2 text-weight-light cursor-pointer"
                              @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>
        <div v-if="$q.screen.xs">
          <q-input
            filled
            v-model="searchKey"
            class="bg-grey-1 q-mx-md"
            :label="$t('search')"
            readonly="readonly"
            @click="showPopupHandler"
          >
            <template v-slot:append>
              <q-icon name="search" />
            </template>
          </q-input>
        </div>
      </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 {
      setectHotTag: '',
      hotList: [],
      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",
      historys:[],
      chosenResult: {
        fl: "",
        sl: "",
        tl: "",
        ful: "",
      },
      RB_Group_Id: 0,
    };
  },
  created() {
    // this.$EventBus.$on('hotList', (hotList) => {
    //   console.log('hotList', hotList);
    //   this.hotList = hotList
    // })
  },
  mounted() {
    var jObj = JSON.parse(window.localStorage.getItem('baseifo'));
    const hotList = this.getHotList(jObj.AreaList)
    console.log('hotList mounted', jObj, hotList)
    this.hotList = hotList
    this.getHistory()
    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: {
    getHotList(arr) {
      let hotArr = [];
      arr.forEach(item => {
        if (item.SubList && item.SubList.length) {
          hotArr = hotArr.concat(this.getHotList(item.SubList));
        } else {
          if (item.IsHot === 1) {
            hotArr.push(item);
          }
        }
      });
      return hotArr;
    },
    handleHotTagClick(item) {
      this.setectHotTag = item.Id
      // let val = item.Name
      // if(val!='' && typeof val == 'string'){
      //   this.searchKey=val
      // }
      // this.historys=Array.from(new Set([this.searchKey].concat(this.historys)))
      // localStorage['recent_search'] = JSON.stringify(this.historys)
      this.CommonJump("/search", {
        qsearchKey: this.searchKey,
        qsearchDate: this.searchDate,
        qsearchEndDate: this.searchEndDate,
        areaId: item.Id
      });
    },
    //获取地区数据
    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) => {}
      );
    },
    getHistory(){
      this.historys =JSON.parse(localStorage['recent_search']??'[]')
    },
    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() {
      //this.showSplitPannel = false;
    },
    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(val='') {
      console.log(val)
      if(val!='' && typeof val == 'string'){
        this.searchKey=val
      }
      this.historys=Array.from(new Set([this.searchKey].concat(this.historys)))
      localStorage['recent_search'] = JSON.stringify(this.historys)
      this.CommonJump("/search", {
        qsearchKey: this.searchKey,
        qsearchDate: this.searchDate,
        qsearchEndDate: this.searchEndDate,
      });
    },
    clearHistorys(){
      this.historys =[]
      localStorage['recent_search'] = JSON.stringify(this.historys)
    }
  },
};
</script>

<style>
.banner-style9 {
  /* margin-top: 0px; */
  position: relative;
  /* overflow: hidden; */
  border-radius: 5px;
}

.banner-style9 .search-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  /* transform: translate(-50%, -50%); */
  /* margin-top: 40px; */
  background: rgb(0, 0, 0, 0.1);
}

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

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

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

.banner-style9 .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-style9 .showspbox {
  position: absolute;
  box-sizing: border-box;
  width: calc(41.6667% - 22px);
  height: 345px;
  background: #fff;
  left: 0;
  top: 185px;
  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>
<style scoped>
.hot-tag {
  width: 141px;
height: 34px;
line-height: 34px;
padding-left: 8px;
border-radius: 8px;
margin: 12px 0 12px 12px;
cursor: pointer;
}
.hot-tag-select {
background: #EE4454;
color: #fff;
}
</style>