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

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

export default {
  name,
  props: {
    /**
     * 所占列数
     */
    span: {
      type: Number,
      default: 1
    },
    /**
     * 偏移
     * @ignore
     */
    offset: {
      type: Number,
      default: 0
    },
    /**
     * 小于768px屏幕时的列配置，数值类型默认指定span
     */
    xs: [Number, Object],
    /**
     * 768~992屏幕时的列配置，数值类型默认指定span
     */
    sm: [Number, Object],
    /**
     * 992~1200屏幕时的列配置，数值类型默认指定span
     */
    md: [Number, Object],
    /**
     * 1200~1920屏幕时的列配置，数值类型默认指定span
     */
    lg: [Number, Object],
    /**
     * 大于1920屏幕时的列配置，数值类型默认指定span
     */
    xl: [Number, Object],
    /**
     * @ignore
     */
    _gutter: Number, // eslint-disable-line
    /**
     * @ignore
     */
    _size: String, // eslint-disable-line
    /**
     * @ignore
     */
    _colCount: Number // eslint-disable-line
  },
  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>
