<template>
  <div class="d-page d-flex flex-column">
    <title-bar :title="title" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <!--    <title-bar @clickLeft="onClick">-->
    <!--      <div class="d-bank-logo" slot="left"></div>-->
    <!--    </title-bar>-->
    <div class="d-main-body d-flex flex-row">
      <div class="d-left-nav">
        <a class="header d-flex flex-column" @click="onHeaderClick">
          <div style="border-radius: 30px">
            <svg class="icon" style="width: 50px;height: 50px" aria-hidden="true">
              <use xlink:href="#icon-wode24x24"></use>
            </svg>
          </div>
          <span>{{ userName }}</span>
        </a>
        <a v-for="item in menuList" :key="item.name" class="d-nav-item" :class="{ selected: selectPath == item.path }"
           @click="onNavItemClick(item)">
          <div class="d-nav-item_inner">
            <div class="d-nav-item_icon">
              <svg style="width: 40px;height: 40px" v-if="selectPath != item.path" class="icon svg-icon" aria-hidden="true">
                <use :xlink:href="item.iconName+'xian'" />
              </svg>
              <svg style="width: 40px;height: 40px" v-else class="icon svg-icon" aria-hidden="true">
                <use :xlink:href="item.iconName+'mian'" />
              </svg>
            </div>
            <div class="d-nav-item_text">{{ item.name }}</div>
          </div>
        </a>
      </div>
      <div class="d-right-content flex-1-dhc">
        <transition :name="animateName">
          <router-view class="router-container"> </router-view>
        </transition>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import routerService from "@/services/router.service";
import { NativeUI } from "@/public/ts/NativeUI";
import IF from "@/public/factory/InterFaceFactory";
import systemApi from "@/constants/api/ms-system/system.api";
import Public from "@/public/ts/Public";
import { MENU, WORKBENCH } from "@/constants/enum/menu.enum";

@Component({
  name: "MainView"
})
export default class MainView extends Vue {
  animateName = ""; // 路由动画名称
  pathMap: any = {}; // 存储路由对象
  selectPath = "/main/workbench";
  title: string = "工作台"; //标题名
  userName: any = "";
  // 功能菜单列表
  menuList: any = [
    // { title: "工作台", icon: "", path: "/main/workbench" },
    // { title: "营销管理", icon: "", path: "/ComMarketingPool" },
    // { title: "对公客户管理", icon: "", path: "/main/CustomerMgtView" },
    // { title: "个人客户管理", icon: "", path: "/main/PersonalMgtView" },
  ];

  activated() {
    this.selectPath = this.$route.path;
    this.userName = sessionStorage.getItem("userName");
  }

  mounted() {
    this.selectPath = this.$route.path;
    this.userName = sessionStorage.getItem("userName");
    this.menuList = Public.getMenuBySuperID(MENU.FIRST_VIEW.code, WORKBENCH.FIRST_VIEW.name);
  }

  onClick() {
    // this.$router.go(-1);
    this.$router.push({
        name: "TYMHView"
      }
    );
  }

  @Watch("$route")
  onRouterChanged(to: any, from: any) {
    if (from.path === "/") {
      return;
    }
    // const anim = routerService.animateName(to, from, this);
    // this.animateName = `slide-${anim}`;
    this.animateName = `slide-left`;
  }

  /**
   * 点击头像
   */
  onHeaderClick() {
    this.$router.push({
      path: "/main/self-stats",
    });
  }

  /**
   * 点击左侧菜单
   * @param item
   */
  onNavItemClick(item: any) {
    console.log(item.iconName);
    if (this.selectPath == item.path) return;
    this.selectPath = item.path;
    this.title = item.name;
    this.$router.push({
      path: item.path,
    });
  }
}
</script>
<style lang="scss">
.d-main-body {
  height: calc(100vh - 60px);
  overflow: hidden;
}

.d-left-nav {
  width: 100px;
  height: 100%;
  text-align: center;
  background-color: #ffffff;
  border-right: 1px solid #e1e2e3;

  .header {
    margin: 20px 0;

    div {
      width: 48px;
      height: 48px;
      border-radius: 48px;
      //border: 1px solid red;
      margin: 10px auto;
    }
  }

  .d-nav-item {
    display: flex;
    width: 85px;
    height: 72px;
    background: #ffffff;
    border: 1px solid #e1e2e3;
    border-radius: 8px;
    margin: 0 auto 16px auto;

    &_inner {
      margin: auto;
    }

    &_text {
      color: #999999;
      font-size: 14px;
    }

    &:active {
      opacity: 0.6;
    }

    //&.selected {
    //  background: linear-gradient(270deg, rgba(229, 0, 18, 1) 1%, rgba(243, 45, 64, 1) 50%, rgba(244, 49, 68, 1) 55%, rgba(255, 87, 108, 1) 98%);
    //}
    //&.selected * {
    //  color: #ffffff;
    //}
  }
}

.d-right-content {
  position: relative;
}
</style>
