<template>
  <div>
    <div v-if="mode === 'DESIGN'">
      <draggable
        class="l-drag-from"
        :list="items"
        :options="{ animation: 300, chosenClass: 'choose', sort: true }"
        group="form"
        @start="onDragStart"
        @end="onDragEnd"
      >
        <div
          v-for="(element, index) in items"
          :key="element.id"
          class="l-form-item"
          :style="getSelectedClass(element)"
          @click.stop="selectItem(element)"
        >
          <div class="l-form-header">
            <p>
              <span v-if="element.props && element.props.required">*</span>
              {{ element.title }}
            </p>
            <div class="l-option">
              <i class="x-icon-close x-iconfont" @click="delItem(index)"></i>
            </div>
            <FormDesignRender :config="element" />
          </div>
        </div>
      </draggable>
      <div style="color: #c0bebe; text-align: center; width: 90%; padding: 5px">拖拽控件到布局容器内部</div>
    </div>

    <div v-else>
      <a-row v-for="(rows, rsi) in __items" :key="rsi + '_rows'" :gutter="20">
        <a-col
          v-for="(item, ri) in rows"
          :key="ri + '_row'"
          :span="24 / rows.length"
        >
          <a-form-model-item
            v-if="item.name !== 'SpanLayout' && item.name !== 'Description'"
            :key="item.id"
            :prop="item.id"
            :label="item.title"
          >
            <FormDesignRender
              v-model="value[item.id]"
              :mode="mode"
              :config="item"
            />
          </a-form-model-item>
          <FormDesignRender
            v-else
            v-model="value"
            :mode="mode"
            :config="item"
          />
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import FormDesignRender from '@/views/workFlow/designer/common/form/FormDesignRender.vue';

export default {
  name: 'FormDesigner',
  components: {
    draggable,
    FormDesignRender,
  },
  props: {
    mode: {
      type: String,
      default: 'DESIGN',
    },
    value: {
      type: Object,
      default: () => ({}),
    },
    items: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      data: {
        drag: false,
      },
    };
  },
  computed: {
    __items() {
      const result = [];
      for (let i = 0; i < this.items.length; i++) {
        if (i > 0 && i % 2 > 0) {
          result.push([this.items[i - 1], this.items[i]]);
        }
      }
      if (result.length * 2 < this.items.length) {
        result.push([this.items[this.items.length - 1]]);
      }
      return result;
    },
    selectFormItem: {
      get() {
        return this.$store.state.workflow.selectFormItem;
      },
      set(val) {
        this.$store.commit('workflow/updateSelectFormItem', val);
      },
    },
  },
  methods: {
    onDragStart() {
      this.data.drag = true;
      this.selectFormItem = null;
    },
    onDragEnd() {
      this.data.drag = false;
    },
    selectItem(item) {
      this.selectFormItem = item;
    },
    getSelectedClass(item) {
      return this.selectFormItem && this.selectFormItem.id === item.id
        ? 'border-left: 4px solid #f56c6c'
        : '';
    },
    delItem(index) {
      this.$confirm({
        title: '警告',
        content: '删除组件将会连带删除包含该组件的条件以及相关设置，是否继续?',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          this.removeCondition(this.items[index]);
          this.items.splice(index, 1);
          this.$message.success('成功');
        },
      });
    },
    removeCondition(formItem) {
      const nodeMap = this.$store.state.workflow.nodeMap;

      if (formItem.name === 'SpanLayout') {
        formItem.props.items.forEach((item) => {
          this.removeCondition(item);
        });
        formItem.props.items.length = 0;
      } else {
        nodeMap.forEach((node) => {
          if (node.type === 4) {
            node.conditionNodes.forEach((conditionNode) => {
              conditionNode.conditionList.forEach((conditionGroup) => {
                const idx = conditionGroup.findIndex(
                  (condition) => condition.field === formItem.id
                );
                if (idx !== -1) {
                  conditionGroup.splice(idx, 1);
                }
              });
            });
          }
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
.choose {
  border: 1px dashed @primary-color !important;
}

.l-drag-from {
  min-height: 50px;
  background-color: rgb(245, 246, 246);

  .l-form-item,
  li {
    cursor: grab;
    background: #ffffff;
    padding: 10px;
    border: 1px solid #ebecee;
    margin: 5px 0;
  }
}

.l-form-header {
  font-size: small;
  color: #818181;
  text-align: left;
  position: relative;
  background-color: #fff;

  p {
    position: relative;
    margin: 0 0 10px 0;

    span {
      position: absolute;
      left: -8px;
      top: 3px;
      color: rgb(217, 0, 19);
    }
  }

  .l-option {
    position: absolute;
    top: -10px;
    right: -10px;

    i {
      font-size: large;
      cursor: pointer;
      color: #8c8c8c;
      padding: 5px;

      &:hover {
        color: @primary-color;
      }
    }
  }
}
</style>
