"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

require("core-js/modules/es6.regexp.search");

var _getIterator2 = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/get-iterator"));

var _isArray2 = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/array/is-array"));

require("./index.css");

var _Icon = _interopRequireDefault(require("../Icon"));

var _Popover = _interopRequireDefault(require("../Popover"));

var _request = _interopRequireDefault(require("../request"));

var _cache = _interopRequireDefault(require("../cache"));

var _dom = require("../_utils/dom.js");

var _component = require("../_utils/component");

var _defaultData = _interopRequireDefault(require("./defaultData"));

var _User = _interopRequireDefault(require("./User"));

var _Link = _interopRequireDefault(require("./Link"));

var _url = require("../_utils/url");

var _vueNormalizeComponent = _interopRequireDefault(require("../_utils/vue-normalize-component.js"));

/* script */
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
function createState(type) {
  switch (type) {
    case 'home':
      return {
        showMore: true,
        visibleKey: null
      };

    case 'scene':
      return {
        isSubNav: false,
        isInMenus: false,
        visibleKey: null,
        updated: true,
        showMore: false
      };

    case 'feature':
      return {
        visibleKey: null,
        showMore: true,
        opacity: 0.5
      };
  }
}

var __vue_script__ = {
  name: (0, _component.createComponentName)('header'),
  components: {
    Icon: _Icon.default,
    Popover: _Popover.default,
    User: _User.default,
    GdLink: _Link.default
  },
  mixins: [_component.componentMixin],
  props: {
    // 当前页面的域名, 会将相同域名的地址转换为相对路径
    host: {
      type: String
    },
    // 导航类型
    type: {
      // 'home'， 'scene'， 'feature'
      type: String,
      default: 'home'
    },
    // 场景页的标题
    sceneTitle: {
      type: String,
      default: '活动展会'
    },
    // 用户名
    nick: {
      type: String
    },
    // 会一直处于高亮状态的导航 ID
    activeIds: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    // 触发退出
    logout: {
      type: Function,
      required: true
    },
    // 触发登录
    login: {
      type: Function,
      required: true
    }
  },

  data() {
    return {
      navs: _defaultData.default,
      state: createState(this.type),
      mounted: false,
      innerActiveIds: []
    };
  },

  computed: {
    currentRootNav() {
      var _this = this;

      return this.navs.find(function (nav) {
        return nav.id === _this.innerActiveIds[0];
      }) || null;
    },

    headerStyle() {
      var len = this.state.showMore && this.state.isSubNav ? this.subMenuGroup.length : 1;
      var height = 46 + len * 20 + (len - 1) * 24;
      return {
        height: `${height}px`
      };
    },

    // 不需要计算得很精确
    subMenuNumber() {
      for (var v = 0, i = 0; v < 800; i++) {
        v = v + 24 + this.navs[2].children[i].title.length * 17.5;

        if (v > 800) {
          return i;
        }
      }

      return this.navs[2].children.length;
    },

    subMenuGroup() {
      return this.getMenuGroup(this.currentRootNav);
    }

  },
  watch: {
    type(value, oldValue) {
      if (value !== oldValue) {
        this.state = createState(value);
        this.onScroll();
      }
    },

    $route() {
      var _this2 = this;

      this.$nextTick(function () {
        _this2.resetActvieNavIds();
      });
    }

  },

  beforeCreate() {
    this.GdLink = _Link.default;
  },

  created() {
    var _this3 = this;

    (0, _dom.on)(window, 'scroll', this.onScroll);

    var data = _cache.default.localCache.get('navigations');

    if (data) this.navs = data;
    this.resetActvieNavIds();

    _request.default.get('/api/navigations').then(function (res) {
      _cache.default.localCache.set('navigations', res.data);

      _this3.navs = res.data;

      _this3.resetActvieNavIds();
    });
  },

  mounted() {
    this.onScroll();
  },

  beforeDestroy() {
    (0, _dom.off)(window, 'scroll', this.onScroll);
  },

  methods: {
    // 重新设置当前应该高亮的导航 ID， 应该在更新导航数据或者路由更变的时候，重新修改
    resetActvieNavIds() {
      if (!this.$isServer) {
        var value = this.getActvieNavIds(this.navs, [].concat(this.activeIds));
        this.innerActiveIds = value;
      }

      return [];
    },

    onClick(nav) {
      // 点击导航触发
      // @arg nav: object
      this.$emit('select', nav);
    },

    isInMenus(isInMenus) {
      this.state.isInMenus = isInMenus;
    },

    getVisibleState(nav) {
      switch (this.type) {
        case 'scene':
          if (this.state.isSubNav || !this.state.updated) return false;

          if (this.state.visibleKey === null && !this.state.isInMenus) {
            return this.innerActiveIds[0] === nav.id;
          }

          return this.state.visibleKey === nav.id;

        case 'home':
        case 'feature':
          return this.state.visibleKey === nav.id;
      }
    },

    changeVisibleKey(value, nav) {
      this.state.visibleKey = value ? nav.id : null;
    },

    isActiveRoute(nav) {
      if (!this.visibleKey) {
        return this.innerActiveIds.indexOf(nav.id) > -1;
      }

      return this.visibleKey === nav;
    },

    changeShowMore(value) {
      if (this.type === 'scene') {
        this.state.showMore = value;
      }
    },

    getMenuGroup(rootMenu) {
      if (!rootMenu) return [];
      var group = [];
      var arr = [];

      for (var i = 0, v = 0; i < rootMenu.children.length; i++) {
        v = v + 24 + rootMenu.children[i].title.length * 17.5;

        if (v > 800) {
          group.push(arr);
          arr = [];
          v = 0;
        }

        arr.push(rootMenu.children[i]);
      }

      group.push(arr);
      return group;
    },

    update() {
      _Popover.default.update();

      this.state.updated = true;
    },

    onScroll() {
      var top = document.documentElement.scrollTop || document.body.scrollTop;

      switch (this.type) {
        case 'scene':
          var isEqueal = top >= 66 === this.state.isSubNav;

          if (!isEqueal) {
            this.state.isSubNav = !this.state.isSubNav;
            this.state.updated = false;
          }

          break;

        case 'feature':
          this.state.opacity = Math.min(0.4 + top / 300 * 0.6, 0.98);
      }
    },

    _isHideMenu(nav) {
      if (!this.isHideMenu) return false;
      return this.isHideMenu(this.transformUrl(nav.link), this.indexPath(), nav);
    },

    // 获取当前 高亮的导航 ID
    getActvieNavIds(navs, value, parentNav) {
      for (var _iterator = navs, _isArray = (0, _isArray2.default)(_iterator), _i = 0, _iterator = _isArray ? _iterator : (0, _getIterator2.default)(_iterator);;) {
        var _ref;

        if (_isArray) {
          if (_i >= _iterator.length) break;
          _ref = _iterator[_i++];
        } else {
          _i = _iterator.next();
          if (_i.done) break;
          _ref = _i.value;
        }

        var nav = _ref;

        if (this.includeHref(nav.link, !!parentNav)) {
          if (parentNav && value.indexOf(parentNav.id) === -1) {
            value.push(parentNav.id);
          }

          value.push(nav.id);
        }

        if (nav.children) {
          var v = this.getActvieNavIds(nav.children, value, nav);
          if (v.length) return v;
        }
      }

      return value;
    },

    transformUrl(url) {
      return (0, _url.toRelativePath)(url, this.host);
    },

    includeHref(url, fuzzy) {
      if (fuzzy === void 0) {
        fuzzy = false;
      }

      var href = this.host ? location.protocol + '//' + this.host + location.pathname + location.search : location.href;
      return (0, _url.includeUrl)(href, url, fuzzy);
    }

  }
};
/* template */

var __vue_render__ = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c("div", {
    style: {
      height: _vm.type === "scene" ? "133px" : "66px"
    },
    attrs: {
      role: "placeholder"
    }
  }, [_c("header", {
    class: _vm.bem({
      scene: _vm.type === "scene" && _vm.state.isSubNav,
      blur: _vm.type === "feature"
    }),
    style: _vm.headerStyle
  }, [_c("div", {
    class: _vm.bem("inner"),
    on: {
      transitionend: _vm.update
    }
  }, [_c("div", {
    class: _vm.bem("nav")
  }, [_c("GdLink", {
    attrs: {
      url: _vm.transformUrl("https://www.gaoding.com")
    }
  }, [_c("div", {
    class: _vm.bem("logo-wrapper")
  }, [_c("Icon", {
    class: _vm.bem("logo"),
    attrs: {
      name: "logo"
    }
  })], 1)]), _vm._v(" "), _c("div", {
    class: _vm.bem("menus"),
    on: {
      mouseenter: function mouseenter($event) {
        _vm.isInMenus(true);
      },
      mouseleave: function mouseleave($event) {
        _vm.isInMenus(false);
      }
    }
  }, [_vm._l(_vm.navs, function (nav) {
    return [!nav.title ? _c("div", {
      key: nav.id,
      class: _vm.bem("divider")
    }) : nav.children.length ? _c("Popover", {
      key: nav.id,
      class: _vm.bem("menu", {
        active: _vm.isActiveRoute(nav)
      }),
      attrs: {
        tag: _vm.GdLink,
        url: _vm.transformUrl(nav.link),
        theme: "light",
        visible: _vm.getVisibleState(nav),
        popoverClass: _vm.bem("popover"),
        animation: "",
        delayOnMouseOver: 100,
        delayOnMouseOut: 100
      },
      on: {
        click: function click($event) {
          _vm.onClick(nav);
        },
        "update:visible": function updateVisible(v) {
          return _vm.changeVisibleKey(v, nav);
        }
      }
    }, [_vm._v("\n\n                            " + _vm._s(nav.title) + "\n                            "), _c("div", {
      class: _vm.bem("sub-nav"),
      attrs: {
        slot: "content"
      },
      on: {
        mouseenter: function mouseenter($event) {
          _vm.changeShowMore(true);
        },
        mouseleave: function mouseleave($event) {
          _vm.changeShowMore(false);
        }
      },
      slot: "content"
    }, _vm._l(_vm.state.showMore ? _vm.getMenuGroup(nav) : _vm.getMenuGroup(nav).slice(0, 1), function (subNavs, i) {
      return _c("div", {
        key: i,
        class: _vm.bem("menus-group")
      }, [_vm._l(subNavs, function (nav) {
        return _c("GdLink", {
          key: nav.id,
          class: _vm.bem("sub-menu", {
            active: _vm.isActiveRoute(nav)
          }),
          attrs: {
            url: _vm.transformUrl(nav.link)
          }
        }, [_vm._v("\n                                        " + _vm._s(nav.title) + "\n                                    ")]);
      }), _vm._v(" "), i == 0 && _vm.getMenuGroup(nav).length > 1 && !_vm.state.showMore ? _c("span", {
        class: _vm.bem("sub-menu")
      }, [_vm._v("\n                                        更多\n                                        "), _c("Icon", {
        attrs: {
          name: "triangle-down"
        }
      })], 1) : _vm._e()], 2);
    }), 0)]) : _c("GdLink", {
      key: nav.id,
      class: _vm.bem("menu", {
        active: _vm.isActiveRoute(nav)
      }),
      attrs: {
        url: _vm.transformUrl(nav.link)
      },
      on: {
        click: function click($event) {
          _vm.onClick(nav);
        }
      }
    }, [_vm._v("\n                            " + _vm._s(nav.title) + "\n                        ")])];
  })], 2), _vm._v(" "), _c("User", {
    attrs: {
      nick: _vm.nick,
      logout: _vm.logout,
      login: _vm.login
    }
  })], 1), _vm._v(" "), _vm.type === "feature" ? _c("div", {
    class: _vm.bem("blur"),
    style: {
      "background-color": "rgba(17,17,17," + _vm.state.opacity + ")"
    }
  }) : _vm._e()]), _vm._v(" "), _vm.type === "scene" ? _c("div", {
    class: _vm.bem("inner", ["light"])
  }, [_c("div", {
    class: _vm.bem("nav")
  }, [_c("GdLink", {
    class: _vm.bem("logo-wrapper"),
    attrs: {
      url: "/"
    }
  }, [_c("img", {
    class: _vm.bem("logo"),
    attrs: {
      src: require("./assets/logo.svg"),
      alt: ""
    }
  }), _vm._v(" "), _c("div", {
    class: _vm.bem("divider")
  }), _vm._v("\n                    " + _vm._s(_vm.sceneTitle) + "\n                ")]), _vm._v(" "), _c("div", {
    class: _vm.bem("menus"),
    on: {
      mouseenter: function mouseenter($event) {
        _vm.state.showMore = true;
      },
      mouseleave: function mouseleave($event) {
        _vm.state.showMore = false;
      }
    }
  }, _vm._l(_vm.state.showMore ? _vm.subMenuGroup : _vm.subMenuGroup.slice(0, 1), function (subNavs, i) {
    return _c("div", {
      key: i,
      class: _vm.bem("menus-group")
    }, [_vm._l(subNavs, function (nav) {
      return _c("GdLink", {
        key: nav.id,
        class: _vm.bem("menu", {
          active: _vm.isActiveRoute(nav)
        }),
        attrs: {
          url: _vm.transformUrl(nav.link)
        },
        on: {
          click: function click($event) {
            _vm.onClick(nav);
          }
        }
      }, [_vm._v("\n                            " + _vm._s(nav.title) + "\n                        ")]);
    }), _vm._v(" "), i == 0 && _vm.subMenuGroup.length > 1 && !_vm.state.showMore ? _c("span", {
      class: _vm.bem("menu")
    }, [_vm._v("\n                            更多\n                            "), _c("Icon", {
      attrs: {
        name: "triangle-down"
      }
    })], 1) : _vm._e()], 2);
  }), 0), _vm._v(" "), _c("User", {
    attrs: {
      nick: _vm.nick,
      logout: _vm.logout,
      login: _vm.login
    }
  })], 1)]) : _vm._e()])]);
};

var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = undefined;
/* module identifier */

var __vue_module_identifier__ = undefined;
/* functional template */

var __vue_is_functional_template__ = false;
/* component normalizer */

/* style inject */

/* style inject SSR */
var _default2 = (0, _vueNormalizeComponent.default)({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);

exports.default = _default2;