<template>
  <a-col v-if="isCol" v-bind="colAttrs">
    <slot />
  </a-col>
  <span v-else>
    <slot />
  </span>
</template>
<script lang="ts">
import lodash from 'lodash';
import { Component, Inject, Vue } from 'vue-property-decorator';
@Component({ components: {} })
export default class extends Vue {
  @Inject({ default: { colItem: false, colSpan: 24 } }) readonly colProps;
  get colAttrs() {
    const attrs = lodash.assign(
      {
        span: lodash.get(this.colProps, 'colSpan'),
      },
      this.$attrs,
    );
    return attrs;
  }
  get isCol() {
    const colProps = lodash.pick(this.$attrs, ['span', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl']);
    return !lodash.isEmpty(colProps) || this.colProps.colItem;
  }
  // get parentElement(): HTMLDivElement {
  //   return this.$el.parentElement;
  // }
  // get containerWidth() {
  //   return this.parentElement.clientWidth;
  // }
  mounted() {}
}
</script>
<style lang="less"></style>
