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

    if (icon != "#") {
      vnodes.push(<svg-icon icon-class={icon} />);
    }else {
      vnodes.push(<span style="margin-left:15px"></span>);
    }
    
    if (title) {
      if (title.length > 5) {
        vnodes.push(
          <span slot="title" title={title}>
            {title}
          </span>
        );
      } else {
        let inspectNum = store.getters.inspectNum; //评估考察
        let projectLXNum = store.getters.projectLXNum; //项目立项
        let dueNum = store.getters.dueNum; //尽职背调
        let projectTJNum = store.getters.projectTJNum; //项目投决
        //我的任务下的菜单
        let investOppNum = store.getters.investOppNum; //项目机会
        let approvalNum = store.getters.approvalNum; //项目立项
        let investigateNum = store.getters.investigateNum; //项目背调
        let decisionNum = store.getters.decisionNum; //项目投决
        let terminationNum = store.getters.terminationNum; //项目终止
        vnodes.push(
          <span slot="title">
            {title}
            {icon === "#" && title === "评估考察" && inspectNum ? (
              <span class="hint">{inspectNum}</span>
            ) : (
              ""
            )}
            {icon === "#" && title === "项目立项" && projectLXNum ? (
              <span class="hint">{projectLXNum}</span>
            ) : (
              ""
            )}
            {icon === "#" && title === "尽职背调" && dueNum ? (
              <span class="hint">{dueNum}</span>
            ) : (
              ""
            )}
            {icon === "#" && title === "项目投决" && projectTJNum ? (
              <span class="hint">{projectTJNum}</span>
            ) : (
              ""
            )}
            {icon === "#" && path.includes("/myTask") && title === "项目机会" && investOppNum ? (
              <span class="hint">{investOppNum}</span>
            ) : (
              ""
            )}
            {icon === "#" && path.includes("/myTask") && title === "项目立项" && approvalNum ? (
              <span class="hint">{approvalNum}</span>
            ) : (
              ""
            )}
            {icon === "#" && path.includes("/myTask") && title === "项目背调" && investigateNum ? (
              <span class="hint">{investigateNum}</span>
            ) : (
              ""
            )}
            {icon === "#"&& path.includes("/myTask")  && title === "项目投决" && decisionNum ? (
              <span class="hint">{decisionNum}</span>
            ) : (
              ""
            )}
            {icon === "#" && path.includes("/myTask") && title === "项目终止" && terminationNum ? (
              <span class="hint">{terminationNum}</span>
            ) : (
              ""
            )}
          </span>
        );
      }
    }
    return vnodes;
  },
};
</script>
<style lang="scss" scoped>
.hint {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f8ac59;
  color: #fff;
  display: inline-block;
  line-height: 16px;
  text-align: center;
  margin-left: 5px;
  font-size: 12px;
  font-weight: bold;
  margin-top: -1px;
}
</style>
