<template id="SideMenu">
  <c-row>
    <div class="eContainer-menu-search">
      <c-button icon="el-icon-s-fold" v-if="menuOpen" @click="closeMenu"></c-button>
      <c-button icon="el-icon-s-unfold" v-else @click="openMenu"></c-button>
      <c-input prefix-icon="el-icon-search" v-if="menuOpen" v-model="searchContent"
        @keyup.enter.native="searchMenuEvent"></c-input>
    </div>
    <c-content :height="250">
      <img src="../../assets/menu_bottom.png" style="position: fixed; width: 200px; bottom: 0" />
      <el-menu default-active="2" class="el-menu-vertical-demo" v-bind:router="true" :unique-opened="true"
        @open="handleOpen" @close="handleClose" :collapse="!menuOpen">
        <el-menu-item index="/business/office">
          <i class="el-icon-menu"></i>
          <span slot="title">主页</span>
        </el-menu-item>
        <SubMenu :subMenuList="menus"></SubMenu>
      </el-menu>
    </c-content>
  </c-row>
</template>
<script>
  import Button from "../../components/Button.vue";
  import SubMenu from "~/components/SubMenu.vue";

  export default {
    components: { Button, SubMenu },
    data: function () {
      return {
        menuOpen: true,
        searchContent: "",
        menuList: [
          { inifrm: "0", ininam: "公共夹", pntmiu: "" },
          { inifrm: "sptsel", ininam: "待办任务", pntmiu: "0" },
          { inifrm: "trnrel", ininam: "复核任务", pntmiu: "0" },
          { inifrm: "diasel", ininam: "备忘录选择交易", pntmiu: "0" },
          { inifrm: "1", ininam: "汇款", pntmiu: "" },
          { inifrm: "infcpd", ininam: "汇款查询", pntmiu: "1" },
          { inifrm: "cptopn", ininam: "汇出汇款", pntmiu: "1" },
          { inifrm: "cptadv", ininam: "汇入汇款", pntmiu: "1" },
          { inifrm: "2", ininam: "国内证", pntmiu: "" },
          { inifrm: "ditopn", ininam: "买方信用证开立", pntmiu: "2" },
          { inifrm: "ditame", ininam: "信用证修改", pntmiu: "2" },
          { inifrm: "ditsel", ininam: "信用证查询", pntmiu: "2" },
          { inifrm: "bdtudp", ininam: "国内证承兑", pntmiu: "2" },
          { inifrm: "3", ininam: "出口信用证", pntmiu: "" },
          { inifrm: "letopn", ininam: "出口信用证通知", pntmiu: "3" },
          { inifrm: "4", ininam: "进口代收", pntmiu: "" },
        { inifrm: "bctacc", ininam: "进口代收承兑", pntmiu: "4" },
        { inifrm: "5", ininam: "静态参数管理", pntmiu: "" },
        { inifrm: "infusr", ininam: "用户信息", pntmiu: "5" },
        ],
        menusOrigin: [],
        menus: [],
      };
    },
    mounted() {
      const arr = [];
      this.generateMenuTree(arr);
      this.menusOrigin = arr;
      this.menus = this.menusOrigin;
    },
    methods: {
      searchMenuEvent() {
        if (this.searchContent.trim() === "") {
          this.menus = this.menusOrigin;
          return;
        }
        const res = [];
        for (let i = 0; i < this.menusOrigin.length; i++) {
          const menu = this.menusOrigin[i];
          const r = this.eachItem(menu);
          if (r !== null) {
            res.push(r);
          }
        }
        this.menus = res;
      },
      eachItem(item) {
        if (item.name.indexOf(this.searchContent) > -1) {
          // if (item.children.length > 0) {
          //   if (this.hasAvailableChild(item.children)) {
          //     return item;
          //   }
          //   return null;
          // } else {
          //   // TODO 判断此处是否为叶子节点
          //   return item;
          // }
          return item;
        }
        const arr = [];
        for (let i = 0; i < item.children.length; i++) {
          const child = item.children[i];
          const r = this.eachItem(child);
          if (r !== null) {
            arr.push(r);
          }
        }
        if (arr.length > 0) {
          return {
            name: item.name,
            path: item.path,
            icon: item.icon,
            children: arr,
          };
        }
        return null;
      },
      hasAvailableChild(children) {
        for (let i = 0; i < children.length; i++) {
          const child = children.length[i];
          if (child.children.length > 0) {
            return this.hasAvailableChild(child.children);
          } else {
            // TODO 判断此处是否为叶子节点
            return true;
          }
        }
      },
      generateMenuTree(list, item) {
        for (let i = 0; i < this.menuList.length; i++) {
          const menuItem = this.menuList[i];
          if (!item) {
            if (menuItem.pntmiu === undefined || menuItem.pntmiu === "") {
              const children = [];
              menuItem.path = "/business";
              this.generateMenuTree(children, menuItem);
              list.push({
                name: menuItem.ininam,
                path: menuItem.path,
                icon: "el-icon-menu",
                children,
              });
            }
          } else {
            if (menuItem.pntmiu === item.inifrm) {
              const children = [];
              menuItem.path = item.path + "/" + menuItem.inifrm;
              this.generateMenuTree(children, menuItem);
              list.push({
                name: menuItem.ininam,
                path: menuItem.path,
                icon: "el-icon-document",
                children,
              });
            }
          }
        }
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      openMenu() {
        this.menuOpen = true;
        const aside = document.querySelector("aside");
        aside.className = aside.className.split(" ")[0];
      },
      closeMenu() {
        this.menuOpen = false;
        const aside = document.querySelector("aside");
        aside.className = aside.className + " fold";
      },
    },
  };
</script>
<style scoped>
  .eContainer-menu-search .el-button {
    border: none;
    font-size: 20px;
    padding: 12px 20px;
  }

  .eContainer-menu-search .el-input {
    width: auto;
    position: absolute;
    right: 20px;
    top: 10px;
    left: 60px;
  }

  .eContainer-scroller .el-scrollbar__wrap {
    overflow: auto;
    margin-right: 0px !important;
  }

  .eContainer-menu-search {
    width: 100%;
    position: relative;
  }

  .eContainer-menu-search .el-input {
    width: auto;
    position: absolute;
    right: 20px;
    top: 10px;
    left: 60px;
  }

  .eContainer-menu-search .el-input .el-input__inner {
    height: 30px;
  }

  .eContainer-menu-search .el-icon-search {
    line-height: 30px;
  }

  .eContainer-scroller {
    height: calc(100% - 44px);
  }

  .eContainer-scroller .el-scrollbar__bar {
    display: none;
  }

  .el-icon-s-fold {
    float: left;
    font-size: 20px;
  }

  .el-icon-s-unfold {
    float: left;
    font-size: 20px;
  }

  .el-menu {
    border-right: none;
  }

  .eContainer-refresh {
    width: auto;
    overflow: auto;
    height: calc(100% - 44px);
  }

  .el-button-refresh {
    width: 100%;
    height: 40px;
  }
</style>

<style>
  .eContainer-menu-search .el-input .el-input__inner {
    height: 30px;
  }

  .el-menu-vertical-demo.el-menu--collapse {
    width: 60px;
  }

  .el-submenu__title,
  .el-menu-item,
  .el-submenu .el-menu-item {
    font-size: 12px;
    height: 35px;
    line-height: 35px;
  }
</style>