<template>
  <div class="custom-form-design">
    <div class="custom-form-design-inner">
      <!-- 自定义form组件 字段部分-->
      <div class="custom-form-design-fields">
        <div class="design-header fields-header">字段组件</div>
        <div class="design-main fields-main">
          <vuedraggable :list="defaultComOptions" :group="{name: 'customComGroup', pull: 'clone', put: false}" class="design-draggable-fields"
            draggable=".draggable-fields-item" ghostClass="subfield-origin-dragClass" :clone="targetComClone" :sort="false"
            :disabled="!subfieldModuleList.length" @end="endCheck">
            <transition-group name="fade" tag="div" class="draggable-fields-list">
              <div class="draggable-fields-item" :class="{'has-no-subfield-module' : !subfieldModuleList.length}"
                v-for="(item,index) of defaultComOptions" :key="index" @click="fieldsItemClick">
                <img :src="item.comShowIcon" alt="">
                <span>{{item.comLabel}}</span>
              </div>
            </transition-group>
          </vuedraggable>
        </div>
      </div>
      <!-- 配置部分 -->
      <div class="custom-form-design-options">
        <div class="design-header options-header">表单配置</div>
        <div class="design-main options-main">
          <el-form class="custom-design-el-form" ref="customDesignFormRef" :model="{}" :rules="{}" @submit.native.prevent>

            <!-- 最外层dragg容器 拖动模块module .subfield-module-dragg-target-icon -->
            <vuedraggable :list="subfieldModuleList" group="customSubfieldmodule" class="subfield-module-container"
              draggable=".subfield-module-item-container" handle=".subfield-module-dragg-target-icon" :animation="340">
              <!-- 添加的分栏模块以及chidren模块 -->
              <transition-group name="fade" tag="div" class="subfield-module-list">
                <!-- <div class="subfield-module-draggable-list" v-for="(item,index) of subfieldModuleList" :key="item.uid"> -->
                <vuedraggable v-for="(item,index) of subfieldModuleList" :key="item.uid" draggable=".subfield-item-container"
                  handle=".subfield-module-item-dragg-target-icon" tag="subfield-module" :list="item.children" group="customComGroup"
                  :component-data="createComponentData(item)" :animation="340" ghostClass="subfield-item-dragClass" :sort="true" @end="endCheck">
                  <subfield-item v-for="(child,index) of item.children" :key="child.uid" :parentUid="item.uid" :childModuleInfo="child"
                    @removeModuleItem="removeModuleItem"></subfield-item>
                </vuedraggable>
                <!-- </div> -->
              </transition-group>
            </vuedraggable>
            <!-- 添加分栏 -->
            <div class="add-field-bar" @click="addSubfieldModule">
              <img src="@/assets/images/consultingAgencyManagement/customForm/icon_add@2x.png" alt="">
              <span>添加分栏</span>
            </div>
          </el-form>
        </div>
      </div>
      <!-- 字段设置 -->
      <div class="custom-form-design-field-options">
        <div class="design-header field-options-header">字段设置</div>
        <div class="design-main field-options-main">

        </div>
      </div>
    </div>

    <!-- 删除分栏提示弹窗 -->
    <el-dialog title="提示" :visible.sync="removeSubFiledModuleDialog" width="480px" :close-on-click-modal="false" class="subfield-module-dialog-outer"
      :custom-class="'subfield-module-dialog-inner'" @close="removeDialogClose">
      <div class="subfield-module-dialog-content">
        <img src="@/assets/images/consultingAgencyManagement/customForm/icon_tips@2x.png" alt="">
        <span>{{removeSubfieldModule.subfieldModuleName ? `确认删除分栏“${removeSubfieldModule.subfieldModuleName}”吗？` : "确认删除该分栏吗？"}}</span>
      </div>
      <div class="subfield-module-dialog-footer">
        <el-button size="default" @click="removeSubFiledModuleDialog = false">取消</el-button>
        <el-button type="primary" size="default" @click="removeOk">确定删除</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { defaultComOptions, subfieldModuleTemplate } from "@/utils/generator/custom-design-options";
import SubfieldItem from "@/views/consultingOrgManagement/components/CustomForm/components/SubfieldItem";
import vuedraggable from "vuedraggable";
import { v4 } from 'uuid';
export default {
  name: "customFormDesign",
  components: {
    vuedraggable,
    SubfieldItem
  },
  data() {
    return {
      // 字段组件
      defaultComOptions,
      // 中间编辑的模块
      subfieldModuleList: [],
      // 删除分栏提示
      removeSubFiledModuleDialog: false,
      // 要删除的分栏信息
      removeSubfieldModule: {},
      // 当前选中正在编辑的组件id
      activeUid: ""
    };
  },
  //可访问data属性
  created() {

  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    // 克隆目标组件
    targetComClone(v) {
      console.log("clone", v);
      const cloneTarget = JSON.parse(JSON.stringify(v));
      cloneTarget.uid = v4();
      return cloneTarget;
    },
    // 字段组件点击事件
    fieldsItemClick() {
      if (!this.subfieldModuleList?.length) {
        this.$message.warning("请先添加分栏");
      }
    },
    endCheck(e) {
      console.log("成功", e);
    },
    subFieldItemActive(childItem) {
      console.log(childItem);
      this.activeUid = childItem.uid;
    },
    // 添加分栏
    addSubfieldModule() {
      const _temp = JSON.parse(JSON.stringify(subfieldModuleTemplate));
      _temp.uid = v4();
      this.subfieldModuleList.push(_temp);
    },
    createComponentData(item) {
      return {
        props: {
          moduleInfo: item,
        },
        on: {
          "removeModule": this.removeModule,
          "editOK": this.editOK
        }
      };
    },
    editOK(module) {

    },
    removeModuleItem(itemModule, parentUid) {
      const parentModule = this.subfieldModuleList.find(item => item.uid == parentUid);
      if (parentModule) {
        // 更新源数据标题
        const index = parentModule?.children?.findIndex(item => item.uid == itemModule.uid);
        if (index > -1) {
          if (itemModule.uid == this.activeUid) this.activeUid = "";
          parentModule?.children?.splice(index, 1);
        }
      }
    },
    removeModule(module) {
      this.removeSubfieldModule = module;
      this.removeSubFiledModuleDialog = true;
      const findModule = this.subfieldModuleList.find(item => item.uid == module.uid);
      if (findModule) {
        // 更新源数据标题
        findModule.subfieldModuleName = module.subfieldModuleName;
        this.activeUid = "";
      }
    },
    removeDialogClose() {
      this.removeSubfieldModule = {};
    },
    removeOk() {
      const index = this.subfieldModuleList.findIndex(item => item.uid == this.removeSubfieldModule.uid);
      if (index > -1) {
        this.subfieldModuleList.splice(index, 1);
      }
      this.removeSubFiledModuleDialog = false;
    }
  },
}
</script>
<style lang="scss" scoped>
.custom-form-design {
  width: 100%;
  height: 100%;

  .custom-form-design-inner {
    width: 100%;
    height: 100%;
    display: flex;
    min-width: 1140px;

    .subfield-origin-dragClass,
    .subfield-item-dragClass {
      display: flex;
      align-items: center;
      background: rgba(0, 129, 255, 0.3);
      height: 56px;
      padding: 0px 16px;
      box-sizing: border-box;
      color: rgba(35, 35, 35, 0.8);
      font-size: 14px;
      font-weight: 400;

      .subfield-item-container {
        background: rgba(0, 129, 255, 0.3);
      }

      & > img {
        width: 16px;
        height: 16px;
        margin-right: 16px;
      }
    }

    .subfield-origin-dragClass {
      height: auto;
    }

    .design-header {
      width: 100%;
      height: 48px;
      display: flex;
      align-items: center;
      background: #f0f3fa;
      border: 1px solid #dcdfe6;
      padding: 0px 16px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(35, 35, 35, 0.8);
      box-sizing: border-box;
      user-select: none;
    }

    .design-main {
      width: 100%;
      height: calc(100% - 48px);
      border: 1px solid #dcdfe6;
      border-top: none;
      padding: 16px;
      box-sizing: border-box;

      &.fields-main,
      &.options-main,
      &.field-options-main {
        overflow-y: auto;
        overflow-x: hidden;
      }

      &.options-main {
        .add-field-bar {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 32px;
          border-radius: 4px;
          border: 1px solid #0081ff;
          color: #0081ff;
          box-sizing: border-box;
          font-size: 14px;
          font-weight: 400;
          cursor: pointer;
          & > img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }
        }
      }
    }

    .design-draggable-fields {
      .draggable-fields-list {
        & > .draggable-fields-item:first-of-type {
          margin-top: 0px;
        }
        .draggable-fields-item {
          width: 148px;
          height: 46px;
          border-radius: 4px;
          border: 1px solid #dcdfe6;
          padding: 0px 16px;
          box-sizing: border-box;
          margin-top: 12px;
          cursor: move;
          user-select: none;

          &:hover {
            border-color: #0081ff;
          }

          display: flex;
          align-items: center;

          & > img {
            width: 16px;
            height: 16px;
          }

          & > span {
            color: #232323;
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            margin-left: 8px;
          }

          &.has-no-subfield-module {
            cursor: not-allowed;
            border-color: #dcdfe6;
          }
        }
      }
    }

    .custom-form-design-fields {
      width: 180px;
      min-width: 180px;
      height: 100%;
    }

    .custom-form-design-options {
      width: calc(100% - 180px - 309px);
      min-width: calc(100% - 180px - 309px);
      height: 100%;

      .options-header,
      .options-main {
        border-left: none;
        .custom-design-el-form {
          width: 100%;
          height: 100%;

          /* .subfield-module-draggable-list {
            margin-bottom: 12px;
            width: 100%;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            border-radius: 4px;
          } */
        }
      }
    }

    .custom-form-design-field-options {
      width: 309px;
      min-width: 309px;
      height: 100%;

      .field-options-header,
      .field-options-main {
        border-left: none;
      }
    }
  }

  ::v-deep .subfield-module-dialog-outer {
    .subfield-module-dialog-inner {
      border-radius: 4px;
      margin-top: 0px !important;
      margin: 0px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      .el-dialog__header {
        height: 56px;
        padding: 0px 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eeeeee;

        .el-dialog__title {
          color: #232323;
          font-size: 16px;
          font-weight: bold;
        }

        .el-dialog__headerbtn {
          position: static;
          width: 16px;
          height: 16px;
        }
      }

      .el-dialog__body {
        padding: 0px 20px;
        box-sizing: border-box;

        .subfield-module-dialog-content {
          display: flex;
          align-items: center;
          padding: 24px 0px;
          box-sizing: border-box;

          & > img {
            width: 24px;
            height: 24px;
          }

          & > span {
            color: rgba(35, 35, 35, 0.8);
            font-size: 14px;
            font-weight: 400;
            margin-left: 16px;
          }
        }

        .subfield-module-dialog-footer {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding: 16px 0px 24px 0px;
          box-sizing: border-box;

          button {
            height: 32px;
            padding: 0px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
          }
        }
      }
    }
  }
}
</style>
