<template>
  <div class="ec-nav-header-container">
    <div class="ec-logo">
      <img class="ec-logo-img" v-if="logoImg" :src="logoImg" />
      <div class="ec-logo-name">东华软件</div>
    </div>
    <div class="ec-nav">
      <el-tabs type="border-card" @tab-click="nav($event)">
        <el-tab-pane v-for="navMenu in navMenus" :key="navMenu.sysId" :name="navMenu.sysId" :label="navMenu.sysName"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="ec-opts">
      <transition name="el-zoom-in-right">
        <div class="ec-search" v-if="showSearch">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <span>合同</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item disabled>双皮奶</el-dropdown-item>
              <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div>
            <a-input placeholder="请输入合同名称" size="small" class="ec-search-input" />
          </div>
        </div>
      </transition>
      <div class="ec-search-icon" @click="onShowSearchHandler()"><i class="el-icon-search"></i></div>
      <div class="ec-bell-icon">
        <el-badge is-dot class="ec-item">
          <i class="el-icon-bell"></i>
        </el-badge>
      </div>
      <div class="ec-role">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <span>项目经理</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="ec-user">
        <div class="ec-user-img">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" size="small"></el-avatar>
        </div>
        <div class="ec-user-name">
          <el-dropdown trigger="click" @command="handleUserOpts($event)">
            <span class="el-dropdown-link">
              <span>张三</span>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="'myapp'">我的应用</el-dropdown-item>
              <el-dropdown-item :command="'userinfo'">个人信息</el-dropdown-item>
              <el-dropdown-item>登出系统</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <el-dialog :visible.sync="dialogApps" title="我的应用" :width="'60%'">
        <my-apps @save="dialogKey = ''"></my-apps>
      </el-dialog>
      <el-dialog :visible.sync="dialogUser" title="用户信息">
        <user-info @close="dialogKey = ''" :user="user"></user-info>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Avatar, Badge, Dialog, Dropdown, DropdownItem, DropdownMenu, Input, TabPane, Tabs } from "element-ui";
import MyApps from "@/components/my-apps/components/MyApps.vue";
import UserInfo from "@/components/user-info/components/UserInfo.vue";
import { testUser } from "@/components/user-info/components/test";
import { Prop, Watch } from "vue-property-decorator";
import apiService from "@/components/services/api.service";
import { DataOutput } from "@/components/model/DataOutput";
import { NavMenu } from "@/components/model/NavMenu";
import routerService from "@/components/services/router.service";

@Component({
  name: "EcNavHeader",
  components: {
    "el-tabs": Tabs,
    "el-tab-pane": TabPane,
    "el-dropdown-menu": DropdownMenu,
    "el-dropdown-item": DropdownItem,
    "el-dropdown": Dropdown,
    "a-input": Input,
    "el-avatar": Avatar,
    "el-badge": Badge,
    "el-dialog": Dialog,
    "my-apps": MyApps,
    "user-info": UserInfo
  }
})
export default class NavHeader extends Vue {
  @Prop({ type: Boolean, default: false }) isLoadSysInfo: boolean | undefined;
  @Prop() logoImg: string | undefined;

  showSearch = false;
  dialogKey = "";
  user = testUser;
  navMenus: NavMenu[] = [];

  @Watch("isLoadSysInfo", { immediate: true })
  onIsLoadSysInfoChange(val: boolean) {
    if (val) {
      this.loadCommonSysInfo();
    }
  }

  set dialogApps(val) {
    this.dialogKey = "";
  }
  get dialogApps() {
    return this.dialogKey === "myapp";
  }
  set dialogUser(val) {
    this.dialogKey = "";
  }
  get dialogUser() {
    return this.dialogKey === "userinfo";
  }

  onShowSearchHandler() {
    this.showSearch = !this.showSearch;
  }

  handleUserOpts(event: any) {
    this.dialogKey = event;
  }

  /**
   * @description: 加载常用应用
   * @author ChenRui
   * @date 2020/12/12 0:59
   */
  loadCommonSysInfo(): void {
    const query: any = { userId: "admin" };
    apiService
      .fetch("/api/sys/findUseSys", query, undefined, "GET", apiService.createAuthHeaders())
      .then((res: DataOutput<any>) => {
        if (res.code === 200) {
          this.navMenus = res.data;
        }
      })
      .catch(err => {});
  }

  /**
   * @description: 导航
   * @author ChenRui
   * @date 2020/12/12 1:24
   */
  nav(event: any): void {
    const navMenu: NavMenu | undefined = this.navMenus.find(item => item.sysId === event.name);
    if (navMenu != null && navMenu.sysUrl) {
      routerService.push(navMenu.sysUrl);
    }
  }
}
</script>

<style scoped lang="scss">
.ec-nav-header-container {
  display: flex;
  align-items: center;
  background-color: #1b162f;
  height: 64px;
  .ec-logo {
    display: flex;
    align-items: center;
    width: 225px;
    .ec-logo-img {
      margin-left: 20px;
      width: 40px;
      height: 31px;
      display: block;
    }
    .ec-logo-name {
      margin-left: 16px;
      font-size: 18px;
      color: #ffffff;
    }
  }
  .ec-nav {
    max-width: calc(100vw - 870px);
    height: 100%;
    ::v-deep {
      .el-tabs {
        height: 100%;
        border: 0;
        box-sizing: border-box;
        box-shadow: none;
        .el-tabs__header {
          height: 100%;
          background-color: #2b273e;
          border: 0;
          .el-tabs__nav-wrap {
            height: 100%;
            .el-tabs__nav-prev {
              height: 64px;
              line-height: 64px;
              width: 20px;
              text-align: center;
              background: linear-gradient(to right, rgba(66, 62, 83, 1) 0%, rgba(43, 39, 62, 1) 100%);
            }
            .el-tabs__nav-next {
              height: 64px;
              line-height: 64px;
              width: 20px;
              text-align: center;
              background: linear-gradient(to right, rgba(43, 39, 62, 1) 51%, rgba(66, 62, 83, 1) 100%);
            }
            .el-tabs__nav-scroll {
              height: 100%;
              margin: 0 2px;
              .el-tabs__nav {
                height: 100%;
                .el-tabs__item {
                  height: 100%;
                  padding-top: 10px;
                  margin: 0;
                  border: 0;
                  color: #95939e;
                  font-size: 16px;
                  position: relative;
                  &.is-active {
                    background-color: #1b162f;
                    color: #ffffff;
                    &:after {
                      content: "";
                      position: absolute;
                      left: 20px;
                      top: auto;
                      bottom: 0;
                      right: auto;
                      height: 2px;
                      width: calc(100% - 40px);
                      background-color: #ffffff;
                    }
                  }
                  &:hover {
                    background-color: #1b162f;
                  }
                }
              }
            }
          }
        }
        .el-tabs__content {
          display: none;
        }
      }
    }
  }
  .ec-opts {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
    padding: 0 15px;
    .ec-search {
      display: flex;
      align-items: center;
      margin: 0 15px 0 0;
      .el-dropdown:focus {
        outline: none;
      }
      .el-dropdown-link {
        cursor: pointer;
        color: #ffffff;
        margin-right: 15px;
        font-size: 14px;
      }
      .el-icon-arrow-down {
        font-size: 12px;
      }
      .ec-search-input {
        width: 260px;
      }
    }
    .ec-search-icon,
    .ec-bell-icon {
      color: #ffffff;
      cursor: pointer;
      font-size: 18px;
      margin: 0 10px;
    }
    .ec-role {
      margin: 0 15px 0 15px;
      .el-dropdown:focus {
        outline: none;
      }
      .el-dropdown-link {
        cursor: pointer;
        color: #ffffff;
        font-size: 14px;
      }
      .el-icon-arrow-down {
        font-size: 12px;
      }
    }
    .ec-user {
      display: flex;
      align-items: center;
      margin: 0 10px;
      .ec-user-img {
        margin-right: 10px;
        .el-avatar {
          display: block;
        }
      }
      .ec-user-name {
        max-width: 60px;
        color: #ffffff;
        font-size: 14px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        .el-dropdown-link {
          cursor: pointer;
          color: #ffffff;
          font-size: 14px;
        }
        .el-icon-arrow-down {
          font-size: 12px;
        }
      }
    }
  }
}

.el-zoom-in-right-enter-active,
.el-zoom-in-right-leave-active {
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.el-zoom-in-right-enter,
.el-zoom-in-right-leave-active {
  opacity: 0;
  transform: scaleX(0);
}
</style>
