<template>
  <div class="form-panel">
    <div class="main-header">
      <div class="left">
        <p v-if="!isEditTitle">{{ formTemplate.title }}</p>
        <el-input v-else v-model="title" maxlength="20" show-word-limit />
        <i v-if="!isEditTitle" class="el-icon-edit" @click="handleClickEdit" />
        <el-button
          v-if="isEditTitle"
          type="success"
          icon="el-icon-check"
          circle
          size="mini"
          @click="handleEditSave"
        />
        <el-button
          v-if="isEditTitle"
          type="danger"
          icon="el-icon-close"
          circle
          size="mini"
          @click="handleEditBack"
        />
      </div>
      <div class="button">
        <el-button @click="handleBack">返回</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </div>
    <p
      v-if="
        !formTemplate || !formTemplate.list || formTemplate.list.length === 0
      "
      :key="formKey + arrow"
      class="no-data-text"
      :style="{
        width: arrow ? 'calc(100% - 260px)' : 'calc(100% - 370px -260px)',
      }"
    >
      <!-- 从左侧选择组件添加 -->
      {{ t("ngform.select_item") }}
    </p>
    <el-form
      ref="form"
      label-width="100px"
      class="ng-form"
      label-position="left"
      size="mini"
    >
      <el-row :gutter="20" class="row">
        <draggable
          v-model="formTemplate.list"
          tag="div"
          class="draggable-box"
          v-bind="{
            group: 'form-draggable',
            ghostClass: 'moving',
            animation: 180,
            handle: '.drag-move',
          }"
          @add="dragEnd($event, formTemplate.list)"
        >
          <transition-group tag="div" name="list" class="items-main">
            <Node
              v-for="record in formTemplate.list"
              :key="record.key"
              :class="{
                'drag-move': record.drag_ == undefined || record.drag_,
              }"
              :record="record"
              :is-drag="true"
              :config="formTemplate.config"
              :select-item="selectItem"
              @handleSelectItem="handleSelectItem"
              @handleCopy="handleCopy(record)"
              @handleDetele="handleDetele(record)"
            />
          </transition-group>
        </draggable>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { cloneDeepAndFormat } from '../../utils/index.js'
import draggable from 'vuedraggable'
import Node from './node'
import LocalMixin from '../../locale/mixin.js'
export default {
  name: 'NgFormContainer',
  components: {
    Node,
    draggable
  },
  mixins: [LocalMixin],
  inject: ['getFormTemplate'],

  props: {
    selectItem: {
      type: Object,
      default: () => {}
    },
    arrow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formKey: '111',
      isEditTitle: false, // 是否编辑模板标题
      title: ''
    }
  },
  computed: {
    formTemplate() {
      return this.getFormTemplate()
    }
  },
  mounted() {},
  methods: {
    dragEnd(evt, list) {
      // console.log('111' , evt)
      // 复制一遍
      const clone = cloneDeepAndFormat(list[evt.newIndex], evt)

      this.$set(list, evt.newIndex, clone)
      // 拖拽结束,自动选择拖拽的控件项
      // console.log('111' , cloneDeep(list[evt.newIndex]))
      this.handleSelectItem(list[evt.newIndex])
    },
    handleSelectItem(record) {
      this.$emit('handleSelectItem', record)
    },
    handleClickEdit() {
      this.title = this.formTemplate.title
      this.isEditTitle = true
    },
    handleEditBack() {
      this.isEditTitle = false
    },
    handleEditSave() {
      if (this.title.trim() === '') { return this.$message.error('请填入模板名称') }
      this.formTemplate.title = this.title
      this.isEditTitle = false
    },
    handleSave() {
      this.$emit('handleSave')
    },
    handleBack() {
      const obj = { path: '/configure/templateList' }
      this.$tab.closeOpenPage(obj)
    },
    handleCopy(item) {
      const nitem = cloneDeepAndFormat(item)
      const key = item.type + '_' + new Date().getTime()
      nitem.key = key
      nitem.model = key

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

      if (oindex >= 0) {
        // insert
        this.formTemplate.list.splice(oindex + 1, 0, nitem)
      }
    },
    handleDetele(item) {
      const oindex = this.formTemplate.list.findIndex((t) => t.key == item.key)
      if (oindex >= 0) {
        this.formTemplate.list.splice(oindex, 1)

        // 当前selectItem重置
        this.handleSelectItem({ options: {}})
      }
    }
  }
}
</script>
<style lang="scss">
.form-panel {
  height: 100%;
  min-height: 500px;
  background: #f5f5f5;
  padding-bottom: 12px;

  .main-header {
    height: 60px;
    line-height: 60px;
    background-color: #ffffff;
    border-left: 1px solid rgba(200, 200, 200, 0.2);
    border-right: 1px solid rgba(200, 200, 200, 0.2);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;
      max-width: 50%;

      .el-input {
        width: 160px;
      }

      .el-button--success {
        margin-left: 8px;
      }

      i.el-icon-edit {
        color: #42a5f5;
        font-size: 18px;
        cursor: pointer;
        margin-left: 6px;
      }

      p {
        font-size: 18px;
        color: #000000;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.form-panel .no-data-text {
  text-align: center;

  height: 50px;
  width: calc(100% - 370px - 260px);
  position: absolute;
  top: 40%;

  font-size: 20px;
  font-weight: 700;
}

.form-panel .row {
  height: 100%;
  min-height: 500px;
  /*display: flex;
  flex-wrap: wrap;*/
}

.form-panel .ng-form {
  height: 100%;
  min-height: 500px;
}

.form-panel .ng-form .draggable-box {
  height: 100%;
  overflow: auto;
  width: 100%;
}

.form-panel .ng-form .items-main {
  height: 100%;
  min-height: 500px;
  padding: 0px 10px;
}

.ng-form .el-row {
  display: flex;
  flex-wrap: wrap;
}
</style>
