<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;
    /* display: inline-block; */
    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 {
    margin: 0 10px 0 44px;
  }

  .all-type {
    margin-left: 10px;
  }

  .all-menu {
    width: 660px;
    padding: 10px;
  }

  .category-item {
    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-color: #eee;
  }

  .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 {
    width: 140px;
    padding: 10px;
    font-weight: bold;
  }

  .category-btn {
    width: 100px;
  }

  .mobile-logo {
    max-height: 35px;
    max-width: 120px;
    object-fit: contain;
  }

</style>
<style>
  .social-btn {
    overflow: visible;
    padding: 0 6px;
  }

  .icon-img {
    width: 24px;
    height: 24px;
    display: block;
  }

  .pop-wrapper {
    position: relative;
    padding-top: 10px;

  }

  .pop-arrow {
    position: absolute;
    top: 1px;
    left: 50%;
    width: 14px;
    height: 14px;
    background: #fff;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.06);
    z-index: 1;
  }

  .pop-content {
    background: #fff;
    border-radius: 12px;
    padding: 18px 22px 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
  }

  .single {
    text-align: center;
  }

  .single img {
    width: 180px;
    height: 180px;
    border-radius: 8px;
    display: block;
  }

  .multi {
    display: flex;
    gap: 16px;
  }

  .multi-item {
    text-align: center;
  }

  .multi-item img {
    width: 140px;
    height: 140px;
    border-radius: 10px;
    display: block;
  }

  .tip {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
  }

  .no-shadow-popup {
    box-shadow: none !important;
    /* 去掉阴影 */
    background: transparent !important;
    /* 确保箭头背景可控 */
  }

</style>
<template>
  <q-header reveal :style="{ background: baseData.nav.bg, color: baseData.nav.color }" class="bg-white"
    height-hint="108" to="/index" style="border-bottom: 1px solid #eee">
    <q-toolbar style="height: 50px; max-width: 1200px; margin: 0 auto" class="zk_toolbar flex justify-between"
      :class="{ 'q-px-none': $q.platform.is.desktop }">
      <div class="flex">
        <div class="f24" v-if="$q.platform.is.mobile && isHome" @click="handleShowDialog">
          <i class="iconfont iconmore1" style="font-size: 24px"></i>
        </div>
        <img :src="baseData.logo" style="
            cursor: pointer;
            height: 35px;
            filter: drop-shadow(0px 0px var(--q-color-primary));
          " class="q-mr-lg q-ml-sm" :class="{ 'mobile-logo': $q.platform.is.mobile }"
          @click="CommonJump('/index', {})" />
      </div>
      <!--HK 2024-11-22 去掉 搜索接口有调整-->
      <searchSf2 v-if="!isHome" :plugData="plugData"></searchSf2>

      <!-- pc -->
      <div v-if="$q.platform.is.desktop">
        <!-- <q-btn label="繁體中文" flat>
          <q-menu>
            <q-list>
              <q-item clickable v-close-popup>
                <q-item-section>繁體中文</q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>-->
        <!-- 公众号 -->
        <q-btn v-if="yyzlImg" flat dense class="social-btn" @mouseenter="show('wx')" @mouseleave="hide('wx')">
          <img src="../../assets/img/wechat.png" class="icon-img" />
          <q-popup-proxy ref="wxPop" anchor="bottom middle" self="top middle" content-class="no-shadow-popup">
            <div class="pop-wrapper" @mouseenter="show('wx')" @mouseleave="hide('wx')">
              <div class="pop-arrow"></div>
              <div class="pop-content single">
                <img :src="yyzlImg" />
                <div class="tip">扫码关注公众号</div>
              </div>
            </div>
          </q-popup-proxy>
        </q-btn>
        <!-- 微博 -->
        <q-btn v-if="wbImg" flat dense class="social-btn" @mouseenter="show('wb')" @mouseleave="hide('wb')"
          content-class="no-shadow-popup">
          <img src="../../assets/img/weibo.png" class="icon-img" />
          <q-popup-proxy ref="wbPop" anchor="bottom middle" self="top middle">
            <div class="pop-wrapper" @mouseenter="show('wb')" @mouseleave="hide('wb')">
              <div class="pop-arrow"></div>
              <div class="pop-content single">
                <img :src="wbImg" />
                <div class="tip">扫码关注微博</div>
              </div>
            </div>
          </q-popup-proxy>
        </q-btn>
        <!-- 小红书 -->
        <q-btn v-if="xhsImgList.length" flat dense class="social-btn" @mouseenter="show('xhs')"
          @mouseleave="hide('xhs')" content-class="no-shadow-popup">
          <img src="../../assets/img/xiaohongshu.png" class="icon-img" />
          <q-popup-proxy ref="xhsPop" anchor="bottom middle" self="top middle">
            <div class="pop-wrapper" @mouseenter="show('xhs')" @mouseleave="hide('xhs')">
              <div class="pop-arrow"></div>
              <div class="pop-content multi">
                <div class="multi-item" v-for="(item, index) in xhsImgList" :key="index">
                  <img :src="item" />
                  <div class="tip">扫码关注小红书</div>
                </div>
              </div>
            </div>
          </q-popup-proxy>
        </q-btn>
        <!-- 企微 -->
        <q-btn v-if="qwImgList.length" flat dense class="social-btn" @mouseenter="show('qw')" @mouseleave="hide('qw')"
          content-class="no-shadow-popup">
          <img src="../../assets/img/qwlogo.png" class="icon-img" />
          <q-popup-proxy ref="qwPop" anchor="bottom middle" self="top middle">
            <div class="pop-wrapper" @mouseenter="show('qw')" @mouseleave="hide('qw')">
              <div class="pop-arrow"></div>

              <div class="pop-content multi">
                <div class="multi-item" v-for="(item, index) in qwImgList" :key="index">
                  <img :src="item" />
                  <div class="tip">扫码咨询</div>
                </div>
              </div>
            </div>
          </q-popup-proxy>
        </q-btn>
        <q-btn v-if="LoginUser.id <= 0" label="注册" flat></q-btn>
        <template v-if="LoginUser.token">
          <q-btn-dropdown style="color: #444; font-weight: bold" class="q-ml-lg" unelevated>
            <template v-slot:label>
              <img class="avatar" v-if="LoginUser.photo" :src="LoginUser.photo" />
              <img class="avatar" v-else src="../../assets/img/avatar.png" />
              <!-- <span>{{LoginUser.name || LoginUser.mailbox}}</span> -->
            </template>
            <div class="row no-wrap">
              <div class="column">
                <q-list class="text-grey-8" dense>
                  <q-item clickable v-close-popup to="/setUserInfo">
                    <q-item-section avatar>
                      <q-avatar icon="iconfont iconpeople1" />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>個人信息</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup to="/coupon">
                    <q-item-section avatar>
                      <q-avatar icon="iconfont iconqianbao" />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>優惠券</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup to="/order">
                    <q-item-section avatar>
                      <q-avatar icon="iconfont iconorder" />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>訂單</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-separator inset class="q-mx-lg" />
                  <q-item clickable v-close-popup to="/setUsersList">
                    <q-item-section avatar>
                      <q-avatar icon="iconfont iconpeople" />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>出行人信息管理</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup to="/setAddress">
                    <q-item-section avatar>
                      <q-avatar icon="iconfont iconemail" />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>管理邮寄地址</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup to="/setInfo">
                    <q-item-section avatar>
                      <q-avatar icon="iconfont iconset" />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>賬戶設置</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup @click="loginOut">
                    <q-item-section avatar>
                      <q-avatar icon="iconfont iconlog-in" />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>登出</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
              </div>
              <!-- <q-separator vertical inset class="q-mx-lg" />
              <div class="column items-center">
                <q-avatar size="72px">
                  <img v-if="LoginUser.photo" :src="LoginUser.photo" />
                  <img v-else src="../../statics/img/default_head_img.jpg" />
                </q-avatar>
                <div class="text-subtitle1 q-mt-md q-mb-xs">{{ LoginUser.name }}</div>
                <q-btn color="primary" label="登出" @click="loginOut" push size="sm" v-close-popup />
              </div>-->
            </div>
          </q-btn-dropdown>
        </template>
        <template v-else>
          <q-btn flat style="color: #444; font-weight: bold" class="q-ml-lg desktop-only" :label="$t('login')"
            icon="iconfont iconicon-unlogin" to="/login" />
          <q-btn flat style="color: #444; font-weight: bold" class="mobile-only" icon="iconfont iconicon-unlogin"
            to="/login" />
        </template>
      </div>
      <!-- 移动端 -->
      <div v-else>
        <img @click="avatarClick" class="avatar q-mt-sm" v-if="LoginUser.photo" :src="LoginUser.photo" />
        <img v-else class="avatar q-mt-sm" @click="avatarClick" src="../../assets/img/avatar.png" />
      </div>
    </q-toolbar>
    <city-category v-if="$q.platform.is.desktop" :baseData="baseData" :dataList="dataList"></city-category>
    <popup @mousemove.prevent id="city-category" v-model="showDialog" mode="bottom" @close="handleDialogClose">
      <city-category-mobile @close="showDialog = false" :baseData="baseData" :dataList="dataList">
      </city-category-mobile>
    </popup>
  </q-header>
</template>

<script>
  import popup from "../props/index";
  import CityCategoryMobile from "./city-category-mobile.vue";
  import cityCategory from "./city-category.vue";
  import searchSf2 from "../search_sf/search-top.vue";
  export default {
    components: {
      cityCategory,
      CityCategoryMobile,
      popup,
      searchSf2
    },
    props: {
      baseData: {
        type: Object,
        default: () => ({}),
      },
      dataList: {
        type: Object,
        default: {},
      },
      title: {
        type: String,
        default: "",
      },
    },
    data() {
      return {
        plugData: {
          details: [],
          Title: ""
        },
        showDialog: false,
        searchDate: "",
        searchEndDate: "",
        menuFocusAll: 0,
        menuFocus: 0,
        selectCategory: undefined,
        categoryList: [],
        subTitle: "",
        LoginUser: {},
        navs: [],
        navsStyle: 1,
        areas: [],
        selectedArea: [],
        selectedAreaId: "",
        isHome: false,
        isSearch: true,
        yyzlImg: "", //印象之旅
        xhsImgList: [], //小红书
        wbImg: "", //微博
        qwImgList: [], //企业微信
      };
    },
    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 === "/" || val.path === "/index";
          // this.isSearch = val.path === "/search";
        },
        // 深度观察监听
        deep: true,
      },
    },
    meta() {
      return {
        title: this.subTitle != "" ?
          `${this.subTitle} - ${this.baseData.name}` : this.baseData.name,
      };
    },
    mounted() {
      this.isHome =
        this.$router.history.current.path === "/" ||
        this.$router.history.current.path === "/index";
      if (localStorage.b2bUser) {
        this.LoginUser = JSON.parse(window.localStorage.getItem("b2bUser"));
      }
      var baseInfo = JSON.parse(window.localStorage.getItem('baseifo'));
      if (baseInfo && baseInfo.Config && baseInfo.Config.platObj) {
        if (baseInfo.Config.platObj.yyzlImg) {
          this.yyzlImg = baseInfo.Config.platObj.yyzlImg;
        }
        if (baseInfo.Config.platObj.xhsImgList && baseInfo.Config.platObj.xhsImgList.length > 0) {
          this.xhsImgList = baseInfo.Config.platObj.xhsImgList;
        }
        if (baseInfo.Config.platObj.qwImgList && baseInfo.Config.platObj.qwImgList.length > 0) {
          this.qwImgList = baseInfo.Config.platObj.qwImgList;
        }
        if (baseInfo.Config.platObj.wbImg) {
          this.wbImg = baseInfo.Config.platObj.wbImg;
        }
      }
      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: {
      show(type) {
        this.$refs[`${type}Pop`] && this.$refs[`${type}Pop`].show()
      },
      hide(type) {
        this.$refs[`${type}Pop`] && this.$refs[`${type}Pop`].hide()
      },
      handler(event) {
        event.preventDefault();
      },
      handleShowDialog() {
        this.showDialog = true;
        this.scrollTop = document.querySelector("body").scrollTop;
        document.querySelector("body").style = `position: fixed; top: -${this.scrollTop}px`;
      },

      handleDialogClose() {
        document.querySelector("body").style = "";
      },
      avatarClick() {
        if (this.LoginUser.token) {
          this.CommonJump("/userCenter");
        } else {
          // 展示登录弹窗
          this.CommonJump("/login");
        }
      },
      handleSelectArea(item) {
        this.CommonJump("/city/" + item.Id, {
          id: item.Id,
        });
      },
      handleCategoryChage(item) {
        this.CommonJump("/search", {
          qsearchKey: this.searchKey,
          qsearchDate: this.searchDate,
          qsearchEndDate: this.searchEndDate,
          categoryId: item.Id,
        });
      },
      mouseenterAddress() {
        this.menuFocusAll = 0;
        this.menuFocus = 0;
        this.addressFocus = 1;
        this.$refs.address.show();
      },
      mouseeleaveAddress() {
        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>
