<script>
export default {
  name: "MenuItem",
  functional: true,
  props: {
    icon: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: ""
    }
  },
  render(h, context) {
    const { icon, title } = context.props;
    const vnodes = [];

    if (icon) {
      if (icon.includes("el-icon")) {
        vnodes.push(<i class={[icon, "sub-el-icon"]} />);
        // icon_menu_statistical
      } else {
        vnodes.push(
          // <div
          //   class="menuIcon"
          //   style="width:53px;height:53px;background:#9cbeff;border-radius:22px;display:flex;align-items: center;justify-content: center;"
          // >
          //   <svg-icon icon-class={icon} />
          // </div>
          <i class={["icon_menu_" + icon, "icon_menu"]}></i>
        );
        // vnodes.push(<svg-icon icon-class={icon}/>)
      }
    }

    if (title) {
      vnodes.push(<span slot="title">{title}</span>);
    }
    return vnodes;
  }
};
</script>

<style scoped>
.icon_menu {
  display: inline-block;
  width: 53px;
  height: 53px;
  /* background: url('./img/icon_home.png')no-repeat; */
  background-size: cover !important;
}
.icon_menu_statistical {
  background: url("./img/icon_statistical.png") no-repeat;
}
.icon_menu_convenience {
  background: url("./img/icon_convenience.png") no-repeat;
}
.icon_menu_workBook {
  background: url("./img/icon_workBook.png") no-repeat;
}
.icon_menu_dxdb {
  background: url("./img/icon_dxdb.png") no-repeat;
}
.icon_menu_jmInfo {
  background: url("./img/icon_jmInfo.png") no-repeat;
}
.icon_menu_townRanking {
  background: url("./img/icon_twonRanking.png") no-repeat;
}
.sub-el-icon {
  color: currentColor;
  width: 1em;
  height: 1em;
  /* width: 53px; */
  /* height: 53px; */
}
#app .sidebar-container .svg-icon {
  margin-right: 0;
  width: 20px;
  height: 20px;
}
/* .el-menu-item {
  height: 153px;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
} */
</style>
