<script>
import draggable from 'vuedraggable';
import render from '@/utils/generator/render';

const components = {
  itemBtns(h, element, index, parent) {
    const { copyItem, deleteItem } = this.$listeners;
    return [
      <span
        class="drawing-item-copy"
        title="复制"
        onClick={(event) => {
          copyItem(element, parent);
          event.stopPropagation();
        }}
      >
        <i class="el-icon-copy-document" />
      </span>,
      <span
        class="drawing-item-delete"
        title="删除"
        onClick={(event) => {
          deleteItem(index, parent);
          event.stopPropagation();
        }}
      >
        <i class="el-icon-delete" />
      </span>
    ];
  }
};
const layouts = {
  colFormItem(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    let className =
      this.activeId === element.formId
        ? 'drawing-item active-from-item'
        : 'drawing-item';
    if (this.formConf.unFocusedComponentBorder) { className += ' unfocus-bordered'; }
    return (
      <el-col
        span={element.span}
        class={className}
        nativeOnClick={(event) => {
          activeItem(element);
          event.stopPropagation();
        }}
      >
        <el-form-item
          label-width={element.labelWidth ? `${element.labelWidth}px` : null}
          label={element.label}
          required={element.required}
        >
          <render
            key={element.renderKey}
            conf={element}
            onInput={(event) => {
              this.$set(element, 'defaultValue', event);
            }}
          />
        </el-form-item>
        {components.itemBtns.apply(this, arguments)}
      </el-col>
    );
  },
  rowFormItem(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    const className =
      this.activeId === element.formId
        ? 'drawing-row-item active-from-item'
        : 'drawing-row-item';
    let child = renderChildren.apply(this, arguments);
    if (element.type === 'flex') {
      child = (
        <el-row
          type={element.type}
          justify={element.justify}
          align={element.align}
        >
          {child}
        </el-row>
      );
    }
    return (
      <el-col span={element.span}>
        <el-row
          gutter={element.gutter}
          class={className}
          nativeOnClick={(event) => {
            activeItem(element);
            event.stopPropagation();
          }}
        >
          <span class="component-name">{element.componentName}</span>
          <draggable
            list={element.children}
            animation={340}
            group="componentsGroup"
            class="drag-wrapper"
          >
            {child}
          </draggable>
          {components.itemBtns.apply(this, arguments)}
        </el-row>
      </el-col>
    );
  }
};

function renderChildren(h, element, index, parent) {
  if (!Array.isArray(element.children)) return null;
  return element.children.map((el, i) => {
    const layout = layouts[el.layout];
    if (layout) {
      return layout.call(this, h, el, i, element.children);
    }
    return layoutIsNotFound();
  });
}

function layoutIsNotFound() {
  throw new Error(`没有与${this.element.layout}匹配的layout`);
}

export default {
  components: {
    render,
    draggable
  },
  props: ['element', 'index', 'drawingList', 'activeId', 'formConf'],
  render(h) {
    const layout = layouts[this.element.layout];

    if (layout) {
      return layout.call(this, h, this.element, this.index, this.drawingList);
    }
    return layoutIsNotFound();
  }
};
</script>
