import _extends from "@babel/runtime/helpers/esm/extends";
import create from "../utils/create";
import { addUnit } from "../utils/format/unit";
import { route, routeProps } from "../utils/router"; // Mixins

import { ChildrenMixin } from "../mixins/relation"; // Components

import Info from "../info";
import Icon from "../icon";
export default create({
  render: function render() {
    var _obj;

    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      class: [_vm.b({
        square: _vm.parents.square
      })],
      style: _vm.style
    }, [_c('div', {
      class: [_vm.b('content', [_vm.parents.direction, {
        center: _vm.parents.center,
        square: _vm.parents.square,
        clickable: _vm.parents.clickable,
        surround: _vm.parents.border && _vm.parents.gutter
      }]), (_obj = {}, _obj['vm-hairline'] = _vm.parents.border, _obj)],
      style: _vm.contentStyle,
      attrs: {
        "role": _vm.parents.clickable ? 'button' : null,
        "tabindex": _vm.parents.clickable ? 0 : null
      },
      on: {
        "click": _vm.onClick
      }
    }, [_vm._t("default", [_vm.$slots['icon'] ? _c('div', {
      class: _vm.b('icon-wrapper')
    }, [_vm._t("icon"), _c('Info', {
      attrs: {
        "dot": _vm.dot,
        "info": _vm.badge
      }
    })], 2) : _vm._e(), _vm.icon ? _c('Icon', {
      class: _vm.b('icon'),
      attrs: {
        "name": _vm.icon,
        "dot": _vm.dot,
        "badge": _vm.badge,
        "size": _vm.parents.iconSize,
        "classPrefix": _vm.iconPrefix
      }
    }) : _vm._e(), _vm._t("text", [_vm.text ? _c('span', {
      class: _vm.b('text')
    }, [_vm._v(_vm._s(_vm.text))]) : _vm._e()])])], 2)]);
  },
  components: {
    Info: Info,
    Icon: Icon
  },
  mixins: [ChildrenMixin("vmGrid")],
  name: "grid-item",
  props: _extends({}, routeProps, {
    dot: Boolean,
    text: String,
    icon: String,
    iconPrefix: String,
    badge: [Number, String]
  }),
  computed: {
    style: function style() {
      var _this$parents = this.parents,
          square = _this$parents.square,
          gutter = _this$parents.gutter,
          columnNum = _this$parents.columnNum;
      var percent = 100 / columnNum + "%";
      var style = {
        flexBasis: percent
      };

      if (square) {
        style.paddingTop = percent;
      } else if (gutter) {
        var gutterValue = addUnit(gutter);
        style.paddingRight = gutterValue;

        if (this.index >= columnNum) {
          style.marginTop = gutterValue;
        }
      }

      return style;
    },
    contentStyle: function contentStyle() {
      var _this$parents2 = this.parents,
          square = _this$parents2.square,
          gutter = _this$parents2.gutter;

      if (square && gutter) {
        var gutterValue = addUnit(gutter);
        return {
          right: gutterValue,
          bottom: gutterValue,
          height: "auto"
        };
      }
    }
  },
  methods: {
    onClick: function onClick(event) {
      this.$emit("click", event);
      route(this.$router, this);
    }
  }
});