<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>
<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>
      <!-- <div style="transform:scale(0.6,0.6)"> -->
          <searchSf2 v-if="!isHome" :plugData="plugData"></searchSf2>
          <!-- </div> -->
      <!-- 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 label="帮助中心" flat></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,
    };
  },
  watch: {
    title: function (val, oldval) {
      this.subTitle = val;
    },
    baseData: {
      handler(n, o) {
        // this.initNavs();
        this.initAreas();
      },
      deep: true,
    },
    $route: {
      handler: function (val, oldVal) {
        console.log('val', 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";
        // this.isSearch = this.$router.history.current.path === "/search";
    console.log(
      'JSON.parse(window.localStorage.getItem("b2bUser"))',
      JSON.parse(window.localStorage.getItem("b2bUser"))
    );
    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;
    // this.initAreas()
    // this.initNavs();
    // this.getCategoryList();
  },
  methods: {
    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) {
            console.log("in....");
            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>
