import "./index.css";
import _Array$from from "@babel/runtime-corejs2/core-js/array/from";
import _Promise from "@babel/runtime-corejs2/core-js/promise";

/* script */
//
//
//
//
//
//
//
//
import { componentMixin, createComponentName } from '../_utils/component.js';
import Waterfail from './Waterfall.js';
import Item from './Item';
const __vue_script__ = {
  name: createComponentName('waterfall'),
  Item,

  provide() {
    return {
      waterfail: this
    };
  },

  mixins: [componentMixin],
  props: {
    transition: {
      type: String,
      default: 'waterfall-fade'
    },
    grid: {
      type: Number,
      default: 1
    },
    getKey: {
      type: Function,
      default: undefined
    },
    margin: {
      type: Number,
      default: 10
    }
  },
  watch: {
    margin() {
      this.$nextTick(() => {
        this.update();
      });
    }

  },

  mounted() {
    window.addEventListener('resize', this.update);
  },

  methods: {
    resize() {
      this.update();
    },

    async update() {
      if (this.$update) {
        await this.$update;
        return;
      }

      ;
      this.$update = new _Promise(resolve => {
        setTimeout(() => {
          this.waterfail = new Waterfail({
            width: this.$el.clientWidth,
            margin: this.margin,
            grid: this.grid
          });
          this.lastClientWidth = this.$el.clientWidth;

          const children = _Array$from(this.$el.children).filter(n => n.classList.value.indexOf('leave') === -1);

          let maxHeight = 0;

          for (let index = 0; index < children.length; index++) {
            const el = children[index];
            const {
              left,
              top
            } = this.waterfail.getPostion(el.clientWidth, el.clientHeight);
            el.style.left = left + 'px';
            el.style.top = top + 'px';
            let height = top + el.clientHeight;

            if (height > maxHeight) {
              maxHeight = height;
            }
          }

          this.$el.style.height = maxHeight + 'px';
          resolve();
          this.$update = undefined;
        }, 200);
      });
      await this.$update;
    }

  }
};
/* template */

var __vue_render__ = function () {
  var _vm = this;

  var _h = _vm.$createElement;

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

  return _c("div", {
    class: _vm.bem()
  }, [_vm._t("default")], 2);
};

var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */

const __vue_inject_styles__ = undefined;
/* scoped */

const __vue_scope_id__ = undefined;
/* module identifier */

const __vue_module_identifier__ = undefined;
/* functional template */

const __vue_is_functional_template__ = false;
/* component normalizer */

import __vue_normalize__ from '../_utils/vue-normalize-component.js';
/* style inject */

/* style inject SSR */

export default __vue_normalize__({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);