<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" placeholder="全局搜索"></c-input> -->
      <c-search-input v-show="menuOpen"></c-search-input>
    </div>
    <c-content :height="250">
      <!-- <img
        src="../../assets/menu_bottom.png"
        style="position: fixed; width: 200px; bottom: 0"
      /> -->
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        v-bind:router="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" :openFlgArr="openFlgArr"></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 {
      openFlgArr: [],
      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: "infbdd", ininam: "买方信用证单据查询", pntmiu: "2" },
        { inifrm: "bdtudp", ininam: "国内证承兑", pntmiu: "2" },
        { inifrm: "bdtdcr", ininam: "国内证不符点/拒付", pntmiu: "2" },
        { inifrm: "3", ininam: "出口信用证", pntmiu: "" },
        //{ inifrm: "3", ininam: "出口信用证", pntmiu: "" },
        { inifrm: "letsel", ininam: "出口信用证查询", pntmiu: "3" },
        { inifrm: "letopn", ininam: "出口信用证通知", pntmiu: "3" },
        { inifrm: "letame", ininam: "出口信用证修改", pntmiu: "3" },
        { inifrm: "letrsv", ininam: "出口信用证补通知", pntmiu: "3" },
        { inifrm: "infled", ininam: "出口信用证查询infled", pntmiu: "3" },
        { inifrm: "4", ininam: "进口信用证", pntmiu: "" },
        { inifrm: "inflid", ininam: "进口信用证查询", pntmiu: "4" },
        { inifrm: "litopn", ininam: "进口信用证开立", pntmiu: "4" },
        { inifrm: "litdav", ininam: "进口信用证通知到单", pntmiu: "4" },
        { inifrm: "litdck", ininam: "进口信用证到单", pntmiu: "4" },
        { inifrm: "brtlat", ininam: "进口信用证单据偿还垫款", pntmiu: "4" },
        { inifrm: "litcan", ininam: "进口信用证注销", pntmiu: "4" },
        { inifrm: "inftrd", ininam: "进口押汇查询", pntmiu: "4" },
        { inifrm: "trtame", ininam: "进口融资修改", pntmiu: "4" },
        { inifrm: "5", ininam: "进口代收", pntmiu: "" },
        { inifrm: "bctacc", ininam: "进口代收承兑", pntmiu: "5" },
		    { inifrm: "6", ininam: "出口托收", pntmiu: "" },
        { inifrm: "botdav", ininam: "出口托收寄单", pntmiu: "6" },
        { inifrm: "botame", ininam: "出口托收修改", pntmiu: "6" },
        { inifrm: "botdcr", ininam: "出口托收拒付/不符点", pntmiu: "6" },
        { inifrm: "botset", ininam: "出口托收收汇", pntmiu: "6" },
        { inifrm: "7", ininam: "静态参数管理", pntmiu: "", },
        { inifrm: "infusr", ininam: "用户信息", pntmiu: "7" },
        { inifrm: "8",ininam: "转让证", pntmiu: "" },
        { inifrm: "lttopn", ininam: "转让证开立", pntmiu: "8" },
        { inifrm: "lttame", ininam: "转让证修改", pntmiu: "8" },
        { inifrm: "lttcan", ininam: "转让证注销", pntmiu: "8" },
      ],
      menusOrigin: [],
      menus: [],
    };
  },
  computed: {
    activeMenu() {
      return this.$route.path;
    },
  },
  mounted() {
    const arr = [];
    this.generateMenuTree(arr);
    this.menusOrigin = arr;
    this.menus = this.menusOrigin;
    this.openFlgArr = new Array(this.menus.length).fill(true)
  },
  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,
              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(index, indexPath) {
      // console.log(index, indexPath);
      this.$set(this.openFlgArr, index.split("_")[1], false)
    },
    handleClose(index, indexPath) {
      // console.log(index, indexPath);
      this.$set(this.openFlgArr, index.split("_")[1], true)
    },
    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,
.eContainer-menu-search .search-wrapper {
  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>
.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>