<template>
  <div class="left-nav sidebar-menu-con">
    <transition name="slide-fade">
      <div>
        <div class="layout-logo-left">
          <img
            src="../../assets/images/logo-nav.png"
            style="display: inline-block;"
          />
        </div>
        <Menu
          v-if="showLeftMenu"
          ref="menu"
          class="left-nav-menu"
          :active-name="activeName"
          :open-names="openMenu"
          :width="'200px'"
          theme="dark"
          accordion
        >
          <template v-for="(item, index) in navList">
            <Submenu
              v-if="item.children && item.children.length > 0"
              :key="index"
              :name="item.menuCode"
            >
              <template slot="title">
                {{ item.menuName }}
              </template>
              <Menu-item
                v-for="(subItem, subIndex) in item.children"
                :key="subIndex"
                :name="subItem.actionUrl"
                @click.native="navTo(subItem)"
              >
                {{ subItem.menuName }}
              </Menu-item>
            </Submenu>
            <Menu-item
              v-else
              :key="index"
              :name="item.actionUrl"
              @click.native="navTo(item)"
            >
              {{ item.menuName }}
            </Menu-item>
          </template>
        </Menu>
      </div>
    </transition>
  </div>
</template>
<script>
import { GetUserMenus, FindCurrentEmployee } from '@paymentPlatformSrc/api/server.js';
import { mapActions, mapMutations } from 'vuex';
export default {
  data() {
    return {
      navList: [],
      curPageName: JSON.parse(window.sessionStorage.getItem('curPageName')),
      showLeftMenu: false
    };
  },
  computed: {
    activeName() {
      console.log('activeName', this.$route.name);
      return this.$route.name && this.$route.name;
    },
    openMenu() {
      console.log(this.$route);
      return this.$route && [this.$route.meta.title[2]];
    }
  },
  created() {
    this.init();
    console.log('this.$route', this.$route);
  },
  methods: {
    ...mapMutations('paymentWorktable', ['SET_CUR_PAGE_NAME']),
    ...mapActions('paymentWorktable', ['addView']),
    async init() {
      const res = await FindCurrentEmployee();
      console.log('FindCurrentEmployee', res);
      const params = {
        businessLineCode: res.data.businessLine,
        orgCode: res.data.departmentId,
        context: '/ems/'
      };
      GetUserMenus(params).then(data => {
        const temp = data.dataResult.userMenuList.filter(item => item.menuCode == 'EMS_PAYMENT_PLATFORM') || [];
        this.$set(this, 'navList', temp[0].children);
        this.showLeftMenu = true;
      });
    },
    navTo(data) {
      const userName = sessionStorage.getItem('username');
      const query = `pageName=payment-plan&userCode=${userName}&startUserCode=${userName}&categoryCode=7001001&categoryLevel=&displayOrder=&parentCode=&fullPath=&isValidity=&reimbursementAllowed=1&taxType=&createdBy=&createdTime=&updatedBy=&updatedTime=&tpCode=payment-plan&tpMobileCode=&mobileIcon=&pubAccountItemId=&pubAccountItemCode=&priAccountItemId=&priAccountItemCode=&inherit=&formId=&formPath=&isEntrustPayment=&categoryName=账龄类付款申请（共享）&categoryDesc=&isDelete=%00&adaptId=&adaptCode=&isReceivables=&isMergePay=&capitalPlan=&capitalPlanName=&lang=&publicOrPrivate=&paramsList=&categoryAttribute=&projectTemplate=&id=&menuCode=7001001&menuName=账龄类付款申请（共享）&actionType=start&singlePage=YES`;
      if (data.actionUrl == 'create-payment-plan') {
        const targetUrl = `${window.location.origin}${window.location.pathname}#/${data.actionUrl}?${query}`;
        window.open(targetUrl);
        return;
      }
      this.addView(data).then(() => {
        console.log('addView回调');
        this.SET_CUR_PAGE_NAME(data.actionUrl);
        this.$router.push({ name: data.actionUrl });
      });
    }
  }
};
</script>
<style scoped lang="less">
.left-nav {
  height: 100%;
  width: 200px;
  background: #191a23;
  position: relative;
  transition: width 2s;
  .layout-logo-left {
    height: 63px;
    line-height: 63px;
    text-align: center;
    overflow: hidden;
    img {
      vertical-align: middle;
    }
  }
  .nav-arrow {
    position: absolute;
    right: -20px;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
  }
  .left-nav-menu {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    background: #191a23;
    &::-webkit-scrollbar {
      display: none
    }
  }
}
</style>
<style>
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active,
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover,
.ivu-menu-item.ivu-menu-item-active.ivu-menu-item-selected {
  border-right: none;
  color: #fff !important;
  background: #f99c34 !important;
}
</style>
