<template>
  <div class='widget-form-item' @click.capture="handleSelectWidget(index)">
    <div
      class="drag-widget"
      title="拖拽"
      v-if="selectWidget.key == element.key"
    >
      <i class="icon-drag"></i>
    </div>
    <div class="widget-view-action" v-if="selectWidget.key == element.key">
      <i
        class="icon-trash"
        title="删除"
        @click.stop="handleWidgetDelete(index)"
      ></i>
    </div>
    <div class='layout-container' :class="{ active: selectWidget.key == element.key }">
      <div
        class='layout-main'
        v-for='(col, colIndex) in element.columns'
        :key="colIndex"
        :style="{
          width: element.options.width || '100%',
          padding: element.options.padding,
          margin: element.options.margin,
          'background-color': element.options.backgroundColor,
          'border-radius': element.options.radius,
          'box-sizing': 'border-box'
        }">
        <draggable
          v-model="col.list"
          :no-transition-on-drag="true"
          v-bind="{
            group: 'form',
            ghostClass: 'ghost',
            animation: 200,
            handle: '.drag-widget'
          }"
          @end="handleMoveEnd"
          @start="handleMoveStart"
          @add="handleWidgetColAdd($event, element, colIndex)">
          <transition-group name="fade" tag="div" class="widget-col-list">
            <template v-for="(el, i) in col.list.filter(c => c.key)">
              <template v-if="el.ctrlType == 'div'">
                <widget-div-layout
                  :key="el.key"
                  :data.sync="col"
                  :select.sync="selectWidget"
                  :selectWidgetList.sync="selectWidgetList"
                  :index="i"
                  :element="el"
                />
              </template>
              <template v-else-if="el.ctrlType == 'grid'">
                <widget-grid-layout
                  :key="el.key"
                  :data.sync="col"
                  :selectWidgetList.sync="selectWidgetList"
                  :select.sync="selectWidget"
                  :index="i"
                  :element="el"
                />
              </template>
              <template v-else-if="el.ctrlType == 'tab'">
                <widget-table-layout
                  :key="el.key"
                  :data.sync="col"
                  :select.sync="selectWidget"
                  :selectWidgetList.sync="selectWidgetList"
                  :index="i"
                  :element="el"
                />
              </template>
              <template v-else-if="el.ctrlType == 'accordion'">
                <widget-collapse-layout
                  :key="el.key"
                  :data.sync="col"
                  :select.sync="selectWidget"
                  :selectWidgetList.sync="selectWidgetList"
                  :index="i"
                  :element="el"
                />
              </template>
              <template v-else-if="el.ctrlType == 'table'">
                <widget-main-table-layout
                  :key="el.key"
                  :data.sync="col"
                  :select.sync="selectWidget"
                  :selectWidgetList.sync="selectWidgetList"
                  :index="i"
                  :element.sync="el"
                />
              </template>
              <template v-else-if="el.ctrlType == 'subtable'">
                <widget-subtable-layout
                  :key="el.key"
                  :data.sync="col"
                  :selectWidgetList.sync="selectWidgetList"
                  :select.sync="selectWidget"
                  :index="i"
                  :element.sync="el"
                />
              </template>
              <template v-else-if="el.ctrlType == 'subDiv'">
                <widget-subdiv-layout
                  :key="el.key"
                  :data.sync="col"
                  :selectWidgetList.sync="selectWidgetList"
                  :select.sync="selectWidget"
                  :index="i"
                  :element.sync="el"
                />
              </template>
              <template v-else-if="el.ctrlType == 'dataView'">
                <widget-data-view-layout

                  :key="el.key"
                  :data.sync="col"
                  :selectWidgetList.sync="selectWidgetList"
                  :select.sync="selectWidget"
                  :index="i"
                  :element.sync="el"
                />
              </template>
              <template v-else-if="el.ctrlType == 'hottable'">
                <widget-hottable-layout
                  :key="el.key"
                  :data.sync="col"
                  :selectWidgetList.sync="selectWidgetList"
                  :select.sync="selectWidget"
                  :index="i"
                  :element.sync="el"
                />
              </template>
              <template v-else>
                <widget-form-item
                  :key="el.key"
                  :element="el"
                  :selectWidgetList.sync="selectWidgetList"
                  :select.sync="selectWidget"
                  :index="i"
                  :data.sync="col"
                />
              </template>
            </template>
          </transition-group>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import deepmerge from 'deepmerge'
import WidgetTableLayout from '@/components/form/WidgetTableLayout.vue' // tab布局
import WidgetCollapseLayout from '@/components/form/WidgetCollapseLayout.vue' // 折叠面板
import WidgetGridLayout from "@/components/form/WidgetGridLayout.vue" // 栅格布局
import WidgetMainTableLayout from "@/components/form/WidgetMainTableLayout.vue" // table表格布局
import WidgetSubtableLayout from "@/components/form/WidgetSubtableLayout.vue" // 子表布局
import WidgetSubdivLayout from "@/components/form/WidgetSubDivLayout.vue" // div子表布局
import WidgetDataViewLayout from "@/components/form/WidgetDataViewLayout.vue" // 数据视图布局
import WidgetHottableLayout from "@/components/form/WidgetHottableLayout.vue" // hotTable布局
import WidgetFormItem from "@/components/form/WidgetFormItem.vue" // 其他布局
import controlsApi from "@/api/controlsConfig.js";

export default {
  name: 'WidgetDivLayout',
  components: {
    Draggable,
    WidgetGridLayout,
    WidgetTableLayout,
    WidgetCollapseLayout,
    WidgetSubdivLayout,
    WidgetSubtableLayout,
    WidgetDataViewLayout,
    WidgetHottableLayout,
    WidgetMainTableLayout,
    WidgetFormItem,
  },
  props: ["element", "select", "index", "data","selectWidgetList"],
  data() {
    return {
      selectWidget: this.select,
      activeName: 0
    }
  },
  watch: {
    select(val) {
      this.selectWidget = val;
    },
    selectWidget: {
      handler(val) {
        this.$emit("update:select", val);
      },
      deep: true
    }
  },
  methods: {
    handleSelectWidget(index) {
      this.selectWidget = this.data.list[index];
    },
    handleMoveStart: function(evt) {
      console.log(evt)
      // 新增控件时  将控件属性切断联系
      evt.item._underlying_vm_ = deepmerge({}, evt.item._underlying_vm_, {
        clone: true
      });
      evt.item._underlying_vm_.key = Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
    },
    handleMoveEnd({ newIndex, oldIndex }) {
      console.log("index", newIndex, oldIndex);
    },
    handleWidgetColAdd($event, row, colIndex) {
      const newIndex = $event.newIndex;
      const oldIndex = $event.oldIndex;
      const item = $event.item;
      // 防止布局元素的嵌套拖拽
      if (item.className.indexOf("data-grid") >= 0 || item.innerText=="分页布局") {
        // 如果是列表中拖拽的元素需要还原到原来位置
        item.tagName === "DIV" &&
        this.data.list.splice(
          oldIndex,
          0,
          row.columns[colIndex].list[newIndex]
        );
        row.columns[colIndex].list.splice(newIndex, 1);
        if(item.innerText=="分页布局"){
          this.$message.warning("div布局中不允许再拖入分页布局");
        }
        return false;
      }
      controlsApi.handleLayoutComponents(this, row, row.columns[colIndex].list, newIndex);
      this.selectWidget = row.columns[colIndex].list[newIndex];
    },
    handleWidgetDelete(index) {
      if (this.data.list.length - 1 === index) {
        if (index === 0) {
          this.selectWidget = { options: { validateType: "" } };
        } else {
          this.selectWidget = this.data.list[index - 1];
        }
      } else {
        this.selectWidget = this.data.list[index + 1];
      }

      this.$nextTick(() => {
        this.data.list.splice(index, 1);
      });
    }
  }
}
</script>

<style lang='scss' scoped>
@import "@/assets/css/form-editor.scss";

.layout-container{
  padding: 15px 5px;

  &.active{
    outline: 1px solid #e6a23c;
  }
}

.layout-main{
  min-height: 50px;
}

.widget-col-list {
  min-height: 50px;
  border: 1px solid #ededed;
}

.widget-col {
  padding: 15px 5px 0;
}

.widget-col.active {
  outline: 1px solid #e6a23c;
}

.el-col {
  min-height: 50px;
}


div.widget-view-action {
  border-color: #e6a23c;
  border-radius: 15px;
}

div.widget-view-action i.icon-trash {
  margin: 0 10px;
}

div.drag-widget {
  border-color: #e6a23c;
}

div.drag-widget i.icon-drag {
  color: #e6a23c;
}
</style>
