<style>
.q-ml-lg .block {
  margin-right: 12px;
}
</style>
<style scoped>
.flex {
  display: flex;
}
.justify-between {
  justify-content: space-between;
}
.item-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.padding-top {
  padding-top: 10px;
}
.flex-center {
  justify-content: center;
  align-items: center;
}
.flex-wrap {
  flex-wrap: wrap;
}
.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;
}
.hot {
  line-height: 33px;
}
.select {
  color: #fff;
  background-color: #ee4454;
}
.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;
}
.city {
  width: 129px;
  height: 69px;
  background: #ee4454;
  border-radius: 10px;
  margin: 11px;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.city-img {
  width: 129px;
  height: 69px;
  position: absolute;
  top: 0;
  left: 0;
}
.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: 820px;
  padding: 10px;
}
.category-item {
  width: 200px;
  padding: 10px;
}
.font-16 {
  font-size: 16px;
}
.category-l2 {
  margin: 8px;
height: 34px;
border-radius: 8px;
line-height: 34px;
padding-left: 8px;
cursor: pointer;
}
.category-l2-select {
background: #EE4454;
color: #fff;
}
.category-l3 {
  margin: 8px;
font-size: 14px;
font-weight: 400;
color: #A0A0A0;
padding-left: 8px;
cursor: pointer;
}
.category-l3-select {
color: #EE4454;
}
</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 }"
    >
      <img
        :src="baseData.logo"
        style="
          height: 35px;
          cursor: pointer;
          margin-right: 100px;
          filter: drop-shadow(0px 0px var(--q-color-primary));
        "
        class="q-mr-lg q-ml-sm"
        @click="CommonJump('/index', {})"
      />
      <!-- <q-tabs
        align="center"
        style="margin: 0 auto"
        shrink
        v-if="!$q.screen.xs && navsStyle == 1"
      >
        <template v-for="(x, i) in navs">
          <q-btn
            :key="i"
            stretch
            flat
            :label="x.title"
            type="a"
            :href="x.url"
            target="_blank"
            :no-wrap="true"
            size="16px"
            :content-style="{ hover: '#ff0000' }"
          />
        </template>
      </q-tabs>
      <div
        class="col row justify-center full-height"
        v-if="!$q.screen.xs && navsStyle == 2"
      >
        <div
          class="full-height text-middle q-px-lg cursor-pointer nav-items"
          v-for="(x, i) in navs"
          :key="i"
        >
          <a :href="x.url" style="color: inherit;text-decoration: none;">{{ x.title }}</a>
          <div class="secondMenu bg-tansparent">
            <div class="bg-white rounded-borders q-pa-sm light-shadow " style="min-width:200px;">
              <q-list dense>
                <q-item clickable v-ripple v-for="(y,yi) in x.childs" :key="yi" class="text-middle rounded-borders text-dark text-no-wrap">
                  <a :href="y.url" style="color:inherit; text-decoration: none;">{{ y.title }}</a>
                </q-item>
              </q-list>
            </div>
          </div>
        </div>
      </div>
      <q-btn
        flat
        dense
        round
        icon="menu"
        aria-label="Menu"
        v-if="$q.screen.xs"
        style="margin-left: auto"
      >
        <q-menu>
          <q-tabs align="left" vertical shrink>
            <template v-for="(x, i) in baseData.nav.navs">
              <q-btn
                style="display: block"
                :key="i"
                stretch
                flat
                :label="x.title"
                @click="OpenNewUrl(x.url)"
              />
            </template>
          </q-tabs>
        </q-menu>
      </q-btn>-->
      <div>
        <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 label="注册" flat></q-btn>
        <template v-if="LoginUser.accountId > 0">
          <q-btn-dropdown
            style="color: #444; font-weight: bold"
            class="q-ml-lg"
            icon="iconfont iconicon-unlogin"
            :label="LoginUser.name"
            unelevated
          >
            <div class="row no-wrap q-pa-md">
              <div class="column">
                <q-list>
                  <q-item clickable v-close-popup to="/account">
                    <q-item-section avatar>
                      <q-avatar icon="folder" text-color="#474747" />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>帳號設定</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup to="/orderlist">
                    <q-item-section avatar>
                      <q-avatar icon="assignment" text-color="#474747" />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>我的訂單</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup to="/demandlist">
                    <q-item-section avatar>
                      <q-avatar icon="assignment" text-color="#474747" />
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>我的需求單</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-separator inset class="q-mx-lg" />
                  <div class="flex flex-center padding-top">
                    <q-btn label="登出" @click="loginOut" flat v-close-popup />
                  </div>
                </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>
    </q-toolbar>
    <div class="header-box flex">
      <q-tabs align="center" shrink>
        <q-btn flat 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">
            <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="city-box">
                <div v-for="item in selectedArea" :key="item.Id">
                  <div class="city" >
                    <img class="city-img" v-if="item.ImageList.length" :src="item.ImageList[0]" />
                    <div class="city-name-box flex flex-center"><div class="city-name">{{item.Name}}</div></div>
                  </div>
                  <template v-if="item.SubList">
                    <div class="city" v-for="item2 in item.SubList" :key="item2.Id">
                      <div>
                        <img class="city-img" v-if="item2.ImageList.length" :src="item2.ImageList[0]" />
                    <div class="city-name-box flex flex-center"><div class="city-name">{{item.Name}}</div></div>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </q-menu>
        </q-btn>
        <q-separator style="height: 16px;margin: auto 0" vertical/>
        <q-btn class="all-type" flat label="全部分類" @mouseenter="typeHoverAll(true)" @mouseleave="typeHoverAll(false)">
          <q-menu ref="menu0" @mouseenter="menuFocus = 2" @mouseleave="menuLeaveAll">
            <div class="all-menu">
            <div class="flex">
              <div class="category-item font-16" :key="i" v-for="(x, i) in dataList.CategoryList">{{x.CategoryName}}</div>
            </div>
            <q-separator />
            <div class="flex">
              <div class="category-item" :key="i" v-for="(x, i) in dataList.CategoryList">
                  <div :key="item.Id" v-for="item in x.SubList">
                    <div @click="selectCategory = item.Id" class="category-l2" :class="{'category-l2-select': selectCategory === item.Id}">{{item.CategoryName}}</div>
                    <div v-if="item.SubList.length">
                        <div @click="selectCategory = item2.Id"
                          class="category-l3"
                          :class="{'category-l3-select': selectCategory === item2.Id}"
                          :key="item2.Id"
                          v-for="item2 in item.SubList"
                        >
                          <div>{{item2.CategoryName}}</div>
                        </div>
                    </div>
                  </div>
              </div>
            </div></div>
          </q-menu>
        </q-btn>
        <template v-for="(x, i) in dataList.CategoryList">
          <q-btn :key="i" :label="x.CategoryName" flat :content-style="{ hover: '#ff0000' }" @mouseenter="typeHover(i,true)" @mouseleave="typeHover(i,false)">
            <q-menu ref="menu" :key="i" @mouseenter="menuFocus = 2" @mouseleave="menuLeave(i)">
              <q-list>
                <div :key="item.Id" v-for="item in x.SubList">
                  <q-item v-if="item.SubList.length" clickable>
                    <q-item-section>{{item.CategoryName}}</q-item-section>
                    <q-item-section side>
                      <q-icon name="keyboard_arrow_right" />
                    </q-item-section>
                    <q-menu anchor="top right" self="top left">
                      <q-list>
                        <q-item :key="item2.Id" v-for="item2 in item.SubList" clickable v-close-popup>
                          <q-item-section>{{item2.CategoryName}}</q-item-section>
                        </q-item>
                      </q-list>
                    </q-menu>
                  </q-item>
                  <q-item v-else clickable v-close-popup>
                    <q-item-section>{{item.CategoryName}}</q-item-section>
                  </q-item>
                </div>
              </q-list>
            </q-menu>
          </q-btn>
        </template>
      </q-tabs>
    </div>
  </q-header>
</template>

<script>
export default {
  props: {
    baseData: {
      type: Object,
      default: {}
    },
    dataList: {
      type: Object,
      default: {}
    },
    title: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      menuFocus: 0,
      selectCategory: undefined,
      categoryList: [],
      subTitle: "",
      LoginUser: {},
      navs: [],
      navsStyle: 1,
      areas: [],
      selectedArea: [],
      selectedAreaId: ''
    };
  },
  watch: {
    title: function(val, oldval) {
      this.subTitle = val;
    },
    baseData: {
      handler(n, o) {
        // this.initNavs();
        this.initAreas();
      },
      deep: true
    }
  },
  meta() {
    return {
      title:
        this.subTitle != ""
          ? `${this.subTitle} - ${this.baseData.name}`
          : this.baseData.name
    };
  },
  mounted() {
    if (localStorage.b2bUser) {
      this.LoginUser = JSON.parse(window.localStorage.getItem("b2bUser"));
    }
    // this.initAreas()
    // this.initNavs();
    this.getCategoryList();
  },
  methods: {
    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.menuFocus) {
            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("t.oytour.com") != -1;
          });
        },
        err => {}
      );
    }
  }
};
</script>

<style>
.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>
