import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
import { defineComponent, cloneVNode } from "vue";
import { directives } from '../border-light';
import Icon from '../icon';
import { getComponent, hasElemnt, flattenChildren } from "../_util/props-util";
const Card = defineComponent({
  name: 'x-card',
  props: {
    prefixCls: {
      default: 'x-card'
    },
    title: String,
    icon: Object,
    bordered: {
      default: true
    },
    hoverable: Boolean,
    closable: Boolean,
    contentClass: [Object, String, Array],
    contentStyle: [Object, String],
    footerClass: [Object, String, Array],
    footerStyle: [Object, String],
    headerClass: [Object, String, Array],
    headerStyle: [Object, String],
    size: String
  },
  slots: ['title', 'cover', 'header', 'header-extra', 'default', 'footer'],
  emits: ['close'],
  directives,

  setup(props, {
    emit,
    slots
  }) {
    function close(e) {
      e.stopPropagation();
      e.preventDefault();
      emit('close');
    }

    return vm => {
      var _slots$cover, _slots$default, _slots$footer, _slots$headerExtra, _slots$header;

      const {
        prefixCls,
        size,
        closable,
        contentClass,
        footerClass,
        headerClass,
        icon
      } = props;
      const cls = [prefixCls, {
        [`${prefixCls}-bordered`]: props.bordered,
        [`${prefixCls}-hoverable`]: props.hoverable,
        [`${prefixCls}-${size}`]: size
      }];
      const coverNode = (_slots$cover = slots.cover) === null || _slots$cover === void 0 ? void 0 : _slots$cover.call(slots);
      const titleNode = getComponent(vm, 'title');
      const closeNode = closable ? _createVNode(Icon, {
        "class": `${prefixCls}_close`,
        "type": "cross",
        "onClick": close
      }, null) : undefined;
      const contentNode = (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
      const footerNode = (_slots$footer = slots.footer) === null || _slots$footer === void 0 ? void 0 : _slots$footer.call(slots);
      const iconNode = flattenChildren(getComponent(vm, 'icon'))[0];
      const headerExtraNode = (_slots$headerExtra = slots['header-extra']) === null || _slots$headerExtra === void 0 ? void 0 : _slots$headerExtra.call(slots);
      const headerNode = slots.header ? _createVNode("div", {
        "class": [`${prefixCls}_header`, headerClass]
      }, [(_slots$header = slots.header) === null || _slots$header === void 0 ? void 0 : _slots$header.call(slots)]) : _createVNode("div", {
        "class": `${prefixCls}_header`,
        "style": props.headerStyle
      }, [hasElemnt(iconNode) && cloneVNode(iconNode, {
        class: `${prefixCls}_icon`
      }), _createVNode("div", {
        "class": `${prefixCls}_title`
      }, [titleNode]), headerExtraNode && _createVNode("div", {
        "class": `${prefixCls}_header_extra`
      }, [headerExtraNode]), closeNode]);
      return _withDirectives(_createVNode("div", {
        "class": cls
      }, [hasElemnt(coverNode) && _createVNode("div", {
        "class": `${prefixCls}_cover`
      }, [coverNode]), headerNode, hasElemnt(contentNode) && _createVNode("div", {
        "class": [`${prefixCls}_content`, contentClass],
        "style": props.contentStyle
      }, [contentNode]), hasElemnt(footerNode) && _createVNode("div", {
        "class": [`${prefixCls}_footer`, footerClass],
        "style": props.footerStyle
      }, [footerNode])]), [[_resolveDirective("border-light")]]);
    };
  }

});

Card.install = app => {
  app.component(Card.name, Card);
};

export default Card;