<template>
  <div
    :class="[
      'ng-layout-controller drag-box',
      record.options.customClass ? record.options.customClass : '',
    ]"
    :style="record.options.customStyle"
  >
    <!-- <div class="batch-label">弹性容器</div>  -->
    <template v-if="isDragPanel">
      <el-row
        :gutter="20"
        class="controller-row"
        :class="{
          'controller-bordered': record.options && record.options.bordered,
          dragpanel: isDragPanel,
        }"
      >
        <draggable
          v-model="record.list"
          tag="div"
          class="draggable-box"
          v-bind="{
            group: 'form-draggable',
            ghostClass: 'moving',
            animation: 180,
            handle: '.drag-move',
          }"
          @add="dragEnd($event, record.list)"
        >
          <ng-form-node
            v-for="item in record.list"
            :key="item.key"
            class="drag-move"
            :select-item="selectItem"
            :record="item"
            @handleSelectItem="handleSelectItem"
            @handleCopy="handleCopy(item)"
            @handleDetele="handleDetele(item)"
          />
        </draggable>
      </el-row>
    </template>
    <div v-else>
      <div
        v-for="(mdata, idx) in models[record.model]"
        :key="idx"
        :class="[
          'table-layout',
          'form-table',
          record.options.customClass ? record.options.customClass : '',
          record.options.bright ? 'bright' : '',
          record.options.small ? 'small' : '',
          record.options.bordered ? 'controller-bordered' : '',
        ]"
        :style="record.options.customStyle"
        @contextmenu.prevent="handleShowRightMenu($event, idx)"
      >
        <el-row
          :gutter="20"
          class="controller-row"
          :class="{
            'controller-bordered': record.options && record.options.bordered,
          }"
        >
          <template v-for="(item, index) in record.list">
            <ng-form-node
              :key="index"
              ref="nestedComponents"
              :is-drag="false"
              :disabled="disabled"
              :preview="preview"
              :models.sync="mdata"
              :record="item"
              :prop-prepend="propPrepend + record.model + '.' + idx + '.'"
            />
          </template>
        </el-row>
      </div>
      <!-- 右键里的删除和复制 下方的新增 -->
      <el-button
        v-if="!preview && record.options.add"
        type="dashed"
        size="mini"
        :disabled="disabled"
        @click="addControlData"
      >
        <i class="el-icon-circle-plus-outline" />{{ t("ngform.item.add") }}
      </el-button>
      <div
        v-show="!preview && showRightMenu"
        id="rightMenu"
        :style="{ top: menuTop + 'px', left: menuLeft + 'px' }"
        class="right-menu"
      >
        <ul>
          <li v-if="record.options.copy" @click="handleCopyData">
            <i class="el-icon-document" />{{ t("ngform.item.copy") }}
          </li>
          <hr v-if="record.options.copy && record.options.remove">
          <li v-if="record.options.remove" @click="handleRemoveData">
            <i class="el-icon-delete" />{{ t("ngform.item.delete") }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
// import Node from '../../../panel-container/node.vue'
// import Item from '../../index.vue'
import cloneDeep from 'lodash/cloneDeep'
import draggable from 'vuedraggable'
import mixin from '../../mixin.js'
export default {
  components: {
    //  Node , Item
    draggable
  },
  mixins: [mixin],
  data() {
    return {
      showRightMenu: false,
      selectControlIndex: undefined
    }
  },
  created() {
    if (this.isDragPanel) {
      if (
        this.record &&
        (this.record.list == null || this.record.list == undefined)
      ) {
        this.$set(this.record, 'list', [])
      }
    } else {
      this.initFirst()
    }
  },
  mounted() {},
  methods: {
    initFirst() {
      if (!this.models) return
      if (!this.models[this.record.model]) {
        const firstData = {}
        this.record.list.forEach((t) => {
          firstData[t.model] = ''
        })
        this.$set(this.models, this.record.model, [firstData])
      }
    },
    dragEnd(evt, list) {
      // 拖拽结束,自动选择拖拽的控件项
      // 复制一遍
      const clone = this.cloneDeepAndFormat(list[evt.newIndex], evt)
      // 去掉icon
      delete clone.icon
      this.$set(list, evt.newIndex, clone)
      this.handleSelectItem(list[evt.newIndex])
    },
    handleCopy(item) {
      const nitem = this.cloneDeepAndFormat(item)
      const key = item.type + '_' + new Date().getTime()
      nitem.key = key
      nitem.model = key

      // 找到index 插入
      const oindex = this.record.list.findIndex((t) => t.key == item.key)

      if (oindex >= 0) {
        // insert
        this.record.list.splice(oindex + 1, 0, nitem)
      }
    },
    handleDetele(item) {
      const oindex = this.record.list.findIndex((t) => t.key == item.key)
      if (oindex >= 0) {
        this.record.list.splice(oindex, 1)
      }
    },
    addControlData() {
      // 将当前数据复制一份 压入
      const data_ = {}

      // this.record.list.forEach(t=> {
      //   data_[t.model] = ''
      // })
      this.models[this.record.model].push(data_)
    },
    handleShowRightMenu(e, idx) {
      // 显示右键菜单
      e.stopPropagation()

      // 判断是否有复制和删除 如果没有直接返回
      if (!this.record.options.remove && !this.record.options.copy) {
        this.showRightMenu = false
        this.selectControlIndex = undefined
        return false
      }

      if (this.showRightMenu) {
        this.showRightMenu = false
      }

      // this.fileItem = item
      // 显示

      // 计算rightMenu得高度和宽度 和当前屏幕对比 来决定菜单出现得起始位置
      const height = 210 // document.getElementById('rightMenu').clientHeight ;
      const width = 280 // document.getElementById('rightMenu').clientWidth ;

      // 获取屏幕高度和宽度 比对
      const bodyHeight = document.body.clientHeight
      const bodyWidth = document.body.clientWidth

      // 定位
      if (e.clientY + height > bodyHeight) {
        this.menuTop = e.clientY - height
      } else {
        this.menuTop = e.clientY
      }

      if (e.clientX + width > bodyWidth) {
        this.menuLeft = e.clientX - width
      } else {
        this.menuLeft = e.clientX + 20
      }

      this.selectControlIndex = idx

      this.$nextTick(() => {
        this.showRightMenu = true
      })

      return false
    },
    handleCopyData() {
      if (this.selectControlIndex == undefined || this.selectControlIndex < 0) {
        this.showRightMenu = false
        return
      }

      if (
        !this.models[this.record.model] ||
        this.models[this.record.model].length < this.selectControlIndex
      ) {
        this.showRightMenu = false
        return
      }

      const cloneData = this.cloneDeepAndFormat(
        this.models[this.record.model][this.selectControlIndex]
      )

      this.models[this.record.model].push(cloneData)
      this.showRightMenu = false
    },
    handleRemoveData() {
      if (this.selectControlIndex == undefined || this.selectControlIndex < 0) {
        return
      }

      if (
        !this.models[this.record.model] ||
        this.models[this.record.model].length < this.selectControlIndex
      ) {
        this.showRightMenu = false
        return
      }

      if (this.models[this.record.model].length == 1) {
        this.$message.error(this.record.label + '内仅存的一条数据不能删除')
        this.showRightMenu = false
        return
      }

      this.models[this.record.model].splice(this.selectControlIndex, 1)

      this.showRightMenu = false
    }
  }
}
</script>
<style>
.ng-layout-controller {
  z-index: 0;
}

.ng-layout-controller .controller-row {
  margin: 0px !important;
}

.ng-layout-controller .dragpanel {
  min-height: 300px;
  margin: 0px;
}

.ng-layout-controller .draggable-box,
.ng-layout-controller .list-main {
  min-height: 300px;
}

.controller-bordered {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
}
</style>
<!--
<style lang="scss">
.ng-layout-controller {
  z-index: 0;

  .controller-row {
    margin: 0px!important;
  }

  .dragpanel {
    min-height: 300px;
    margin: 0px;
  }

  .draggable-box , .list-main{
    min-height: 300px;
  }
}

.controller-bordered {
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  box-sizing: border-box;
  color: #606266;

}
</style> -->
