<style lang="scss" scoped>
.header-box {
  max-width: 1200px;
  margin: 0 auto;
}
.address-box {
  width: 815px;
  height: 426px;
}
.menu-box {
  width: 174px;
  height: 426px;
  overflow: auto;
}
.menu-item {
  width: 139px;
  margin: 15px auto;
  height: 49px;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
}
.menu-item:hover {
  color: #333;
  background-color: #eeeeee;
}
.hot {
  line-height: 33px;
}
.select {
  color: #fff;
  background-color: var(--q-color-primary);
}
.menu-title {
  font-weight: bold;
}
.menu-tag-box span {
  margin-right: 20px;
}
.menu-tag-box:last-child {
  margin-right: 0;
}
.city-box {
  padding: 14px 18px;
  width: 641px;
  background: #f5f5f5;
}
.city {
  width: 129px;
  height: 69px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0% 0%;
  cursor: pointer;
}
.city2 {
  width: 76px;
  height: 32px;
  background: #dbdbdb;
  border-radius: 8px;
  font-weight: bold;
  line-height: 32px;
  overflow: hidden;
  padding: 0 8px;
  margin-right: 20px;
  cursor: pointer;
}
.city3 {
  height: 32px;
  line-height: 32px;
  margin: 0 20px 4px 0;
  cursor: pointer;
  font-weight: bold;
}
.city:hover {
  background-color: #eeeeee;
}
.city-img {
  width: 127px;
  height: 67px;
  position: absolute;
  top: 1;
  left: 1;
  border-radius: 10px;
}
.city-name-box {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.city-name {
  text-align: center;
  height: 22px;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.address-btn {
  text-align: center;
  width: 140px;
  height: 36px;
  line-height: 36px;
  padding-left: 20px;
  background: #fff;
  margin: 0 10px 0 44px;
}
.address-btn:hover {
  background: #f5f5f5;
}
.all-type {
  margin-left: 10px;
}
.all-menu {
  width: 660px;
  padding: 10px;
}
.category-item {
  min-width: 160px;
  padding: 10px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 18px !important;
}
.font-16 {
  font-size: 16px;
}
.category-l2 {
  height: 34px;
  border-radius: 8px;
  line-height: 34px;
  padding: 0 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
}
.category-l2:hover {
  background: var(--q-color-primary);
  color: #fff;
}
.category-l2-select {
  background: var(--q-color-primary);
  color: #fff;
}
.category-l3 {
  padding: 8px;
  font-size: 12px;
  font-weight: 400;
  color: #a0a0a0;
  border-radius: 8px;
  cursor: pointer;
}
.category-l3:hover {
  background-color: #eee;
}
.category-l3-select {
  color: #ee4454;
}
.category-box {
  min-width: 140px;
  padding: 10px;
  font-weight: bold;
}
.category-btn {
  text-align: center;
  width: 100px;
  height: 36px;
  line-height: 36px;
  background: #fff;
}
.category-btn:hover {
  background: #f5f5f5;
}
.category-icon {
  width: 16px;
  height: 16px;
}
</style>
<template>
  <div>
    <q-separator color="grey-2" v-if="isHome" />
    <div class="header-box flex q-py-sm" v-if="isHome">
      <q-tabs align="center" shrink>
        <div
          flat
          unelevated
          class="address-btn"
          @mouseenter="mouseenterAddress"
          @mouseleave="mouseeleaveAddress"
        >
          <span slot="default" class="flex item-center">
            <i
              class="iconfont icondingweixiao q-icon notranslate"
              style="font-size: 14px; margin-right: 8px"
            ></i
            >選擇目的地
          </span>
          <q-menu
            ref="address"
            @mouseenter="addressMenuEnter"
            @mouseleave="addressMenuLeave"
            class="light-shadow"
          >
            <div class="address-box flex">
              <div class="menu-box">
                <div
                  v-for="item in areas"
                  :key="item.Id"
                  class="menu-item"
                  @click="changeAreas(item)"
                  :class="{ select: selectedAreaId === item.Id }"
                >
                  <div v-if="!item.tag" class="hot">{{ item.Name }}</div>
                  <div v-else>
                    <div class="menu-title">{{ item.Name }}</div>
                    <div class="menu-tag-box">
                      <span>加德滿都</span>
                      <span>加德滿都</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 热门城市 -->
              <div class="col bg-grey-2">
                <div v-if="!selectedAreaId" class="row q-pr-md">
                  <div
                    @click="handleSelectArea(item)"
                    v-for="item in selectedArea"
                    class="q-mt-md q-ml-md"
                    :key="item.Id"
                    style="width: 130px; height: 70px"
                  >
                    <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>
                </div>
                <div v-else class="city-box">
                  <div class="row" v-for="item in selectedArea" :key="item.Id">
                    <div style="width: 138px">
                      <div
                        @click="handleSelectArea(item)"
                        class="q-py-xs q-px-md bg-grey-4 cursor-pointer text-black text-subtitle2 inline-block rounded-borders text-weight-bolder"
                      >
                        {{ item.Name }}
                      </div>
                    </div>
                    <div class="col q-mt-sm">
                      <div class="row q-col-gutter-lg">
                        <div
                          @click="handleSelectArea(item2)"
                          class="text-subtitle2 text-grey-9 cursor-pointer"
                          v-for="item2 in item.SubList"
                          :key="item2.Id"
                        >
                          {{ item2.Name }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </q-menu>
        </div>
        <q-separator style="height: 16px; margin: auto 0" vertical />
        <div
          class="all-type category-btn"
          flat
          unelevated
          @mouseenter="typeHoverAll(true)"
          @mouseleave="typeHoverAll(false)"
        >
          全部分類
          <q-menu ref="menu0" @mouseenter="menuFocusAll = 2" @mouseleave="menuLeaveAll">
            <div class="all-menu">
              <div class="flex">
                <div
                  class="category-item font-16"
                  :key="i"
                  v-for="(x, i) in categoryList"
                >
                  <template v-if="i <= 3">
                    <img
                      class="category-icon"
                      :src="
                        require(`../../assets/img/home/${
                          ['guanguang', 'jindian', 'hotel', 'car'][i]
                        }.png`)
                      "
                    />
                  </template>
                  {{ x.CategoryName }}
                </div>
              </div>
              <q-separator />
              <div class="flex">
                <div
                  class="category-item"
                  :key="i"
                  v-for="(x, i) in categoryList"
                >
                  <div :key="i" v-for="item in x.SubList">
                    <div
                      @click="x.CategoryName=='行程线路'?OpenNewUrl(item.LinkUrl):handleCategoryChage(item)"
                      class="category-l2"
                      :class="{
                        'category-l2-select': selectCategory === item.Id,
                      }"
                    >
                      {{ item.CategoryName }}
                    </div>
                    <div v-if="item.SubList&&item.SubList.length">
                      <div
                        @click="x.CategoryName=='行程线路'?OpenNewUrl(item2.LinkUrl):handleCategoryChage(item2)"
                        class="category-l3"
                        :class="{
                          'category-l3-select': selectCategory === item2.Id,
                        }"
                        :key="index"
                        v-for="(item2,index) in item.SubList"
                      >
                        <div>{{ item2.CategoryName }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </q-menu>
        </div>
        <template v-for="(x, i) in categoryList">
          <div
            class="category-btn"
            :key="i"
            :label="x.CategoryName"
            flat
            unelevated
            :content-style="{ hover: '#ff0000' }"
            @mouseenter="typeHover(i, true)"
            @mouseleave="typeHover(i, false)"
          >
            {{ x.CategoryName }}
            <q-menu
              ref="menu"
              :key="i"
              @mouseenter="menuFocus = 2"
              @mouseleave="menuLeave(i)"
            >
              <div class="category-box">
                <div :key="index" v-for="(item,index) in x.SubList">
                  <div
                    @click="x.CategoryName=='行程线路'?OpenNewUrl(item.LinkUrl):handleCategoryChage(item)"
                    class="category-l2"
                    :class="{
                      'category-l2-select': selectCategory === item.Id,
                    }"
                  >
                    {{ item.CategoryName }}
                  </div>
                  <div v-if="item.SubList&&item.SubList.length">
                    <div
                      @click="x.CategoryName=='行程线路'?OpenNewUrl(item2.LinkUrl):handleCategoryChage(item2)"
                      class="category-l3"
                      :class="{
                        'category-l3-select': selectCategory === item2.Id,
                      }"
                      :key="index"
                      v-for="(item2,index) in item.SubList"
                    >
                      <div>{{ item2.CategoryName }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </q-menu>
          </div>
        </template>
      </q-tabs>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    baseData: {
      type: Object,
      default: () => ({}),
    },
    dataList: {
      type: Object,
      default: () => ({}),
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      searchDate: "",
      searchEndDate: "",
      menuFocusAll: 0,
      menuFocus: 0,
      selectCategory: undefined,
      categoryList: [],
      subTitle: "",
      LoginUser: {},
      navs: [],
      navsStyle: 1,
      areas: [],
      selectedArea: [],
      selectedAreaId: "",
      isHome: false,
      HomeData: [],
      isSearch: false,
    };
  },
  watch: {
    title: function (val, oldval) {
      this.subTitle = val;
    },
    baseData: {
      handler(n, o) {
        // this.initNavs();
        this.initAreas();
      },
      deep: true,
    },
    $route: {
      handler: function (val, oldVal) {
        this.isHome = val.path === "/searchProduct" || val.path === "/search";
      },
      // 深度观察监听
      deep: true,
    },
    dataList: {
      handler(n, o) {
        var jObj = JSON.parse(window.localStorage.getItem('HomeData'));
        this.HomeData = jObj.filter(x=>{ return x.Id == 'index_nav' })
        if(this.HomeData.length>0) {
          let obj = {
            BackgroundImage: "",
            CategoryName: "行程线路",
            Icon: "",
            Id: 9999999,
            IsHot: '',
            IsSelfGuidedTour: '',
            Level: 0,
            LinkUrl: '',
            ParentId: 0,
            Sort: 0,
            SubList: []
          }
          let obj2 = {
            CategoryName: '',
            LinkUrl: '',
            Id: 0,
          }
          this.categoryList = n.CategoryList
          this.HomeData[0].plugData.MenuList.forEach(x=>{
            obj.CategoryName = '行程线路'//x.MenuName
            obj.LinkUrl = x.LinkUrl
            x.SubMenuList.forEach((y,index)=>{
              obj2 = {
                CategoryName: y.MenuName,
                LinkUrl: y.LinkUrl,
                Id: 9999999+index,
              }
              obj.SubList.push(obj2)
            })
          })
          this.categoryList[0] = obj
        }
      }
    }
  },
  meta() {
    return {
      title:
        this.subTitle != ""
          ? `${this.subTitle} - ${this.baseData.name}`
          : this.baseData.name,
    };
  },
  mounted() {
    this.isSearch = this.$router.history.current.path === "/search"||this.$router.history.current.path === "/searchProduct";
    this.isHome =
      this.$router.history.current.path === "/searchProduct" ||
      this.$router.history.current.path === "/search";

    if (localStorage.b2bUser) {
      this.LoginUser = JSON.parse(window.localStorage.getItem("b2bUser"));
    }
    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;


  },
  methods: {
    avatarClick() {
      if (this.LoginUser.token && 1 === 2) {
        this.CommonJump("/userCenter");
      } else {
        // 展示登录弹窗
        this.CommonJump("/login");
      }
    },
    handleSelectArea(item) {
      this.CommonJump("/city/" + item.Id);
    },
    handleCategoryChage(item) {
      this.CommonJump("/search", {
        qsearchKey: this.searchKey,
        qsearchDate: this.searchDate,
        qsearchEndDate: this.searchEndDate,
        categoryId: item.Id,
      });
      setTimeout(()=>{
        if(this.isSearch) {
          window.location.reload()
        }
      },300)
    },
    mouseenterAddress() {
      this.menuFocusAll = 0;
      this.menuFocus = 0;
      this.addressFocus = 1;
      this.$refs.address.show();
    },
    mouseeleaveAddress() {
      this.addressFocus = 0;
      setTimeout(() => {
        if (!this.addressFocus) {
          this.$refs.address.hide();
        }
      }, 50);
    },
    addressMenuEnter() {
      this.addressFocus = 2;
    },
    addressMenuLeave() {
      this.addressFocus = 0;
      setTimeout(() => {
        if (!this.addressFocus) {
          this.$refs.address.hide();
        }
      }, 50);
    },
    typeHoverAll(bool) {
      if (bool) {
        this.addressFocus = 0;
        this.menuFocus = 0;
        this.menuFocusAll = 1;
        if (this.currentMenu !== undefined) {
          this.$refs.menu[this.currentMenu].hide();
        }
        this.$refs.menu0.show();
      } else {
        this.menuFocusAll = 0;
        setTimeout(() => {
          if (!this.menuFocusAll) {
            this.$refs.menu0.hide();
          }
        }, 50);
      }
      this.currentMenu = undefined;
    },
    typeHover(index, bool) {
      if (bool) {
        this.addressFocus = 0;
        this.menuFocusAll = 0;
        this.menuFocus = 1;
        if (this.currentMenu !== undefined && index !== this.currentMenu) {
          this.$refs.menu[this.currentMenu].hide();
        }
        this.$refs.menu[index].show();
      } else {
        this.menuFocus = 0;
        setTimeout(() => {
          if (!this.menuFocus) {
            this.$refs.menu[index].hide();
          }
        }, 50);
      }
      this.currentMenu = index;
    },
    menuLeaveAll() {
      this.menuFocus = 0;
      setTimeout(() => {
        if (!this.menuFocusAll) {
          this.$refs.menu0.hide();
        }
      }, 50);
    },
    menuLeave(i) {
      this.menuFocus = 0;
      setTimeout(() => {
        if (!this.menuFocus) {
          this.$refs.menu[i].hide();
        }
      }, 50);
    },
    changeAreas(item) {
      this.selectedArea = item.SubList;
      this.selectedAreaId = item.Id;
    },
    initNavs() {
      this.navs = [];
      if (this.baseData.nav.navs) {
        this.baseData.nav.navs.forEach((x) => {
          if (x.title.indexOf("^") != -1) {
            let t = x.title.split("^");
            let c = t[1].split(",");
            x.childs = [];
            c.forEach((y) => {
              let yt = y.split("&");
              x.childs.push({
                title: yt[0],
                url: x.url + "&" + yt[1],
              });
            });
            x.title = t[0];
          }
          this.navs.push(x);
        });
      }
      this.navsStyle = this.navs.findIndex((x) => x.childs) != -1 ? 2 : 1;
    },
    initAreas() {
      this.areas = [];
      let hotArr = this.getHotList(this.baseData.AreaList);
      this.areas.push({
        Name: "热门目的地",
        SubList: hotArr,
        Id: "",
      });
      this.$EventBus.$emit("hotList", hotArr);
      this.selectedArea = hotArr;
      this.areas = this.areas.concat(this.baseData.AreaList);
    },
    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;
    },
    loginOut() {
      localStorage.removeItem("b2bUser");
      this.LoginUser = {};
      this.CommonJump("/index", {});
    },
    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>
