<style>
</style>
<style scoped>
.area-item {
  border-radius: 4px;
  border: 1px solid #eee;
  padding: 4px 6px;
  margin: 8px 8px 8px 0;
  display: inline-block;
}
.navigate {
  line-height: 12px;
  border-bottom: 1px solid #666;
}
.box {
  max-height: 500px;
  overflow: auto;
}
.hot-item {
  width: 50%;
  display: inline-block;
  height: 100px;
  padding: 5px;
}
.category-item {
  height: 40px;
  line-height: 40px;
  border-top: 1px solid #eee;
}
.top-navs {
  position: sticky;
  top: 0px;
  z-index: 10;
  background: #fff;
}
.area-navs {
  position: sticky;
  top: 48px;
  z-index: 10;
  background: #fff;
}
</style>
<template>
  <div class="box relative" id="privilage-list">
    <q-tabs v-model="tabType" class="text-primary top-navs">
      <q-tab name="area" label="目的地" />
      <q-tab name="category" label="所有分类" />
    </q-tabs>
    <!-- 目的地 -->
    <div v-if="tabType === 'area'">
      <div class="padding">
        <div class="flex justify-between items-end">
          <span class="f18 bold">热门目的地</span>
          <span class="navigate" @click="showHotMore = !showHotMore">{{
            showHotMore ? "收起" : "查看更多"
          }}</span>
        </div>
        <div>
          <template v-for="(item, index) in hotAreas">
            <div
              v-if="showHotMore || index < 4"
              :key="item.Id"
              @click="handleSelectArea(item)"
              class="hot-item"
            >
              <q-img
                :src="item.ImageList[0]"
                spinner-color="grey-2"
                class="rounded-borders full-width full-height"
              >
                <div
                  class="full-width full-height row items-center justify-center"
                  style="background: none"
                >
                  <div
                    style="
                      background: rgba(0, 0, 0, 0.2);
                      text-shadow: 2px 2px 5px rgb(0 0 0 / 50%);
                    "
                    class="rounded-borders q-px-md q-py-xs text-white cursor-pointer"
                  >
                    {{ item.Name }}
                  </div>
                </div>
              </q-img>
            </div></template
          >
          <q-tabs v-model="areaType" class="text-primary area-navs" :dense="true">
            <q-tab @click="goScrollHandler(item.Id)"
              v-for="item in areas"
              :key="item.Id"
              :name="item.Id"
              :label="item.Name"
            />
          </q-tabs>
          <div :style="showPadding ?'padding-top: 100px' : ''">
          <div :id="`el${item.Id}`" v-for="item in areas" :key="item.Id">
            <div class="q-mt-md" ref="content" v-for="el in item.SubList" :key="el.Id">
              <div class="flex justify-between items-end">
                <span class="f18 bold">{{ el.Name }}</span>
                <span class="navigate" @click="handleSelectArea(el)">探索</span>
              </div>
              <div
                class="area-item"
                v-for="area in el.SubList"
                :key="area.Id"
                @click="handleSelectArea(area)"
              >
                {{ area.Name }}
              </div>
            </div>
          </div></div>
        </div>
      </div>
    </div>
    <!-- 分类 -->
    <div v-else>
      <div class="padding">
        <div>
          <!-- <q-tabs v-model="areaType" class="text-primary"  :dense="true">
            <q-tab
              v-for="(item, i) in dataList.CategoryList"
              :key="i"
              :name="i"
              :label="item.CategoryName"
            />
          </q-tabs> -->
          <div v-for="(item, i) in dataList.CategoryList" :key="i">
            <!-- <div class="category-item" @click="handleCategoryChage(item)">
                <span>{{ item.CategoryName }}</span>
        <i class="iconfont iconpreviewright"></i></div> -->
            <div v-for="el in item.SubList" :key="el.Id">
              <div class="category-item"
                @click="handleCategoryChage(el)">
                <span>{{ el.CategoryName }}</span>
        <i class="iconfont iconpreviewright"></i>
              </div>
              <div class="category-item"
                v-for="area in el.SubList"
                :key="area.Id"
                @click="handleCategoryChage(area)"
              >
                <span>{{ area.CategoryName }}</span>
        <i class="iconfont iconpreviewright"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {throttle} from 'lodash';
export default {
  props: {
    baseData: {
      type: Object,
      default: () => ({}),
    },
    dataList: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      showPadding: false,
      showHotMore: false,
      tabType: "area",
      areaType: "",
      searchDate: "",
      searchEndDate: "",
      menuFocusAll: 0,
      menuFocus: 0,
      selectCategory: undefined,
      categoryList: [],
      subTitle: "",
      navs: [],
      navsStyle: 1,
      areas: [],
      hotAreas: [],
    };
  },
  watch: {
    baseData: {
      handler(n, o) {
        this.initAreas();
      },
      deep: true,
    },
  },
  mounted() {
    this.initAreas();
    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;
  },
  beforeDestroy() {
      window.removeEventListener('scroll', this.throttleGetScrollTop, true)
  },
  methods: {
    initScroll() {
      this.isSlide = true // 平滑滚动前
      setTimeout(() => { // 点击时平滑滚动完成前不监听滚动
        this.isSlide = false
      }, 600)
      // 收集收集滚动元素的高度
      this.slotsTopList = this.$refs.content?.map((item, index) => {
        return item.offsetTop
      })
      this.slotsTopList = this.slotsTopList || []
      console.log('this.slotsTopList', this.slotsTopList)
      // 初始化滚动监听
      this.scrollInit()
    },
     // 监听滚动高度
    scrollInit () {
      this.throttleGetScrollTop = throttle(this.getScrollTop, 100)
      this.throttleGetScrollTop()
      window.addEventListener('scroll', this.throttleGetScrollTop, true)
    },
    // 监听滚动距离
    async getScrollTop () {
      if (this.isSlide) return
      const scrollTop = document.getElementById('privilage-list').scrollTop
      // 获取当前滚动内容对应的tabIndex
      let currentIndex = this.slotsTopList.findIndex((top, index) => {
        return scrollTop >= this.slotsTopList[index + 1] && scrollTop < this.slotsTopList[index + 2]
      })
      // this.clickedIndex = currentIndex + 1
      if(currentIndex + 1 > -1) {
        // this.showPadding = true
      this.areaType = this.areas[currentIndex + 1].Id
      } else {
        this.showPadding = false
      }
    },
    goScrollHandler(id) {
      this.isSlide = true // 平滑滚动前
      setTimeout(() => { // 点击时平滑滚动完成前不监听滚动
        this.isSlide = false
      }, 600)
      console.log("scrollIntoView",`el${id}`, id);
      const ele = `#el${id}`
      document.querySelector(ele).scrollIntoView({ behavior: "smooth", block: 'end' });
    },
    handleSelectArea(item) {
      this.$emit('close', false)
      this.CommonJump("/city/" + item.Id, {
        id: item.Id,
      });
    },
    handleCategoryChage(item) {
      this.$emit('close', false)
      this.CommonJump("/search", {
        qsearchKey: this.searchKey,
        qsearchDate: this.searchDate,
        qsearchEndDate: this.searchEndDate,
        categoryId: item.Id,
      });
    },
    initAreas() {
      this.areas = [];
      let hotArr = this.getHotList(this.baseData.AreaList);
      this.selectedArea = hotArr;
      this.areas = this.baseData.AreaList;
      this.hotAreas = hotArr;
      console.log("hotArea", this.hotAreas, this.areas);
      this.$nextTick(() => {
        
    this.initScroll();
      }) 
    },
    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;
    },
    getCategoryList() {
      let locationName = this.GetDomain();
      var msg = {
        RB_Group_Id: this.RB_Group_Id,
        B2BDomain: locationName,
      };
      this.apipost(
        "ws_post_GetHomeCategoryTreeList",
        msg,
        (res) => {
          if (res.data.resultCode == 1) {
            if (res.data.data) {
              this.categoryList = res.data.data;
            }
          }
          this.$nextTick(() => {
            this.isPic =
              document.URL.indexOf("localhost") != -1 ||
              document.URL.indexOf("www.oytour.com") != -1;
          });
        },
        (err) => {}
      );
    },
  },
};
</script>

<style>
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.nav-items {
  position: relative;
}
.nav-items:hover {
  background: #eee;

  color: var(--q-color-primary);
}
.nav-items:hover::after {
  content: " ";
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--q-color-primary);
}
.nav-items:hover .secondMenu {
  display: block;
}
.secondMenu {
  display: none;
  padding-top: 5px;
  position: absolute;
  top: 60px;
  left: 0px;
  z-index: 9;
}
</style>
