<script>
export default {
  name: 'MenuItem',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    isNest: {
      type: Boolean,
      default: false
    },
    meta: {
      type: Object,
      default: () => {}
    },
    title: {
      type: String,
      default: ''
    }
  },
  render(h, context) {
    const { icon, title, isNest, meta } = context.props
    const vnodes = []
    if (icon) {
      let imgPath = require(`@/assets/images/v2/${icon}.png`)
      let imgPath2 = require(`@/assets/images/v2/icon-nest.png`)
      if (isNest) {
        vnodes.push(<div class="view-active-nest">
          <img src={imgPath2} class={"menu-icon-nest"}/><span slot='title'>{(title)}</span>
        </div>)
      } else {
        vnodes.push(<img src={imgPath} class={"menu-icon"}/>)
        if (title) {
          vnodes.push(<span slot='title'>{(title)}</span>)
        }
      }
    } else { // 末子节点
      let imgPath2 = require(`@/assets/images/v2/icon-nest.png`)
      if (meta && meta.menuLevel === 3) { // 第三层节点
        vnodes.push(<div class="view-active-nest2">
          <div class={"menu-icon-dot"}></div>
          <span slot='title'>{(title)}</span>
        </div>)
      } else {
        vnodes.push(<div class="view-active-nest1">
          <img src={imgPath2} class={"menu-icon-nest"}/><span slot='title'>{(title)}</span>
        </div>)
      }
    }
    return vnodes
  }
}
</script>

<style scoped>
.sub-el-icon {
  color: currentColor;
  width: 1em;
  height: 1em;
}
.menu-icon {
  width: 28px;
  height: 28px;
  margin-right: 2px;
}
.view-active-nest {
  height: 26px;
  font-size: 13px;
  position: relative;
  top: 7px;
  display: flex;
  align-items: center;
  color: #1B4963!important;
  /* background: linear-gradient(0deg, rgba(18, 84, 166, 0.98), rgba(33, 114, 203, 0.98));
  box-shadow: 0px 1px 0px 0px #0C2A45, 0px 2px 0px 0px #225099, 0px -2px 3px 0px #7CACF1;
  border-radius: 4px; */
}
.view-active-nest1 {
  height: 26px;
  font-size: 13px;
  position: relative;
  top: 7px;
  display: flex;
  align-items: center;
  color: #1B4963!important;
}
.view-active-nest2 {
  height: 26px;
  font-size: 12px;
  position: relative;
  top: 7px;
  display: flex;
  align-items: center;
}
.menu-icon-nest {
  width: 11px;
  height: 14px;
  margin-right: 8px;
  margin-left: 10px;
}
.menu-icon-nest1 {
  width: 11px;
  height: 14px;
  margin-right: 8px;
  margin-left: 10px;
}
.menu-icon-dot {
  width: 11px;
  height: 11px;
  background: url('../../../assets/images/v2/dot.png') no-repeat;
  background-size: 100% 100%;
  margin-right: 5px;
  margin-left: 5px;
  /* margin-left: 10px; */
}
</style>
