<template>
  <div
    v-on="$listeners"
    v-bind="$attrs"
    :class="_class"
    :style="_style">
    <slot></slot>
  </div>
</template>

<script>
  const name = 'hive-col';

  export default {
    name,
    props: {
      /**
       * 所占列数
       */
      span: {
        type: Number,
        default: 1,
      },
      /**
       * 偏移
       * @ignore
       */
      offset: {
        type: Number,
        default: 0,
      },
      xs: [Number, Object],
      sm: [Number, Object],
      md: [Number, Object],
      lg: [Number, Object],
      xl: [Number, Object],
      /**
       * @ignore
       */
      _gutter: Number,
      /**
       * @ignore
       */
      _size: String,
      /**
       * @ignore
       */
      _colCount: Number,
    },
    computed: {
      _class() {
        return [
          name,
        ];
      },
      _style() {
        return {
          width: (this._span / this._colCount).toFixed(6) * 100 + '%',
          marginLeft: (this._offset / this._colCount).toFixed(6) * 100 + '%',
          padding: `0 ${this._gutter / 2}px`,
        };
      },
      _span() {
        if (this._size && this[this._size]) {
          const config = this[this._size];
          if (typeof config === 'number') {
            return config;
          } else {
            return config.span || this.span;
          }
        }
        return this.span;
      },
      _offset() {
        if (this._size && this[this._size]) {
          const config = this[this._size];
          if (typeof config === 'object') {
            return config.offset || this.offset;
          }
        }
        return this.offset;
      },
    },
  };
</script>
