<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>
        <template v-if="false">
          <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 />
        </template>

        <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="`s_`+i" v-for="(x, i) in categoryList"
                  v-if="x.SubList.length>0">
                  <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="`s2_`+i" v-for="(x, i) in categoryList"
                  @click="x.SubList&&x.SubList.length>0&&x.CategoryName!='行程线路'?'':productSearch(x)"
                  :class="[x.SubList&&x.SubList.length>0&&x.CategoryName!='行程线路'?'':'cursor-pointer']"
                  v-if="x.SubList.length>0">
                  <div :key="`s2_`+i+`d_`+index" v-for="(item,index) in x.SubList">
                    <div
                      @click.stop="x.CategoryName=='行程线路'||x.Id==44?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.stop="x.CategoryName=='行程线路'||x.Id==44?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="`s3_`+i" :label="x.CategoryName" flat unelevated
            :content-style="{ hover: '#ff0000' }" @mouseenter="typeHover(i, true)" @mouseleave="typeHover(i, false)"
            @click="x.CategoryName!='行程线路'&&x.Id!=44 ?productSearch(x):''"
            :class="[x.CategoryName!='行程线路'&& x.Id!=44?'cursor-pointer':'']">
            {{ x.CategoryName }}
            <q-menu ref="menu" :key="i" @mouseenter="menuFocus = 2" @mouseleave="menuLeave(i)">
              <div class="category-box" v-if="x.SubList&&x.SubList.length>0">
                <div :key="`s3_`+i+`d_`+index" v-for="(item,index) in x.SubList">
                  <div
                    @click.stop="x.CategoryName=='行程线路'||x.Id==44 ?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.stop="x.CategoryName=='行程线路'||x.Id==44?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.initAreas();
        },
        deep: true,
      },
      $route: {
        handler: function (val, oldVal) {
          this.isHome = val.path === "/searchProduct" || val.path === "/search" || val.path === "/searchVisa" || val
            .path === "/planeticket";
        },
        // 深度观察监听
        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,
            }

            // n.CategoryList.forEach(x => {
            //    this.categoryList.push(x)
            // })
            this.categoryList = n.CategoryList;

            this.HomeData[0].plugData.MenuList.forEach((x, index) => {
              obj.CategoryName = '行程线路' //x.MenuName
              obj.LinkUrl = x.LinkUrl

              obj2 = {
                CategoryName: x.MenuName,
                LinkUrl: x.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.$router.history.current.path === "/searchVisa" ||
        this.$router.history.current.path === "/planeticket";
      this.isHome =
        this.$router.history.current.path === "/searchProduct" ||
        this.$router.history.current.path === "/search" ||
        this.$router.history.current.path === "/searchVisa" ||
        this.$router.history.current.path === "/planeticket";

      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, type) {
        console.log("item", item);
        console.log("type", type);

        if (!type) {
          this.CommonJump("/search", {
            qsearchKey: this.searchKey,
            qsearchDate: this.searchDate,
            qsearchEndDate: this.searchEndDate,
            categoryId: item.Id,
          });
        } else {
          if (type == 1) { //自由

          } else if (type == 2) { //机票
            this.CommonJump("/planeticket", {
              Name: this.searchKey,
            });
          } else if (type == 3) { //签证
            this.CommonJump("/searchVisa", {
              Name: this.searchKey,
            });
          } else if (type == 4) {//道旅酒店
            this.CommonJump("/searchDida", {
              Name: this.searchKey,
            });
          }
        }
        setTimeout(() => {
          if (this.isSearch) {
            window.location.reload()
          }
        }, 300)
      },
      productSearch(item) {
        if (item.CategoryName == '机票') {
          this.handleCategoryChage(item, 0)
        } else if (item.CategoryName == '签证') {
          this.handleCategoryChage(item, 3)
        } else if (item.CategoryName == '住宿') {
          this.handleCategoryChage(item, 4)
        } else {
          this.handleCategoryChage(item, 0)
        }
      },
      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>
