<template>
  <div>
    <div class="q-pa-md bg-grey-1">
      <div class="desktop-only" style="max-width:1200px; margin:0 auto;width:100%;position: relative;">
        <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="qDateProxy">
                    <q-date mask="YYYY-MM-DD" :title="$t('search_date_begin')" subtitle="選擇" v-model="searchDate"
                      @input="() => $refs.qDateProxy.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="qDateProxy">
                    <q-date mask="YYYY-MM-DD" :title="$t('search_date_end')" subtitle="選擇" v-model="searchEndDate"
                      @input="() => $refs.qDateProxy.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="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 v-show="showCompPannel" id="sp" transition-show="fade" elevated transition-hide="scale"
          class="showspbox row">
          <q-scroll-area :thumb-style="thumbStyle" :bar-style="barStyle" style="height: 100%;width:100%">
            <q-list class="area-box">
              <q-item clickable v-ripple @click="chosenAreaHandler('日本')">
                <q-item-section>
                  <q-item-label class="h4">日本</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-ripple @click="chosenAreaHandler('佐佐木美術館')">
                <q-item-section>
                  <q-item-label class="h4">佐佐木美術館</q-item-label>
                </q-item-section>
                <q-item-section>
                  <q-item-label class="h6">日本-東京</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-ripple @click="chosenAreaHandler('名古屋樂高樂園')">
                <q-item-section>
                  <q-item-label class="h4">名古屋樂高樂園</q-item-label>
                </q-item-section>
                <q-item-section>
                  <q-item-label class="h6">日本-東京</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-ripple @click="chosenAreaHandler('鶴據村')">
                <q-item-section>
                  <q-item-label class="h4">鶴據村</q-item-label>
                </q-item-section>
                <q-item-section>
                  <q-item-label class="h6">日本-東京</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-ripple @click="chosenAreaHandler('長盤公園')">
                <q-item-section>
                  <q-item-label class="h4">長盤公園</q-item-label>
                </q-item-section>
                <q-item-section>
                  <q-item-label class="h6">日本-東京</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-ripple @click="chosenAreaHandler('日本磁懸浮列車')">
                <q-item-section>
                  <q-item-label class="h4">日本磁懸浮列車</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-ripple @click="chosenAreaHandler">
                <q-item-section>
                  <q-item-label class="h4">日本平展望台</q-item-label>
                </q-item-section>
                <q-item-section>
                  <q-item-label class="h6">日本-東京</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-ripple @click="chosenAreaHandler">
                <q-item-section>
                  <q-item-label class="h4">火影忍者村</q-item-label>
                </q-item-section>
                <q-item-section>
                  <q-item-label class="h6">日本-東京</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-ripple @click="chosenAreaHandler">
                <q-item-section>
                  <q-item-label class="h4">海賊俱樂部</q-item-label>
                </q-item-section>
                <q-item-section>
                  <q-item-label class="h6">日本-未知海域</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-scroll-area>
        </div>
      </div>
      <div class="mobile-only">
        <q-input filled id="search_key" v-model="searchKey" class="bg-grey-1" :label="$t('search')" readonly="readonly"
          @click="showPopupHandler">
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
        <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="qDateProxy">
                          <q-date mask="YYYY-MM-DD" :title="$t('search_date_begin')" subtitle="選擇" v-model="searchDate"
                            @input="() => $refs.qDateProxy.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="qDateProxy">
                          <q-date mask="YYYY-MM-DD" :title="$t('search_date_begin')" subtitle="選擇"
                            v-model="searchEndDate" @input="() => $refs.qDateProxy.hide()" />
                        </q-popup-proxy>
                      </q-icon>
                    </template>
                  </q-input>
                </div>
              </div>
              <div>
                <q-btn color="primary" unelevated style="width:100%" filled label="搜尋" />
              </div>
            </div>
          </div>
        </popup>
      </div>
    </div>
  </div>
</template>

<script>
  //其他-搜索列
  import popup from "../props/index";
  export default {
    props: ["plugData"],
    components: {
      popup
    },
    data() {
      return {
        slide: 0,
        searchKey: "",
        searchDate: "",
        searchEndDate: "",
        showSplitPannel: false,
        showCompPannel: 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: ""
        }
      };
    },
    mounted() {
      var jObj = JSON.parse(window.localStorage.getItem('baseifo'));
      this.areas = jObj.AreaList;
      this.$root.$emit("change-head-style", 1);
      document.addEventListener("click", this.clickHandler);
    },
    beforeDestroy() {
      document.removeEventListener("click", this.clickHandler);
    },
    computed: {

    },
    methods: {
      showPopupHandler() {
        this.showPopup = true
      },
      clickHandler(e) {
        if (!document.querySelector("#sb").contains(e.target)) {
          this.showSplitPannel = false;
        } else if (!document.querySelector("#sp").contains(e.target)) {
          this.showCompPannel = false;
        }
      },
      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;
          this.showCompPannel = false;
        } else {
          this.showSplitPannel = false;
          this.showCompPannel = true;
        }
      },
      chosenAreaHandler(name) {
        this.searchKey = name;
        this.showSplitPannel = false;
        this.showCompPannel = false;
      },
      goSearchHandler() {
        if (this.searchKey == "") {
          this.$q.notify({
            color: "negative",
            textColor: "#FFF",
            icon: "report_problem",
            message: "尊敬的客人，請選擇一個目的地吧",
            position: "top",
            timeout: 3000
          });
        }
      }
    }
  };

</script>

<style>
  .showbox {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 345px;
    background: #fff;
    left: 0;
    top: 56px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
  }

  .showspbox {
    position: absolute;
    box-sizing: border-box;
    width: calc(41.6667% - 22px);
    height: 345px;
    background: #fff;
    left: 0;
    top: 56px;
    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>
