<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" v-model="activeNavMenuId" @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-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="hasNewMsg" class="ec-item">
          <i class="el-icon-bell"></i>
        </el-badge>
      </div>
      <div class="ec-role">
        <el-dropdown trigger="click" @command="handleToggleRole($event)">
          <span class="el-dropdown-link">
            <span>{{ activeRole.roleName }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="role in user.roles" :key="role.roleId" :command="role.roleId">{{ role.roleName }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="ec-user">
        <div class="ec-user-img">
          <el-avatar :src="user.avatar" size="small"></el-avatar>
        </div>
        <div class="ec-user-name">
          <el-dropdown trigger="click" @command="handleUserOpts($event)">
            <span class="el-dropdown-link">
              <span>{{ user.emplName }}</span>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="value in userOperate" :command="value.code" :key="value.code">{{ value.name }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <el-dialog class="ec-my-apps-modal" :visible.sync="myAppsDialogVisible" title="我的应用" :width="'60%'">
        <my-apps :visible.sync="myAppsDialogVisible" v-if="myAppsDialogVisible" :apps="allNavMenus" @common-change="refreshCommonChange"></my-apps>
      </el-dialog>
      <el-dialog class="ec-user-info-modal" :visible.sync="userInfoDialogVisible" title="用户信息">
        <user-info :visible.sync="userInfoDialogVisible" v-if="userInfoDialogVisible" :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 { Prop, Watch } from "vue-property-decorator";
import apiService from "@/services/api.service";
import { DataOutput } from "@/model/DataOutput";
import { NavMenu } from "@/model/NavMenu";
import routerService from "@/services/router.service";
import { Role } from "@/model/Role";
import { User } from "@/model/User";
import sysApi from "@/constants/api/sys.api";
import authApi from "@/constants/api/auth.api";
import { userStore, authService } from "@dhccmobile/etbc-auth-api";
import { UserOperate } from "@/constants/enum/user-operate.enum";

@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({ default: () => require("@/assets/img/nav-header-logo.png") }) logoImg: string | undefined;

  userOperate = UserOperate;

  myAppsDialogVisible = false;
  userInfoDialogVisible = false;
  showSearch = false;
  hasNewMsg = false;

  activeNavMenuId = "";
  allNavMenus: NavMenu[] = [];
  navMenus: NavMenu[] = [];
  user: User = new User();
  activeRole: Role = new Role();

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

  @Watch("$route", { immediate: true })
  onRouteChange(val: any) {
    this.toggleActiveNavMenus();
  }

  created(): void {
    this.loadUserInfo();
  }

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

  /**
   * @description: 用户操作
   * @author ChenRui
   * @date 2020/12/17 16:57
   */
  handleUserOpts(event: any) {
    if (event === UserOperate.MY_APP.code) {
      this.myAppsDialogVisible = true;
    } else if (event === UserOperate.PERSONAL_INFO.code) {
      this.userInfoDialogVisible = true;
    } else if (event === UserOperate.LOGOUT.code) {
      authService.logOut().then((res: any) => {
        this.$emit("logout", res);
      });
    }
  }

  /**
   * @description: 加载用户信息
   * @author ChenRui
   * @date 2020/12/16 10:49
   */
  loadUserInfo(): void {
    Promise.resolve(userStore.detailsUser)
      .then((res: any) => {
        if (res) {
          this.user = res;
          return res;
        } else {
          return apiService.general(authApi.user).then((res: DataOutput<User[]>) => {
            if (res.code === 200 && res.data && res.data.length > 0) {
              this.user = new User(res.data[0]);
            }
          });
        }
      })
      .then(() => {
        if (this.user != null && this.user.roles != null && this.user.roles.length > 0) {
          this.activeRole = this.user.roles[0];
        }
      });
  }

  /**
   * @description: 加载所有应用
   * @author ChenRui
   * @date 2020/12/17 17:20
   */
  loadAllSysInfo() {
    apiService.general(sysApi.findAll).then((res: DataOutput<NavMenu[]>) => {
      if (res.code === 200) {
        this.allNavMenus = res.data || [];
      }
    });
  }

  /**
   * @description: 加载常用应用
   * @author ChenRui
   * @date 2020/12/12 0:59
   */
  loadCommonSysInfo(): void {
    apiService.general(sysApi.findCommon).then((res: DataOutput<NavMenu[]>) => {
      if (res.code === 200) {
        this.navMenus = res.data || [];
        this.toggleActiveNavMenus();
      }
    });
  }

  /**
   * @description: 刷新常用应用
   * @author ChenRui
   * @date 2020/12/21 20:37
   */
  refreshCommonChange(): void {
    this.loadCommonSysInfo();
    this.loadAllSysInfo();
  }

  /**
   * @description:
   * @author ChenRui
   * @date 2020/12/18 22:24
   */
  toggleActiveNavMenus(): void {
    if (this.$route && this.$route.path) {
      const pathArr = this.$route.path.split("/").filter(item => item !== "");
      if (pathArr && pathArr.length > 0) {
        const path = pathArr[0];
        if (this.navMenus != null && this.navMenus.length > 0) {
          const navMenu: NavMenu | undefined = this.navMenus.find(item => item.sysMountName === path);
          if (navMenu) {
            this.activeNavMenuId = navMenu.sysId!;
          }
        }
      }
    }
  }

  /**
   * @description: 切换角色
   * @author ChenRui
   * @date 2020/12/16 15:29
   */
  handleToggleRole(roleId: string): void {
    this.activeRole = this.user.roles.find(item => item.roleId === roleId) || new Role();
  }

  /**
   * @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: 50px;
  .ec-logo {
    display: flex;
    align-items: center;
    width: 220px;
    .ec-logo-img {
      margin-left: 20px;
      width: 28px;
      height: 24px;
      display: block;
    }
    .ec-logo-name {
      margin-left: 5px;
      font-weight: 600;
      font-size: 16px;
      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: 50px;
              line-height: 50px;
              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: 50px;
              line-height: 50px;
              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: 5px;
                  margin: 0;
                  border: 0;
                  color: #95939e;
                  font-size: 14px;
                  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: 265px;
      }
    }
    .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;
        }
      }
    }
    .ec-my-apps-modal,
    .ec-user-info-modal {
      ::v-deep {
        .el-dialog__header {
          padding: 10px 20px 10px;
          border-bottom: 1px solid #d8dce6;
          .el-dialog__headerbtn {
            top: 15px;
          }
        }
        .el-dialog__body {
          padding: 20px 20px;
        }
      }
    }
  }
}

.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);
}
/**覆盖弹窗一些样式*/
::v-deep .app-modal .el-dialog__body {
  padding: 10px 20px;
}
</style>
