<template>

  <div :class="classObj" class="app-wrapper">
<!--    最顶部导航栏-->
    <div class="top-head-bar">
      <div class="top-head-bar__logo">
        <img style="height: 20px" src="../assets/logo.png" alt="logo" />
      </div>

      <ul>
        <li
          v-for="item in $store.state.permission.rootMenu"
          :class="{
            'li-active':
              new RegExp(`^${item.path}`).test($route.path)
          }"
          @click="menuClick(item)"
        >
          {{ item.name }}
        </li>
      </ul>

      <div class="top-head-bar__user">
        <el-dropdown class="avatar-container" trigger="click">
          <div class="avatar-wrapper">
            <div class="avatar-wrapper__name">{{ $store.state.user.name }}</div>
            <i class="el-icon-caret-bottom" />
          </div>
          <el-dropdown-menu slot="dropdown" class="user-dropdown">
            <router-link to="/">
              <el-dropdown-item> 系统首页 </el-dropdown-item>
            </router-link>
            <el-dropdown-item divided @click.native="logout">
              <span style="display: block">退出</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div
      v-if="device === 'mobile' && sidebar.opened"
      class="drawer-bg"
      @click="handleClickOutside"
    />

    <template v-if="$route.path === '/worker'">
      <el-scrollbar style="padding-top: 50px; height: 100%">
        <worker></worker>
      </el-scrollbar>
    </template>
    <template v-else-if="/^\/asset/.test($route.path)">

      <sidebar class="sidebar-container" />
      <div class="main-container">
        <iframe style="width: 100%;height: 100%;" ref="bookIframe" :src="iframeUrl"
        >你的浏览器不支持该iframe</iframe
        >
      </div>
<!--      <div class="main-container">-->
<!--        <div :class="{ 'fixed-header': fixedHeader }" v-if="false">-->
<!--          <navbar />-->
<!--        </div>-->
<!--        <el-scrollbar style="height: 100%">-->
<!--          <app-main />-->
<!--        </el-scrollbar>-->
<!--      </div>-->
    </template>
<!--    <template v-else-if="$route.path === '/gdzc'">-->
<!--      <div-->
<!--        style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"-->
<!--      >-->
<!--        <iframe ref="gdzcIframe" :src="gdzcUrl"-->
<!--          >你的浏览器不支持该iframe</iframe-->
<!--        >-->
<!--      </div>-->
<!--    </template>-->
    <template v-else-if="$route.path === '/old'">
      <div
        style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"
      >
        <iframe ref="oldIframe" style="width: 100%;" :src="oldUrl">你的浏览器不支持该iframe</iframe>
      </div>
    </template>
<!--    <template v-else-if="$route.path === '/goods'">-->
<!--      <div-->
<!--        style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"-->
<!--      >-->
<!--        <iframe ref="goodsIframe" :src="goodsUrl">你的浏览器不支持该iframe</iframe>-->
<!--      </div>-->
<!--    </template>-->
    <template v-else>
      <sidebar class="sidebar-container" />
      <div class="main-container">
        <div :class="{ 'fixed-header': fixedHeader }" v-if="false">
          <navbar />
        </div>
        <el-scrollbar style="height: 100%">
          <app-main />
        </el-scrollbar>
      </div>
    </template>
  </div>
</template>

<script>
import { getOatoken } from "@/api/oatoken"
import { ossLogin } from "@/api/system/ossLogin";
import { Navbar, Sidebar, AppMain } from "./components";
import ResizeMixin from "./mixin/ResizeHandler";
import worker from "./components/worker/index.vue";
import axios from "axios";
export default {
  name: "Layout",
  components: {
    Navbar,
    Sidebar,
    AppMain,
    worker,
  },
  mixins: [ResizeMixin],
  data() {
    return {
      active: 0,
      bookUrl: process.env.VUE_APP_OUT_Book,
      gdzcUrl: `${process.env.VUE_APP_OUT_GDZC}/member/oss_login?id=${this.$store.state.user.userId}&username=${this.$store.state.user.username}`,
      oldUrl: `${process.env.VUE_APP_OUT_OLD}/login/oss_login?auth_token=${this.$store.getters.oa_token}`,
      goodsUrl: `${process.env.VUE_APP_OUT_GOODS}/admin/oss-login?id=${this.$store.state.user.userId}&username=${this.$store.state.user.username}`,
    };
  },
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar;
    },
    device() {
      return this.$store.state.app.device;
    },
    fixedHeader() {
      return this.$store.state.settings.fixedHeader;
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === "mobile",
      };
    },
    iframeUrl() {
      let urlMap = new Map([
        ['/bookmanage', this.bookUrl],
        ['/gdzc', this.gdzcUrl],
        ['/goods', this.goodsUrl]
      ])
      return urlMap.get(this.$route.path.substring(this.$route.path.lastIndexOf('/')))
    }
  },
  methods: {
    async logout() {
      await this.$store.dispatch('app/clearLayout')
      await this.$store.dispatch("user/logout");
      this.$router.push(`/login`);
    },
    handleClickOutside() {
      this.$store.dispatch("app/closeSideBar", {
        withoutAnimation: false,
      });
    },

    menuClick(item) {
      this.$router.push(item.path);
    },
  },
  mounted() {},
  watch: {
    "$route.path": {
      handler: function (url) {
        if(/^\/asset/.test(url)) {
          if(this.$store.state.app.sidebar.opened) {
            this.$store.commit('app/TOGGLE_SIDEBAR')
          }
        }
        if (/\/bookmanage/.test(url)) {
          this.$nextTick(() => {
            this.$refs['bookIframe'].onload = () => {
              this.$refs["bookIframe"].contentWindow.postMessage(
                {
                  key: "login",
                  data: {
                    id: this.$store.state.user.userId,
                    username: this.$store.state.user.username,
                  },
                },
                "*"
              );
            }
          })
          return;
        }

      },
      immediate: true,
    },
  },
  beforeRouteEnter(to,from,next){
    document.getElementsByTagName('iframe').forEach(dom => {
      dom.onload = null;
    })
    next()
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;

  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}

.top-head-bar {
  background: #338de3ff;
  height: 50px;
  filter: drop-shadow(0 1px 1px #49a0f3);
  display: grid;
  grid-template-columns: auto 0.5fr 6fr 0.2fr 1fr;
  grid-template-rows: 50px;
  grid-template-areas: "logo . menu . user";

  z-index: 2000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  &__logo {
    height: 50px;
    grid-area: logo;
    display: flex;
    align-items: center;

    padding: 0 20px;
  }
  @media screen and (max-width: 1000px) {
    &__logo {
      display: none;
    }
  }

  &__user {
    grid-area: user;
  }

  ul {
    grid-area: menu;
    height: 100%;
    display: flex;
    justify-self: flex-end;
    align-items: flex-end;

    li {
      color: #fff;
      height: 40px;
      line-height: 40px;
      list-style: none;
      transition: all 300ms ease-out;
      border-top-right-radius: 6px;
      border-top-left-radius: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;

      padding: 0 20px;
      position: relative;

      &::after {
        content: "";
        background: #338de3ff;
        height: 3px;
        width: 0;
        border-radius: 1px;
        transition: all 300ms ease-out;

        position: absolute;
        left: 6px;
        bottom: 2px;
      }
      & + li {
        margin-left: 20px;
      }
      &:hover {
        background: #fff;
        color: rgb(100, 100, 100);

        &::after {
          width: calc(100% - 12px);
        }
      }
    }
    .li-active {
      background: #fff;
      color: rgb(100, 100, 100);

      &::after {
        width: calc(100% - 12px);
      }
    }
  }
}
.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.mobile .fixed-header {
  width: 100%;
}

.avatar-container {
  height: 100%;
  margin-right: 30px;

  .avatar-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    .user-avatar {
      cursor: pointer;
      width: 40px;
      height: 40px;
      border-radius: 10px;
    }
    &__name {
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      padding: 0 6px;
    }
    .el-icon-caret-bottom {
      cursor: pointer;
      color: #fff;
      position: absolute;
      right: -20px;
      font-size: 12px;
    }
  }
}
iframe {
  height: 100%;
  width: calc(100% + 12px);
  border: none;

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}
</style>
