
<script>
  import Col from './col';
  const name = 'hive-row';

  function calSize(width) {
    let size = 'xs';
    if (width < 768) {
      size = 'xs';
    } else if (width >= 768 && width < 992) {
      size = 'sm';
    } else if (width >= 992 && width < 1200) {
      size = 'md';
    } else if (width >= 1200 && width < 1920) {
      size = 'lg';
    } else {
      size = 'xl';
    }
    return size;
  }

  export default {
    name,
    props: {
      /**
       * 列之间的间隔
       */
      gutter: {
        type: Number,
        default: 10,
      },
      /**
       * 所含列数
       */
      colCount: {
        type: Number,
        default: 12,
      },
      xs: [Number, Object],
      sm: [Number, Object],
      md: [Number, Object],
      lg: [Number, Object],
      xl: [Number, Object],
    },
    data() {
      return {
        size: calSize(window.innerWidth),
      };
    },
    computed: {
      _class() {
        return [
          name,
        ];
      },
      _style() {
        return {
          margin: `0 ${-this.realGutter / 2}px`,
        };
      },
    },
    mounted() {
      window.addEventListener('resize', this.updateSize);
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.updateSize);
    },
    methods: {
      updateSize() {
        this.size = calSize(window.innerWidth);
      },
      getConfig(type) {
        if (this.size && this[this.size]) {
          const config = this[this.size];
          if (typeof config === 'number' && type === 'colCount') {
            return config;
          } else {
            return config[type] || this[type];
          }
        }
        return this[type];
      },
    },
    render: function(createElement) {
      return createElement(
        'div',
        {
          style: this._style,
          class: this._class,
        },
        this.$slots.default.map(vnode => {
          if (vnode.tag && vnode.componentOptions.tag === 'hive-col') {
            return createElement(
              Col,
              {
                ...vnode.data,
                props: Object.assign({
                  _gutter: this.getConfig('gutter'),
                  _size: this.size,
                  _colCount: this.getConfig('colCount'),
                }, vnode.componentOptions.propsData),
              },
              vnode.componentOptions.children
            );
          }
          return vnode;
        })
      );
    },
  };
</script>
