<script lang="jsx">
import { defineComponent, useAttrs, watch } from 'vue';
import Render from './render.vue';
import { CopyDocument, Delete } from '@element-plus/icons-vue';
import Draggable from 'vuedraggable';
import deleteIcon from '@/assets/imgs/dragFlow/delete.svg';
import editIcon from '@/assets/imgs/dragFlow/edit.svg';

const Layouts = defineComponent({
  props: ['parent'],
  setup(props) {
    // console.log('props',props);
    const $attrs = useAttrs();

    const { onActiveItem: activeItem, onCopyItem, onEditItem, onDeleteItem, onEndDraggable, formConf } = $attrs;
    let className = $attrs.activeId === $attrs.element.formId ? 'drawing-item active-from-item' : 'drawing-item';
    // watch(
    //   () => $attrs.activeId,
    //   (newVal) => {

    //     if (newVal === $attrs.element.formId) {
    //       className = className + ' active-from-item';
    //     } else {

    //       className = 'drawing-item';
    //     }
    //   },
    //   {
    //     immediate: true,
    //   },
    // );

    if ($attrs.element.layout === 'colFormItem') {
      if (formConf.unFocusedComponentBorder) className += ' unfocus-bordered';
      return () => (
        <el-col
          span={$attrs.element.span}
          class={className}
          onClick={(event) => {
            activeItem($attrs.element);
            event.stopPropagation();
          }}
        >
          <el-form-item
            class="drag-item"
            label-width={$attrs.element.labelWidth ? `${$attrs.element.labelWidth}px` : null}
            label={$attrs.element.label}
            required={$attrs.element.required}
          >
            <Render key={$attrs.element.renderKey} conf={$attrs.element} />
          </el-form-item>
          <div class="darg-operation-container">
            <img class="edit-icon"  onClick={(event) => {
                onEditItem($attrs.element.formId, props.parent);
                event.stopPropagation();
              }} src={editIcon} alt="" />
            <img class="delete-icon"  onClick={(event) => {
                onDeleteItem($attrs.element.formId, props.parent);
                event.stopPropagation();
              }} src={deleteIcon} alt="" />
          </div>
        </el-col>
      );
    }
    if ($attrs.element.layout === 'rowFormItem') {
      className = className + ' row-form-container';

      return () => (
        <el-col span={$attrs.element.span}>
          <el-row
            class={className}
            onClick={(event) => {
              activeItem($attrs.element);
              event.stopPropagation();
            }}
          >
            <div class="component-name">{$attrs.element.componentName}</div>
            <Draggable
              list={$attrs.element.children}
              animation={300}
              group="componentsGroup"
              class="drag-wrapper"
              v-slots={{
                item: ({ element: elementChild }) => {
                  return <Layouts {...$attrs} element={elementChild} parent={$attrs.element.children}></Layouts>;
                },
              }}
              onEnd={onEndDraggable}
            ></Draggable>

            <div class="darg-operation-container">
              <el-button
                onClick={(event) => {
                  onCopyItem($attrs.element, props.parent);
                  event.stopPropagation();
                }}
                size="small"
                type="warning"
                icon={CopyDocument}
                circle
              />
              <el-button
                onClick={(event) => {
                  onDeleteItem($attrs.element.formId, props.parent);
                  event.stopPropagation();
                }}
                size="small"
                type="danger"
                icon={Delete}
                circle
              />
            </div>
          </el-row>
        </el-col>
      );
    }
  },
});

const DraggableItem = defineComponent({
  setup(props) {
    const $attrs = useAttrs();
    return () => <Layouts {...$attrs} parent={$attrs.drawingList}></Layouts>;
  },
});

export default DraggableItem;
</script>
<style lang="scss">

.flow-drag-container {
  .darg-operation-container{
    display: flex;
    .edit-icon {
      width: 16px;
      margin: var(--margin-tiny);
      margin-left: var(--margin-medium);
      cursor: pointer;
    }
    .delete-icon {
      width: 18px ;
      margin: var(--margin-tiny);
      cursor: pointer;
    }
  }
  .drag-item {
    margin-bottom: 0px;
  }

}
</style>
<style scoped lang="scss">
// :deep(.darg-operation-container) {
//   display: none;
//   position: absolute;
//   right: 0;
//   top: -10px;
// }

</style>
