<template>
  <div style="position: relative">
    <el-container class="ez-container">
      <el-aside
        :class="[isOpenM ? 'ez-aside-fixed' : '', 'ez-aside']"
        :style="{ width: asideWidth, height: windowHeight }"
      >
        <el-menu
          v-bind="$attrs"
          v-on="$listeners"
          :default-active="navAction"
          class="menu"
          :class="{ open: !isCollapse }"
          :style="{ height: navHeight, backgroundColor: menuBackgroundColor }"
          :unique-opened="true"
          :collapse="isCollapse"
          :text-color="textColor"
        >
          <div v-if="!$slots.logo" class="logo-icon">
            <img
              src="https://shipber-brand.s3-accelerate.amazonaws.com/default/logo.png"
              width="29px"
            />
            <h1>shipber</h1>
          </div>
          <slot v-else name="logo"></slot>
          <el-scrollbar class="nav-scrollbar" style="height: 82%">
            <div
              class="menu-item"
              v-for="(item, index) in menuList"
              :key="index"
            >
              <el-submenu
                v-if="item.children.length !== 0"
                class="menu-submenu"
                :index="index + ''"
              >
                <template slot="title">
                  <i
                    class="nav-icon"
                    :style="{ backgroundImage: 'url(' + item.icon + ')' }"
                  ></i>
                  <span class="nav-parent-title">{{ item.title }}</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    class="menu-child-item"
                    style="padding-left: 0"
                    v-for="(child, cIndex) in item.children"
                    :index="child.routes"
                    :key="cIndex"
                  >
                    <a
                      class="nav-a"
                      :href="child.routes"
                      @click.prevent="goNavUrl(child.routes)"
                    >
                      <i
                        class="nav-icon"
                        :style="{ backgroundImage: 'url(' + child.icon + ')' }"
                      ></i>
                      <span>{{ child.title }}</span>
                    </a>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-menu-item v-else :index="item.routes">
                <a class="nav-a" :href="item.routes">
                  <i
                    class="nav-icon nav-child-icon"
                    :style="{
                      float: 'left',
                      backgroundImage: 'url(' + item.icon + ')',
                    }"
                  ></i>
                  <span class="nav-parent-title">{{ item.title }}</span>
                </a>
              </el-menu-item>
            </div>
          </el-scrollbar>
        </el-menu>
      </el-aside>
      <el-container @click.native="collapseMenuM">
        <el-header class="header" style="height: 64px; line-height: 64px">
          <el-button class="collapse" type="text" @click.stop="collapseMenu">
            <i v-if="isCollapse" class="collapse-icon el-icon-s-unfold"></i>
            <i v-else class="collapse-icon el-icon-s-fold"></i>
          </el-button>
          <div class="ez-h1 title-pos">{{ pageTitle }}</div>
        </el-header>
        <el-main
          :style="{
            padding: '0 5px',
            minHeight: mainHeight,
            background: '#F0F2F5',
          }"
        >
          <router-view />
        </el-main>
        <el-footer class="footer" style="height: 68px">
          <div class="biz-info">
            <span>CoreSystem focus executive, quality and creativity.</span>
            <span>© Shenzhen Influx Information Technology Co.,Ltd.</span>
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: 'adb-index-menu',
  components: {},
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'margin:0 auto');
  },
  props: {
    menuList: Array,
    pageTitle: String,
    textColor: {
      type: String,
      default: '#fff',
    },
    menuBackgroundColor: {
      type: String,
      default: '#192336',
    },
  },
  data() {
    return {
      lang:
        document.cookie.replace(
          /(?:(?:^|.*;\s*)syslanguage\s*\=\s*([^;]*).*$)|^.*$/,
          '$1'
        ) || 'chinese',
      navHeight: window.innerHeight + 'px', // 菜单高度
      mainHeight: window.innerHeight - 68 - 64 + 'px',
      isOpenM: false, // 移动端：是否折叠菜单
      searchMenu: '', // 菜单搜索内容
      isCollapse: false, // PC端：是否折叠菜单
      windowHeight: window.innerHeight,
      pawForm: {},
      asideWidth: 240 + 'px', // 侧边栏宽度
      editPasswordVisible: false,
      isMobile: false,
      currentRoute: window.location.href,
      firstTitle: '',
      secondTitle: '',
      dot: false,
    };
  },
  computed: {
    navAction() {
      const endPos =
        window.location.href.indexOf('?') === -1
          ? window.location.href.length
          : window.location.href.indexOf('?');
      return window.location.href.slice(0, endPos);
    },
    deviceWidth: {
      get: function () {
        return this.$store.state.deviceWidth;
      },
      set: function () {},
    },
    keepAliveC: {
      get: function () {
        return this.$store.state.keepAliveC;
      },
      set: function () {},
    },
  },
  watch: {
    windowHeight(val) {
      this.navHeight = val + 'px';
      this.mainHeight = val - 86 - 64 + 'px';
    },
    lang(val) {
      this.lang = val;
    },
    deviceWidth(val) {
      this.initMenu();
      if (val < 401) {
        this.asideWidth = '240px';
      } else {
        this.asideWidth = this.isCollapse ? '50px' : '240px';
      }
      self.isOpenM = self.deviceWidth < 401 && !self.isCollapse;
    },
    $route() {
      this.changeTitle();
    },
  },
  created() {
    // this.initLanguage()
  },
  mounted() {
    const self = this;
    self.initMenu();
    window.onresize = function () {
      // 定义窗口大小变更通知事件
      self.windowHeight = window.innerHeight; //窗口高度
    };
  },
  methods: {
    initMenu() {
      const self = this;

      if (self.deviceWidth < 401) {
        self.isCollapse = true;
      } else if (self.deviceWidth > 680) {
        self.$store.dispatch('setDeviceWidth', 680);
      }
      document.documentElement.style.fontSize =
        document.documentElement.clientWidth / 6.4 + 'px';
      this.changeTitle();
    },
    // 点击折叠按钮
    collapseMenu() {
      const self = this;
      self.isCollapse = !self.isCollapse;
      if (self.deviceWidth < 401) {
        // self.asideWidth = self.isCollapse ? "0" : "240px";
        self.asideWidth = '240px';
      } else {
        self.asideWidth = self.isCollapse ? '50px' : '240px';
      }
      self.isOpenM = self.deviceWidth < 401 && !self.isCollapse;
    },
    // 移动端：点击侧边栏以外的部分
    collapseMenuM() {
      const self = this;
      if (self.deviceWidth < 401 && !self.isCollapse) {
        self.isCollapse = true;
        self.isOpenM = false;
      }
    },
    onSearchMenu() {
      const self = this;

      const allMenu = window.menu.map((item) => Object.assign({}, item));

      const searchMenuList = [];

      if (self.searchMenu) {
        for (const menu of allMenu) {
          const childrenList = [];

          for (const children of menu.children) {
            if (children.title.indexOf(self.searchMenu) !== -1) {
              childrenList.push(children);
            }
          }
          if (childrenList.length > 0) {
            menu.children = childrenList;
            searchMenuList.push(menu);
          }
        }
        self.menuList = searchMenuList;
      } else {
        self.menuList = window.menu;
      }
    },
    handleEditPaw(val) {
      this.editPasswordVisible = Boolean(val);
    },
    changeLanguage(language) {
      const self = this;
      document.cookie = 'syslanguage=' + language + ';path=/';
      this.lang = document.cookie.replace(
        /(?:(?:^|.*;\s*)syslanguage\s*\=\s*([^;]*).*$)|^.*$/,
        '$1'
      );
      self.$emit('changeLanguage', language);
    },
    changeTitle() {
      for (const item of this.menuList) {
        for (const child of item.children) {
          const index = window.location.href.indexOf('?');
          const href =
            index !== -1
              ? window.location.href.slice(0, index)
              : window.location.href;
          if (child.routes === href) {
            this.secondTitle = child.title;
            this.firstTitle = item.title;
            break;
          }
        }
      }
    },
    goNavUrl(url) {
      const reg = /(http|https)?:\/\/(.*?)\//;
      if (url.match(reg)[2] == window.location.host) {
        this.$router.push(url.replace(window.location.origin, ''));
        return;
      }
      window.location.href = url;
    },
  },
};
</script>

<style lang="scss" scoped>
@media screen and (max-width: 400px) {
  .menu {
    width: 240px;
  }
  .ez-aside {
    position: fixed;
    z-index: 10300;
    height: 100%;
    overflow-y: hidden;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transition: transform 0.2s;
    -moz-transition: transform 0.2s; /* Firefox 4 */
    -webkit-transition: transform 0.2s; /* Safari and Chrome */
    -o-transition: transform 0.2s; /* Opera */
  }
}
@media screen and (min-width: 401px) {
}
.ez-container {
  /*position: relative;*/
  background-color: #eaf0f5;
}
.ez-aside {
  /*background-color: rgb(25, 35, 54);*/
  max-width: 240px;
  text-align: center;
  transition: width 0.2s, transform 0.2s;
  -moz-transition: width 0.2s, transform 0.2s; /* Firefox 4 */
  -webkit-transition: width 0.2s, transform 0.2s; /* Safari and Chrome */
  -o-transition: width 0.2s, transform 0.2s; /* Opera */
}
.ez-aside-fixed {
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -o-transform: translateX(0);
  transition: width 0.2s, transform 0.2s;
  -moz-transition: width 0.2s, transform 0.2s; /* Firefox 4 */
  -webkit-transition: width 0.2s, transform 0.2s; /* Safari and Chrome */
  -o-transition: width 0.2s, transform 0.2s; /* Opera */
}
.header {
  font-size: 14px;
  width: 100%;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}
.nav-a {
  padding: 0 0 0 40px;
  text-decoration: none;
}
.logo-icon {
  display: flex;
  align-items: center;
  position: relative;
  height: 64px;
  overflow: hidden;
  padding-left: 16px;
}
.logo-icon img {
  display: inline-block;
  vertical-align: middle;
}
.logo-icon h1 {
  display: none;
  margin: 0 0 0 12px;
  color: #fff;
  font-weight: 600;
  font-size: 20px;
  vertical-align: middle;
}

.nav-icon {
  position: relative;
  display: inline-block;
  margin-right: 14px;
  content: '';
  width: 16px;
  height: 16px;
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.6;
}
.nav-parent-title {
  opacity: 0.6;
}
/deep/.menu-item {
  text-align: left;
  .el-menu {
    background-color: rgb(18, 28, 45);
  }
}

.menu-item:hover .nav-parent-title,
.menu-item:active .nav-parent-title,
.menu-item:hover .menu-submenu .nav-icon,
.menu-item:active .menu-submenu .nav-icon,
.menu-child-item:hover .nav-a,
.menu-child-item:active .nav-a,
.el-menu-item.menu-child-item.is-active .nav-a,
.menu-submenu.is-active .nav-icon,
.el-submenu.is-active .nav-parent-title {
  opacity: 1;
}
.el-menu-item.menu-child-item.is-active .nav-a:before {
  position: absolute;
  top: 16px;
  right: -0.5px;
  display: inline-block;
  border-top: 6px solid transparent;
  border-right: 6px solid #eaf0f5;
  border-bottom: 6px solid transparent;
  content: '';
}
.nav-a {
  color: #f0f0f0;
  opacity: 0.6;
  font-size: 14px;
  line-height: 40px;
  height: 40px;
  display: inline-block;
  width: 100%;
}
.menu {
  position: fixed;
  /*background-color: #192336;*/
  box-shadow: 3px 0 6px rgba(0, 21, 41, 0.35);
  z-index: 999;
}
.menu.open {
  width: 240px;
  transition: all 0.2s;
  -moz-transition: all 0.2s; /* Firefox 4 */
  -webkit-transition: all 0.2s; /* Safari and Chrome */
  -o-transition: all 0.2s; /* Opera */
}
.menu-child-item {
  background-color: rgb(18, 28, 45);
  padding: 0;
  &:hover {
    background-color: rgb(18, 28, 45);
  }
}
/deep/.el-submenu__title:hover {
  background-color: rgb(25, 35, 54);
  /*background-color: rgb(18,28,45);*/
}
.el-menu--collapse .nav-parent-title {
  visibility: hidden;
}
.collapse {
  float: left;
  margin: 7px 20px 7px 10px;
  padding: 0;
  color: #fff;
}
.collapse-icon {
  display: flex;
  margin: 12px 0;
  font-size: 25px;
  color: #001529;
}
.footer {
  padding-top: 35px;
  font-size: 14px;
  width: 100%;
  text-align: center;
  background-color: #f0f2f5;
}
.biz-info {
  // overflow: hidden;
  // text-align: center;
  // color: #555;
  > span {
    display: inline-block;
    color: #939cae;
    margin: 0 20px;
  }
}

.biz-info-copyright {
  padding-top: 20px;
}

.icon-position {
  float: right;
  margin-right: 5px;
  width: 25px;
  height: 25px;
  background-size: 21px;
}
.icon-position:hover {
  opacity: 1;
}
.right-menu {
  left: auto;
  display: inline-block;
  padding: 14px 0;
}
.right-menu-download {
  left: auto;
  display: inline-block;
  margin: 14px 5px 14px 0;
}
.right-menu-download .biz-icon {
  margin: 0;
}
.dropdown-menu-a {
  text-decoration: none;
  color: #606266;
}
.dropdown-content li {
  padding: 10.5px 2px;
  cursor: pointer;
}
.biz-icon {
  position: relative;
  display: inline-block;
  content: '';
  width: 16px;
  height: 16px;
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
  box-sizing: border-box;
  margin-right: 5.5px;
  top: 2.5px;
  z-index: 1006;
}
.biz-icon-l {
  width: 35px;
  height: 25px;
  background-size: 20px;
  opacity: 0.7;
  cursor: pointer;
}
.biz-icon-l:hover {
  opacity: 1;
}

.message-badge {
  float: right;
  margin-top: 17px;
  margin-right: 10.5px;
  margin-left: 2.5px;
}
.message-btn {
  margin: 0;
  padding: 0;
}

.title-pos {
  margin: 17px auto;
  display: inline-block;
  font-size: 18px;
  line-height: 30px;
  height: 30px;
}
.breadcrumb {
  margin: 16px;
}

.el-menu.open {
  .logo-icon {
    padding-left: 20px;
  }
  .logo-icon h1 {
    display: inline-block;
  }
}
/deep/ .el-menu-item-group__title {
  padding: 0;
}
</style>
