import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
import { defineComponent, cloneVNode } from "vue";
import { render } from '../_util/props-util';
import { useMenu } from "./utils";
import Icon from "../icon";
export default defineComponent({
  name: 'x-menu-item-content',
  props: {
    node: Object,
    label: [String, Object],
    value: [String, Number],
    icon: Object,
    disabled: Boolean,
    showArrow: Boolean,
    active: Boolean,
    collapsed: Boolean
  },

  setup(props) {
    const {
      indentRef
    } = useMenu(props);
    return () => {
      const indent = indentRef.value;
      const prefixCls = 'x-menu-item-content';
      const cls = {
        [prefixCls]: true,
        [`${prefixCls}-active`]: props.active,
        [`${prefixCls}-disabled`]: props.disabled,
        [`${prefixCls}-collapsed`]: props.collapsed
      };
      const iconNode = render(props.icon);
      const directVal = {
        size: 1.2,
        style: {
          opacity: .8
        }
      };
      return _withDirectives(_createVNode("div", {
        "class": cls
      }, [iconNode && cloneVNode(iconNode, {
        class: `${prefixCls}_icon`,
        style: `marginLeft:-${indent}px`,
        role: 'none'
      }), _createVNode("span", {
        "class": `${prefixCls}_label`
      }, [props.label]), props.showArrow && _createVNode(Icon, {
        "class": `${prefixCls}_arrow`,
        "type": "arrow-down"
      }, null)]), [[_resolveDirective("borderLight"), directVal]]);
    };
  }

});