<template>
  <div>
    <div class="left-box">
      <div class="model" :style="`display:${isDrag?'inline-block':'none'}`">
      </div>
      <draggable :list="dragList" ghost-class="ghost" :force-fallback="true" :group="{ name: 'list', pull: 'clone' }"
                 :sort="false" itemKey="id" @start="onStartLeft" :clone="onClone">
        <template #item="{ element }">
          <element-mini :option="element" />
        </template>
      </draggable>
    </div>
    <div class="right-box">
      <nested-draggable :tasks="widgetList" style="height: 100%;" />
    </div>
    <div class="option-box">

    </div>
    <div class="dataBox">
      <div>{{ dragList }}</div>
    </div>
    <div class="dataBox">
      <div>{{ widgetList }}</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import draggable from 'vuedraggable';
import nestedDraggable from './nest.vue';
import elementMini from './element-mini.vue';

interface type {
  name: string,
  id: number
}

const dragList = [
  { type: 'el-input', options: { labelWidth: '120px' }, tasks: [], name: '表单', id: 0 },
  { type: 'el-input', options: { type: 'text' }, name: '单行文本', id: 1 },
  { type: 'el-input', options: { type: 'password' }, name: '密码文本', id: 2 },
  { type: 'el-input', options: { type: 'textarea' }, name: '多行文本', id: 3 },
  { type: 'el-input-number', options: { step: 2 }, name: '计数器', id: 4 },
  {
    type: 'el-radio-group',
    options: { items: [{ value: '1', label: '1' }, { value: '1', label: '1' }] },
    name: '单选框组',
    id: 5
  },
  { type: 'el-slider', options: { step: 2, showStops: true }, name: '滑块', id: 6 }
];

const widgetList = reactive<type[]>([]);
const isDrag = ref(false);
const onClone = (e) => {
  console.log(JSON.parse(JSON.stringify(e)));
  return JSON.parse(JSON.stringify(e));
};
const onStartLeft = (e) => {
  // console.log(e);
};

</script>
<style scoped>
.model {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.left-box {
  width: 260px;
  display: inline-block;
  user-select: none;
  vertical-align: top;
  position: relative;
  margin: 8px;
  padding: 2px;
  border: 1px solid #ccc;
}

.right-box {
  width: 400px;
  display: inline-block;
  user-select: none;
  vertical-align: top;
  margin: 8px;
  border: 1px solid #ccc;
  height: 80vh;
}

.option-box {
  width: 400px;
  display: inline-block;
  user-select: none;
  vertical-align: top;
  margin: 8px;
  border: 1px solid #ccc;
  min-height: 100px;
}

.dataBox {
  width: 200px;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  border: 1px solid #ccc;

}
</style>
