<template id='SideMenu'>
  <c-row>
    <c-col :span="24">
      <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"
      >
        <el-menu-item index="/business/office">
          <i class="el-icon-menu"></i>
          <span slot="title">主页</span>
        </el-menu-item>
        <el-submenu
          v-for="item in selPntMinu"
          :key="item.inifrm"
          :index="item.inifrm"
        >
          <template slot="title">
            <span>{{ item.ininam }}</span>
          </template>

          <el-menu-item
            v-for="it in selMinu(item.inifrm)"
            :key="it.inifrm"
            :index="'/business/' + it.inifrm"
          >
            <i class="el-icon-document"></i>
            <span slot="title">{{ it.ininam }}</span>
          </el-menu-item>
        </el-submenu>
        <!-- <el-submenu index="0">
          <template slot="title">
            <span>公共夹</span>
          </template>
          <el-menu-item index="/business/sptsel">
            <i class="el-icon-document"></i>
            <span slot="title">待办任务</span>
          </el-menu-item>
          <el-menu-item index="/business/trnrel">
            <i class="el-icon-document"></i>
            <span slot="title">复核任务</span>
          </el-menu-item>
        </el-submenu>

        <el-submenu index="1">
          <template slot="title">
            <span>汇款</span>
          </template>
          <el-menu-item index="/business/cptopn">
            <i class="el-icon-document"></i>
            <span slot="title">汇出汇款</span>
          </el-menu-item>
          <el-menu-item index="/business/cptadv">
            <i class="el-icon-document"></i>
            <span slot="title">汇入汇款</span>
          </el-menu-item>
        </el-submenu>

        <el-submenu index="2">
          <template slot="title">
            <span>国内证</span>
          </template>
          <el-menu-item index="/business/ditopn">
            <i class="el-icon-document"></i>
            <span slot="title">买方信用证开立</span>
          </el-menu-item>
          <el-menu-item index="/business/ditame">
            <i class="el-icon-document"></i>
            <span slot="title">信用证修改</span>
          </el-menu-item>
          <el-menu-item index="/business/ditsel">
            <i class="el-icon-document"></i>
            <span slot="title">信用证查询</span>
          </el-menu-item>
        </el-submenu> -->
      </el-menu>
    </c-col>
  </c-row>
</template>
<script>
export default {
  data: function () {
    return {
      minu: [
        { inifrm: "0", ininam: "公共夹", pntmiu: "" },
        { inifrm: "sptsel", ininam: "待办任务", pntmiu: "0" },
        { inifrm: "trnrel", ininam: "复核任务", pntmiu: "0" },
        { inifrm: "1", ininam: "汇款", pntmiu: "" },
        { 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" },
      ],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  computed: {
    selMinu() {
      return function (key) {
        return this.minu.filter((it) => {
          return it.pntmiu === key;
        });
      };
    },
    selPntMinu() {
      return this.minu.filter((it) => {
        return it.pntmiu === "" || it.pntmiu === undefined;
      });
    },
  },
};
</script>
<style scoped>
.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;
}
.el-submenu__title,
.el-menu-item,
.el-submenu .el-menu-item {
  font-size: 12px;
  height: 35px;
  line-height: 35px;
}
</style>